From bd4e64190e63eea30c342ea5255d8603a70385f9 Mon Sep 17 00:00:00 2001
From: chenjiahan <chenjiahan@youzan.com>
Date: Sat, 29 Feb 2020 10:45:28 +0800
Subject: [PATCH] feat: update upload area style

---
 src/form/test/__snapshots__/demo.spec.js.snap      |  2 +-
 src/style/var.less                                 |  6 +++---
 src/uploader/index.js                              |  2 +-
 src/uploader/index.less                            |  5 ++++-
 src/uploader/test/__snapshots__/demo.spec.js.snap  | 12 ++++++------
 src/uploader/test/__snapshots__/index.spec.js.snap | 12 ++++++------
 6 files changed, 21 insertions(+), 18 deletions(-)

diff --git a/src/form/test/__snapshots__/demo.spec.js.snap b/src/form/test/__snapshots__/demo.spec.js.snap
index e7a5c4440..09dd50bc3 100644
--- a/src/form/test/__snapshots__/demo.spec.js.snap
+++ b/src/form/test/__snapshots__/demo.spec.js.snap
@@ -176,7 +176,7 @@ exports[`renders demo correctly 1`] = `
                     </div><i class="van-icon van-icon-clear van-uploader__preview-delete">
                       <!----></i>
                   </div>
-                  <div class="van-uploader__upload"><i class="van-icon van-icon-plus van-uploader__upload-icon">
+                  <div class="van-uploader__upload"><i class="van-icon van-icon-photograph van-uploader__upload-icon">
                       <!----></i><input type="file" accept="image/*" class="van-uploader__input"></div>
                 </div>
               </div>
diff --git a/src/style/var.less b/src/style/var.less
index 2b5e92a07..f7e0c06db 100644
--- a/src/style/var.less
+++ b/src/style/var.less
@@ -773,12 +773,12 @@
 // Uploader
 @uploader-size: 80px;
 @uploader-icon-size: 24px;
-@uploader-icon-color: @gray-6;
+@uploader-icon-color: @gray-4;
 @uploader-text-color: @gray-6;
 @uploader-text-font-size: @font-size-sm;
-@uploader-upload-border-color: @gray-3;
 @uploader-upload-border-radius: 4px;
-@uploader-upload-background-color: @white;
+@uploader-upload-background-color: @gray-1;
+@uploader-upload-active-color: @active-color;
 @uploader-delete-color: @gray-6;
 @uploader-delete-icon-size: 18px;
 @uploader-delete-background-color: @white;
diff --git a/src/uploader/index.js b/src/uploader/index.js
index eeaf7fce4..08da5c396 100644
--- a/src/uploader/index.js
+++ b/src/uploader/index.js
@@ -357,7 +357,7 @@ export default createComponent({
 
       return (
         <div class={bem('upload')} style={style}>
-          <Icon name="plus" class={bem('upload-icon')} />
+          <Icon name="photograph" class={bem('upload-icon')} />
           {this.uploadText && (
             <span class={bem('upload-text')}>{this.uploadText}</span>
           )}
diff --git a/src/uploader/index.less b/src/uploader/index.less
index 55178deb8..06891420f 100644
--- a/src/uploader/index.less
+++ b/src/uploader/index.less
@@ -43,9 +43,12 @@
     height: @uploader-size;
     margin: 0 @padding-xs @padding-xs 0;
     background-color: @uploader-upload-background-color;
-    border: 1px dashed @uploader-upload-border-color;
     border-radius: @uploader-upload-border-radius;
 
+    &:active {
+      background-color: @uploader-upload-active-color;
+    }
+
     &-icon {
       color: @uploader-icon-color;
       font-size: @uploader-icon-size;
diff --git a/src/uploader/test/__snapshots__/demo.spec.js.snap b/src/uploader/test/__snapshots__/demo.spec.js.snap
index 39ca3b7ae..9fea6e5e9 100644
--- a/src/uploader/test/__snapshots__/demo.spec.js.snap
+++ b/src/uploader/test/__snapshots__/demo.spec.js.snap
@@ -5,7 +5,7 @@ exports[`renders demo correctly 1`] = `
   <div>
     <div class="van-uploader">
       <div class="van-uploader__wrapper">
-        <div class="van-uploader__upload"><i class="van-icon van-icon-plus van-uploader__upload-icon">
+        <div class="van-uploader__upload"><i class="van-icon van-icon-photograph van-uploader__upload-icon">
             <!----></i><input type="file" accept="image/*" class="van-uploader__input"></div>
       </div>
     </div>
@@ -27,7 +27,7 @@ exports[`renders demo correctly 1`] = `
           </div><i class="van-icon van-icon-clear van-uploader__preview-delete">
             <!----></i>
         </div>
-        <div class="van-uploader__upload"><i class="van-icon van-icon-plus van-uploader__upload-icon">
+        <div class="van-uploader__upload"><i class="van-icon van-icon-photograph van-uploader__upload-icon">
             <!----></i><input multiple="multiple" type="file" accept="*" class="van-uploader__input"></div>
       </div>
     </div>
@@ -35,7 +35,7 @@ exports[`renders demo correctly 1`] = `
   <div>
     <div class="van-uploader">
       <div class="van-uploader__wrapper van-uploader__wrapper--disabled">
-        <div class="van-uploader__upload"><i class="van-icon van-icon-plus van-uploader__upload-icon">
+        <div class="van-uploader__upload"><i class="van-icon van-icon-photograph van-uploader__upload-icon">
             <!----></i><input type="file" accept="image/*" disabled="disabled" class="van-uploader__input"></div>
       </div>
     </div>
@@ -64,7 +64,7 @@ exports[`renders demo correctly 1`] = `
           </div><i class="van-icon van-icon-clear van-uploader__preview-delete">
             <!----></i>
         </div>
-        <div class="van-uploader__upload"><i class="van-icon van-icon-plus van-uploader__upload-icon">
+        <div class="van-uploader__upload"><i class="van-icon van-icon-photograph van-uploader__upload-icon">
             <!----></i><input type="file" accept="image/*" class="van-uploader__input"></div>
       </div>
     </div>
@@ -79,7 +79,7 @@ exports[`renders demo correctly 1`] = `
           </div><i class="van-icon van-icon-clear van-uploader__preview-delete">
             <!----></i>
         </div>
-        <div class="van-uploader__upload"><i class="van-icon van-icon-plus van-uploader__upload-icon">
+        <div class="van-uploader__upload"><i class="van-icon van-icon-photograph van-uploader__upload-icon">
             <!----></i><input multiple="multiple" type="file" accept="image/*" class="van-uploader__input"></div>
       </div>
     </div>
@@ -97,7 +97,7 @@ exports[`renders demo correctly 1`] = `
   <div>
     <div class="van-uploader">
       <div class="van-uploader__wrapper">
-        <div class="van-uploader__upload"><i class="van-icon van-icon-plus van-uploader__upload-icon">
+        <div class="van-uploader__upload"><i class="van-icon van-icon-photograph van-uploader__upload-icon">
             <!----></i><input type="file" accept="image/*" class="van-uploader__input"></div>
       </div>
     </div>
diff --git a/src/uploader/test/__snapshots__/index.spec.js.snap b/src/uploader/test/__snapshots__/index.spec.js.snap
index 24b2e601b..40bd76ffd 100644
--- a/src/uploader/test/__snapshots__/index.spec.js.snap
+++ b/src/uploader/test/__snapshots__/index.spec.js.snap
@@ -3,7 +3,7 @@
 exports[`delete preview image 1`] = `
 <div class="van-uploader">
   <div class="van-uploader__wrapper">
-    <div class="van-uploader__upload" style="width: 30px; height: 30px;"><i class="van-icon van-icon-plus van-uploader__upload-icon">
+    <div class="van-uploader__upload" style="width: 30px; height: 30px;"><i class="van-icon van-icon-photograph van-uploader__upload-icon">
         <!----></i><input type="file" accept="image/*" class="van-uploader__input"></div>
   </div>
 </div>
@@ -12,7 +12,7 @@ exports[`delete preview image 1`] = `
 exports[`disable preview image 1`] = `
 <div class="van-uploader">
   <div class="van-uploader__wrapper">
-    <div class="van-uploader__upload"><i class="van-icon van-icon-plus van-uploader__upload-icon">
+    <div class="van-uploader__upload"><i class="van-icon van-icon-photograph van-uploader__upload-icon">
         <!----></i><input type="file" accept="image/*" class="van-uploader__input"></div>
   </div>
 </div>
@@ -28,7 +28,7 @@ exports[`image-fit prop 1`] = `
       </div><i class="van-icon van-icon-clear van-uploader__preview-delete">
         <!----></i>
     </div>
-    <div class="van-uploader__upload"><i class="van-icon van-icon-plus van-uploader__upload-icon">
+    <div class="van-uploader__upload"><i class="van-icon van-icon-photograph van-uploader__upload-icon">
         <!----></i><input type="file" accept="image/*" class="van-uploader__input"></div>
   </div>
 </div>
@@ -58,7 +58,7 @@ exports[`preview-size prop 1`] = `
       </div><i class="van-icon van-icon-clear van-uploader__preview-delete">
         <!----></i>
     </div>
-    <div class="van-uploader__upload" style="width: 30px; height: 30px;"><i class="van-icon van-icon-plus van-uploader__upload-icon">
+    <div class="van-uploader__upload" style="width: 30px; height: 30px;"><i class="van-icon van-icon-photograph van-uploader__upload-icon">
         <!----></i><input type="file" accept="image/*" class="van-uploader__input"></div>
   </div>
 </div>
@@ -95,7 +95,7 @@ exports[`render preview image 1`] = `
       </div><i class="van-icon van-icon-clear van-uploader__preview-delete">
         <!----></i>
     </div>
-    <div class="van-uploader__upload"><i class="van-icon van-icon-plus van-uploader__upload-icon">
+    <div class="van-uploader__upload"><i class="van-icon van-icon-photograph van-uploader__upload-icon">
         <!----></i><input type="file" accept="image/*" class="van-uploader__input"></div>
   </div>
 </div>
@@ -104,7 +104,7 @@ exports[`render preview image 1`] = `
 exports[`render upload-text 1`] = `
 <div class="van-uploader">
   <div class="van-uploader__wrapper">
-    <div class="van-uploader__upload"><i class="van-icon van-icon-plus van-uploader__upload-icon">
+    <div class="van-uploader__upload"><i class="van-icon van-icon-photograph van-uploader__upload-icon">
         <!----></i><span class="van-uploader__upload-text">Text</span><input type="file" accept="image/*" class="van-uploader__input"></div>
   </div>
 </div>