首页倒计时展示

src/main/nine-space/src/components/product/productLarge.vue

@@ -44,7 +44,7 @@
 
         <div class="sold xianliang" v-if="time">
             <img src="@assets/shizhong.png" alt="" />
-            <span>即将开售：{{ startTime || time }}</span>
+            <span>即将开售:{{ startTime || time }}</span>
         </div>
 
         <div class="sold" v-if="isSold">已售馨</div>
@@ -57,8 +57,11 @@
 <script>
 import product from '../../mixins/product';
 import dayjs from 'dayjs';
+import { mapState } from 'vuex';
 var isSameOrBefore = require('dayjs/plugin/isSameOrBefore');
 dayjs.extend(isSameOrBefore);
+var isSameOrAfter = require('dayjs/plugin/isSameOrAfter');
+dayjs.extend(isSameOrAfter);
 var duration = require('dayjs/plugin/duration');
 dayjs.extend(duration);
 export default {
@@ -72,28 +75,43 @@ export default {
         }
     },
     computed: {
+        ...mapState(['countdown']),
         time() {
             if (this.info.startTime) {
                 if (dayjs().isSameOrBefore(this.info.startTime)) {
-                    return dayjs(this.info.startTime).format('MM月DD日');
+                    return dayjs(this.info.startTime).format('MM月DD日 HH:mm');
                 }
             }
 
             return '';
         }
     },
+    watch: {
+        countdown() {
+            console.log('3736762');
+            this.updateTime();
+        }
+    },
     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);
-            }
+        if (this.countdown || this.countdown === 0) {
+            this.updateTime();
         }
     },
     methods: {
+        updateTime() {
+            if (this.info.startTime) {
+                var x = dayjs(this.info.startTime);
+                var y = dayjs().add(this.countdown, 'hour');
+                console.log(x.isBefore(y));
+                if (x.isBefore(y)) {
+                    this.getTime(this.info.startTime);
+                } else {
+                    clearTimeout(this.timer);
+                    this.timer = null;
+                    this.startTime = '';
+                }
+            }
+        },
         likeProduct() {
             if (!this.info.liked) {
                 this.$http.get(`/collection/${this.info.id}/like`).then(() => {

src/main/nine-space/src/store/index.js

@@ -7,7 +7,8 @@ export default createStore({
         userInfo: null,
         firstUrl: '',
         couponInfo: null,
-        invitor: null
+        invitor: null,
+        countdown: ''
     },
     mutations: {
         setFinished(state, finished) {
@@ -24,6 +25,9 @@ export default createStore({
         },
         setInvitor(state, invitor) {
             state.invitor = invitor;
+        },
+        setCountdown(state, countdown) {
+            state.countdown = countdown;
         }
     },
     actions: {

src/main/nine-space/src/views/Home.vue

@@ -56,6 +56,9 @@ export default {
     },
     mounted() {
         this.getInit();
+        this.$http.get('/sysConfig/get/countdown_hours').then(res => {
+            this.$store.commit('setCountdown', Number(res.value));
+        });
     },
     methods: {
         getInit() {