优化

src/components/skuModal.vue

@@ -1,14 +1,14 @@
 <template>
-    <el-dialog :title="goods.name" width="500" v-model="dialogVisible">
+    <el-dialog :title="goods.name" width="600" v-model="dialogVisible">
         <div class="header">选择规格</div>
         <div v-loading="loading">
-            <div class="row" v-for="(item, index) in goods.tbProductSpec.specList" :key="index">
+            <div class="row" v-for="(item, index) in goods.selectSpec" :key="index">
                 <div class="title">{{ item.name }}</div>
                 <div class="sku_wrap">
                     <!-- <div class="item" :class="{ active: val.active }" v-for="(val, i) in  item.value" :key="i"
                         @click="selectedSku(index, i)">{{ val.name }}</div> -->
-                    <el-button :plain="!val.active" type="primary" v-for="(val, i) in  item.value" :key="i"
-                        @click="selectedSku(index, i)">{{ val.name }}</el-button>
+                    <el-button :plain="!val.active" type="primary" v-for="(val, i) in  item.selectSpecResult
+" :key="i" @click="selectedSku(index, i)" class="btn">{{ val.name }}</el-button>
                 </div>
             </div>
         </div>
@@ -68,14 +68,14 @@ function submitSku() {
 
 // 选择规格
 function selectedSku(index, i) {
-    goods.value.tbProductSpec.specList[index].value.map(item => {
+    goods.value.selectSpec[index].selectSpecResult.map(item => {
         item.active = false
     })
-    if (goods.value.tbProductSpec.specList[index].value[i].active) {
-        goods.value.tbProductSpec.specList[index].value[i].active = false
+    if (goods.value.selectSpec[index].selectSpecResult[i].active) {
+        goods.value.selectSpec[index].selectSpecResult[i].active = false
         selectedSkuNum.value--
     } else {
-        goods.value.tbProductSpec.specList[index].value[i].active = true
+        goods.value.selectSpec[index].selectSpecResult[i].active = true
         selectedSkuNum.value++
     }
     selectedSuccess()
@@ -85,8 +85,8 @@ function selectedSku(index, i) {
 function selectedSuccess() {
     let num = 0
     let tag = []
-    goods.value.tbProductSpec.specList.map(item => {
-        item.value.map(val => {
+    goods.value.selectSpec.map(item => {
+        item.selectSpecResult.map(val => {
             if (val.active) {
                 num++
                 tag.push(val.name)
@@ -96,7 +96,7 @@ function selectedSuccess() {
         selectedSkuTag.value = tag.join(',')
     })
 
-    if (selectedSkuNum.value >= goods.value.tbProductSpec.specList.length) {
+    if (selectedSkuNum.value >= goods.value.selectSpec.length) {
         // 规格选完了
         queryProductSkuAjax()
     }
@@ -133,34 +133,33 @@ function show(item, t = 'shop') {
     goods.value = ""
     goods.value = item
     type.value = t
-    if (typeof goods.value.tbProductSpec.specList == 'string') {
-        goods.value.tbProductSpec.specList = JSON.parse(goods.value.tbProductSpec.specList)
-        goods.value.tbProductSpec.specList.map(item => {
-            let arr = []
-            item.value.map(val => {
-                switch (type.value) {
-                    case 'shop':
-                        arr.push({
-                            active: false,
-                            name: val
-                        })
-                        break;
-                    case 'cart':
-                        // 如果从购物车选择规格需要做选中效果
-                        const skus = goods.value.skuName.split(',')
-                        arr.push({
-                            active: !!skus.find(item => item === val),
-                            name: val
-                        })
-                        break;
+    goods.value.selectSpec = JSON.parse(goods.value.selectSpec)
+    goods.value.selectSpec.map(item => {
+        let arr = []
+        item.selectSpecResult.map(val => {
+            switch (type.value) {
+                case 'shop':
+                    arr.push({
+                        active: false,
+                        name: val
+                    })
+                    break;
+                case 'cart':
+                    // 如果从购物车选择规格需要做选中效果
+                    const skus = goods.value.skuName.split(',')
+                    arr.push({
+                        active: !!skus.find(item => item === val),
+                        name: val
+                    })
+                    break;
 
-                    default:
-                        break;
-                }
-            })
-            item.value = arr
+                default:
+                    break;
+            }
         })
-    }
+        item.selectSpecResult = arr
+    })
+    console.log(goods.value)
     selectedSuccess()
 }
 
@@ -185,7 +184,9 @@ defineExpose({
 
     .sku_wrap {
         display: flex;
-        padding: 14px 0;
+        padding: var(--el-font-size-base) 0;
+        flex-wrap: wrap;
+        gap: var(--el-font-size-base);
     }
 }