商品详情页面 2.0

src/router/index.js

@@ -80,17 +80,17 @@ export const constantRoutes = [
     redirect: 'product-detail',
     children: [
       {
-        path: 'product-detail',
+        path: 'product-detail/:detailId(\\d+)',
-        component: () => import('@/views/product/shop/index'),
+        component: () => import('@/views/product/info/detail/index'),
         name: 'ShopProduct',
         meta: {title: '商品详情', icon: 'dashboard', affix: true}
       }
     ]
   },
-  {
+  // {
-    path: '/gb',
+  //   path: '/gb',
-    component: detail
+  //   component: detail
-  },
+  // },
   {
     path: '/user',
     component: Layout,

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

@@ -92,47 +92,57 @@
                        :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>
+             <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" >加入购物车</el-button>
            <el-button>立即购买</el-button>
          </el-form-item>
          </el-form>
-
+      总价格{{num}}
        </el-col>
      </el-row>
      <el-row style="margin-top: 50px">
        <el-card class="box-card">
          <div slot="header" class="clearfix">
            <span style="">商品详情</span>
-         </div>
+
-         <el-descriptions title="分组1" :column="1">
+             <el-descriptions v-for="item in receivedShop.attributeGroupList" :title="attributeGroup.groupName" :column="1" >
-           <el-descriptions-item label="用户名">kooriookami</el-descriptions-item>
+               <el-descriptions-item v-for="attribute in item.attributeList" :label="attribute.name">
-           <el-descriptions-item label="手机号">18100000000</el-descriptions-item>
+                 {{attributeMap[attribute.id]}}
-           <el-descriptions-item label="居住地">苏州市</el-descriptions-item>
+               </el-descriptions-item>
-           <el-descriptions-item label="联系地址">江苏省苏州市吴中区吴中大道 1188 号</el-descriptions-item>
+             </el-descriptions>
-         </el-descriptions>
+
-           <el-descriptions title="其他属性" :column="1">
+
-           <el-descriptions-item label="用户名">kooriookami</el-descriptions-item>
+             <el-descriptions v-if=" receivedShop.attributeInfoList.length !==0"
-           <el-descriptions-item label="手机号">18100000000</el-descriptions-item>
+                              title="其他属性" :column="1" >
-           <el-descriptions-item label="居住地">苏州市</el-descriptions-item>
+               <el-descriptions-item v-for="attributeInfo in receivedShop.attributeInfoList"
-           <el-descriptions-item label="备注">
+                                     :label="attributeInfo.name">
-             <el-tag size="small">学校</el-tag>
+                 {{attributeMap[attributeInfo.id]}}
-           </el-descriptions-item>
+               </el-descriptions-item>
-           <el-descriptions-item label="联系地址">江苏省苏州市吴中区吴中大道 1188 号</el-descriptions-item>
+             </el-descriptions>
-         </el-descriptions>
+
+             <el-descriptions v-if=" receivedShop.attributeInfoList.length !==0"
+                              title="其他属性" :column="1" >
+               <el-descriptions-item v-for="attributeInfo in receivedShop.attributeInfoList"
+                                     :label="attributeInfo.name">
+                 {{attributeMap[attributeInfo.id]}}
+               </el-descriptions-item>
+             </el-descriptions>
+
+
          <editor v-model="editorValue" :read-only="true"></editor>
+         </div>
        </el-card>
      </el-row>
    </div>
 </template>
 
 <script>
-import {getInfo} from "@/api/product/info";
+import {getDetailInfo} from "@/api/product/info";
 
 export default {
-  name: "Detailindex",
+  name: "productDetail",
   data() {
     return {
       breadcrumbList: [
@@ -149,29 +159,51 @@ export default {
         price: 0
       },
       shopData: {},
-      receivedShop: {},
+      receivedShop: {
+        projectInfo: {
+          name: ""
+        },
+        brandInfo: {
+          nam: ""
+        },
+        attributeInfoList: []
+      },
+      num: 1,
       editorValue: "阿萨德刚",
+      attributeMap: [],
       // 商品轮播图
       Products: [],
       checkSkuInfo: {
         price : 0.00
       },
+      price: 0.00,
+      attributeGroup: [],
       deadline2 : Date.now() +  1 * 10000 // 10小时 * 60分钟/小时 * 60秒/分钟 * 1000毫秒/秒
     }
 
   },
   created() {
-    this.parseShopFromRoute();
+   const detailId=this.$route.params && this.$route.params.detailId
+    this.initProjectDetailInfo(detailId)
+    // this.parseShopFromRoute();
     // 设置定时器
     const timerId = setTimeout(() => {
       // 时间到了，调用 hilarity 函数
       this.hilarity();
       clearTimeout(timerId);
     }, this.deadline2 - Date.now());
-
+  },
-
+  watch: {
+    'form.num':{
+        handler:"updateNum",
+       immediate:true
+    }
   },
   methods:{
+    updateNum() {
+    this.num =  this.price * this.form.num
+      console.log("qqqqq",this.num)
+    },
     hilarity() {
       this.$notify({
         title: "提示",
@@ -186,6 +218,7 @@ export default {
           this.form['rule'+index] = rule
         })
       this.selectRuleSku()
+
     },
     selectRuleSku(){
       let ruleSize =this.receivedShop.ruleAttrAddModelList.length
@@ -199,24 +232,52 @@ export default {
       }
       this.checkSkuInfo= this.receivedShop.projectSkuInfoList.find(skuInfo => skuInfo.sku === sku)
       console.log("sdf",this.checkSkuInfo)
+      console.log("ppp",this.checkSkuInfo.price)
+      this.price = this.checkSkuInfo.price
+      this.updateNum()
     },
-    parseShopFromRoute() {
+    initProjectDetailInfo(detailId){
-      // 尝试解析shop查询参
+      getDetailInfo(detailId).then(response => {
-        this.receivedShop = this.$route.query.shop;
+        this.receivedShop = response.data
-        // 确保receivedShop和data属性都存在，并且data下有name属性
+        console.log("商品",this.receivedShop)
-        console.log("hhhh ",this.receivedShop); // 打印店铺名称
+        let ccc = this.receivedShop.projectInfo.carouselImages.split(',')
-      // 图片轮播图
+        this.Products.push(...ccc)
-      let ccc = this.receivedShop.projectInfo.carouselImages.split(',')
+        this.receivedShop.productAttributeInfoList.map(productAttributeInfo => {
-      this.Products.push(...ccc)
+          let key =productAttributeInfo.attributeId;
-
+          this.attributeMap[key] = productAttributeInfo["value"]
-     let ruleAttrLength = this.receivedShop.ruleAttrAddModelList.length;
+        })
-      console.log("hieng",ruleAttrLength)
-     for (let index = 0 ;index < ruleAttrLength ;index++){
-       this.form["rule"+index] = null
-     }
-     this.initSku()
 
+        let ruleAttrLength = this.receivedShop.ruleAttrAddModelList.length;
+        console.log("hieng",ruleAttrLength)
+        for (let index = 0 ;index < ruleAttrLength ;index++){
+          this.form["rule"+index] = null
+        }
+        console.log("shjo",this.receivedShop.ruleAttrAddModelList)
+        this.initSku()
+      })
     },
+    //商品列表
+    // parseShopFromRoute() {
+    //   // 尝试解析shop查询参
+    //     this.receivedShop = this.$route.query.shop;
+    //     // 确保receivedShop和data属性都存在，并且data下有name属性
+    //     console.log("hhhh ",this.receivedShop); // 打印店铺名称
+    //   // 图片轮播图
+    //   let ccc = this.receivedShop.projectInfo.carouselImages.split(',')
+    //   this.Products.push(...ccc)
+    //   this.receivedShop.productAttributeInfoList.map(productAttributeInfo => {
+    //      let key =productAttributeInfo.attributeId;
+    //      this.attributeMap[key] = productAttributeInfo["value"]
+    //   })
+    //
+    //  let ruleAttrLength = this.receivedShop.ruleAttrAddModelList.length;
+    //   console.log("hieng",ruleAttrLength)
+    //  for (let index = 0 ;index < ruleAttrLength ;index++){
+    //    this.form["rule"+index] = null
+    //  }
+    //  console.log("shjo",this.receivedShop.ruleAttrAddModelList)
+    //  this.initSku()
+    // },
   },
   beforeDestroy() {
   }

src/views/product/info/index.vue

@@ -115,6 +115,9 @@
       <el-table-column label="备注" align="center" prop="remark" />
       <el-table-column label="操作" align="center" class-name="small-padding fixed-width">
         <template slot-scope="scope">
+          <el-button class="link-type" @click="toProjectDetail(scope.row.id)">
+            商品詳情
+          </el-button>
           <el-button
             size="mini"
             type="text"
@@ -564,6 +567,10 @@ export default {
     this.getList();
   },
   methods: {
+    toProjectDetail(detailId){
+      let url = `${window.location.origin}/product-detail/${detailId}`;
+      window.open(url)
+    },
     oneSetting(){
       this.skuList.forEach(skuInfo => {
         console.log(skuInfo)