首页

src/views/HomePage.vue

@@ -1,6 +1,6 @@
 <template>
     <ion-page>
-        <ion-content fullscreen class="home">
+        <ion-content :scrollEvents="true" fullscreen class="home" @ionScroll="handleScroll()">
             <van-swipe class="mySwiper" :autoplay="5000" :style="{ height: '65vw' }">
                 <van-swipe-item v-for="(item, index) in topBanners" :key="index">
                     <van-image :src="item.pic" fit="cover" width="100vw" height="65vw" />
@@ -118,46 +118,6 @@
                 </div>
             </div>
 
-            <!-- 初级场 -->
-
-            <template v-for="(item, index) in saleBatches" :key="index">
-                <div class="level">
-                    <van-cell :title="item.name" :value="$t('home.all')" @click="goList(item)" :border="false" is-link>
-                        <template #title>
-                            <div class="cell-title" :class="[`level_` + index]">
-                                <span>
-                                    <span>{{ item.name }}</span>
-                                    <img class="title-bg" src="@/assets/title-bg.png" alt="" />
-                                </span>
-                            </div>
-                        </template>
-                        <template #right-icon>
-                            <ion-icon class="right-icon" :icon="intoIcon"></ion-icon>
-                        </template>
-                    </van-cell>
-
-                    <div class="second">
-                        <van-image @click="goList(item)" :src="item.cover" fit="scale-down" />
-
-                        <!-- <img class="second-btn" v-if="index === 0" src="../assets/TUTORIAL.png" alt="" /> -->
-                        <template v-if="item.empty !== null && item.id != 11547">
-                            <div
-                                class="status hot animate__animated animate__tada animate__infinite"
-                                v-if="getStatus(item) === '抢购中'"
-                            >
-                                <img src="../assets/info_icon_qianggouzhong.png" alt="" />
-                                <span>{{ $t('product.hot') }}</span>
-                            </div>
-                            <div class="status" v-else-if="getStatus(item)">
-                                <img src="../assets/info_icon_shijian.png" alt="" />
-                                <span>{{ $t('product.start', { time: formatTime(item.saleStart) }) }}</span>
-                                <span v-if="getStatus(item) === '已抢光'">({{ $t('blf.finish') }})</span>
-                            </div>
-                        </template>
-                    </div>
-                </div>
-            </template>
-
             <div class="vip-content" v-if="isVip">
                 <img class="vip-bg" src="@/assets/png-cishu.png" alt="" />
                 <div class="vip-box">
@@ -170,22 +130,82 @@
                 </div>
             </div>
 
-            <div class="tools">
-                <!-- <div class="tool">
-                    <img src="../assets/home_icon_pingtaixieyi.png" alt="" />
-                    <span>{{ $t('common.eula') }}</span>
-                </div>
-                <div class="tool">
-                    <img src="../assets/home_icon_liucheng.png" alt="" />
-                    <span>{{ $t('common.guide') }}</span>
-                </div> -->
-                <div class="tool-info" @click="showTutorialVideo">
-                    <img src="../assets/png-TUTORIAL.png" alt="" />
-                </div>
-                <div class="tool-info" @click="showIntroVideo">
-                    <img src="../assets/png-AGREEMENT.png" alt="" />
+            <!-- 初级场 -->
+
+            <template v-if="batchId">
+                <van-list
+                    v-model:loading="loading"
+                    :finished="finished"
+                    :finished-text="$t('common.loadFinish')"
+                    @load="getData"
+                    ref="listRef"
+                    :immediate-check="false"
+                >
+                    <div class="product" v-for="item in list" :key="item.id">
+                        <product-small-info
+                            list
+                            :info="item"
+                            :stopOfficial="stopOfficial"
+                            :batchStatus="batchStatus"
+                        ></product-small-info>
+                    </div>
+                </van-list>
+            </template>
+
+            <template v-else>
+                <template v-for="(item, index) in saleBatches" :key="index">
+                    <div class="level">
+                        <van-cell
+                            :title="item.name"
+                            :value="$t('home.all')"
+                            @click="goList(item)"
+                            :border="false"
+                            is-link
+                        >
+                            <template #title>
+                                <div class="cell-title" :class="[`level_` + index]">
+                                    <span>
+                                        <span>{{ item.name }}</span>
+                                        <img class="title-bg" src="@/assets/title-bg.png" alt="" />
+                                    </span>
+                                </div>
+                            </template>
+                            <template #right-icon>
+                                <ion-icon class="right-icon" :icon="intoIcon"></ion-icon>
+                            </template>
+                        </van-cell>
+
+                        <div class="second">
+                            <van-image @click="goList(item)" :src="item.cover" fit="scale-down" />
+
+                            <!-- <img class="second-btn" v-if="index === 0" src="../assets/TUTORIAL.png" alt="" /> -->
+                            <template v-if="item.empty !== null && item.id != 11547">
+                                <div
+                                    class="status hot animate__animated animate__tada animate__infinite"
+                                    v-if="getStatus(item) === '抢购中'"
+                                >
+                                    <img src="../assets/info_icon_qianggouzhong.png" alt="" />
+                                    <span>{{ $t('product.hot') }}</span>
+                                </div>
+                                <div class="status" v-else-if="getStatus(item)">
+                                    <img src="../assets/info_icon_shijian.png" alt="" />
+                                    <span>{{ $t('product.start', { time: formatTime(item.saleStart) }) }}</span>
+                                    <span v-if="getStatus(item) === '已抢光'">({{ $t('blf.finish') }})</span>
+                                </div>
+                            </template>
+                        </div>
+                    </div>
+                </template>
+
+                <div class="tools">
+                    <div class="tool-info" @click="showTutorialVideo">
+                        <img src="../assets/png-TUTORIAL.png" alt="" />
+                    </div>
+                    <div class="tool-info" @click="showIntroVideo">
+                        <img src="../assets/png-AGREEMENT.png" alt="" />
+                    </div>
                 </div>
-            </div>
+            </template>
         </ion-content>
     </ion-page>
 </template>
@@ -212,6 +232,8 @@ import NewsModal from '@/components/NewsModal.vue'
 import { UseElementBounding } from '@vueuse/components'
 import { onIonViewWillEnter } from '@ionic/vue'
 import { storeToRefs } from 'pinia'
+import productSmallInfo from '../components/ProductItemSmall.vue'
+import useList from '../plugins/list'
 
 const promptLogin = inject('promptLogin')
 const router = useRouter()
@@ -228,26 +250,54 @@ function getBanner() {
 }
 
 const saleBatches = ref([])
+const batchInfo = ref({})
+const batchId = ref(0)
 function getSaleBatch() {
-    return http.post('saleBatch/all', {}, { body: 'json' }).then(res => {
-        saleBatches.value = res.content.map(item => {
-            return {
-                ...item,
-                empty: false,
-                hotInfo: {}
-            }
-        })
-        if (!res.empty) {
-            saleBatches.value.forEach((item, index) => {
-                if (item.id == 11547) {
-                    item.empty = true
-                    return
+    return http.get('sysConfig/get/home_session').then(res => {
+        if (res.value === '0') {
+            return http.post('saleBatch/all', {}, { body: 'json' }).then(res => {
+                saleBatches.value = res.content.map(item => {
+                    return {
+                        ...item,
+                        empty: false,
+                        hotInfo: {}
+                    }
+                })
+                if (!res.empty) {
+                    saleBatches.value.forEach((item, index) => {
+                        if (item.id == 11547) {
+                            item.empty = true
+                            return
+                        }
+                        http.post(
+                            '/product/list',
+                            {
+                                query: {
+                                    batchId: item.id,
+                                    status: 'IN_STOCK'
+                                },
+                                size: 1,
+                                sort: 'modifiedAt,desc'
+                            },
+                            { body: 'json' }
+                        ).then(res => {
+                            saleBatches.value[index].empty = res.empty
+                        })
+                    })
+                }
+            })
+        } else {
+            batchId.value = res.value
+            return http.get('/saleBatch/get/' + batchId.value).then(res => {
+                batchInfo.value = {
+                    ...res.saleBatch,
+                    empty: false
                 }
                 http.post(
                     '/product/list',
                     {
                         query: {
-                            batchId: item.id,
+                            batchId: batchId.value,
                             status: 'IN_STOCK'
                         },
                         size: 1,
@@ -255,12 +305,53 @@ function getSaleBatch() {
                     },
                     { body: 'json' }
                 ).then(res => {
-                    saleBatches.value[index].empty = res.empty
+                    batchInfo.value.empty = res.empty
+                    getData(true)
                 })
             })
         }
     })
 }
+const { empty, size, loading, finished, list, getData } = useList('/product/list', () => {
+    if (batchStatus.value !== '抢购中' && batchId.value) {
+        return {
+            query: {
+                batchId: batchId.value,
+                status: 'IN_STOCK,SOLD_OUT'
+            },
+            sort: 'status,asc;delayTo,asc;sales,desc;'
+        }
+    } else {
+        return {
+            query: {
+                batchId: batchId.value,
+                status: 'IN_STOCK'
+            },
+            sort: 'delayTo,asc;sales,desc;'
+        }
+    }
+})
+const batchStatus = computed(() => {
+    let date1 = getYear(new Date()) + '/' + (getMonth(new Date()) + 1) + '/' + getDate(new Date())
+    let startDate = getUtcTime(new Date(date1 + ' ' + batchInfo.value.saleStart))
+    let endDate = getUtcTime(new Date(date1 + ' ' + batchInfo.value.saleEnd))
+    if (batchInfo.value && batchInfo.value.saleStart) {
+        if (isAfter(new Date(), startDate) && isBefore(new Date(), endDate) && !batchInfo.value.empty) {
+            return '抢购中'
+        } else if (isBefore(new Date(), startDate)) {
+            return formatTime(batchInfo.value.saleStart)
+        } else if (batchInfo.value.empty && isBefore(new Date(), endDate)) {
+            return '已抢光'
+        } else {
+            return formatTime(batchInfo.value.saleStart)
+        }
+    }
+    return ''
+})
+const listRef = ref(null)
+function handleScroll() {
+    listRef.value.check()
+}
 
 const recentWidthdraw = ref([])
 function getRecentWidthdraw() {
@@ -295,8 +386,8 @@ const recentNews = computed(() => {
 const refresh = () => {
     getRecentWidthdraw()
     getBanner()
-    getSaleBatch()
     getNews()
+    getSaleBatch()
 }
 
 const isVip = computed(() => {
@@ -814,4 +905,15 @@ ion-content {
         }
     }
 }
+.van-list {
+    padding: 8px 8px 8px;
+    .product {
+        margin: 8px;
+        background: var(--ion-color-step-50);
+        border-radius: 8px;
+        width: calc(50vw - 24px);
+        display: inline-block;
+        overflow: hidden;
+    }
+}
 </style>

src/views/ProductListPage.vue

@@ -120,7 +120,7 @@ function getBatch() {
         .get('/saleBatch/get/' + batchId)
         .then(res => {
             batchInfo.value = {
-                ...res,
+                ...res.saleBatch,
                 empty: false
             }