From 141996b35e8e66edc6b545542d32181f0e6faa5b Mon Sep 17 00:00:00 2001
From: Lindy <33708359+Lindysen@users.noreply.github.com>
Date: Wed, 1 Apr 2020 13:04:26 +0800
Subject: [PATCH] feat(Uploader): add Uploader status display (#2929)

* feat(Uploader): add Uploader status display

* feat(Uploader): fix index.json
---
 example/pages/uploader/index.js   | 14 +++++++++++++-
 example/pages/uploader/index.wxml | 12 ++++++++++++
 packages/common/style/var.less    |  1 +
 packages/uploader/README.md       | 27 ++++++++++++++++++++++++++
 packages/uploader/index.json      |  3 ++-
 packages/uploader/index.less      | 32 +++++++++++++++++++++++++++++++
 packages/uploader/index.wxml      |  8 ++++++++
 7 files changed, 95 insertions(+), 2 deletions(-)

diff --git a/example/pages/uploader/index.js b/example/pages/uploader/index.js
index a584e2dd..ef14f611 100644
--- a/example/pages/uploader/index.js
+++ b/example/pages/uploader/index.js
@@ -12,7 +12,19 @@ Page({
     fileList5: [],
     fileList6: [],
     cloudPath: [],
-    fileList7: []
+    fileList7: [],
+    fileList8: [
+      {
+        url: 'https://img.yzcdn.cn/vant/leaf.jpg',
+        status: 'uploading',
+        message: '上传中'
+      },
+      {
+        url: 'https://img.yzcdn.cn/vant/tree.jpg',
+        status: 'failed',
+        message: '上传失败'
+      }
+    ]
   },
 
   beforeRead(event) {
diff --git a/example/pages/uploader/index.wxml b/example/pages/uploader/index.wxml
index 226a2a68..2b3f7f08 100644
--- a/example/pages/uploader/index.wxml
+++ b/example/pages/uploader/index.wxml
@@ -41,6 +41,18 @@
   />
 </demo-block>
 
+<demo-block title="上传状态" padding>
+  <van-uploader
+    name="8"
+    file-list="{{ fileList8 }}"
+    multiple
+    max-count="{{ 2 }}"
+    bind:after-read="afterRead"
+    bind:delete="delete"
+    bind:click-preview="clickPreview"
+  />
+</demo-block>
+
 <demo-block title="限制上传数量" padding>
   <van-uploader
     name="3"
diff --git a/packages/common/style/var.less b/packages/common/style/var.less
index 8a6e2301..a932a315 100644
--- a/packages/common/style/var.less
+++ b/packages/common/style/var.less
@@ -574,6 +574,7 @@
 @uploader-loading-icon-size: 22px;
 @uploader-loading-icon-color: @white;
 @uploader-disabled-opacity: @disabled-opacity;
+
 // DropdownMenu
 @dropdown-menu-height: 50px;
 @dropdown-menu-background-color: @white;
diff --git a/packages/uploader/README.md b/packages/uploader/README.md
index 91b783ba..ba134e93 100644
--- a/packages/uploader/README.md
+++ b/packages/uploader/README.md
@@ -71,6 +71,33 @@ Page({
 });
 ```
 
+### 上传状态
+
+通过`status`属性可以标识上传状态，`uploading`表示上传中，`failed`表示上传失败，`done`表示上传完成
+
+```html
+<van-uploader file-list="{{ fileList }}" />
+```
+
+```js
+Page({
+  data: {
+    fileList: [
+      {
+        url: 'https://img.yzcdn.cn/vant/leaf.jpg',
+        statue: 'uploading',
+        message: '上传中',
+      },
+      {
+        url: 'https://img.yzcdn.cn/vant/tree.jpg',
+        status: 'failed',
+        message: '上传失败'
+      }
+    ]
+  }
+});
+```
+
 ### 限制上传数量
 
 通过`max-count`属性可以限制上传文件的数量，上传数量达到限制后，会自动隐藏上传区域
diff --git a/packages/uploader/index.json b/packages/uploader/index.json
index 0a336c08..e00a5887 100644
--- a/packages/uploader/index.json
+++ b/packages/uploader/index.json
@@ -1,6 +1,7 @@
 {
   "component": true,
   "usingComponents": {
-    "van-icon": "../icon/index"
+    "van-icon": "../icon/index",
+    "van-loading": "../loading/index"
   }
 }
diff --git a/packages/uploader/index.less b/packages/uploader/index.less
index fee171e1..3a44e6df 100644
--- a/packages/uploader/index.less
+++ b/packages/uploader/index.less
@@ -100,4 +100,36 @@
       text-align: center;
     }
   }
+
+  &__mask {
+    position: absolute;
+    top: 0;
+    right: 0;
+    bottom: 0;
+    left: 0;
+    display: flex;
+    flex-direction: column;
+    align-items: center;
+    justify-content: center;
+    color: @white;
+    background-color: @uploader-mask-background-color;
+    border-radius: @uploader-upload-border-radius;
+
+    &-icon {
+      font-size: @uploader-mask-icon-size;
+    }
+
+    &-message {
+      margin-top: 6px;
+      padding: 0 @padding-base;
+      font-size: @uploader-mask-message-font-size;
+      line-height: @uploader-mask-message-line-height;
+    }
+  }
+
+  &__loading {
+    width: @uploader-loading-icon-size;
+    height: @uploader-loading-icon-size;
+    color: @uploader-loading-icon-color;
+  }
 }
diff --git a/packages/uploader/index.wxml b/packages/uploader/index.wxml
index dabbf5fd..417fb85e 100644
--- a/packages/uploader/index.wxml
+++ b/packages/uploader/index.wxml
@@ -27,6 +27,14 @@
         <van-icon name="description" class="van-uploader__file-icon" />
         <view class="van-uploader__file-name van-ellipsis">{{ item.name || item.url || item.path }}</view>
       </view>
+      <view
+        wx:if="{{ item.status === 'uploading' || item.status === 'failed' }}"
+        class="van-uploader__mask"
+      >
+       <van-icon wx:if="{{ item.status === 'failed' }}" name="warning-o" class="van-uploader__mask-icon" />
+       <van-loading wx:else class="van-uploader__loading"  />
+       <text wx:if="{{ item.message }}" class="van-uploader__upload-text">{{ item.message }}</text>
+      </view>
       <van-icon
         wx:if="{{ deletable }}"
         name="clear"