商品规格选择

src/components/Editor/index.vue

@@ -179,7 +179,7 @@ export default {
     },
     handleUploadSuccess(res, file) {
       // 如果上传成功
-      if (res.data.code == 200) {
+      if (res.code == 200) {
         // 获取富文本组件实例
         let quill = this.Quill;
         // 获取光标所在位置

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

@@ -9,8 +9,8 @@
     <el-row :gutter="20" style="margin-top: 20px">
       <el-col :span="12">
         <el-carousel trigger="click" height="400px">
-          <el-carousel-item v-for="item in 4" :key="item">
+          <el-carousel-item v-for="item in carouselImages" :key="item">
-            <h3 class="small">{{ item }}</h3>
+            <el-image :src="item" style="height: 100%; width: 100%"/>
           </el-carousel-item>
         </el-carousel>
         <div style="margin-top: 20px;">
@@ -18,9 +18,7 @@
             <el-col :span="6">
               <div>
                 <el-statistic
-                  group-separator=","
+                  :value="123"
-                  :precision="2"
-                  :value="value2"
                   :title="title"
                 ></el-statistic>
               </div>
@@ -29,7 +27,7 @@
               <div>
                 <el-statistic title="商品评价">
                   <template slot="formatter">
-                    456/2
+                    456
                   </template>
                 </el-statistic>
               </div>
@@ -38,32 +36,19 @@
               <div>
                 <el-statistic
                   group-separator=","
-                  :precision="2"
+                  :precision="0"
                   decimal-separator="."
-                  :value="value1"
+                  :value="123"
                   title="收藏人气"
                 >
-                  <template slot="prefix">
-                    <i class="el-icon-s-flag" style="color: red"></i>
-                  </template>
-                  <template slot="suffix">
-                    <i class="el-icon-s-flag" style="color: blue"></i>
-                  </template>
                 </el-statistic>
               </div>
             </el-col>
             <el-col :span="6">
               <div>
-                <el-statistic :value="like ? 521 : 520" title="品牌信息">
+                <el-statistic title="品牌信息">
-                  <template slot="suffix">
+                  <template slot="formatter">
-              <span @click="like = !like" class="like">
+                    {{projectDetail.brandInfo.nam}}
-                <i
-                  class="el-icon-star-on"
-                  style="color:red"
-                  v-show="!!like"
-                ></i>
-                <i class="el-icon-star-off" v-show="!like"></i>
-              </span>
                   </template>
                 </el-statistic>
               </div>
@@ -73,19 +58,21 @@
       </el-col>
       <el-col :span="12">
           <h1>商品名称</h1>
-          <h3>商品规格（内存-储存-颜色）</h3>
+          <h3>商品规格（{{checkSkuInfo.sku}}）</h3>
-          <h2 style="color: red">￥125</h2>
+          <h2 style="color: red">￥{{checkSkuInfo.price}}</h2>
         <el-form ref="form" :model="form" label-width="80px" style="margin-top: 110px">
           <el-form-item v-for="(ruleAttr, index) in projectDetail.ruleAttrModelList" :label="ruleAttr.name">
-            <el-radio-group v-for="value in ruleAttr.valueList" v-model="form['rule'+index]">
+<!--            <el-radio-group v-model="form['rule'+index]" @change="selectRuleSku">
-              <el-radio :label="value" border>{{value}}</el-radio>
+            </el-radio-group>-->
-            </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="规格2">
+          <el-form-item label="数量">
             <el-input-number v-model="form.num" :min="1" :max="10" label="描述文字"></el-input-number>
           </el-form-item>
           <el-form-item>
-            <el-button type="primary" @click="onSubmit">加入购物车</el-button>
+            <el-button type="primary">加入购物车</el-button>
             <el-button>立即购买</el-button>
           </el-form-item>
         </el-form>
@@ -96,14 +83,9 @@
         <div slot="header" class="clearfix">
           <span>商品详情</span>
         </div>
-        <el-descriptions title="分组1" :column="1">
+        <el-descriptions v-for="attributeGroup in projectDetail.attributeGroupList" :title="attributeGroup.groupName" :column="1">
-          <el-descriptions-item label="用户名">kooriookami</el-descriptions-item>
+          <el-descriptions-item v-for="attribute in attributeGroup.attributeList"
-          <el-descriptions-item label="手机号">18100000000</el-descriptions-item>
+                                :label="attribute.name">{{attributeMap[attribute.id]}}</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">
           <el-descriptions-item label="用户名">kooriookami</el-descriptions-item>
@@ -111,7 +93,7 @@
           <el-descriptions-item label="居住地">苏州市</el-descriptions-item>
         </el-descriptions>
 
-        <editor v-model="editorValue" :read-only="true" >
+        <editor v-model="projectDetail.projectInfo.introduction" :read-only="true" >
 
         </editor>
       </el-card>
@@ -126,29 +108,66 @@ export default {
   name: "productDetail",
   data() {
     return {
-      breadcrumbList: [
-        "服装",
-        "外衣",
-        "女式超柔软拉毛运动开衫"
-      ],
       like: true,
-      value1: 4154.564,
+      value1: 415,
       value2: 1314,
       title: "销量人气",
       form: {
         num: 1
       },
-      editorValue: "awejfoiajovhahrfhaowiejfoawijfeoiawjefoawjjogihao",
+      projectDetail: {
-      projectDetail: {}
+        projectInfo: {
+          name: ""
+        },
+        brandInfo: {
+          nam: ""
+        }
+      },
+      checkSkuInfo: {
+        price: 0.00
+      },
+      carouselImages: [],
+      attributeMap: {}
     }
   },
   created() {
     this.initProjectDetailInfo();
   },
   methods: {
+    initSku(){
+      let sku = this.projectDetail.projectSkuInfoList[0]["sku"];
+      let skuArr = sku.split("-");
+      skuArr.forEach((rule, index) => {
+        this.form['rule'+index] = rule;
+      })
+      this.selectRuleSku();
+    },
+    selectRuleSku(){
+      let ruleSize = this.projectDetail.ruleAttrModelList.length;
+      let sku = "";
+      for (let index = 0; ; index++) {
+        sku += this.form['rule'+index];
+        if (index + 1 === ruleSize){
+          break
+        }
+        sku += "-";
+      }
+      this.checkSkuInfo = this.projectDetail.projectSkuInfoList.find(skuInfo => skuInfo.sku === sku)
+    },
     initProjectDetailInfo(){
-      getDetailInfo(2).then(response => {
+      getDetailInfo(3).then(response => {
         this.projectDetail = response.data;
+        this.projectDetail.productAttributeInfoList.map(productAttributeInfo => {
+          let key = productAttributeInfo.attributeId;
+          this.attributeMap[key] = productAttributeInfo["value"]
+        })
+        console.log(this.attributeMap)
+        let ruleAttrLength = this.projectDetail.ruleAttrModelList.length;
+        for (let index = 0; index < ruleAttrLength; index++) {
+          this.form["rule"+index] = null;
+        }
+        this.carouselImages = this.projectDetail.projectInfo.carouselImages.split(",")
+        this.initSku();
       })
     }
   }