feat: 增加订单倒计时组件，自动清理过期未支付订单

web/src/components/CountDown.vue

@@ -0,0 +1,97 @@
+<template>
+  <!-- 倒计时组件 -->
+  <div class="countdown">
+    <el-tag size="large" :type="type">{{ timerStr }}</el-tag>
+  </div>
+</template>
+<script setup>
+
+import {onMounted, ref, watch} from "vue";
+
+const props = defineProps({
+  second: Number,
+  type: {
+    type: String,
+    default: ""
+  }
+});
+
+const emits = defineEmits(['timeout']);
+const counter = ref(props.second)
+const timerStr = ref("")
+const handler = ref(null)
+
+watch(() => props.second, (newVal) => {
+  counter.value = newVal
+  resetTimer()
+});
+
+onMounted(() => {
+  resetTimer()
+})
+
+const resetTimer = () => {
+  if (handler.value) {
+    clearInterval(handler.value)
+  }
+  
+  counter.value = props.second
+  formatTimer(counter.value)
+  handler.value = setInterval(() => {
+    formatTimer(counter.value)
+    if (counter.value === 0) {
+      clearInterval(handler.value)
+      emits("timeout")
+    }
+    counter.value--
+  }, 1000)
+}
+
+const formatTimer = (secs) => {
+  const timer = []
+  let hour, min
+  // 计算小时
+  if (secs > 3600) {
+    hour = Math.floor(secs / 3600)
+    if (hour < 10) {
+      hour = "0" + hour
+    }
+    secs = secs % 3600
+    timer.push(hour + " 时 ")
+  } else {
+    timer.push("00 时 ")
+  }
+  // 计算分钟
+  if (secs > 60) {
+    min = Math.floor(secs / 60)
+    if (min < 10) {
+      min = "0" + min
+    }
+    secs = secs % 60
+    timer.push(min + " 分 ")
+  } else {
+    timer.push("00 分 ")
+  }
+  // 计算秒数
+  if (secs < 10) {
+    secs = "0" + secs
+  }
+  timer.push(secs + " 秒")
+  timerStr.value = timer.join("")
+}
+
+defineExpose({resetTimer})
+</script>
+
+<style lang="stylus">
+.countdown {
+  display flex
+
+  .el-tag--large {
+    .el-tag__content {
+      font-size 14px
+    }
+  }
+}
+
+</style>