【我的素材】完善上传列表组件的样式，删除冗余代码

src/views/material/components/uploadList1.1.0.vue

@@ -28,14 +28,15 @@
           }">
             {{taskItem.statusText}}
           </span>
-          <span class="progress-text">{{taskItem.progress}}%</span>
+          <span v-show="taskItem.ifKnowProgress && taskItem.status === 'LOADING'" class="progress-text">{{taskItem.progress}}</span>
           <img
+            v-show="taskItem.status !== 'SUCCESS'"
             class="cancel-btn"
             :src="require('@/assets/images/icons/material_preview_upload_cancel@2x.png')"
           />
         </div>
-        <div class="progress-bar" v-if="taskItem.ifKnowProgress" :style="{width: taskItem.progress + '%'}"></div>
-        <div class="progress-bar-unknown" v-else></div>
+        <div class="progress-bar" v-if="taskItem.ifKnowProgress && taskItem.status === 'LOADING'" :style="{width: taskItem.progress}"></div>
+        <div class="progress-bar-unknown" v-if="!taskItem.ifKnowProgress && taskItem.status ==='LOADING'"></div>
       </div>
     </div>
 
@@ -54,7 +55,7 @@ export default {
        * 每个元素的内部结构：{
        *  title: String
        *  ifKnowProgress: Boolean // false则进度条效果是loading而不是具体进度
-       *  progress：Number // 进度条，为负数的话会显示一个loading效果但不显示真实进度。
+       *  progress：String // 进度，以百分号结尾。
        *  status: 'SUCCESS' | 'FAIL' | 'LOADING' // 只影响statusText的样式，以及是否显示进度条。
        *  statusText
        * }
@@ -65,28 +66,28 @@ export default {
       //   {
       //     title: '标题标题标题标题标题标题标题标题标题标题标题标题标题标题标题标题',
       //     ifKnowProgress: true,
-      //     progress: 100,
+      //     progress: '100%',
       //     status: 'SUCCESS',
       //     statusText: '成功',
       //   },
       //   {
       //     title: '标题',
       //     ifKnowProgress: true,
-      //     progress: 30,
+      //     progress: '30%',
       //     status: 'LOADING',
       //     statusText: '上传中',
       //   },
       //   {
       //     title: '标题',
       //     ifKnowProgress: false,
-      //     progress: 30,
+      //     progress: '30%',
       //     status: 'LOADING',
-      //     statusText: '上传中',
+      //     statusText: '后台处理中',
       //   },
       //   {
       //     title: '标题',
       //     ifKnowProgress: true,
-      //     progress: 55,
+      //     progress: '55%',
       //     status: 'FAIL',
       //     statusText: '失败',
       //   }

src/views/material/components/uploadui/index.vue

@@ -1,32 +0,0 @@
-<template>
-  <div class="uploadlist">
-    <i class="iconfont iconmaterial_preview_upload"></i>
-    uploadUI
-  </div>
-</template>
-
-<script>
-export default {
-  
-}
-</script>
-
-<style lang="less" scoped>
-.uploadlist{
-  position: fixed;
-  bottom: 0;
-  right: 0;
-  background-color: #fff;
-  width: 550px;
-  height: 60px;
-  box-shadow: 0px 4px 12px 0px rgba(0, 0, 0, 0.1);
-  border-radius: 4px;
-  border: 1px solid #E4E7ED;
-  display: flex;
-  justify-content: space-between;
-  .iconmaterial_preview_upload{
-    color: #0076F6;
-    font-size: 40px;
-  }
-}
-</style>

src/views/material/pano/index.vue

@@ -129,9 +129,6 @@
       </div>
     </div>
 
-    <uploadui/>
-
-
     <rename
       :show="showRename"
       :item="popupItem"
@@ -163,7 +160,6 @@ import cover from "../popup/cover";
 import Upload from "@/components/shared/uploads/UploadMultiple";
 import { getImgWH, changeByteUnit } from "@/utils/file";
 import UploadList from "../components/uploadList";
-import uploadui from "../components/uploadui";
 import { debounce } from "@/utils/other.js"
 
 import {
@@ -190,7 +186,6 @@ export default {
     preview,
     Upload,
     UploadList,
-    uploadui
   },
   data() {
     return {

src/views/material/style.less

@@ -83,7 +83,7 @@
     .upload-list-new {
       position: absolute;
       right: 0;
-      bottom: 35px;
+      bottom: 32px;
     }
   }
 .handle{