商品详情页面 完善1

src/views/product/info/detail/index.vue

@@ -71,7 +71,8 @@
        </el-col>
        <el-col :span="12">
          {{receivedShop.projectInfo.name}}
-             <h2 style="color: red">125</h2>
+         商品规格 {{checkSkuInfo.sku}}
+             <h2 style="color: red">{{ checkSkuInfo.price }}</h2>
            <el-card shadow="hover" style="width: 100%;">
              <div style="width: 100%; display: inline-block; ">
                <el-statistic :value="deadline2" time-indices title="🎉商品降价🎉">
@@ -82,10 +83,13 @@
              </div>
            </el-card>
          <el-form ref="form" :model="form" label-width="80" style="margin-top: 30px">
-           <el-form-item v-for="(ruleAttr,index) in receivedShop.ruleAttrModelList":label="ruleAttr.name">
-             <el-radio-group  v-model="form['rule'+index]">
-               <el-radio v-for="value in ruleAttr.valueList" :label="value" border>{{value}}</el-radio>
-             </el-radio-group>
+           <el-form-item v-for="(ruleAttr,index) in receivedShop.ruleAttrAddModelList":label="ruleAttr.name">
+<!--             <el-radio-group  v-model="form['rule'+index]" @change="selectRuleSku">-->
+<!--               <el-radio v-for="value in ruleAttr.valueList" :label="value" border>{{value}}</el-radio>-->
+<!--             </el-radio-group>-->
+             <el-radio v-model="form['rule'+index]" @change="selectRuleSku"
+                       v-for="value in ruleAttr.valueList"
+                       :label="value" :key="value" :value="value" border>{{value}}</el-radio>
            </el-form-item>
            <el-form-item label="数量">
              <el-input-number v-model="form.num"  :min="1" :max="10" label="描述文字"></el-input-number>
@@ -107,9 +111,6 @@
            <el-descriptions-item label="用户名">kooriookami</el-descriptions-item>
            <el-descriptions-item label="手机号">18100000000</el-descriptions-item>
            <el-descriptions-item label="居住地">苏州市</el-descriptions-item>
-           <el-descriptions-item label="备注">
-             <el-tag size="small">学校</el-tag>
-           </el-descriptions-item>
            <el-descriptions-item label="联系地址">江苏省苏州市吴中区吴中大道 1188 号</el-descriptions-item>
          </el-descriptions>
            <el-descriptions title="其他属性" :column="1">
@@ -145,21 +146,30 @@ export default {
       title: "增长人数",
       form: {
         num: 1,
-        rule0: '', // 第一个规格的默认值
-        rule1: '', // 第二个规格的默认值
-        rule2: '', // 第三个规格的默认值
+        price: 0
       },
       shopData: {},
       receivedShop: {},
       editorValue: "阿萨德刚",
-      deadline2: Date.now() + 10 * 60 * 60 ,
       // 商品轮播图
-      Products: []
+      Products: [],
+      checkSkuInfo: {
+        price : 0.00
+      },
+      deadline2 : Date.now() +  1 * 10000 // 10小时 * 60分钟/小时 * 60秒/分钟 * 1000毫秒/秒
     }
 
   },
   created() {
     this.parseShopFromRoute();
+    // 设置定时器
+    const timerId = setTimeout(() => {
+      // 时间到了，调用 hilarity 函数
+      this.hilarity();
+      clearTimeout(timerId);
+    }, this.deadline2 - Date.now());
+
+
   },
   methods:{
     hilarity() {
@@ -169,6 +179,27 @@ export default {
         duration: 0,
       });
     },
+    initSku(){
+        let sku =this.receivedShop.projectSkuInfoList[0]['sku'];
+        let skuArr =sku.split("-");
+        skuArr.forEach((rule,index) => {
+          this.form['rule'+index] = rule
+        })
+      this.selectRuleSku()
+    },
+    selectRuleSku(){
+      let ruleSize =this.receivedShop.ruleAttrAddModelList.length
+      let sku = "";
+      for (let index = 0 ; ;index++){
+        sku +=this.form['rule'+index]
+         if (index+1 === ruleSize){
+           break
+         }
+         sku += "-";
+      }
+      this.checkSkuInfo= this.receivedShop.projectSkuInfoList.find(skuInfo => skuInfo.sku === sku)
+      console.log("sdf",this.checkSkuInfo)
+    },
     parseShopFromRoute() {
       // 尝试解析shop查询参
         this.receivedShop = this.$route.query.shop;
@@ -178,7 +209,16 @@ export default {
       let ccc = this.receivedShop.projectInfo.carouselImages.split(',')
       this.Products.push(...ccc)
 
+     let ruleAttrLength = this.receivedShop.ruleAttrAddModelList.length;
+      console.log("hieng",ruleAttrLength)
+     for (let index = 0 ;index < ruleAttrLength ;index++){
+       this.form["rule"+index] = null
      }
+     this.initSku()
+
+    },
+  },
+  beforeDestroy() {
   }
 }
 </script>