From a0044d3d202ed4cef45d1bfb4251b09e05de82fb Mon Sep 17 00:00:00 2001
From: yuanjunzhe <1374457292@qq.com>
Date: Thu, 28 Mar 2024 14:42:46 +0800
Subject: [PATCH] =?UTF-8?q?=E6=9B=B4=E6=96=B0?=
MIME-Version: 1.0
Content-Type: text/plain; charset=UTF-8
Content-Transfer-Encoding: 8bit

---
 src/views/product/info/detail/index.vue | 226 ++++++++++--------------
 1 file changed, 90 insertions(+), 136 deletions(-)

diff --git a/src/views/product/info/detail/index.vue b/src/views/product/info/detail/index.vue
index a6cde30..dc7f69f 100644
--- a/src/views/product/info/detail/index.vue
+++ b/src/views/product/info/detail/index.vue
@@ -4,20 +4,16 @@
       <el-breadcrumb-item :to="{ path: '/' }">首页</el-breadcrumb-item>
       <el-breadcrumb-item v-for="categoryInfo in projectDetail.categoryInfoList">{{categoryInfo.name}}</el-breadcrumb-item>
 
-      <el-breadcrumb-item>{{ projectDetail.projectInfo.name }}</el-breadcrumb-item>
+      <el-breadcrumb-item>{{projectDetail.projectInfo.name}}</el-breadcrumb-item>
     </el-breadcrumb>
-
-    <el-row :gutter="20">
+    <el-row :gutter="20" style="margin-top: 20px">
       <el-col :span="12">
-        <div class="block" style="margin-top: 30px">
-          <el-carousel trigger="click" height="500px">
-            <el-carousel-item v-for="item in carouselImages" :key="item">
-              <el-image :src="item" style="width: 100%;height: 100%"/>
-            </el-carousel-item>
-          </el-carousel>
-        </div>
-
-        <div style="margin-top: 30px">
+        <el-carousel trigger="click" height="400px">
+          <el-carousel-item v-for="item in carouselImages" :key="item">
+            <el-image :src="item" style="height: 100%; width: 100%"/>
+          </el-carousel-item>
+        </el-carousel>
+        <div style="margin-top: 20px;">
           <el-row :gutter="20">
             <el-col :span="6">
               <div>
@@ -40,12 +36,11 @@
               <div>
                 <el-statistic
                   group-separator=","
-                  :precision="2"
+                  :precision="0"
                   decimal-separator="."
                   :value="123"
                   title="收藏人气"
                 >
-
                 </el-statistic>
               </div>
             </el-col>
@@ -53,51 +48,37 @@
               <div>
                 <el-statistic title="品牌信息">
                   <template slot="formatter">
-                    {{projectDetail.brandInfo.name}}
+                    {{projectDetail.brandInfo.nam}}
                   </template>
                 </el-statistic>
               </div>
             </el-col>
           </el-row>
         </div>
-
       </el-col>
       <el-col :span="12">
-          <h1 style="margin-left: 50px">商品名称</h1>
-          <h1 style="margin-left: 400px;margin-top: -45px;color: orangered;">￥{{ checkSkuInfo.price }}</h1>
-          <h3 style="color: #99a9bf;margin-left: 75px">{{ checkSkuInfo.sku }}</h3>
-          <h3 style="color: #99a9bf;margin-left: 400px;margin-top: -40px">秒杀价格</h3>
-
-        <div style="width: 100%; display: inline-block; background-color: orangered;">
-          <el-statistic :value="deadline2" time-indices title="商品秒杀 距离结束还有">
-          </el-statistic>
-        </div>
-
-        <el-form ref="form" :model="form" label-width="80px" style="margin-top: 30px">
-          <el-form-item v-for="(ruleAttr,index) in projectDetail.ruleAttrModelList" :label="ruleAttr.name">
+        <h1>商品名称</h1>
+        <h3>商品规格（{{checkSkuInfo.sku}}）</h3>
+        <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-model="form['rule'+index]" @change="selectRuleSku">
+                        </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" 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="warning" @click="onSubmit">加入购物车</el-button>
+            <el-button type="primary">加入购物车</el-button>
             <el-button>立即购买</el-button>
           </el-form-item>
-
         </el-form>
-
       </el-col>
     </el-row>
-
-    <el-row style="margin-top: 30px">
+    <el-row style="margin-top: 30px;">
       <el-card class="box-card">
         <div slot="header" class="clearfix">
           <span>商品详情</span>
@@ -116,108 +97,85 @@
         </editor>
       </el-card>
     </el-row>
-
   </div>
 </template>
 
 <script>
+import {getDetailInfo} from "@/api/product/info";
 
-import {getDetailInfo} from '@/api/product/info'
-import rule from '@/views/product/rule/index.vue'
-
-//这里可以导入其他文件（比如：组件，工具js，第三方插件js，json文件，图片文件等等）,
-//例如：import 《组件名称》 from '《组件路径》,
-  export default {
-
-    name: 'productDetail',
-    //import引入的组件需要注入到对象中才能使用"
-
-    data() {
-      //这里存放数据"
-
-      return {
-        breadcrumbList:[
-          "服装",
-          "外衣",
-          "女士超柔软拉毛运动开衫",
-        ],
-        like: true,
-        value1: 4154,
-        value2: 1314,
-        title: "销售人气",
-        deadline2: Date.now() + 1000 * 60 * 60 * 8,
-        form:{
-          num:1
-        },
-        projectDetail:{
-          projectInfo:{
-            name:"",
-          },
-          brandInfo:{
-            name:""
-          },
-          attributeInfoList:[]
-        },
-        checkSkuInfo:{
-          price:0.00
-        },
-        carouselImages:[],
-        attributeMap:{}
-      };
-    },
-
-    //方法集合",
-    methods: {
-      initSku(){
-        let sku = this.projectDetail.projectSkuInfoList[0]["sku"];
-        let skuArr = sku.split("-");
-        skuArr.forEach((rule,index)=>{
-          this.form['rule'+index] = rule;
-        })
-        this.selectRuleSku();
+export default {
+  name: "productDetail",
+  data() {
+    return {
+      like: true,
+      value1: 415,
+      value2: 1314,
+      title: "销量人气",
+      form: {
+        num: 1
       },
-
-      selectRuleSku(){
-        let ruleSize = this.projectDetail.ruleAttrModelList.length;
-        let  sku="";
-        for (let index = 0;;index++){
-          sku += this.form['rule'+index];
-          if (index+1 == ruleSize){
-            break
-          }
+      projectDetail: {
+        projectInfo: {
+          name: ""
+        },
+        brandInfo: {
+          nam: ""
+        },
+        attributeInfoList: []
+      },
+      checkSkuInfo: {
+        price: 0.00
+      },
+      carouselImages: [],
+      attributeMap: {}
+    }
+  },
+  created() {
+    const detailId = this.$route.params && this.$route.params.detailId;
+    this.initProjectDetailInfo(detailId);
+  },
+  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
         }
-        this.checkSkuInfo = this.projectDetail.projectSkuInfoList.find(skuInfo =>skuInfo.sku ===sku)
-      },
-      initProjectDetailInfo(detailId){
-        getDetailInfo(detailId).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()
-        })
-      },
-      onSubmit(){
-
+        sku += "-";
       }
+      this.checkSkuInfo = this.projectDetail.projectSkuInfoList.find(skuInfo => skuInfo.sku === sku)
     },
-    //生命周期 - 创建完成（可以访问当前this实例）",
-    created() {
-      const  detailId = this.$route.params && this.$route.params.detailId
-      this.initProjectDetailInfo(detailId)
-    },
-
-  };
+    initProjectDetailInfo(detailId){
+      getDetailInfo(detailId).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();
+      })
+    }
+  }
+}
 </script>
-<style scoped>
 
+<style scoped>
 .el-carousel__item h3 {
   color: #475669;
   font-size: 14px;
@@ -233,11 +191,7 @@ import rule from '@/views/product/rule/index.vue'
 .el-carousel__item:nth-child(2n+1) {
   background-color: #d3dce6;
 }
-
-.like {
-  cursor: pointer;
-  font-size: 25px;
-  display: inline-block;
+.ql-toolbar{
+  display: none;
 }
-
 </style>