优化规格

src/views/home/components/goods.vue

@@ -33,12 +33,12 @@
         <el-button :icon="shopListType == 'text' ? 'PictureRounded' : 'PriceTag'"
             @click="changeShopListType"></el-button>
     </div>
-    <div class="shop_list" :class="{ img: shopListType == 'img' }">
+    <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)">
             <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"></el-image>
+                    <el-image :src="item.coverImg" class="el_img" fit="cover" lazy></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>
@@ -78,12 +78,13 @@ const skuModalRef = ref(null)
 
 const shopListType = ref('img')
 
+const categoryId = ref('')
 const categorys = ref([])
 const categorysActive = ref(0)
 
 const commdityName = ref('')
 
-const originalGoods = ref([])
+const loading = ref(false)
 const goodsList = ref([])
 
 const showPopover = ref(false)
@@ -140,16 +141,8 @@ function changeShopListType() {
 function changeCategory(item, index) {
     showPopover.value = false
     categorysActive.value = index
-    if (item.id) {
-        goodsList.value = []
-        originalGoods.value.map(val => {
-            if (val.categoryId == item.id) {
-                goodsList.value.push(val)
-            }
-        })
-    } else {
-        goodsList.value = [...originalGoods.value]
-    }
+    categoryId.value = item.id
+    productqueryCommodityInfoAjax()
 }
 
 // 查询分类信息
@@ -173,17 +166,19 @@ async function queryCategoryAjax() {
 // 查询商品信息
 async function productqueryCommodityInfoAjax() {
     try {
+        loading.value = true
         const res = await productqueryCommodityInfo({
             shopId: store.userInfo.shopId,
-            categoryId: categorys.value[categorysActive.value].id,
+            categoryId: categoryId.value,
             commdityName: commdityName.value,
             page: 1,
             pageSize: 1000,
             masterId: props.masterId
         })
-        originalGoods.value = res
         goodsList.value = res
+        loading.value = false
     } catch (error) {
+        loading.value = false
         console.log(error)
     }
 }