优化

src/components/skuModal.vue

@@ -1,25 +1,11 @@
 <template>
-    <el-dialog title="选择规格" width="800" v-model="dialogVisible">
+    <el-dialog :title="goods.name" width="800" v-model="dialogVisible">
         <div class="header">选择规格</div>
-        <div class="row">
-            <div class="title">规格</div>
+        <div class="row" v-for="(item, index) in goods.tbProductSpec.specList" :key="index">
+            <div class="title">{{ item.name }}</div>
             <div class="sku_wrap">
-                <div class="item">默认（1人份）</div>
-            </div>
-        </div>
-        <div class="row">
-            <div class="title">温度</div>
-            <div class="sku_wrap">
-                <div class="item">冰</div>
-                <div class="item">热</div>
-            </div>
-        </div>
-        <div class="row">
-            <div class="title">糖度</div>
-            <div class="sku_wrap">
-                <div class="item">不另外加糖</div>
-                <div class="item">半糖</div>
-                <div class="item">标准糖</div>
+                <div class="item" :class="{ active: val.selected }" v-for="(val, i) in  item.value" :key="i"
+                    @click="selectedSku(index, i)">{{ val }}</div>
             </div>
         </div>
         <div class="footer">
@@ -36,9 +22,25 @@
 <script setup>
 import { ref, defineExpose } from 'vue'
 const dialogVisible = ref(false)
+const goods = ref({})
 
-function show() {
+// 选择规格
+function selectedSku(index, i) {
+    goods.value.tbProductSpec.specList[index].value[i].selected = true
+
+    console.log(goods.value.tbProductSpec.specList[index].val[i])
+}
+
+// 显示规格
+function show(item) {
     dialogVisible.value = true
+    goods.value = item
+    goods.value.tbProductSpec.specList = JSON.parse(goods.value.tbProductSpec.specList)
+    goods.value.tbProductSpec.specList.map(item => {
+        item.selected = false
+    })
+
+    console.log(goods.value)
 }
 
 defineExpose({

src/views/home/components/goods.vue

@@ -3,7 +3,7 @@
     <div class="header">
         <div class="menus">
             <div class="item" :class="{ active: categorysActive == index }" v-for="(item, index) in categorys"
-                :key="item.id" @click="categorysActive = index">
+                :key="item.id" @click="changeCategory(item, index)">
                 <el-text>{{ item.name }}</el-text>
             </div>
         </div>
@@ -20,7 +20,7 @@
         <el-button :icon="shopListType == 'text' ? 'PictureRounded' : 'PriceTag'" @click="changeShopListType"></el-button>
     </div>
     <div class="shop_list" :class="{ img: shopListType == 'img' }">
-        <div class="item_wrap" v-for="item in shopList" :key="item.id" @click="showSkuHandle">
+        <div class="item_wrap" v-for="item in goodsList" :key="item.id" @click="showSkuHandle(item)">
             <div class="item">
                 <div class="dot">2</div>
                 <div class="cover" v-if="shopListType == 'img'">
@@ -48,18 +48,23 @@ const store = useUser();
 
 const skuModalRef = ref(null)
 
-const shopListType = ref('text')
+const shopListType = ref('img')
 
 const categorys = ref([])
 const categorysActive = ref(0)
 
 const commdityName = ref('')
 
-const shopList = ref([])
+const originalGoods = ref([])
+const goodsList = ref([])
 
 // 显示sku
-function showSkuHandle() {
-    skuModalRef.value.show()
+function showSkuHandle(item) {
+    if (item.typeEnum == 'sku') {
+        skuModalRef.value.show(item)
+    } else {
+
+    }
 }
 
 // 切换商品显示模式
@@ -71,6 +76,13 @@ function changeShopListType() {
     }
 }
 
+// 切换分类
+function changeCategory(item, index) {
+    categorysActive.value = index
+    // goodsList.value = originalGoods.value.find(val => val.id == item.categoryId)
+    console.log(originalGoods.value.find(val => val.id == item.categoryId))
+}
+
 // 查询分类信息
 async function queryCategoryAjax() {
     try {
@@ -99,7 +111,8 @@ async function productqueryCommodityInfoAjax() {
             page: 1,
             pageSize: 1000
         })
-        shopList.value = res
+        originalGoods.value = res
+        goodsList.value = res
     } catch (error) {
         console.log(error)
     }