商品

src/views/a/index.vue

@@ -101,16 +101,21 @@
         </el-row>
       </el-col>
       <el-col :span="12">
-        <h1 style=" display: inline-block; margin-right: 200px; margin-left: 30px">{{ good.name }}</h1>
-        <h3 style="display: inline-block; color: red;">￥50</h3>
+        <h1 style=" display: inline-block; margin-right: 200px; margin-left: 30px">{{ good.name }}</h1>{{combinedResults}}
+        <h3 style="display: inline-block; color: red;">￥{{price}}</h3>
         <el-form ref="form" :model="form" label-width="80px" style="margin-top: 80px">
           <el-form-item :label="rule.name" v-for="(rule, index) in form.ruleList" :key="index">
-            <el-radio-group size="small" v-model="rule.selectedValue">
-              <el-radio v-for="item in rule.value" :key="item" :label="item">{{ item }}</el-radio>
+            <el-radio-group size="small" v-model="rule.selectedValue" @change="changeCheck(rule, $event)">
+              <el-radio v-for="item in rule.value"
+                        :key="item"
+                        :label="item"
+                        :value="item.value"
+              >{{ item }}</el-radio>
             </el-radio-group>
           </el-form-item>
-          <el-form-item label="规格2">
-            <el-input-number v-model="form.num" :min="1" :max="100" label="描述文字"></el-input-number>
+          <el-form-item label="购买数量">
+            <el-input-number v-model="form.num"  :min="1" :max="100" label="描述文字"></el-input-number>库存{{stock}}
+            <h3 style="color: red;">总价{{sumPrice}}</h3>
           </el-form-item>
           <el-form-item>
             <el-button type="primary" @click="onSubmit">加入购物车</el-button>
@@ -154,7 +159,6 @@ export default {
   computed: {},
   data() {
     return {
-      names:"",
       /*图片*/
       imageList: [],
       /*品牌信息*/
@@ -171,7 +175,7 @@ export default {
       //规格表单
       form: {
         ruleList: [],
-        selectedValue: 1
+        num:1
       },
       ruleValueList: [],
       /*国歌表单*/
@@ -181,7 +185,18 @@ export default {
         attributeList: []
       },
       /*商品详情*/
-      goodDetail: []
+      goodDetail: [],
+      /*监控选中的值*/
+      names:"",
+      // 用于存储前一个选中的 rule 和它的 value
+      previousRule: null,
+      previousValue: null,
+      // 用于存储组合后的结果
+      combinedResults: "",
+      sku:[],
+      price:0,
+      stock:0,
+      sumPrice:0,
     }
   },
   created() {
@@ -189,13 +204,45 @@ export default {
     this.details(id)
   },
   watch:{
-    "names":{
+    "form.num":{
       handler(val){
-        console.log(val)
-      }
+        this.stock=this.stock-1
+        this.sumPrice=this.sumPrice+this.price
       }
     },
+  },
   methods: {
+    changeCheck(rule, value){
+      //this.form.num=1
+      //console.log(checkValue)
+      console.log(rule.selectedValue)
+
+      this.combinedResults=""
+      if (this.previousValue !== null) {
+        // 组合前一个值和当前值，并添加到结果数组中
+        const combined = `${this.previousValue}${value}`;
+        this.combinedResults+=combined
+        console.log(this.combinedResults); // 打印组合后的结果
+
+        // 重置前一个选中的 rule 和 value
+        this.previousRule = null;
+        this.previousValue = null;
+      } else {
+        // 如果没有前一个值，只存储当前选中的 rule 和 value
+        this.previousRule = rule;
+        this.previousValue = value;
+      }
+      this.sku.forEach(
+        sku=>{
+          if(this.combinedResults===sku.sku){
+            this.price=sku.price
+            this.sumPrice=sku.price
+            this.stock=sku.stock
+          }
+        }
+      )
+
+    },
     /*立即购买按钮*/
     onSubmit() {
 
@@ -209,14 +256,15 @@ export default {
           this.good.name = res.data.product.name
           this.good.carouselImages = res.data.product.carouselImages
           this.imageList.push(res.data.product.carouselImages)
+          this.sku=res.data.projectSkuInfo
           let e1=[]
+
           res.data.ruleList.forEach(
             rule=>{
-              e1.push(
-                {id:rule.id,name:rule.name,value:rule.value}
-              )
+              e1.push({id:rule.id,name:rule.name,value:rule.value})
             }
           )
+
           console.log(e1)
           this.form.ruleList =e1
             this.categoryCommonElement = res.data.categoryCommonElementResp

src/views/product/productInfo/index.vue

@@ -176,7 +176,9 @@
                   reserve-keyword
                   placeholder="请输入关键词"
                   :remote-method="remoteSearchBrandList"
-                  :loading="loading">
+                  :loading="loading"
+                 clearable
+                >
                   <el-option
                     v-for="brand in brandList"
                     :key="brand.id"
@@ -254,6 +256,7 @@
                   <span v-if="title.prop.indexOf('prop') >-1 ">{{ scope.row[title.prop] }}</span>
                   <el-input-number v-else-if="['stock','price'].indexOf(title.prop) > -1"
                                    v-model="scope.row[title.prop]" :step="0.1" :max="10000"></el-input-number>
+
                   <div v-else-if="['image'].indexOf(title.prop) > -1" style="width: 30px; height: 30px;">
                     <image-upload v-model="scope.row[title.prop]"
                                   :limit="1"
@@ -482,7 +485,7 @@ export default {
         mianType:'',
         parentType:'',
         type:'',
-        specification:"",
+        specification:[],
         groupList:"",
         attributeList:"",
         persionList:"",
@@ -564,6 +567,11 @@ export default {
             this.categoryCommonElement.templateAttributeGroupList = templateAttributeGroupList;
             this.categoryCommonElement.templateAttributeList = templateAttributeList;
             this.categoryCommonElement.attributeList = attributeList;
+            console.log(attributeList)
+            let e=[]
+            e=attributeList.filter(attribute=>attribute.value!=null)
+            console.log(e)
+            this.attributeCheckedList=e
           })
         }
       }
@@ -780,9 +788,19 @@ export default {
       this.reset();
       const id = row.id || this.ids
       getInfo(id).then(response => {
-        console.log(this.categoryCommonElement)
+        // let a=[]
+        // response.data.specification.forEach(
+        //   specification=>{
+        //     a.push(
+        //       {image:specification.image,stock:specification.stock,price:specification.price}
+        //     )
+        //   }
+        // )
+        // this.skuList=a
+        // console.log(this.skuList)
         this.test.id=id
         this.form = response.data;
+        //this.oneSettingValue=response.data.specificationList
         this.oneSettingValue=response.data.specification
         this.changeRule(response.data.ruleId)
         this.onSubmit()
@@ -808,10 +826,12 @@ export default {
             });
           } else {
             this.selectAttribute()
+            console.log(this.form)
             addInfo(this.form).then(response => {
               this.$modal.msgSuccess("新增成功");
               this.open = false;
               this.getList();
+              this.skuList=[]
             });
           }
         }
@@ -841,7 +861,7 @@ export default {
         }
       )
       this.form.sku=this.skuList1
-      this.form.specification=this.oneSettingValue
+      this.form.specification=this.skuList
       this.form.groupList=this.a
       this.form.attributeList=this.b
       this.form.persionList=this.c