feat(Uploader): add Uploader status display (#2929)

* feat(Uploader): add Uploader status display

* feat(Uploader): fix index.json

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) {

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"

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;

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`属性可以限制上传文件的数量，上传数量达到限制后，会自动隐藏上传区域

packages/uploader/index.json

@@ -1,6 +1,7 @@
 {
   "component": true,
   "usingComponents": {
-    "van-icon": "../icon/index"
+    "van-icon": "../icon/index",
+    "van-loading": "../loading/index"
   }
 }

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;
+  }
 }

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"