feat: 倒计时优化

src/views/consign/components/NormalCountdown.vue

+<template>
+  <div
+    class="normalCountdown component__normalCountdown"
+  >
+    <span style="color: red">{{ formatTime }}</span>
+  </div>
+</template>
+<script>
+
+export default {
+  name: 'NormalCountdown',
+  props: {
+    last: {
+      type: Number,
+      default: 0
+    }
+  },
+  data() {
+    return {
+      hh: '00',
+      mm: '00',
+      ss: '00',
+      ticker: null,
+      timer: null,
+      seckillTicker: null,
+      seckillTimer: null,
+      errTime: 0,
+      formatTime: ''
+
+    }
+  },
+  created() {
+    if (this.last) {
+      this.startCountdown()
+    }
+  },
+  destroyed() {
+    clearTimeout(this.timer)
+  },
+
+  methods: {
+    startCountdown() {
+      this.initCountdown()
+      const mistiming = this.last - Date.now()
+      if (mistiming < 0) {
+        return
+      }
+
+      // if (!this.ticker) {
+      //   this.ticker = createTicker()
+      // }
+
+      if (!this.timer) {
+        this.timer = setInterval(() => {
+          const deltaTime = this.last - (Date.now())
+          if (deltaTime > 60 * 60 * 1000) {
+            this.formatTime = this.formatDuring(deltaTime)
+            // const newTime = formatTime.split(':')
+            // if (newTime.length >= 3) {
+            //   this.hh = newTime[0]
+            //   this.mm = newTime[1]
+            //   this.ss = newTime[2]
+            //   this.zzz = null
+            //   // this.showMS = false;
+            // }
+          } else if (deltaTime > 0) {
+            this.ticker.clearInterval(this.timer)
+            this.timer = null
+          }
+        }, 1000)
+      }
+    },
+    initCountdown() {
+      const deltaTime = this.last - Date.now() - this.errTime
+      this.formatTime = this.formatDuring(deltaTime)
+      /* const newTime = formatTime.split(':')
+      if (newTime.length >= 3) {
+        this.hh = newTime[0] === '00' ? null : newTime[0]
+        this.mm = newTime[1]
+        this.ss = newTime[2]
+        // this.showMS = false;
+      }*/
+    },
+
+    formatDuring(mss) {
+      console.log('======mss=', mss)
+      if (mss > 0) {
+        const hours = parseInt((mss % (1000 * 60 * 60 * 24)) / (1000 * 60 * 60)) // 得到小时
+        const minutes = parseInt((mss % (1000 * 60 * 60)) / (1000 * 60)) // 得到分钟数
+        // 获取分钟
+        const str1 = minutes < 10 ? ('0' + minutes) : minutes
+
+        // 得到秒数
+        const seconds = parseInt((mss % (1000 * 60)) / 1000)
+        const str2 = seconds < 10 ? ('0' + seconds) : seconds
+        return '剩余' + hours + ':' + str1 + ':' + str2
+      } else {
+        return '已超时'
+      }
+    }
+  }
+}
+</script>
+<style lang="scss" scoped>
+.component__normalCountdown {
+    .countDown {
+        margin-right: 30px;
+        &__title {
+            font-size: 24px;
+            font-weight: 400;
+            color: rgba(255, 0, 0, 1);
+            line-height: 32px;
+            text-align: right;
+            margin-right: 10px;
+            margin-bottom: 10px;
+        }
+        &__item {
+            // margin-left: 18px;
+            &:not(:first-child) {
+                margin-left: 8px;
+            }
+        }
+        &__num {
+            font-weight: 600;
+            color: rgba(255, 0, 0, 1);
+            border-radius: 8px;
+            font-size: 15px;
+        }
+        &__text {
+            font-size: 24px;
+            font-weight: 500;
+            color: rgba(255, 0, 0, 1);
+            line-height: 15;
+            margin-left: 4px;
+        }
+    }
+}
+</style>

src/views/consign/consignList.vue

@@ -24,7 +24,6 @@
     <el-table
       v-loading="listLoading"
       :data="list"
-      :key="itemKey"
       size="small"
       element-loading-text="正在查询中..."
       border
@@ -49,7 +48,7 @@
         <template slot-scope="scope">
           <div v-if="!scope.row.isHasPrice" >暂无估价</div>
           <div v-if="scope.row.isHasPrice" >
-            <span style="color: red">{{ scope.row.intervalTime }}</span>
+            <NormalCountdown :last="scope.row.timeStr"/>
           </div>
         </template>
       </el-table-column>
@@ -169,10 +168,12 @@ import ImageValueDialog from './components/ImageValueDialog'
 import SaleConsignDialog from './components/SaleConsignDialog'
 import FinishSettlementDialog from './components/FinishSettlementDialog'
 import CancelConsignDialog from './components/CancelConsignDialog'
+import NormalCountdown from './components/NormalCountdown'
 
 export default {
   name: 'ConsignList',
   components: {
+    NormalCountdown,
     CancelConsignDialog,
     FinishSettlementDialog,
     SaleConsignDialog,
@@ -229,7 +230,6 @@ export default {
       finishDialogShow: false,
       // 寄售凭证
       finishSettlementDialogShow: false,
-      itemContent: {},
       // 取消
       cancelConsignDialogShow: false,
       currentSaleId: ''
@@ -246,7 +246,7 @@ export default {
     // 清除所有定时器
     clearAll() {
       if (this.list) {
-        this.list.forEach(el => {
+        this.list.forEach((el) => {
           clearInterval(el.countDown)
         })
       }
@@ -270,12 +270,6 @@ export default {
         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.itemKey++
-          this.list.forEach((item) => {
-            this.countDown(item)
-          })
-        }
       }).catch((e) => {
         this.list = []
         this.total = 0
@@ -294,7 +288,6 @@ export default {
      */
     handleImageValueDialogShow(item) {
       this.imageValueDialogShow = true
-      this.itemContent = item
       this.currentSaleId = item.saleId
     },
     /**
@@ -319,7 +312,6 @@ export default {
     // 取消完成寄售
     handleCancelFinishDialog() {
       this.finishDialogShow = false
-      this.itemContent = {}
       this.finishForm = {}
     },
     /**
@@ -328,14 +320,12 @@ export default {
     handleIdentifyValueDialogShow(item) {
       this.identifyValueDialogShow = true
       this.currentSaleId = item.saleId
-      this.itemContent = item
     },
     /**
      * 货品售出
      */
     handleFinishDialogShow(item) {
       this.finishDialogShow = true
-      this.itemContent = item
       this.currentSaleId = item.saleId
     },
     /**
@@ -343,7 +333,6 @@ export default {
      */
     handleFinishSettlementDialogShow(item) {
       this.finishSettlementDialogShow = true
-      this.itemContent = item
       this.currentSaleId = item.saleId
     },
     /**
@@ -351,42 +340,7 @@ export default {
      */
     handleCancelDialogShow(item) {
       this.cancelConsignDialogShow = true
-      this.itemContent = item
       this.currentSaleId = item.saleId
-    },
-    /** 倒计时*/
-    countDown(item) {
-      // acceptanceOverTime 是我后台返回的截止时间
-      if (new Date(item.countdownTime).getTime() - new Date().getTime() <= 0) {
-        return
-      }
-      item.countDown = setInterval(() => {
-        if (new Date(item.countdownTime).getTime() - new Date().getTime() <= 0) {
-          item.intervalTime = '已超时'
-          return
-        }
-        this.itemKey++
-        item.intervalTime = this.formatDuring(new Date(item.countdownTime).getTime() - new Date().getTime())
-      }, 1000)
-      // 这边采取的是10秒调用一次
-      // 这里采用简单写法，直接在查询的时候调用一次，不用等定时器调用
-      item.intervalTime = this.formatDuring(new Date(item.countdownTime).getTime() - new Date().getTime())
-    },
-    formatDuring(mss) {
-      console.log('======mss=', mss)
-      if (mss > 0) {
-        const hours = parseInt((mss % (1000 * 60 * 60 * 24)) / (1000 * 60 * 60)) // 得到小时
-        const minutes = parseInt((mss % (1000 * 60 * 60)) / (1000 * 60)) // 得到分钟数
-        // 获取分钟
-        const str1 = minutes < 10 ? ('0' + minutes) : minutes
-
-        // 得到秒数
-        const seconds = parseInt((mss % (1000 * 60)) / 1000)
-        const str2 = seconds < 10 ? ('0' + seconds) : seconds
-        return '剩余' + hours + ':' + str1 + ':' + str2
-      } else {
-        return '已超时'
-      }
     }
   }
 }