编号&定时器

src/components/product/productInfo.vue

@@ -36,6 +36,10 @@
                     {{ info.likes }}
                 </like-button>
             </div>
+            <!-- <div class="sold xianliang" v-if="time && info.salable">
+                <img src="@assets/shizhong.png" alt="" />
+                <span>即将开售：{{ startTime || time }}</span>
+            </div> -->
             <div class="sold" v-if="isSold">已售罄</div>
         </div>
     </router-link>
@@ -43,6 +47,11 @@
 
 <script>
 import product from '../../mixins/product';
+import dayjs from 'dayjs';
+var isSameOrBefore = require('dayjs/plugin/isSameOrBefore');
+dayjs.extend(isSameOrBefore);
+var duration = require('dayjs/plugin/duration');
+dayjs.extend(duration);
 export default {
     mixins: [product],
     props: {
@@ -53,6 +62,28 @@ export default {
             }
         }
     },
+    computed: {
+        time() {
+            if (this.info.startTime) {
+                if (dayjs().isSameOrBefore(this.info.startTime)) {
+                    return dayjs(this.info.startTime).format('MM月DD日');
+                }
+            }
+
+            return '';
+        }
+    },
+    mounted() {
+        if (this.info.startTime) {
+            var x = dayjs(this.info.startTime);
+            var y = dayjs();
+            let d = dayjs.duration(x.diff(y));
+            let day = parseInt(d.asDays());
+            if (day <= 0) {
+                this.getTime(this.info.startTime);
+            }
+        }
+    },
     methods: {
         likeProduct() {
             if (!this.info.liked) {

src/mixins/product.js

@@ -8,6 +8,8 @@ var calendar = require('dayjs/plugin/calendar');
 dayjs.extend(calendar);
 var duration = require('dayjs/plugin/duration');
 dayjs.extend(duration);
+var isSameOrBefore = require('dayjs/plugin/isSameOrBefore');
+dayjs.extend(isSameOrBefore);
 export default {
     data() {
         return {
@@ -95,10 +97,19 @@ export default {
             if (abs(day) > 0) {
                 str += day + '天 ';
             }
+
             this.startTime = str + dayjs.duration(x.diff(y)).format('HH:mm:ss');
-            setTimeout(() => {
-                this.getTime(startTime);
-            }, 1000);
+
+            if (!dayjs().isBefore(dayjs(startTime))) {
+                if (this.getProduct) {
+                    this.getProduct();
+                }
+                this.startTime = '';
+            } else {
+                setTimeout(() => {
+                    this.getTime(startTime);
+                }, 1000);
+            }
         },
         getShort(str = '') {
             if (str) {

src/views/product/Detail.vue

@@ -11,9 +11,9 @@
                 <div class="name2">{{ startTime }}</div>
             </div> -->
 
-            <div class="price-line" v-if="info.salable">
+            <div class="price-line">
                 <div class="text" v-if="info.number">编号 {{ info.number }}</div>
-                <div class="text total" v-if="info.total > 1">
+                <div class="text total" v-if="info.salable && info.total > 1">
                     <span>限量</span>
                     <span>{{ info.total }}份</span>
                 </div>