抢购

src/components/ProductInfo.vue

@@ -111,6 +111,7 @@ const goDetail = () => {
             font-size: 11px;
             color: rgba(var(--ion-color-light-contrast-rgb), 0.6);
             line-height: 17px;
+            white-space: nowrap;
         }
 
         &:nth-child(1) {

src/views/HomePage.vue

@@ -63,18 +63,7 @@
 
             <template v-for="(item, index) in saleBatchs" :key="index">
                 <div class="level">
-                    <van-cell
-                        :title="item.name"
-                        value="全部"
-                        :to="{
-                            path: '/productList',
-                            query: {
-                                batchId: item.id
-                            }
-                        }"
-                        :border="false"
-                        is-link
-                    >
+                    <van-cell :title="item.name" value="全部" @click="goList(item)" :border="false" is-link>
                         <template #right-icon>
                             <img src="../assets/icon_inter.png" alt="" class="right-icon" />
                         </template>
@@ -87,10 +76,10 @@
                             height="calc(100vw - 40px)"
                             fit="cover"
                             radius="4"
-                            @click="goList(item.id)"
+                            @click="goList(item)"
                         />
-                        <div class="first-content">
-                            <product-info :info="hotInfo"></product-info>
+                        <div class="first-content" v-if="!item.empty">
+                            <product-info :info="item.hotInfo"></product-info>
                         </div>
 
                         <div class="status hot" v-if="getStatus(item) === '抢购中'">
@@ -99,11 +88,11 @@
                         </div>
                         <div class="status" v-else-if="getStatus(item)">
                             <img src="../assets/info_icon_shijian.png" alt="" />
-                            <span>{{ getStatus(item) }}</span>
+                            <span><van-count-down :time="getStatus(item)" /> 开抢</span>
                         </div>
                     </div>
                     <div class="second" v-else>
-                        <van-image @click="goList(item.id)" :src="item.icon || secondImg" fit="cover" />
+                        <van-image @click="goList(item)" :src="item.icon || secondImg" fit="cover" />
 
                         <div class="status hot" v-if="getStatus(item) === '抢购中'">
                             <img src="../assets/info_icon_qianggouzhong.png" alt="" />
@@ -111,7 +100,7 @@
                         </div>
                         <div class="status" v-else-if="getStatus(item)">
                             <img src="../assets/info_icon_shijian.png" alt="" />
-                            <span>{{ getStatus(item) }}</span>
+                            <span><van-count-down :time="getStatus(item)" /> 开抢</span>
                         </div>
                     </div>
                 </div>
@@ -144,7 +133,7 @@ import firstImg from '../assets/p1.png'
 import secondImg from '../assets/bg2.png'
 
 import productInfo from '../components/ProductInfo.vue'
-import { isAfter, isBefore, parse, getYear, getMonth, getDate } from 'date-fns'
+import { isAfter, isBefore, parse, getYear, getMonth, getDate, addDays, getTime } from 'date-fns'
 import { http } from '@/plugins/http'
 import toast from '@/utils/toast'
 
@@ -176,36 +165,49 @@ const saleBatchs = ref([])
 const hotInfo = ref({})
 function getSaleBatch() {
     return http.post('saleBatch/all', {}, { body: 'json' }).then(res => {
-        saleBatchs.value = res.content
+        saleBatchs.value = res.content.map(item => {
+            return {
+                ...item,
+                empty: true,
+                hotInfo: {}
+            }
+        })
         if (!res.empty) {
-            http.post(
-                'product/all',
-                {
-                    query: {
-                        batchId: res.content[0].id,
-                        status: 'IN_STOCK',
-                        enabled: true
+            res.content.forEach((item, index) => {
+                http.post(
+                    'product/all',
+                    {
+                        query: {
+                            batchId: item.id,
+                            status: 'IN_STOCK',
+                            enabled: true
+                        },
+                        size: 1,
+                        sort: 'id,desc'
                     },
-                    size: 1,
-                    sort: 'id,desc'
-                },
-                { body: 'json' }
-            ).then(res => {
-                if (!res.empty) {
-                    hotInfo.value = res.content[0]
-                }
+                    { body: 'json' }
+                ).then(res => {
+                    saleBatchs.value[index].empty = res.empty
+                    if (!res.empty) {
+                        saleBatchs.value[index].hotInfo = res.content[0]
+                    }
+                })
             })
         }
     })
 }
 
-const goList = id => {
-    router.push({
-        path: '/productList',
-        query: {
-            batchId: id
-        }
-    })
+const goList = info => {
+    if (getStatus(info) === '抢购中') {
+        router.push({
+            path: '/productList',
+            query: {
+                batchId: info.id
+            }
+        })
+    } else {
+        toast('敬请期待...')
+    }
 }
 
 onMounted(() => {
@@ -223,11 +225,12 @@ const getStatus = info => {
     if (info && info.saleStart) {
         if (
             isAfter(new Date(), new Date(date1 + ' ' + info.saleStart)) &&
-            isBefore(new Date(), new Date(date1 + ' ' + info.saleEnd))
+            isBefore(new Date(), new Date(date1 + ' ' + info.saleEnd)) &&
+            !info.empty
         ) {
             return '抢购中'
         } else {
-            return info.saleStart + ' 开抢'
+            return getTime(addDays(new Date(date1 + ' ' + info.saleStart), 1)) - getTime(new Date())
         }
     }
     return ''
@@ -346,6 +349,14 @@ const getStatus = info => {
         color: var(--ion-color-step-0);
         line-height: 22px;
         margin-left: 6px;
+        .f();
+    }
+
+    .van-count-down {
+        --van-count-down-text-color: #fff;
+        --van-count-down-font-size: 12px;
+        // margin-right: 6px;
+        min-width: 55px;
     }
 
     &.hot {

src/views/ProductListPage.vue

@@ -24,7 +24,7 @@
             </div>
             <div class="status" v-else-if="status">
                 <img src="../assets/info_icon_shijian.png" alt="" />
-                <span>{{ status }}</span>
+                <span><van-count-down :time="status" /> 开抢</span>
             </div>
             <van-list class="list" v-model:loading="loading" :finished="finished" finished-text="" @load="getData">
                 <div class="product" v-for="(item, index) in list" :key="index">
@@ -40,7 +40,7 @@ import productInfo from '../components/ProductInfo.vue'
 import { ref, getCurrentInstance, onMounted, computed } from 'vue'
 import { useRoute } from 'vue-router'
 import useList from '../plugins/list'
-import { isAfter, isBefore, parse, getYear, getMonth, getDate } from 'date-fns'
+import { isAfter, isBefore, parse, getYear, getTime, addDays, getMonth, getDate } from 'date-fns'
 import { searchOutline } from 'ionicons/icons'
 
 const route = useRoute()
@@ -74,11 +74,12 @@ const status = computed(() => {
     if (batchInfo.value && batchInfo.value.saleStart) {
         if (
             isAfter(new Date(), new Date(date1 + ' ' + batchInfo.value.saleStart)) &&
-            isBefore(new Date(), new Date(date1 + ' ' + batchInfo.value.saleEnd))
+            isBefore(new Date(), new Date(date1 + ' ' + batchInfo.value.saleEnd)) &&
+            !empty.value
         ) {
             return '抢购中'
         } else {
-            return batchInfo.value.saleStart + ' 开抢'
+            return getTime(addDays(new Date(date1 + ' ' + batchInfo.value.saleStart), 1)) - getTime(new Date())
         }
     }
     return ''
@@ -121,6 +122,14 @@ onMounted(() => {
         color: var(--ion-color-step-0);
         line-height: 22px;
         margin-left: 6px;
+        .f();
+    }
+
+    .van-count-down {
+        --van-count-down-text-color: #fff;
+        --van-count-down-font-size: 12px;
+        // margin-right: 6px;
+        min-width: 55px;
     }
 
     &.hot {