ll
/
ui
1
0
Fork 0
Code Issues Pull Requests Packages Projects Releases Wiki Activity

商品购物车

master
2812875475 2024-03-31 09:48:14 +08:00
parent 5d3d7e6cc1
commit c71306721c
8 changed files with 1009 additions and 368 deletions
Show Stats Download Patch File Download Diff File Expand all files Collapse all files

44
src/api/product/shop.js 100644
View File

@ -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'
})
}

53
src/api/shopCart/shop.js 100644
View File

@ -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'
})
}

75
src/layouttest/index.vue
View File

@ -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>

25
src/router/index.js
View File

@ -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
}
]
// 动态路由，基于用户权限动态去加载

347
src/views/a/detailsComponent.vue
View File

@ -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>

340
src/views/product/productInfo/detail/productDetails.vue 100644
View File

@ -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>

183
src/views/product/productInfo/detail/shopping.vue 100644
View File

@ -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>

310
src/views/shopCart/shop/index.vue 100644
View File

@ -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>