feat: 倒计时展示优化

src/views/consign/components/FinishSettlementDialog.vue

@@ -22,7 +22,7 @@
           multiple
           accept=".jpg,.jpeg,.png,.gif"
           list-type="picture-card">
-          <i class="el-icon-plus"/>
+          <div>+最多三张凭证</div>
         </el-upload>
       </el-form-item>
     </el-form>
@@ -108,19 +108,13 @@ export default {
       } else {
         url = file.response.data.url
       }
-      if (url === this.goods.topImage) {
-        this.goods.topImage = ''
-      }
-      for (var i = 0; i < this.goods.images.length; i++) {
+      for (var i = 0; i < this.saleForm.images.length; i++) {
         // 这里存在两种情况
         // 1. 如果所删除图片是刚刚上传的图片，那么图片地址是file.response.data.url
         //    此时的file.url虽然存在，但是是本机地址，而不是远程地址。
         // 2. 如果所删除图片是后台返回的已有图片，那么图片地址是file.url
-        if (url === this.goods.topImage) {
-          this.goods.topImage = ''
-        }
-        if (this.goods.images[i] === url) {
-          this.goods.images.splice(i, 1)
+        if (this.saleForm.images[i] === url) {
+          this.saleForm.images.splice(i, 1)
         }
       }
     },
@@ -154,6 +148,8 @@ export default {
         })
         return
       }
+      console.log('=====图片itemImages', this.itemImages)
+      console.log('=====图片', this.saleForm.images)
       if (this.saleId) {
         const params = { credential: this.saleForm.images.join(';'), saleId: this.saleId }
         this.$refs.finish.validate((valid) => {

src/views/consign/consignDetail.vue

@@ -41,7 +41,7 @@
         @click="finishSettlementDialogShow = true">向用户结款
       </el-button>
       <el-button
-        v-if="systemState < 20"
+        v-if="systemState < 16"
         type="danger"
         size="mini"
         @click="cancelConsignDialogShow = true">取消寄售

src/views/consign/consignList.vue

@@ -24,6 +24,7 @@
     <el-table
       v-loading="listLoading"
       :data="list"
+      :key="itemKey"
       size="small"
       element-loading-text="正在查询中..."
       border
@@ -44,7 +45,7 @@
       </el-table-column>
 
       <el-table-column align="center" label="状态" prop="systemStateName" />
-      <el-table-column v-if="listQuery.systemState === '1' || listQuery.systemState === '8'" align="center" label="等待用户确认" prop="intervalTime" min-width="100px">
+      <el-table-column v-if="listQuery.systemState === '1' || listQuery.systemState === '8'" align="center" label="等待用户确认" min-width="100px">
         <template slot-scope="scope">
           <div v-if="!scope.row.isHasPrice" >暂无估价</div>
           <div v-if="scope.row.isHasPrice" >
@@ -182,6 +183,7 @@ export default {
   },
   data() {
     return {
+      itemKey: 0,
       tabList: [
         {
           label: '图文估价',
@@ -237,7 +239,18 @@ export default {
     this.listQuery.systemState = localStorage.getItem('systemState') || '1'
     this.getList()
   },
+  destroyed() {
+    this.clearAll()
+  },
   methods: {
+    // 清除所有定时器
+    clearAll() {
+      if (this.list) {
+        this.list.forEach(el => {
+          clearInterval(el.countDown)
+        })
+      }
+    },
     handlerGetList() {
       this.listQuery.page = 1
       this.getList()
@@ -253,12 +266,14 @@ export default {
       localStorage.setItem('systemState', '')
       this.listLoading = true
       findConsignList(this.listQuery).then(response => {
+        this.clearAll()
         this.list = response.data.data.dataList
         this.total = response.data.data.total
         this.listLoading = false
         if (this.listQuery.systemState === '1' || this.listQuery.systemState === '8') {
-          this.list.forEach((el) => {
-            this.countDown(el)
+          this.itemKey++
+          this.list.forEach((item) => {
+            this.countDown(item)
           })
         }
       }).catch((e) => {
@@ -340,22 +355,22 @@ export default {
       this.currentSaleId = item.saleId
     },
     /** 倒计时*/
-    countDown(row) {
+    countDown(item) {
       // acceptanceOverTime 是我后台返回的截止时间
-      if (new Date(row.countdownTime).getTime() - new Date().getTime() <= 0) {
+      if (new Date(item.countdownTime).getTime() - new Date().getTime() <= 0) {
         return
       }
-      /* setInterval(() => {
-        if (new Date(row.countdownTime).getTime() - new Date().getTime() <= 0) {
-          row.intervalTime = '已超时'
+      item.countDown = setInterval(() => {
+        if (new Date(item.countdownTime).getTime() - new Date().getTime() <= 0) {
+          item.intervalTime = '已超时'
           return
         }
-        row.intervalTime = this.formatDuring(new Date(row.countdownTime).getTime() - new Date().getTime())
-        console.log('===row.intervalTime==', row.intervalTime)
-      }, 1000) */
+        this.itemKey++
+        item.intervalTime = this.formatDuring(new Date(item.countdownTime).getTime() - new Date().getTime())
+      }, 1000)
       // 这边采取的是10秒调用一次
       // 这里采用简单写法，直接在查询的时候调用一次，不用等定时器调用
-      row.intervalTime = this.formatDuring(new Date(row.countdownTime).getTime() - new Date().getTime())
+      item.intervalTime = this.formatDuring(new Date(item.countdownTime).getTime() - new Date().getTime())
     },
     formatDuring(mss) {
       console.log('======mss=', mss)
@@ -368,7 +383,7 @@ export default {
         // 得到秒数
         const seconds = parseInt((mss % (1000 * 60)) / 1000)
         const str2 = seconds < 10 ? ('0' + seconds) : seconds
-        return hours + ':' + str1 + ':' + str2
+        return '剩余' + hours + ':' + str1 + ':' + str2
       } else {
         return '已超时'
       }