优化首页商品卡顿

2024-04-30 14:20:45 +08:00
parent e26049593f
commit 43ccf82177
3 changed files with 204 additions and 100 deletions
--- a/package.json
+++ b/package.json
@@ -18,6 +18,7 @@
    "element-plus": "^2.4.3",
    "lodash": "^4.17.21",
    "pinia": "^2.1.7",
+    "swiper": "^11.1.1",
    "vue": "^3.3.8",
    "vue-router": "^4.2.5"
  },
--- a/src/views/home/components/goods.vue
+++ b/src/views/home/components/goods.vue
@@ -34,11 +34,13 @@
            @click="changeShopListType"></el-button>
    </div>
    <div class="shop_list" :class="{ img: shopListType == 'img' }" v-loading="loading">
-        <div class="item_wrap" v-for="item in goodsList" :key="item.id" @click="showSkuHandle(item)">
+        <swiper class="swiper_box" direction="vertical" @slideChange="onSlideChange">
+            <swiper-slide class="slide_item" v-for="(goods, index) in goodsList" :key="index">
+                <div class="item_wrap" v-for="item in goods" :key="item.id" @click="showSkuHandle(item)">
                    <div class="item">
                        <div class="dot" v-if="item.orderCount">{{ item.orderCount }}</div>
                        <div class="cover" v-if="shopListType == 'img'">
-                    <el-image :src="item.coverImg" class="el_img" fit="cover" lazy></el-image>
+                            <el-image :src="item.coverImg" class="el_img" fit="cover"></el-image>
                        </div>
                        <div class="name"><el-text line-clamp="2">{{ item.name }}</el-text></div>
                        <div class="item_empty" v-if="shopListType == 'text'"></div>
@@ -47,6 +49,8 @@
                        </div>
                    </div>
                </div>
+            </swiper-slide>
+        </swiper>
    </div>
    <div class="empty">
        <el-empty description="空空如也~" v-if="!goodsList.length" />
@@ -64,6 +68,11 @@ import skuModal from '@/components/skuModal.vue'

 import { queryCategory, productqueryCommodityInfo, queryProductSku } from '@/api/product'
 import { useUser } from "@/store/user.js"
+
+import { Swiper, SwiperSlide } from 'swiper/vue'
+import "swiper/swiper-bundle.css";
+
+
 const store = useUser()

 const props = defineProps({
@@ -77,7 +86,7 @@ const emit = defineEmits(['success'])

 const skuModalRef = ref(null)

-const shopListType = ref('text')
+const shopListType = ref('img')

 const categorys = ref([])
 const categorysActive = ref(0)
@@ -86,11 +95,24 @@ const commdityName = ref('')

 const loading = ref(false)
 const goodsList = ref([])
+const goodsPage = ref(1)
+const goodsPageSize = ref(12)
+const finish = ref(false) // 是否加载完
+const currentGoodsIndex = ref(0)
+const loopMax = ref(0)
+const loopTimer = ref(null)

 const showPopover = ref(false)

 const inputChange = _.debounce(function () {
-    productqueryCommodityInfoAjax()
+    goodsList.value = []
+    goodsPage.value = 1
+    finish.value = false
+    currentGoodsIndex.value = 0
+    loopMax.value = 0
+    loopTimer.value = null
+
+    updataGoods()
 }, 500)

 // 确认选择规格回调
@@ -156,7 +178,14 @@ function changeCategory(index) {

    useStorage.set('categorysActive', index)

-    productqueryCommodityInfoAjax()
+    goodsList.value = []
+    goodsPage.value = 1
+    finish.value = false
+    currentGoodsIndex.value = 0
+    loopMax.value = 0
+    loopTimer.value = null
+
+    updataGoods()
 }

 // 从本地更新已选择的选项
@@ -191,37 +220,104 @@ async function queryCategoryAjax() {
 // 查询商品信息
 async function productqueryCommodityInfoAjax() {
    try {
-        loading.value = true
+        // loading.value = true
        const res = await productqueryCommodityInfo({
            shopId: store.userInfo.shopId,
            categoryId: categorys.value[categorysActive.value].id,
            commdityName: commdityName.value,
-            page: 1,
-            pageSize: 500,
+            page: goodsPage.value,
+            pageSize: goodsPageSize.value,
            masterId: props.masterId
        })
-        goodsList.value = res
-        loading.value = false
+        if (res.list.length < goodsPageSize.value) {
+            finish.value = true
+        }
+        // loading.value = false
+
+        if (res.total > (goodsPageSize.value * 2)) {
+            // 启动循环任务
+            loopMax.value = parseInt(res.total / goodsPageSize.value)
+            loopGetGoods()
+        }
+        return res.list
    } catch (error) {
        loading.value = false
        console.log(error)
    }
 }

+// 循环获取商品
+function loopGetGoods() {
+    loopTimer.value = setInterval(async () => {
+        goodsPage.value++
+        if (goodsPage.value > loopMax.value) {
+            clearInterval(loopTimer.value)
+            loopTimer.value = null
+            return
+        }
+        const res = await productqueryCommodityInfoAjax()
+        goodsList.value.push(res)
+    }, 2000)
+}
+
 // 更新商品数据
 async function updateData() {
    localUpdateShopListType()
    await updateCategoryActive()
    await queryCategoryAjax()
-    await productqueryCommodityInfoAjax()
+    updataGoods()
 }

+async function updataGoods() {
+    if (!goodsList.value.length) {
+        const res = await productqueryCommodityInfoAjax()
+        goodsList.value.push(res)
+
+        if (res.length >= goodsPageSize.value) {
+            goodsPage.value++
+            const res2 = await productqueryCommodityInfoAjax()
+            goodsList.value.push(res2)
+        }
+    } else {
+        goodsPage.value = currentGoodsIndex.value + 1
+        goodsList.value[currentGoodsIndex.value] = await productqueryCommodityInfoAjax()
+    }
+}
+
+// 轮播图开始滑动
+const onSlideChange = _.debounce(async function (e) {
+    if (e.activeIndex == e.previousIndex || finish.value) return
+    if (e.activeIndex > e.previousIndex) {
+        // console.log('向下滑动');
+        goodsPage.value++
+        const res = await productqueryCommodityInfoAjax()
+        goodsList.value.push(res)
+        // goodsList.value.shift()
+    } else {
+        // console.log('向上滑动');
+        // goodsPage.value--
+        // const res = await productqueryCommodityInfoAjax()
+        // goodsList.value.unshift(res)
+        // goodsList.value.pop()
+    }
+    currentGoodsIndex.value = e.activeIndex
+}, 500)
+
 defineExpose({
    updateData
 })
 </script>

 <style scoped lang="scss">
+.swiper_box {
+    height: 100%;
+
+    .slide_item {
+        width: 100%;
+        height: 100%;
+    }
+}
+
 .loading_wrap {
    display: flex;
    justify-content: center;
@@ -325,10 +421,11 @@ defineExpose({
 }

 .shop_list {
-    max-height: calc(100vh - 40px - 80px - 40px);
-    overflow-y: auto;
-    display: flex;
-    flex-wrap: wrap;
+    // max-height: calc(100vh - 40px - 80px - 40px);
+    height: calc(100vh - 40px - 80px - 28px);
+    // overflow-y: auto;
+    // display: flex;
+    // flex-wrap: wrap;
    padding: 0 10px;

    &.img {
@@ -338,11 +435,14 @@ defineExpose({
    }

    .item_wrap {
+        float: left;
        width: 20%;
+        height: 33.333%;
        padding: 0 5px;
        padding-bottom: 10px;

        .item {
+            height: 100%;
            border: 1px solid #ececec;
            border-radius: 10px;
            overflow: hidden;
@@ -366,7 +466,7 @@ defineExpose({

            .cover {
                width: 100%;
-                padding-bottom: 100%;
+                height: 60%;
                position: relative;

                .el_img {
@@ -381,8 +481,10 @@ defineExpose({

            .name {
                padding: 0 10px;
-                height: 40px;
-                margin-top: 20px;
+                height: 20%;
+                display: flex;
+                align-items: center;
+                // margin-top: 20px;

                span {
                    font-weight: bold;
@@ -394,6 +496,7 @@ defineExpose({
            }

            .price {
+                height: 20%;
                padding: 6px 10px;
                background-color: var(--primary-color);

--- a/vite.config.js
+++ b/vite.config.js
@@ -9,8 +9,8 @@ export default defineConfig({
  server: {
    proxy: {
      '/api': {
-        target: 'https://cashierclient.sxczgkj.cn/cashier-client', // 线上
-        // target: 'http://192.168.2.27:10587/cashier-client', // 国成
+        // target: 'https://cashierclient.sxczgkj.cn/cashier-client', // 线上
+        target: 'http://192.168.2.116:10587/cashier-client', // 国成
        // target: 'http://192.168.2.128:10587/cashier-client',
        changeOrigin: true,
        rewrite: (path) => path.replace(/^\/api/, '')