From c71306721cb2e8916e5a94e7dcc33a82161e4ed2 Mon Sep 17 00:00:00 2001
From: 2812875475 <2812875475@qq.com>
Date: Sun, 31 Mar 2024 09:48:14 +0800
Subject: [PATCH] =?UTF-8?q?=E5=95=86=E5=93=81=E8=B4=AD=E7=89=A9=E8=BD=A6?=
MIME-Version: 1.0
Content-Type: text/plain; charset=UTF-8
Content-Transfer-Encoding: 8bit

---
 src/api/product/shop.js                       |  44 +++
 src/api/shopCart/shop.js                      |  53 +++
 src/layouttest/index.vue                      |  75 +++-
 src/router/index.js                           |  25 +-
 src/views/a/detailsComponent.vue              | 347 ------------------
 .../productInfo/detail/productDetails.vue     | 340 +++++++++++++++++
 .../product/productInfo/detail/shopping.vue   | 183 +++++++++
 src/views/shopCart/shop/index.vue             | 310 ++++++++++++++++
 8 files changed, 1009 insertions(+), 368 deletions(-)
 create mode 100644 src/api/product/shop.js
 create mode 100644 src/api/shopCart/shop.js
 delete mode 100644 src/views/a/detailsComponent.vue
 create mode 100644 src/views/product/productInfo/detail/productDetails.vue
 create mode 100644 src/views/product/productInfo/detail/shopping.vue
 create mode 100644 src/views/shopCart/shop/index.vue

diff --git a/src/api/product/shop.js b/src/api/product/shop.js
new file mode 100644
index 0000000..d8d2bd9
--- /dev/null
+++ b/src/api/product/shop.js
@@ -0,0 +1,44 @@
+import request from '@/utils/request'
+
+// 查询购物车列表
+export function listShop(query) {
+  return request({
+    url: '/product/shop/list',
+    method: 'get',
+    params: query
+  })
+}
+
+// 查询购物车详细
+export function getShop(id) {
+  return request({
+    url: '/product/shop/' + id,
+    method: 'get'
+  })
+}
+
+// 新增购物车
+export function addShop(data) {
+  return request({
+    url: '/product/shop',
+    method: 'post',
+    data: data
+  })
+}
+
+// 修改购物车
+export function updateShop(data) {
+  return request({
+    url: '/product/shop/'+data.id,
+    method: 'put',
+    data: data
+  })
+}
+
+// 删除购物车
+export function delShop(id) {
+  return request({
+    url: '/product/shop/' + id,
+    method: 'delete'
+  })
+}
diff --git a/src/api/shopCart/shop.js b/src/api/shopCart/shop.js
new file mode 100644
index 0000000..09f5a15
--- /dev/null
+++ b/src/api/shopCart/shop.js
@@ -0,0 +1,53 @@
+import request from '@/utils/request'
+
+// 查询购物车列表
+export function listShop(query) {
+  return request({
+    url: '/shopCart/shop/list',
+    method: 'get',
+    params: query
+  })
+}
+
+
+export function testShop(query) {
+  return request({
+    url: '/shopCart/shop/shopList',
+    method: 'get',
+    params: query
+  })
+}
+
+// 查询购物车详细
+export function getShop(id) {
+  return request({
+    url: '/shopCart/shop/' + id,
+    method: 'get'
+  })
+}
+
+// 新增购物车
+export function addShop(data) {
+  return request({
+    url: '/shopCart/shop',
+    method: 'post',
+    data: data
+  })
+}
+
+// 修改购物车
+export function updateShop(data) {
+  return request({
+    url: '/shopCart/shop/'+data.id,
+    method: 'put',
+    data: data
+  })
+}
+
+// 删除购物车
+export function delShop(id) {
+  return request({
+    url: '/shopCart/shop/' + id,
+    method: 'delete'
+  })
+}
diff --git a/src/layouttest/index.vue b/src/layouttest/index.vue
index 4ae0c16..3cf3d22 100644
--- a/src/layouttest/index.vue
+++ b/src/layouttest/index.vue
@@ -11,17 +11,34 @@
           active-text-color="#ffd04b">
 
           <el-menu-item index="1">处理中心</el-menu-item>
-          <el-submenu index="2">
-            <template slot="title">我的工作台</template>
-            <el-menu-item index="2-1">选项1</el-menu-item>
-            <el-menu-item index="2-2">选项2</el-menu-item>
-            <el-menu-item index="2-3">选项3</el-menu-item>
-            <el-submenu index="2-4">
-              <template slot="title">选项4</template>
-              <el-menu-item index="2-4-1">选项1</el-menu-item>
-              <el-menu-item index="2-4-2">选项2</el-menu-item>
-              <el-menu-item index="2-4-3">选项3</el-menu-item>
-            </el-submenu>
+          <el-submenu index="2"  >
+            <template slot="title">我的购物车</template>
+            <el-table
+              :data="shop"
+              style="width: 100%">
+              <el-table-column
+                label="商品信息"
+                width="400">
+                <template slot-scope="scope">
+                  <div class="cell-content">
+                    <img  :src="scope.row.projectSkuInfo.image"  width="50px" height="50px" class="project-image">
+                    <div class="project-info">
+                      <h3 class="project-name">{{ scope.row.projectInfo.name }}</h3>
+                      <p class="project-description">{{ scope.row.detailSku }}</p>
+                    </div>
+                  </div>
+                </template>
+              </el-table-column>
+              <el-table-column
+                label="数量"
+                width="100">
+                <template slot-scope="scope">
+                  <span style="margin-left: 10px">{{scope.row.num}}</span>
+                </template>
+              </el-table-column>
+            </el-table>
+
+            <el-button type="info" style="margin-left: 400px" @click="toShopping">进入购物车</el-button>
           </el-submenu>
           <el-menu-item index="3" disabled>消息中心</el-menu-item>
           <el-menu-item index="4"><a href="https://www.ele.me" target="_blank">订单管理</a></el-menu-item>
@@ -41,22 +58,36 @@
 <script>
 import
 {getInfo, listInfo} from "@/api/product/info";
+import {testShop} from "@/api/shopCart/shop";
 
 export default {
   name: 'Index',
   data() {
     return {
-
+      shop: []
     }
   },
   created() {
+    this.shopList()
   },
   methods: {
+    shopList(){
+      testShop(this.queryParams).then(res=>{
+        console.log(res)
+        this.shop=res.data.rows
+      })
+    },
+    toShopping(){
+      this.$router.push('/shopping')
+    }
 
   }
 }
 </script>
 <style scoped>
+
+
+
 .el-header, .el-footer {
   background-color: #B3C0D1;
   color: #333;
@@ -85,4 +116,24 @@ body > .el-container {
 .el-container:nth-child(7) .el-aside {
   line-height: 320px;
 }
+
+.cell-content {
+  display: flex;
+  align-items: flex-start; /* 垂直上边对齐 */
+}
+
+.project-image {
+  margin-right: 10px; /* 图片与文本之间的间距 */
+}
+
+.project-info {
+  display: flex;
+  flex-direction: column; /* 设置为列方向布局，实现上下排列 */
+  align-items: flex-start; /* 垂直上边对齐 */
+}
+
+.project-name,
+.project-description {
+  margin-bottom: 5px; /* 项目名称和描述之间的间距 */
+}
 </style>
diff --git a/src/router/index.js b/src/router/index.js
index d44abf0..7f430fe 100644
--- a/src/router/index.js
+++ b/src/router/index.js
@@ -3,7 +3,6 @@ import Router from 'vue-router'
 /* Layout */
 import Layout from '@/layout'
 import Layouttest from "@/layouttest";
-import DetailsComponent from '@/views/a/detailsComponent.vue';
 
 Vue.use(Router)
 
@@ -91,18 +90,30 @@ export const constantRoutes = [
   },
   {
     path: '',
-    component: DetailsComponent,
+    component: Layouttest,
     redirect: 'test',
     children: [
       {
         path: '/detailsComponent/:id',
-        component: () => import('@/views/a/detailsComponent'),
+        component: () => import('@/views/product/productInfo/detail/productDetails.vue'),
         name: 'Test',
         meta: {title: "商品详情", icon: 'dashboard', affix: true}
       }
     ]
   },
-
+  {
+    path: '',
+    component: Layouttest,
+    redirect: 'test',
+    children: [
+      {
+        path: 'shopping',
+        component: () => import('@/views/product/productInfo/detail/shopping.vue'),
+        name: 'Test',
+        meta: {title: "购物车", icon: 'dashboard', affix: true}
+      }
+    ]
+  },
   {
     path: '/user',
     component: Layout,
@@ -117,11 +128,7 @@ export const constantRoutes = [
       }
     ]
   },
-  {
-    path:'/details',
-    name:'/details',
-    component: DetailsComponent
-  }
+
 ]
 
 // 动态路由，基于用户权限动态去加载
diff --git a/src/views/a/detailsComponent.vue b/src/views/a/detailsComponent.vue
deleted file mode 100644
index af6ac0e..0000000
--- a/src/views/a/detailsComponent.vue
+++ /dev/null
@@ -1,347 +0,0 @@
-<template>
-  <div>
-
-    <el-container>
-      <el-header>
-        <el-menu
-          default-active="1"
-          class="el-menu-demo el-menu-right"
-          mode="horizontal"
-          background-color="#545c64"
-          text-color="#fff"
-          active-text-color="#ffd04b">
-
-          <el-menu-item index="1">处理中心</el-menu-item>
-          <el-submenu index="2">
-            <template slot="title">我的工作台</template>
-            <el-menu-item index="2-1">选项1</el-menu-item>
-            <el-menu-item index="2-2">选项2</el-menu-item>
-            <el-menu-item index="2-3">选项3</el-menu-item>
-            <el-submenu index="2-4">
-              <template slot="title">选项4</template>
-              <el-menu-item index="2-4-1">选项1</el-menu-item>
-              <el-menu-item index="2-4-2">选项2</el-menu-item>
-              <el-menu-item index="2-4-3">选项3</el-menu-item>
-            </el-submenu>
-          </el-submenu>
-          <el-menu-item index="3" disabled>消息中心</el-menu-item>
-          <el-menu-item index="4"><a href="https://www.ele.me" target="_blank">订单管理</a></el-menu-item>
-        </el-menu>
-      </el-header>
-      <el-main>
-        <el-row :gutter="20">
-          <el-col :span="12" :offset="6">
-            <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>
-            </el-breadcrumb>
-
-            <el-row>
-              <el-col :span="12">
-                <el-carousel indicator-position="outside" style="width: 350px">
-                  <el-carousel-item v-for="item in imageList" :key="item">
-                    <h3>
-                      <img :src="item">
-                    </h3>
-                  </el-carousel-item>
-                </el-carousel>
-                <el-row :gutter="20" style="margin-top: 20px">
-                  <el-col :span="6">
-                    <div>
-                      <el-statistic
-                        group-separator=","
-                        :precision="2"
-                        :value="value2"
-                        title="销量人气"
-                      ></el-statistic>
-                    </div>
-                  </el-col>
-                  <el-col :span="6">
-                    <div>
-                      <el-statistic title="商品评价">
-                        <template slot="formatter">
-                          999
-                        </template>
-                      </el-statistic>
-                    </div>
-                  </el-col>
-                  <el-col :span="6">
-                    <div>
-                      <el-statistic
-                        group-separator=","
-                        :precision="2"
-                        decimal-separator="."
-                        :value="value1"
-                        title="收藏人气"
-                      >
-                        <template slot="prefix">
-                          <i class="el-icon-s-flag" style="color: red"></i>
-                        </template>
-                        <template slot="suffix">
-                          <i class="el-icon-s-flag" style="color: blue"></i>
-                        </template>
-                      </el-statistic>
-                    </div>
-                  </el-col>
-                  <el-col :span="6">
-                    <div>
-                      <el-statistic :value="like ? 521 : 520" :title="brandName">
-                        <template slot="suffix">
-                            <span @click="like = !like" class="like">
-                              <i
-                                class="el-icon-star-on"
-                                style="color:red"
-                                v-show="!!like"
-                              ></i>
-                              <i class="el-icon-star-off" v-show="!like"></i>
-                            </span>
-                        </template>
-                      </el-statistic>
-                    </div>
-                  </el-col>
-                </el-row>
-              </el-col>
-              <el-col :span="12">
-                <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: 50px">
-                  <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-form-item>
-                  <el-form-item>
-                    <el-button type="primary" @click="onSubmit">加入购物车</el-button>
-                    <el-button type="danger">立即购买</el-button>
-                  </el-form-item>
-                </el-form>
-              </el-col>
-            </el-row>
-            <el-row>
-              <el-card class="box-card" style="margin-top: 20px">
-                <div slot="header" class="clearfix">
-                  <span>商品详情</span>
-                </div>
-                <el-descriptions class="margin-top" :column="3" size="medium" border>
-                  <template slot="extra">
-                    <el-button type="primary" size="small">商品评论</el-button>
-                  </template>
-                  <el-descriptions-item v-for="detail in goodDetail">
-                    <template slot="label">
-                      <i class="el-icon-user"></i>
-                      {{ detail.name }}
-                    </template>
-                    {{ detail.value }}
-                  </el-descriptions-item>
-                </el-descriptions>
-                <el-row>
-                  <img style="width: 100%" height="500px">
-                  <img style="width: 100%" height="500px">
-
-                  <editor v-model="good.introduction" :read-only="true"></editor>
-
-                </el-row>
-              </el-card>
-            </el-row>
-
-          </el-col>
-
-        </el-row>
-      </el-main>
-
-
-    </el-container>
-
-  </div>
-</template>
-<script>
-import {getPro} from "@/api/product/info";
-import rule from "@/views/product/rule/index.vue";
-
-export default {
-  name: 'Index',
-  data() {
-    return {
-      id: 0,
-      /*图片*/
-      imageList: [],
-      /*品牌信息*/
-      brandName: "",
-      good: {},
-      like: true,
-      value1: 999,
-      value2: 999,
-      title: "增长人数",
-      breadcrumbList: [],
-      //规格表单
-      form: {
-        ruleList: [],
-        num: 1
-      },
-      ruleValueList: [],
-      /*国歌表单*/
-      categoryCommonElement: {
-        templateAttributeGroupList: [],
-        templateAttributeList: [],
-        attributeList: []
-      },
-      /*商品详情*/
-      goodDetail: [],
-      sku: [],
-      price: 0,
-      stock: 0,
-      sumPrice: 0,
-      a: "",
-      namess: "",
-    }
-  },
-  created() {
-
-    const id = this.$route.params.id;
-    this.id = id
-    this.details(id)
-  },
-  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: {
-
-    changeRule() {
-      let selectedValues = this.sku.map((rule, index) => {
-        return this.form['rule' + index]; // 获取每个索引对应的值
-      }).filter(value => value !== '').join(''); // 过滤空值，然后拼接成字符串
-
-
-      this.sku.forEach(
-        sku => {
-          if (selectedValues === sku.sku) {
-            this.price = sku.price
-            this.sumPrice = sku.price
-            this.stock = sku.stock
-            this.namess = selectedValues
-          }
-        }
-      )
-    },
-
-    /*立即购买按钮*/
-    onSubmit() {
-
-    },
-    details: function (id) {
-      getPro(id).then(
-        res => {
-          this.breadcrumbList = res.data.typeList
-          this.brandName = res.data.brandName
-          this.good = res.data.product
-          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})
-            }
-          )
-
-          this.form.ruleList = e1
-          this.categoryCommonElement = res.data.categoryCommonElementResp
-          e = []
-          let e = []
-          this.categoryCommonElement.attributeList.forEach(
-            attribute => {
-              e.push(
-                {name: attribute.name, value: attribute.value}
-              )
-            }
-          )
-          this.categoryCommonElement.templateAttributeList.forEach(
-            attribute => {
-              e.push(
-                {name: attribute.name, value: attribute.value}
-              )
-            }
-          )
-          let f = []
-          this.categoryCommonElement.templateAttributeGroupList.forEach(
-            group => {
-              f.push(group.attributeList)
-            }
-          )
-          f.forEach(
-            group => {
-              group.forEach(
-                group1 => {
-                  e.push(
-                    {name: group1.name, value: group1.value}
-                  )
-                }
-              )
-            }
-          )
-
-          this.goodDetail = []
-          this.goodDetail = e.filter(rule => rule.value !== null)
-
-        }
-      )
-    }
-
-  }
-}
-</script>
-<style scoped>
-
-.el-header, .el-footer {
-  background-color: #B3C0D1;
-  color: #333;
-  text-align: center;
-  line-height: 60px;
-}
-
-.el-menu-demo {
-  display: flex;
-  justify-content: flex-end;
-}
-
-.el-main {
-  color: #333;
-}
-
-body > .el-container {
-  margin-bottom: 40px;
-}
-
-.el-container:nth-child(5) .el-aside,
-.el-container:nth-child(6) .el-aside {
-  line-height: 260px;
-}
-
-.el-container:nth-child(7) .el-aside {
-  line-height: 320px;
-}
-</style>
diff --git a/src/views/product/productInfo/detail/productDetails.vue b/src/views/product/productInfo/detail/productDetails.vue
new file mode 100644
index 0000000..1c64fe9
--- /dev/null
+++ b/src/views/product/productInfo/detail/productDetails.vue
@@ -0,0 +1,340 @@
+<template>
+  <div>
+
+    <el-breadcrumb separator-class="el-icon-arrow-right">
+      <el-breadcrumb-item :to="{ path: '/' }">首页</el-breadcrumb-item>
+      <el-breadcrumb-item :to="{ path: '/test/:id' }">商城</el-breadcrumb-item>
+      <el-breadcrumb-item v-for="breadcrumb in breadcrumbList">{{ breadcrumb }}</el-breadcrumb-item>
+    </el-breadcrumb>
+
+
+    <el-row>
+      <el-col :span="12">
+        <el-carousel indicator-position="outside" style="width: 350px">
+          <el-carousel-item v-for="item in imageList" :key="item">
+            <h3>
+              <img :src="item">
+            </h3>
+          </el-carousel-item>
+        </el-carousel>
+        <el-row :gutter="20" style="margin-top: 20px">
+          <el-col :span="6">
+            <div>
+              <el-statistic
+                group-separator=","
+                :precision="2"
+                :value="value2"
+                title="销量人气"
+              ></el-statistic>
+            </div>
+          </el-col>
+          <el-col :span="6">
+            <div>
+              <el-statistic title="商品评价">
+                <template slot="formatter">
+                  999
+                </template>
+              </el-statistic>
+            </div>
+          </el-col>
+          <el-col :span="6">
+            <div>
+              <el-statistic
+                group-separator=","
+                :precision="2"
+                decimal-separator="."
+                :value="value1"
+                title="收藏人气"
+              >
+                <template slot="prefix">
+                  <i class="el-icon-s-flag" style="color: red"></i>
+                </template>
+                <template slot="suffix">
+                  <i class="el-icon-s-flag" style="color: blue"></i>
+                </template>
+              </el-statistic>
+            </div>
+          </el-col>
+          <el-col :span="6">
+            <div>
+              <el-statistic :value="like ? 521 : 520" :title="brandName">
+                <template slot="suffix">
+                            <span @click="like = !like" class="like">
+                              <i
+                                class="el-icon-star-on"
+                                style="color:red"
+                                v-show="!!like"
+                              ></i>
+                              <i class="el-icon-star-off" v-show="!like"></i>
+                            </span>
+                </template>
+              </el-statistic>
+            </div>
+          </el-col>
+        </el-row>
+      </el-col>
+      <el-col :span="12">
+        <h1 style=" display: inline-block; margin-right: 160px; margin-left: 30px">{{ good.name }}</h1>{{checkgood.goodname}}
+        <h3 style="display: inline-block; color: red;">单价： ￥{{ checkgood.price }}</h3>
+        <el-form ref="form" :model="form" label-width="80px" style="margin-top: 50px">
+          <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" :disabled="disabled" :min="1" :max="100" label="描述文字"></el-input-number>
+            库存{{ checkgood.stock }}
+            <h3 style="color: red;">总价￥{{ checkgood.sumPrice }}</h3>
+          </el-form-item>
+          <el-form-item>
+            <el-button type="primary" @click="onSubmit">加入购物车</el-button>
+            <el-button type="danger">立即购买</el-button>
+          </el-form-item>
+        </el-form>
+      </el-col>
+    </el-row>
+    <el-row>
+      <el-card class="box-card" style="margin-top: 20px">
+        <div slot="header" class="clearfix">
+          <span>商品详情</span>
+        </div>
+        <el-descriptions class="margin-top" :column="3" size="medium" border>
+          <template slot="extra">
+            <el-button type="primary" size="small">商品评论</el-button>
+          </template>
+          <el-descriptions-item v-for="detail in goodDetail">
+            <template slot="label">
+              <i class="el-icon-user"></i>
+              {{ detail.name }}
+            </template>
+            {{ detail.value }}
+          </el-descriptions-item>
+        </el-descriptions>
+        <el-row>
+          <template v-for="item in 2" >
+            <img :src="good.image">
+          </template>
+          <editor v-model="good.introduction" :read-only="true">
+            <img :src="good.introduction">
+          </editor>
+        </el-row>
+      </el-card>
+    </el-row>
+
+
+
+
+  </div>
+</template>
+<script>
+import {getPro} from "@/api/product/info";
+import rule from "@/views/product/rule/index.vue";
+
+export default {
+  name: 'Index',
+  data() {
+    return {
+      /*选择商品sku信息*/
+      goodSkuDetail:{},
+      id: 0,
+      /*图片*/
+      imageList: [],
+      /*品牌信息*/
+      brandName: "",
+      good: {},
+      like: true,
+      value1: 999,
+      value2: 999,
+      title: "增长人数",
+      breadcrumbList: [],
+      //规格表单
+      form: {
+        ruleList: [],
+        num: 1
+      },
+      ruleValueList: [],
+      /*国歌表单*/
+      categoryCommonElement: {
+        templateAttributeGroupList: [],
+        templateAttributeList: [],
+        attributeList: []
+      },
+      /*商品详情*/
+      goodDetail: [],
+      /*sku*/
+      sku: [],
+      /*选择商品数*/
+      disabled:false,
+      /*选择商品属性*/
+      checkgood:{
+        /*单价*/
+        price: 0,
+        /*库存*/
+        stock: 0,
+        /*总价*/
+        sumPrice: 0,
+        /*商品+类型名*/
+        goodname: "",
+      },
+
+    }
+  },
+  created() {
+
+    const id = this.$route.params.id;
+    this.id = id
+    this.details(id)
+  },
+  watch: {
+    "form.num": {
+      handler(val) {
+        this.checkgood.stock = this.checkgood.stock - 1
+        this.checkgood.sumPrice = this.checkgood.sumPrice + this.checkgood.price
+      }
+    },
+    "checkgood.stock": {
+      handler(val) {
+        if (val === 0) {
+          this.$message.error("库存不够")
+          this.form.num=this.form.num - 1
+          this.disabled=true
+        }
+      }
+    }
+  },
+  methods: {
+
+    changeRule() {
+      this.disabled=false
+      this.form.num=1
+      let selectedValues = this.sku.map((rule, index) => {
+        return this.form['rule' + index]; // 获取每个索引对应的值
+      }).filter(value => value !== '').join(''); // 过滤空值，然后拼接成字符串
+
+      this.goodSkuDetail.sku=selectedValues
+
+      this.sku.forEach(
+        sku => {
+          if (selectedValues === sku.sku) {
+            this.checkgood.price = sku.price
+            this.checkgood.sumPrice = sku.price
+            this.checkgood.stock = sku.stock
+            this.checkgood.goodname = selectedValues
+          }
+        }
+      )
+    },
+
+    /*加入购物车*/
+    onSubmit() {
+      console.log(this.form)
+      let length = this.form.ruleList.length;
+      for (let i = 0; i <length; i++) {
+        console.log(`${this.form.ruleList[i].name}:${this.form[`rule${i}`]}`)
+      }
+      console.log(this.good)
+
+    },
+
+
+
+    details: function (id) {
+      getPro(id).then(
+        res => {
+          console.log(res.data.product)
+          this.breadcrumbList = res.data.typeList
+          this.brandName = res.data.brandName
+          this.good = res.data.product
+          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})
+            }
+          )
+
+          this.form.ruleList = e1
+          this.categoryCommonElement = res.data.categoryCommonElementResp
+          e = []
+          let e = []
+          this.categoryCommonElement.attributeList.forEach(
+            attribute => {
+              e.push(
+                {name: attribute.name, value: attribute.value}
+              )
+            }
+          )
+          this.categoryCommonElement.templateAttributeList.forEach(
+            attribute => {
+              e.push(
+                {name: attribute.name, value: attribute.value}
+              )
+            }
+          )
+          let f = []
+          this.categoryCommonElement.templateAttributeGroupList.forEach(
+            group => {
+              f.push(group.attributeList)
+            }
+          )
+          f.forEach(
+            group => {
+              group.forEach(
+                group1 => {
+                  e.push(
+                    {name: group1.name, value: group1.value}
+                  )
+                }
+              )
+            }
+          )
+
+          this.goodDetail = []
+          this.goodDetail = e.filter(rule => rule.value !== null)
+
+        }
+      )
+    }
+
+  }
+}
+</script>
+<style scoped>
+
+.el-header, .el-footer {
+  background-color: #B3C0D1;
+  color: #333;
+  text-align: center;
+  line-height: 60px;
+}
+
+.el-menu-demo {
+  display: flex;
+  justify-content: flex-end;
+}
+
+.el-main {
+  color: #333;
+}
+
+body > .el-container {
+  margin-bottom: 40px;
+}
+
+.el-container:nth-child(5) .el-aside,
+.el-container:nth-child(6) .el-aside {
+  line-height: 260px;
+}
+
+.el-container:nth-child(7) .el-aside {
+  line-height: 320px;
+}
+</style>
diff --git a/src/views/product/productInfo/detail/shopping.vue b/src/views/product/productInfo/detail/shopping.vue
new file mode 100644
index 0000000..7093364
--- /dev/null
+++ b/src/views/product/productInfo/detail/shopping.vue
@@ -0,0 +1,183 @@
+<template>
+  <div>
+
+
+    <el-breadcrumb separator-class="el-icon-arrow-right">
+      <el-breadcrumb-item :to="{ path: '/' }">首页</el-breadcrumb-item>
+      <el-breadcrumb-item :to="{ path: '/test/:id' }">商城</el-breadcrumb-item>
+    </el-breadcrumb>
+    {{shop}}
+
+    <el-card>
+      <el-table
+        :data="shop"
+        style="width: 100%"
+        row-key="id"
+        :default-checked-keys="defaultCheckedRows"
+        @selection-change="handleSelectionChange">
+      <el-table-column
+          type="selection"
+          width="100">
+        </el-table-column>
+        <el-table-column
+          label="商品信息"
+          width="300">
+          <template slot-scope="scope">
+            <div class="cell-content">
+              <img  :src="scope.row.projectSkuInfo.image"  width="100px" height="100px" class="project-image">
+              <div class="project-info">
+                <h3 class="project-name">{{ scope.row.projectInfo.name }}</h3>
+                <p class="project-description">{{ scope.row.detailSku }}</p>
+              </div>
+            </div>
+          </template>
+
+        </el-table-column>
+        <el-table-column
+          prop="isselected"
+          label="选中状态"
+          width="100">
+        </el-table-column>
+        <el-table-column
+          prop="price"
+          label="单价"
+          width="100">
+        </el-table-column>
+        <el-table-column property="num" label="购买数量" width="200">
+          <template slot-scope="scope">
+            <el-input-number v-model="scope.row.num"
+                             @change="handleNumChange(scope.$index,scope.row)"
+                             :min="1"  label="描述文字"></el-input-number>
+          </template>
+
+        </el-table-column>
+        <el-table-column property="sum" label="小计" width="120">
+          <template slot-scope="scope">
+            <span style="margin-left: 10px">{{ scope.row.num *scope.row.price }}</span>
+          </template>
+        </el-table-column>
+        <el-table-column label="操作">
+          <template slot-scope="scope">
+            <el-button
+              size="mini"
+              @click="handleEdit( scope.row)">移入收藏夹</el-button>
+            <el-button
+              size="mini"
+              type="danger"
+              @click="handleDelete( scope.row)">删除</el-button>
+          </template>
+        </el-table-column>
+      </el-table>
+      <el-divider></el-divider>
+      <el-card >
+        <el-checkbox @selection-change="handleSelectionChange">全选</el-checkbox>
+          删除选中商品 移入到收藏夹
+        <h1 style="color: red">￥ {{totalPrice}}</h1>
+        <el-button
+          size="mini"
+          type="danger"
+          style="margin-left: 600px"
+        >下单结算</el-button>
+      </el-card>
+
+    </el-card>
+
+  </div>
+</template>
+<script>
+import {listShop} from "@/api/product/shop";
+import {testShop} from "@/api/shopCart/shop";
+
+export default {
+  name: 'Index',
+  data() {
+    return {
+      /*选中的行*/
+      multipleSelection:[],
+      /*选中商品*/
+      selectedProduct:[],
+      /*总价钱*/
+      totalPrice:0,
+      /*图片*/
+      src:"http://127.0.0.1:9300/statics/2024/03/25/v2-1d73a9fd4aa25ccccd7800eead8672d0_hd_20240325171828A038.gif",
+      /*购物车对象*/
+      shop:[],
+      /*查询对象*/
+      queryParams: {
+      },
+    }
+  },
+  created() {
+    this.shopList()
+  },
+  watch:{
+    "scope.row.num":{
+      handler(val){
+        console.log(val)
+      }
+    }
+  },
+  computed:{
+    defaultCheckedRows(){
+      return this.shop
+        .filter(row=>row.isselected==='Y')
+        .map(row=>row.id);
+    }
+  },
+  methods: {
+    /*多选框*/
+    handleSelectionChange(val){
+      this.multipleSelection=val
+      this.selectedProduct=val.map(item=>({...item}));
+      this.countTotalPrice()
+    },
+
+    /*数量计数器*/
+    handleNumChange(index,row){
+      this.shop[index].num=row.num;
+      this.countTotalPrice()
+    },
+
+    /*计算总价  选中个数*/
+    countTotalPrice(){
+      this.totalPrice=this.selectedProduct.reduce((sum,shop)=>{
+        if(shop.hasOwnProperty('num') && shop.hasOwnProperty('price')){
+          return sum +shop.num *shop.price;
+        }else{
+          return sum;
+        }
+      },0);
+    },
+
+    /*购物车列表*/
+    shopList(){
+      testShop(this.queryParams).then(res=>{
+        console.log(res)
+        this.shop=res.data.rows
+      })
+    }
+  }
+}
+</script>
+<style scoped>
+.cell-content {
+  display: flex;
+  align-items: flex-start; /* 垂直上边对齐 */
+}
+
+.project-image {
+  margin-right: 10px; /* 图片与文本之间的间距 */
+}
+
+.project-info {
+  display: flex;
+  flex-direction: column; /* 设置为列方向布局，实现上下排列 */
+  align-items: flex-start; /* 垂直上边对齐 */
+}
+
+.project-name,
+.project-description {
+  margin-bottom: 5px; /* 项目名称和描述之间的间距 */
+}
+
+</style>
diff --git a/src/views/shopCart/shop/index.vue b/src/views/shopCart/shop/index.vue
new file mode 100644
index 0000000..bc84a9a
--- /dev/null
+++ b/src/views/shopCart/shop/index.vue
@@ -0,0 +1,310 @@
+<template>
+  <div class="app-container">
+    <el-form :model="queryParams" ref="queryForm" size="small" :inline="true" v-show="showSearch" label-width="68px">
+      <el-form-item label="商品id" prop="projectId">
+        <el-input
+          v-model="queryParams.projectId"
+          placeholder="请输入商品id"
+          clearable
+          @keyup.enter.native="handleQuery"
+        />
+      </el-form-item>
+      <el-form-item label="SKU" prop="projectSku">
+        <el-input
+          v-model="queryParams.projectSku"
+          placeholder="请输入SKU"
+          clearable
+          @keyup.enter.native="handleQuery"
+        />
+      </el-form-item>
+      <el-form-item label="用户id" prop="userId">
+        <el-input
+          v-model="queryParams.userId"
+          placeholder="请输入用户id"
+          clearable
+          @keyup.enter.native="handleQuery"
+        />
+      </el-form-item>
+      <el-form-item label="商品数量" prop="num">
+        <el-input
+          v-model="queryParams.num"
+          placeholder="请输入商品数量"
+          clearable
+          @keyup.enter.native="handleQuery"
+        />
+      </el-form-item>
+      <el-form-item label="是否选中" prop="isSelected">
+        <el-input
+          v-model="queryParams.isSelected"
+          placeholder="请输入是否选中"
+          clearable
+          @keyup.enter.native="handleQuery"
+        />
+      </el-form-item>
+      <el-form-item>
+        <el-button type="primary" icon="el-icon-search" size="mini" @click="handleQuery">搜索</el-button>
+        <el-button icon="el-icon-refresh" size="mini" @click="resetQuery">重置</el-button>
+      </el-form-item>
+    </el-form>
+
+    <el-row :gutter="10" class="mb8">
+      <el-col :span="1.5">
+        <el-button
+          type="primary"
+          plain
+          icon="el-icon-plus"
+          size="mini"
+          @click="handleAdd"
+          v-hasPermi="['shopCart:shop:add']"
+        >新增</el-button>
+      </el-col>
+      <el-col :span="1.5">
+        <el-button
+          type="success"
+          plain
+          icon="el-icon-edit"
+          size="mini"
+          :disabled="single"
+          @click="handleUpdate"
+          v-hasPermi="['shopCart:shop:edit']"
+        >修改</el-button>
+      </el-col>
+      <el-col :span="1.5">
+        <el-button
+          type="danger"
+          plain
+          icon="el-icon-delete"
+          size="mini"
+          :disabled="multiple"
+          @click="handleDelete"
+          v-hasPermi="['shopCart:shop:remove']"
+        >删除</el-button>
+      </el-col>
+      <el-col :span="1.5">
+        <el-button
+          type="warning"
+          plain
+          icon="el-icon-download"
+          size="mini"
+          @click="handleExport"
+          v-hasPermi="['shopCart:shop:export']"
+        >导出</el-button>
+      </el-col>
+      <right-toolbar :showSearch.sync="showSearch" @queryTable="getList"></right-toolbar>
+    </el-row>
+
+    <el-table v-loading="loading" :data="shopList" @selection-change="handleSelectionChange">
+      <el-table-column type="selection" width="55" align="center" />
+      <el-table-column label="主键" align="center" prop="id" />
+      <el-table-column label="商品id" align="center" prop="projectId" />
+      <el-table-column label="SKU" align="center" prop="projectSku" />
+      <el-table-column label="用户id" align="center" prop="userId" />
+      <el-table-column label="商品数量" align="center" prop="num" />
+      <el-table-column label="是否选中" align="center" prop="isSelected" />
+      <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
+            size="mini"
+            type="text"
+            icon="el-icon-edit"
+            @click="handleUpdate(scope.row)"
+            v-hasPermi="['shopCart:shop:edit']"
+          >修改</el-button>
+          <el-button
+            size="mini"
+            type="text"
+            icon="el-icon-delete"
+            @click="handleDelete(scope.row)"
+            v-hasPermi="['shopCart:shop:remove']"
+          >删除</el-button>
+        </template>
+      </el-table-column>
+    </el-table>
+
+    <pagination
+      v-show="total>0"
+      :total="total"
+      :page.sync="queryParams.pageNum"
+      :limit.sync="queryParams.pageSize"
+      @pagination="getList"
+    />
+
+    <!-- 添加或修改购物车对话框 -->
+    <el-dialog :title="title" :visible.sync="open" width="500px" append-to-body>
+      <el-form ref="form" :model="form" :rules="rules" label-width="80px">
+        <el-form-item label="商品id" prop="projectId">
+          <el-input v-model="form.projectId" placeholder="请输入商品id" />
+        </el-form-item>
+        <el-form-item label="SKU" prop="projectSku">
+          <el-input v-model="form.projectSku" placeholder="请输入SKU" />
+        </el-form-item>
+        <el-form-item label="用户id" prop="userId">
+          <el-input v-model="form.userId" placeholder="请输入用户id" />
+        </el-form-item>
+        <el-form-item label="商品数量" prop="num">
+          <el-input v-model="form.num" placeholder="请输入商品数量" />
+        </el-form-item>
+        <el-form-item label="是否选中" prop="isSelected">
+          <el-input v-model="form.isSelected" placeholder="请输入是否选中" />
+        </el-form-item>
+        <el-form-item label="备注" prop="remark">
+          <el-input v-model="form.remark" type="textarea" placeholder="请输入内容" />
+        </el-form-item>
+      </el-form>
+      <div slot="footer" class="dialog-footer">
+        <el-button type="primary" @click="submitForm">确 定</el-button>
+        <el-button @click="cancel">取 消</el-button>
+      </div>
+    </el-dialog>
+  </div>
+</template>
+
+<script>
+import { listShop, getShop, delShop, addShop, updateShop } from "@/api/shopCart/shop";
+
+export default {
+  name: "Shop",
+  data() {
+    return {
+      // 遮罩层
+      loading: true,
+      // 选中数组
+      ids: [],
+      // 非单个禁用
+      single: true,
+      // 非多个禁用
+      multiple: true,
+      // 显示搜索条件
+      showSearch: true,
+      // 总条数
+      total: 0,
+      // 购物车表格数据
+      shopList: [],
+      // 弹出层标题
+      title: "",
+      // 是否显示弹出层
+      open: false,
+      // 查询参数
+      queryParams: {
+        pageNum: 1,
+        pageSize: 10,
+        projectId: null,
+        projectSku: null,
+        userId: null,
+        num: null,
+        isSelected: null,
+      },
+      // 表单参数
+      form: {},
+      // 表单校验
+      rules: {
+      }
+    };
+  },
+  created() {
+    this.getList();
+  },
+  methods: {
+    /** 查询购物车列表 */
+    getList() {
+      this.loading = true;
+      listShop(this.queryParams).then(response => {
+        this.shopList = response.data.rows;
+        this.total = response.data.total;
+        this.loading = false;
+      });
+    },
+    // 取消按钮
+    cancel() {
+      this.open = false;
+      this.reset();
+    },
+    // 表单重置
+    reset() {
+      this.form = {
+        id: null,
+        projectId: null,
+        projectSku: null,
+        userId: null,
+        num: null,
+        isSelected: null,
+        remark: null,
+        createBy: null,
+        createTime: null,
+        updateBy: null,
+        updateTime: null
+      };
+      this.resetForm("form");
+    },
+    /** 搜索按钮操作 */
+    handleQuery() {
+      this.queryParams.pageNum = 1;
+      this.getList();
+    },
+    /** 重置按钮操作 */
+    resetQuery() {
+      this.resetForm("queryForm");
+      this.handleQuery();
+    },
+    // 多选框选中数据
+    handleSelectionChange(selection) {
+      this.ids = selection.map(item => item.id)
+      this.single = selection.length!==1
+      this.multiple = !selection.length
+    },
+    /** 新增按钮操作 */
+    handleAdd() {
+      this.reset();
+      this.open = true;
+      this.title = "添加购物车";
+    },
+    /** 修改按钮操作 */
+    handleUpdate(row) {
+      this.reset();
+      const id = row.id || this.ids
+      getShop(id).then(response => {
+        this.form = response.data;
+        this.open = true;
+        this.title = "修改购物车";
+      });
+    },
+    /** 提交按钮 */
+    submitForm() {
+      this.$refs["form"].validate(valid => {
+        if (valid) {
+          if (this.form.id != null) {
+            updateShop(this.form).then(response => {
+              this.$modal.msgSuccess("修改成功");
+              this.open = false;
+              this.getList();
+            });
+          } else {
+            addShop(this.form).then(response => {
+              this.$modal.msgSuccess("新增成功");
+              this.open = false;
+              this.getList();
+            });
+          }
+        }
+      });
+    },
+    /** 删除按钮操作 */
+    handleDelete(row) {
+      const ids = row.id || this.ids;
+      this.$modal.confirm('是否确认删除购物车编号为"' + ids + '"的数据项？').then(function() {
+        return delShop(ids);
+      }).then(() => {
+        this.getList();
+        this.$modal.msgSuccess("删除成功");
+      }).catch(() => {});
+    },
+    /** 导出按钮操作 */
+    handleExport() {
+      this.download('shopCart/shop/export', {
+        ...this.queryParams
+      }, `shop_${new Date().getTime()}.xlsx`)
+    }
+  }
+};
+</script>