优化

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({