From b8d2118d6dea509da2fd41e3e852df870ec6d34c Mon Sep 17 00:00:00 2001
From: 2812875475 <2812875475@qq.com>
Date: Mon, 25 Mar 2024 20:49:53 +0800
Subject: [PATCH] =?UTF-8?q?=E5=95=86=E5=93=81?=
MIME-Version: 1.0
Content-Type: text/plain; charset=UTF-8
Content-Transfer-Encoding: 8bit

---
 src/layouttest/index.vue         |  15 +--
 src/router/index.js              |  16 +++
 src/views/a/detailsComponent.vue |   8 +-
 src/views/a/index.vue            | 196 +++++++++++++++----------------
 4 files changed, 123 insertions(+), 112 deletions(-)

diff --git a/src/layouttest/index.vue b/src/layouttest/index.vue
index f877f13..4ae0c16 100644
--- a/src/layouttest/index.vue
+++ b/src/layouttest/index.vue
@@ -39,28 +39,19 @@
   </div>
 </template>
 <script>
-import {getInfo} from "@/api/product/info";
-import {getTemplateAttribute} from "@/api/product/category";
+import
+{getInfo, listInfo} from "@/api/product/info";
 
 export default {
   name: 'Index',
   data() {
     return {
-      good:{
-        name:"商品1",
-        num:999,
-        id:44
-      },
-      test:{
-        id:44,
-        value:45
-      }
+
     }
   },
   created() {
   },
   methods: {
-    /*获取商品信息*/
 
   }
 }
diff --git a/src/router/index.js b/src/router/index.js
index dff0f18..d44abf0 100644
--- a/src/router/index.js
+++ b/src/router/index.js
@@ -4,6 +4,7 @@ import Router from 'vue-router'
 import Layout from '@/layout'
 import Layouttest from "@/layouttest";
 import DetailsComponent from '@/views/a/detailsComponent.vue';
+
 Vue.use(Router)
 
 /**
@@ -74,6 +75,7 @@ export const constantRoutes = [
       }
     ]
   },
+
   {
     path: '',
     component: Layouttest,
@@ -87,6 +89,20 @@ export const constantRoutes = [
       }
     ]
   },
+  {
+    path: '',
+    component: DetailsComponent,
+    redirect: 'test',
+    children: [
+      {
+        path: '/detailsComponent/:id',
+        component: () => import('@/views/a/detailsComponent'),
+        name: 'Test',
+        meta: {title: "商品详情", icon: 'dashboard', affix: true}
+      }
+    ]
+  },
+
   {
     path: '/user',
     component: Layout,
diff --git a/src/views/a/detailsComponent.vue b/src/views/a/detailsComponent.vue
index 4092440..ee96ed2 100644
--- a/src/views/a/detailsComponent.vue
+++ b/src/views/a/detailsComponent.vue
@@ -1,5 +1,7 @@
 <template>
   <div>
+    呵呵呵
+    {{id}}
 
 
   </div>
@@ -8,9 +10,13 @@
 export default {
   name: 'Index',
   data() {
-    return {}
+    return {
+      id:0,
+    }
   },
   created() {
+    const id = this.$route.params.id;
+    this.id=id
   },
   methods: {}
 }
diff --git a/src/views/a/index.vue b/src/views/a/index.vue
index 0f6b33e..5c258db 100644
--- a/src/views/a/index.vue
+++ b/src/views/a/index.vue
@@ -1,34 +1,32 @@
 <template>
   <div>
-    <!--    <el-main>-->
-    <!--      <el-row :gutter="20">-->
-    <!--        <el-col :span="6" :offset="6">-->
-    <!--          <el-descriptions v-model="good" title="商品列表">-->
-    <!--            <el-descriptions-item label="商品图片">-->
-    <!--              <img :src="good.image" style="width: 100px" height="100px">-->
-    <!--            </el-descriptions-item>-->
-    <!--            <el-descriptions-item label="商品名称">{{ good.name }}</el-descriptions-item>-->
-    <!--            <el-descriptions-item label="销量">-->
-    <!--              {{ good.num }}-->
-    <!--            </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-item>-->
-
-    <!--            </el-descriptions-item>-->
-    <!--          </el-descriptions>-->
-    <!--        </el-col>-->
-    <!--        <el-col :span="6" :offset="6">-->
-    <!--          <div class="grid-content bg-purple"></div>-->
-    <!--        </el-col>-->
-    <!--      </el-row>-->
-    <!--    </el-main>-->
-    <el-button type="primary" size="small" @click="details()">详情</el-button>
+    <el-main>
+      <el-row>
+        <el-col :span="8">
+          <el-card v-for="good in goodList" style="width: 500px">
+            <el-descriptions :data="good" title="商品列表">
+              <el-descriptions-item label="商品图片">
+                <img :src="good.image" style="width: 100px" height="100px">
+              </el-descriptions-item>
+              <el-descriptions-item label="商品名称">{{ good.name }}</el-descriptions-item>
+              <el-descriptions-item label="销量">
+                1000
+              </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-item>
+                <el-button type="primary" size="small" @click="details1(good.id)">详情</el-button>
+              </el-descriptions-item>
+            </el-descriptions>
+          </el-card>
+        </el-col>
+      </el-row>
 
+    </el-main>
     <el-breadcrumb separator-class="el-icon-arrow-right">
       <el-breadcrumb-item :to="{ path: '/' }">首页</el-breadcrumb-item>
       <el-breadcrumb-item v-for="breadcrumb in breadcrumbList">{{ breadcrumb }}</el-breadcrumb-item>
@@ -101,21 +99,23 @@
         </el-row>
       </el-col>
       <el-col :span="12">
-        <h1 style=" display: inline-block; margin-right: 200px; margin-left: 30px">{{ good.name }}</h1>{{combinedResults}}
-        <h3 style="display: inline-block; color: red;">￥{{price}}</h3>
+        <h1 style=" display: inline-block; margin-right: 200px; margin-left: 30px">{{ good.name }}</h1>{{ namess }}
+        <h3 style="display: inline-block; color: red;">￥{{ price }}</h3>
         <el-form ref="form" :model="form" label-width="80px" style="margin-top: 80px">
-          <el-form-item :label="rule.name" v-for="(rule, index) in form.ruleList" :key="index">
-            <el-radio-group size="small" v-model="rule.selectedValue" @change="changeCheck(rule, $event)">
-              <el-radio v-for="item in rule.value"
-                        :key="item"
-                        :label="item"
-                        :value="item.value"
-              >{{ item }}</el-radio>
+          <el-form-item v-for="(rule, index) in form.ruleList" :key="index" :label="rule.name">
+            <el-radio-group v-model="form['rule'+index]" @change="changeRule">
+              <el-radio v-for="value in rule.value"
+                        :key="value"
+                        :label="value" border>{{ value }}
+              </el-radio>
             </el-radio-group>
           </el-form-item>
+
+
           <el-form-item label="购买数量">
-            <el-input-number v-model="form.num"  :min="1" :max="100" label="描述文字"></el-input-number>库存{{stock}}
-            <h3 style="color: red;">总价{{sumPrice}}</h3>
+            <el-input-number v-model="form.num" :min="1" :max="100" label="描述文字"></el-input-number>
+            库存{{ stock }}
+            <h3 style="color: red;">总价{{ sumPrice }}</h3>
           </el-form-item>
           <el-form-item>
             <el-button type="primary" @click="onSubmit">加入购物车</el-button>
@@ -142,17 +142,18 @@
           </el-descriptions-item>
         </el-descriptions>
         <el-row>
-          <img :src="good.carouselImages" style="width: 100%" height="500px">
-          <img :src="good.carouselImages" style="width: 100%" height="500px">
+          <img style="width: 100%" height="500px">
+          <img style="width: 100%" height="500px">
         </el-row>
       </el-card>
     </el-row>
 
+
   </div>
 </template>
 <script>
 
-import {getPro} from "@/api/product/info";
+import {getPro, listInfo} from "@/api/product/info";
 
 export default {
   name: 'Index',
@@ -163,10 +164,7 @@ export default {
       imageList: [],
       /*品牌信息*/
       brandName: "",
-      good: {
-        name: "",
-        carouselImages: ""
-      },
+      good: {},
       like: true,
       value1: 999,
       value2: 999,
@@ -175,7 +173,7 @@ export default {
       //规格表单
       form: {
         ruleList: [],
-        num:1
+        num: 1
       },
       ruleValueList: [],
       /*国歌表单*/
@@ -186,63 +184,66 @@ export default {
       },
       /*商品详情*/
       goodDetail: [],
-      /*监控选中的值*/
-      names:"",
-      // 用于存储前一个选中的 rule 和它的 value
-      previousRule: null,
-      previousValue: null,
-      // 用于存储组合后的结果
-      combinedResults: "",
-      sku:[],
-      price:0,
-      stock:0,
-      sumPrice:0,
+      sku: [],
+      price: 0,
+      stock: 0,
+      sumPrice: 0,
+      a: "",
+      namess: "",
+      goodList: [],
+      queryParams: {},
     }
   },
   created() {
     const id = this.$route.params.id;
     this.details(id)
+    this.getList()
   },
-  watch:{
-    "form.num":{
-      handler(val){
-        this.stock=this.stock-1
-        this.sumPrice=this.sumPrice+this.price
+  watch: {
+    "form.num": {
+      handler(val) {
+        this.stock = this.stock - 1
+        this.sumPrice = this.sumPrice + this.price
       }
     },
+    "stock": {
+      handler(val) {
+        if (val === 0) {
+          this.$message.error("库存不够")
+        }
+      }
+    }
   },
   methods: {
-    changeCheck(rule, value){
-      //this.form.num=1
-      //console.log(checkValue)
-      console.log(rule.selectedValue)
+    details1(id) {
+      this.$router.push('/detailsComponent/' + id)
+    },
+    /*获取商品信息*/
+    getList() {
+      this.loading = true;
+      listInfo(this.queryParams).then(response => {
+        this.goodList = response.data.rows;
+        console.log(this.goodList)
+      });
+    },
+    changeRule() {
+      let selectedValues = this.sku.map((rule, index) => {
+        return this.form['rule' + index]; // 获取每个索引对应的值
+      }).filter(value => value !== '').join(''); // 过滤空值，然后拼接成字符串
 
-      this.combinedResults=""
-      if (this.previousValue !== null) {
-        // 组合前一个值和当前值，并添加到结果数组中
-        const combined = `${this.previousValue}${value}`;
-        this.combinedResults+=combined
-        console.log(this.combinedResults); // 打印组合后的结果
-
-        // 重置前一个选中的 rule 和 value
-        this.previousRule = null;
-        this.previousValue = null;
-      } else {
-        // 如果没有前一个值，只存储当前选中的 rule 和 value
-        this.previousRule = rule;
-        this.previousValue = value;
-      }
       this.sku.forEach(
-        sku=>{
-          if(this.combinedResults===sku.sku){
-            this.price=sku.price
-            this.sumPrice=sku.price
-            this.stock=sku.stock
+        sku => {
+          if (selectedValues === sku.sku) {
+            this.price = sku.price
+            this.sumPrice = sku.price
+            this.stock = sku.stock
+            this.namess = selectedValues
           }
         }
       )
 
     },
+
     /*立即购买按钮*/
     onSubmit() {
 
@@ -250,24 +251,22 @@ export default {
     details: function (id) {
       getPro(id).then(
         res => {
-          console.log(res)
           this.breadcrumbList = res.data.typeList
           this.brandName = res.data.brandName
-          this.good.name = res.data.product.name
-          this.good.carouselImages = res.data.product.carouselImages
-          this.imageList.push(res.data.product.carouselImages)
-          this.sku=res.data.projectSkuInfo
-          let e1=[]
+          this.good = res.data.product
+          console.log(this.good)
+          this.imageList = res.data.product.carouselImages.split(",")
+          this.sku = res.data.projectSkuInfo
+          let e1 = []
 
           res.data.ruleList.forEach(
-            rule=>{
-              e1.push({id:rule.id,name:rule.name,value:rule.value})
+            rule => {
+              e1.push({id: rule.id, name: rule.name, value: rule.value})
             }
           )
 
-          console.log(e1)
-          this.form.ruleList =e1
-            this.categoryCommonElement = res.data.categoryCommonElementResp
+          this.form.ruleList = e1
+          this.categoryCommonElement = res.data.categoryCommonElementResp
           e = []
           let e = []
           this.categoryCommonElement.attributeList.forEach(
@@ -304,7 +303,6 @@ export default {
 
           this.goodDetail = []
           this.goodDetail = e.filter(rule => rule.value !== null)
-          console.log(this.goodDetail)
         }
       )
     }