@10yun/cv-mobile-ui 0.5.62 → 0.5.64

package/ui-fireui/components/u-count-down/u-count-down.vue

@@ -104,22 +104,49 @@
     >
       {{ unitEn ? 's' : '秒' }}
     </view>
+
+    <view
+      class="up-countdown-colon"
+      :style="{ lineHeight: colonSize + 'rpx', fontSize: colonSize + 'rpx', color: colonColor }"
+      v-if="seconds && isMs && isColon"
+    >
+      .
+    </view>
+    <view
+      class="up-countdown__ms"
+      :style="{
+        background: backgroundColor,
+        borderColor: borderColor,
+        fontSize: msSize + 'rpx',
+        color: msColor,
+        height: height + 'rpx',
+        width: msWidth > 0 ? msWidth + 'rpx' : 'auto'
+      }"
+      v-if="seconds && isMs"
+    >
+      <view :class="{ 'up-ms__list': ani }">
+        <view class="up-ms__item" :style="{ height: height + 'rpx' }" v-for="(item, index) in ms" :key="index">
+          <view :class="[scale ? 'up-countdown-scale' : '']">{{ item }}</view>
+        </view>
+      </view>
+    </view>
   </view>
 </template>
 
 <script>
 export default {
-  name: 'fuiCountdown',
+  name: 'tuiCountdown',
+  emits: ['end', 'time'],
   props: {
     //数字框宽度
     width: {
       type: Number,
-      default: 25
+      default: 32
     },
     //数字框高度
     height: {
       type: Number,
-      default: 25
+      default: 32
     },
     //数字框border颜色
     borderColor: {
@@ -158,7 +185,7 @@ export default {
     },
     //剩余时间 (单位：秒)
     time: {
-      type: Number,
+      type: [Number, String],
       default: 0
     },
     //是否包含天
@@ -190,11 +217,33 @@ export default {
     isColon: {
       type: Boolean,
       default: true
+    },
+    //是否返回剩余时间
+    returnTime: {
+      type: Boolean,
+      default: false
+    },
+    //是否显示毫秒
+    isMs: {
+      type: Boolean,
+      default: false
+    },
+    msWidth: {
+      type: Number,
+      default: 32
+    },
+    msSize: {
+      type: Number,
+      default: 24
+    },
+    msColor: {
+      type: String,
+      default: '#333'
     }
   },
   watch: {
     time(val) {
-      clearInterval(this.countdown);
+      this.clearTimer();
       this.doLoop();
     }
   },
@@ -204,35 +253,60 @@ export default {
       d: '0',
       h: '00',
       i: '00',
-      s: '00'
+      s: '00',
+      //此处若从9到1，结束需要特殊处理
+      ms: [0, 1, 2, 3, 4, 5, 6, 7, 8, 9],
+      ani: false
     };
   },
   created() {
-    this.doLoop();
+    this.clearTimer();
+    let seconds = Number(this.time || 0);
+    if (seconds > 0) {
+      this.doLoop();
+    }
   },
+  // #ifndef VUE3
   beforeDestroy() {
-    clearInterval(this.countdown);
-    this.countdown = null;
+    this.clearTimer();
   },
+  // #endif
+  // #ifdef VUE3
+  beforeUnmount() {
+    this.clearTimer();
+  },
+  // #endif
   methods: {
-    getWidth(num, width) {
+    getWidth: function (num, width) {
       return num > 99 ? (width / 2) * num.toString().length : width;
     },
-    endOfTime() {
+    clearTimer() {
       clearInterval(this.countdown);
       this.countdown = null;
-      this.$emit('end', {});
     },
-    doLoop() {
-      let seconds = this.time || 0;
+    endOfTime(isStop = false) {
+      this.ani = false;
+      this.clearTimer();
+      if (!isStop) {
+        this.$emit('end', {});
+      }
+    },
+    doLoop(time = 0) {
+      let seconds = time || Number(this.time || 0);
+      this.ani = true;
       this.countDown(seconds);
       this.countdown = setInterval(() => {
         seconds--;
-        if (seconds < 0) {
+        this.countDown(seconds);
+        if (this.returnTime) {
+          this.$emit('time', {
+            seconds: seconds
+          });
+        }
+        if (seconds <= 0) {
           this.endOfTime();
           return;
         }
-        this.countDown(seconds);
       }, 1000);
     },
     countDown(seconds) {
@@ -242,8 +316,6 @@ export default {
         hour = this.hours ? Math.floor(seconds / (60 * 60)) - day * 24 : 0;
         minute = this.minutes ? Math.floor(seconds / 60) - hour * 60 - day * 24 * 60 : 0;
         second = Math.floor(seconds) - day * 24 * 60 * 60 - hour * 60 * 60 - minute * 60;
-      } else {
-        this.endOfTime();
       }
       hour = hour < 10 ? '0' + hour : hour;
       minute = minute < 10 ? '0' + minute : minute;
@@ -252,6 +324,13 @@ export default {
       this.h = hour;
       this.i = minute;
       this.s = second;
+    },
+    reset(seconds = 0) {
+      let time = seconds || Number(this.time);
+      this.clearTimer();
+      if (time > 0) {
+        this.doLoop(time);
+      }
     }
   }
 };
@@ -273,7 +352,6 @@ export default {
   display: flex;
   align-items: center;
   justify-content: center;
-  padding: 2rpx;
   border-radius: 6rpx;
   white-space: nowrap;
   transform: translateZ(0);
@@ -298,4 +376,31 @@ export default {
   transform: scale(0.9);
   transform-origin: center center;
 }
+
+.up-countdown__ms {
+  border: 1rpx solid;
+  overflow: hidden;
+  border-radius: 6rpx;
+}
+
+/*ms使用css3代替js频繁更新操作，性能优化*/
+.up-ms__list {
+  animation: loop 1s steps(10) infinite;
+}
+
+@keyframes loop {
+  from {
+    transform: translateY(0);
+  }
+
+  to {
+    transform: translateY(-100%);
+  }
+}
+
+.up-ms__item {
+  display: flex;
+  align-items: center;
+  justify-content: center;
+}
 </style>