feat: 倒计时组件进行二次封装

src/components/countDown.vue

+<template>
+  <cr-count-down :time="time">
+    <template #default="timeData">
+      <template v-if="timeData.d != 0">
+        <span class="block">{{ timeData.d }}</span>
+        <span class="colon">:</span>
+      </template>
+      <span class="block">{{ fillZero(timeData.h) }}</span>
+      <span class="colon">:</span>
+      <span class="block">{{ fillZero(timeData.m) }}</span>
+      <span class="colon">:</span>
+      <span class="block">{{ fillZero(timeData.s) }}</span>
+    </template>
+  </cr-count-down>
+</template>
+<script>
+export default {
+  props: {
+    endTime: {
+      type: Number,
+      default: 0
+    }
+  },
+  computed: {
+    time() {
+      return this.endTime - new Date().getTime();
+    }
+  },
+  methods: {
+    fillZero(t) {
+      t = t.toString();
+      if (t.length == 1) {
+        return `0${t}`;
+      }
+      return t;
+    }
+  }
+};
+</script>
+<style lang="less" scoped>
+.colon {
+  display: inline-block;
+  margin: 0 @padding-unit;
+  color: @red-dark;
+}
+.block {
+  display: inline-block;
+  width: 18px;
+  // height: 22px;
+  color: #fff;
+  .text-11();
+  text-align: center;
+  background-color: @red-dark;
+  border-radius: @padding-unit;
+  line-height: 18px;
+}
+</style>

src/views/goodsDetail/index.less

@@ -143,6 +143,33 @@
       padding-bottom: @padding-x;
     }
   }
+  &-group-buy-info{
+    display: flex;
+    background-image: url("../../assets/images/info-bg.png");
+    background-color: #FFE8E8;
+    background-size: cover;
+    width: 100%;
+    height: 51px;
+    &-price{
+      width: 253px;
+      flex-shrink: 0;
+      display: flex;
+      align-items: center;
+    }
+    &-time{
+      flex: 1;
+      display: flex;
+      flex-direction: column;
+      justify-content: center;
+      align-items: center;
+      &-desc{
+        .text-12();
+        // margin-bottom: @padding-unit;
+        color: @font-color-dark;
+        text-align: center;
+      }
+    }
+  }
   &-sale {
     padding: 5px 10px;
     background: @white;

src/views/goodsDetail/index.vue

@@ -14,6 +14,13 @@
         </cr-swipe>
         <swipe-customer-info v-model="showInfo" />
       </div>
+      <div class="goods-group-buy-info">
+        <div class="goods-group-buy-info-price" />
+        <div class="goods-group-buy-info-time">
+          <p class="goods-group-buy-info-time-desc">距成团结束</p>
+          <count-down :end-time="endTime" />
+        </div>
+      </div>
       <!-- 商品名称/价格 -->
       <div class="goods-info">
         <div class="goods-info-price">
@@ -162,6 +169,8 @@ import detailInfoArea from './components/detailInfo.vue';
 import Img2Thumb from '@/filters/img2Thumb.filter';
 import bottomNav from './components/bottomNav';
 import swipeCustomerInfo from '@/components/swipeCustomerInfo';
+import countDown from '@/components/countDown';
+import CountDown from '@/components/countDown.vue';
 export default {
   // eslint-disable-next-line vue/name-property-casing
   name: 'goodDetail',
@@ -169,14 +178,18 @@ export default {
     detailInfoArea,
     goodsCell,
     bottomNav,
-    swipeCustomerInfo
+    swipeCustomerInfo,
+    countDown,
     // tipModal
+    CountDown
   },
   filters: {
     Img2Thumb
   },
   data() {
     return {
+      endTime: 1631203200000,
+      // 以下是原有的data
       flag: false,
       showInfo: false,
       detailParam: {