哭哭哭

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="img in carouseImages" :key="img">
-            <h3 class="small">{{ item }}</h3>
+            <el-image :src="img" style="width: 100%; height: 100%;"></el-image>
           </el-carousel-item>
         </el-carousel>
         <div style="margin-top: 20px;">
@@ -54,8 +54,9 @@
             </el-col>
             <el-col :span="6">
               <div>
-                <el-statistic :value="like ? 521 : 520" title="品牌信息">
+                <el-statistic title="品牌信息">
                   <template slot="suffix">
+                    {{projectDetail.brandInfo.nam}}
               <span @click="like = !like" class="like">
                 <i
                   class="el-icon-star-on"
@@ -64,7 +65,9 @@
                 ></i>
                 <i class="el-icon-star-off" v-show="!like"></i>
               </span>
+
                   </template>
+
                 </el-statistic>
               </div>
             </el-col>
@@ -72,17 +75,17 @@
         </div>
       </el-col>
       <el-col :span="12">
-          <h1>商品名称</h1>
+          <h1>{{projectDetail.projectInfo.name}}</h1>
-          <h3>商品规格（内存-储存-颜色）</h3>
+          <h3>商品规格:{{abc}}</h3>
-          <h2 style="color: red">￥125</h2>
+          <h2 style="color: red">{{formm.price}}</h2>
-        <el-form ref="form" :model="form" label-width="80px" style="margin-top: 110px">
+        <el-form ref="form" :model="formm" 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-for="value in ruleAttr.valueList" v-model="formm['rule'+index]" @change="changeSku">
               <el-radio :label="value" border>{{value}}</el-radio>
             </el-radio-group>
           </el-form-item>
           <el-form-item label="规格2">
-            <el-input-number v-model="form.num" :min="1" :max="10" label="描述文字"></el-input-number>
+            <el-input-number v-model="formm.num" :min="1" :max="10" label="描述文字"></el-input-number>
           </el-form-item>
           <el-form-item>
             <el-button type="primary" @click="onSubmit">加入购物车</el-button>
@@ -96,19 +99,16 @@
         <div slot="header" class="clearfix">
           <span>商品详情</span>
         </div>
-        <el-descriptions title="分组1" :column="1">
+        <el-descriptions :title="attrGroup.groupName" v-for="attrGroup in projectDetail.attributeGroupList" :column="1">
-          <el-descriptions-item label="用户名">kooriookami</el-descriptions-item>
+          <el-descriptions-item v-for="attr in attrGroup.attributeList"
-          <el-descriptions-item label="手机号">18100000000</el-descriptions-item>
+                                :label="attr.name">{{attrMap[attr.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>
+          <el-descriptions-item v-for="ott in otherAttr" :label="ott.name">{{ott.value}}</el-descriptions-item>
-          <el-descriptions-item label="手机号">18100000000</el-descriptions-item>
-          <el-descriptions-item label="居住地">苏州市</el-descriptions-item>
         </el-descriptions>
 
         <editor v-model="editorValue" :read-only="true" >
@@ -135,11 +135,17 @@ export default {
       value1: 4154.564,
       value2: 1314,
       title: "销量人气",
-      form: {
+      formm:{
-        num: 1
+        num: 1,
+        price: 0
       },
+      form: [],
       editorValue: "awejfoiajovhahrfhaowiejfoawijfeoiawjefoawjjogihao",
-      projectDetail: {}
+      projectDetail: {},
+      abc: "",
+      attrMap: {},
+      otherAttr: [],
+      carouseImages: []
     }
   },
   created() {
@@ -147,9 +153,44 @@ export default {
   },
   methods: {
     initProjectDetailInfo(){
-      getDetailInfo(2).then(response => {
+      getDetailInfo(10).then(response => {
+        console.log("Response",response)
         this.projectDetail = response.data;
+        for (let i = 0; i < this.projectDetail.productAttributeInfoList.length; i++) {
+          this.attrMap[this.projectDetail.productAttributeInfoList[i].attributeId] = this.projectDetail.productAttributeInfoList[i].value
+          this.projectDetail.attributeGroupList.forEach(attrGroup => {
+            let map = attrGroup.attributeList.map(attrs => attrs.id);
+            if (!map.includes(this.projectDetail.productAttributeInfoList[i].attributeId)){
+              this.otherAttr.push(this.projectDetail.productAttributeInfoList[i])
+            }
+          })
+        }
+        console.log("otherAttr",this.otherAttr)
+        this.initSku()
+        this.carouseImages = this.projectDetail.projectInfo.carouselImages.split(",")
+
       })
+    },
+    changeSku() {
+      this.abc=""
+      for (let i = 0; i < this.projectDetail.ruleAttrModelList.length; i++) {
+        this.abc+=this.formm["rule"+i]+"-"
+      }
+      this.abc = this.abc.substring(0, this.abc.length - 1);
+      this.projectDetail.projectSkuInfoList.forEach(projectSku => {
+        if (projectSku.sku == this.abc){
+          this.formm.price = projectSku.price
+        }
+      })
+    },
+    initSku(){
+      for (let i = 0; i < this.projectDetail.ruleAttrModelList.length; i++) {
+        this.formm["rule"+i] = this.projectDetail.ruleAttrModelList[i].valueList[0]
+      }
+      this.changeSku()
+    },
+    onSubmit() {
+
     }
   }
 }

vue.config.js

@@ -35,7 +35,7 @@ module.exports = {
     proxy: {
       // detail: https://cli.vuejs.org/config/#devserver-proxy
       [process.env.VUE_APP_BASE_API]: {
-        target: `http://10.1.123.97:8080`,
+        target: `http://localhost:8080`,
         changeOrigin: true,
         pathRewrite: {
           ['^' + process.env.VUE_APP_BASE_API]: ''