商品

src/layouttest/index.vue

@@ -39,28 +39,19 @@
   </div>
 </template>
 <script>
-import {getInfo} from "@/api/product/info";
+import
-import {getTemplateAttribute} from "@/api/product/category";
+{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: {
-    /*获取商品信息*/
 
   }
 }

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,

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: {}
 }

src/views/a/index.vue

@@ -1,34 +1,32 @@
 <template>
   <div>
-    <!--    <el-main>-->
+    <el-main>
-    <!--      <el-row :gutter="20">-->
+      <el-row>
-    <!--        <el-col :span="6" :offset="6">-->
+        <el-col :span="8">
-    <!--          <el-descriptions v-model="good" title="商品列表">-->
+          <el-card v-for="good in goodList" style="width: 500px">
-    <!--            <el-descriptions-item label="商品图片">-->
+            <el-descriptions :data="good" title="商品列表">
-    <!--              <img :src="good.image" style="width: 100px" height="100px">-->
+              <el-descriptions-item label="商品图片">
-    <!--            </el-descriptions-item>-->
+                <img :src="good.image" style="width: 100px" height="100px">
-    <!--            <el-descriptions-item label="商品名称">{{ good.name }}</el-descriptions-item>-->
+              </el-descriptions-item>
-    <!--            <el-descriptions-item label="销量">-->
+              <el-descriptions-item label="商品名称">{{ good.name }}</el-descriptions-item>
-    <!--              {{ good.num }}-->
+              <el-descriptions-item label="销量">
-    <!--            </el-descriptions-item>-->
+                1000
-    <!--            <el-descriptions-item label="备注">-->
+              </el-descriptions-item>
-    <!--              <el-tag size="small">食品</el-tag>-->
+              <el-descriptions-item label="备注">
-    <!--            </el-descriptions-item>-->
+                <el-tag size="small">电子产品</el-tag>
-    <!--            <el-descriptions-item label="产地">-->
+              </el-descriptions-item>
-    <!--              江苏省苏州市吴中区吴中大道 1188 号-->
+              <el-descriptions-item label="产地">
-    <!--            </el-descriptions-item>-->
+                江苏省苏州市吴中区吴中大道 1188 号
-    <!--            <el-descriptions-item>-->
+              </el-descriptions-item>
-
+              <el-descriptions-item>
-    <!--            </el-descriptions-item>-->
+                <el-button type="primary" size="small" @click="details1(good.id)">详情</el-button>
-    <!--          </el-descriptions>-->
+              </el-descriptions-item>
-    <!--        </el-col>-->
+            </el-descriptions>
-    <!--        <el-col :span="6" :offset="6">-->
+          </el-card>
-    <!--          <div class="grid-content bg-purple"></div>-->
+        </el-col>
-    <!--        </el-col>-->
+      </el-row>
-    <!--      </el-row>-->
-    <!--    </el-main>-->
-    <el-button type="primary" size="small" @click="details()">详情</el-button>
 
+    </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,20 +99,22 @@
         </el-row>
       </el-col>
       <el-col :span="12">
-        <h1 style=" display: inline-block; margin-right: 200px; margin-left: 30px">{{ good.name }}</h1>{{combinedResults}}
+        <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-form-item v-for="(rule, index) in form.ruleList" :key="index" :label="rule.name">
-            <el-radio-group size="small" v-model="rule.selectedValue" @change="changeCheck(rule, $event)">
+            <el-radio-group v-model="form['rule'+index]" @change="changeRule">
-              <el-radio v-for="item in rule.value"
+              <el-radio v-for="value in rule.value"
-                        :key="item"
+                        :key="value"
-                        :label="item"
+                        :label="value" border>{{ value }}
-                        :value="item.value"
+              </el-radio>
-              >{{ item }}</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}}
+            <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>
@@ -142,17 +142,18 @@
           </el-descriptions-item>
         </el-descriptions>
         <el-row>
-          <img :src="good.carouselImages" style="width: 100%" height="500px">
+          <img style="width: 100%" height="500px">
-          <img :src="good.carouselImages" 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: {
+      good: {},
-        name: "",
-        carouselImages: ""
-      },
       like: true,
       value1: 999,
       value2: 999,
@@ -186,22 +184,20 @@ export default {
       },
       /*商品详情*/
       goodDetail: [],
-      /*监控选中的值*/
-      names:"",
-      // 用于存储前一个选中的 rule 和它的 value
-      previousRule: null,
-      previousValue: null,
-      // 用于存储组合后的结果
-      combinedResults: "",
       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": {
@@ -210,39 +206,44 @@ export default {
         this.sumPrice = this.sumPrice + this.price
       }
     },
+    "stock": {
+      handler(val) {
+        if (val === 0) {
+          this.$message.error("库存不够")
+        }
+      }
+    }
   },
   methods: {
-    changeCheck(rule, value){
+    details1(id) {
-      //this.form.num=1
+      this.$router.push('/detailsComponent/' + id)
-      //console.log(checkValue)
+    },
-      console.log(rule.selectedValue)
+    /*获取商品信息*/
+    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){
+          if (selectedValues === sku.sku) {
             this.price = sku.price
             this.sumPrice = sku.price
             this.stock = sku.stock
+            this.namess = selectedValues
           }
         }
       )
 
     },
+
     /*立即购买按钮*/
     onSubmit() {
 
@@ -250,12 +251,11 @@ 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 = res.data.product
-          this.good.carouselImages = res.data.product.carouselImages
+          console.log(this.good)
-          this.imageList.push(res.data.product.carouselImages)
+          this.imageList = res.data.product.carouselImages.split(",")
           this.sku = res.data.projectSkuInfo
           let e1 = []
 
@@ -265,7 +265,6 @@ export default {
             }
           )
 
-          console.log(e1)
           this.form.ruleList = e1
           this.categoryCommonElement = res.data.categoryCommonElementResp
           e = []
@@ -304,7 +303,6 @@ export default {
 
           this.goodDetail = []
           this.goodDetail = e.filter(rule => rule.value !== null)
-          console.log(this.goodDetail)
         }
       )
     }