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

商品购物车

master
2812875475 2024-04-09 20:58:28 +08:00
parent b47cbef72f
commit 5831060879
7 changed files with 257 additions and 166 deletions
Show Stats Download Patch File Download Diff File Expand all files Collapse all files

28
src/api/shopCart/shop.js
View File

@ -59,3 +59,31 @@ export function checkState(state) {
data:state
})
}
export function updSelected(state) {
return request({
url: '/shopCart/shop/updSelected',
method: 'post',
data:state
})
}
export function editShopNum(state) {
return request({
url: '/shopCart/shop/editShopNum',
method: 'post',
data:state
})
}
export function delShoppingMethod(state) {
return request({
url: '/shopCart/shop/delShop',
method: 'post',
data:state
})
}
export function shopDetail() {
return request({
url: '/shopCart/shop/detail',
method: 'get'
})
}

17
src/layouttest/index.vue
View File

@ -10,8 +10,17 @@
text-color="#fff"
active-text-color="#ffd04b">
<el-menu-item index="1">处理中心</el-menu-item>
<el-submenu index="2" >
<el-menu-item index="1">
<router-link :to="'/commodityMall' " class="link-type">
<span>商品商城</span>
</router-link>
</el-menu-item>
<el-menu-item index="2">
<router-link :to="'/orderShop' " class="link-type">
<span>购物车结算</span>
</router-link>
</el-menu-item>
<el-submenu index="3" >
<template slot="title">我的购物车</template>
<el-table
:data="shop"
@ -40,8 +49,8 @@
<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>
<el-menu-item index="4" disabled>消息中心</el-menu-item>
</el-menu>
</el-header>
<el-main>

25
src/router/index.js
View File

@ -78,11 +78,11 @@ export const constantRoutes = [
{
path: '',
component: Layouttest,
redirect: 'test',
redirect: 'commodity_mall',
children: [
{
path: '/test/:id',
component: () => import('@/views/a/index'),
path: '/commodityMall',
component: () => import('@/views/product/productInfo/commodityMall/commodity.vue'),
name: 'Test',
meta: {title: "商品商城", icon: 'dashboard', affix: true}
}
@ -91,7 +91,7 @@ export const constantRoutes = [
{
path: '',
component: Layouttest,
redirect: 'test',
redirect: 'product_details',
children: [
{
path: '/detailsComponent/:id',
@ -104,16 +104,29 @@ export const constantRoutes = [
{
path: '',
component: Layouttest,
redirect: 'test',
redirect: 'shop_detail',
children: [
{
path: 'shopping',
component: () => import('@/views/product/productInfo/detail/shopping.vue'),
component: () => import('@/views/shopCart/shop/detail/shopDetail.vue'),
name: 'Test',
meta: {title: "购物车", icon: 'dashboard', affix: true}
}
]
},
{
path: '',
component: Layouttest,
redirect: 'order_shop',
children: [
{
path: 'orderShop',
component: () => import('@/views/shopCart/shop/order/orderShop.vue'),
name: 'Test',
meta: {title: "购物车结算", icon: 'dashboard', affix: true}
}
]
},
{
path: '/user',
component: Layout,

0
src/views/a/index.vue → src/views/product/productInfo/commodityMall/commodity.vue
View File

4
src/views/product/productInfo/detail/productDetails.vue
View File

@ -3,7 +3,7 @@
<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 :to="{ path: '/commodityMall' }">商城</el-breadcrumb-item>
<el-breadcrumb-item v-for="breadcrumb in breadcrumbList">{{ breadcrumb }}</el-breadcrumb-item>
</el-breadcrumb>
@ -138,7 +138,7 @@ import rule from "@/views/product/rule/index.vue";
import {addShop} from "@/api/shopCart/shop";
export default {
name: 'Index',
name: 'product_details',
data() {
return {
/*加入购物车*/

327
src/views/product/productInfo/detail/shopping.vue → src/views/shopCart/shop/detail/shopDetail.vue
View File

@ -2,12 +2,6 @@
<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
ref="multipleTable"
@ -24,9 +18,9 @@
width="300">
<template slot-scope="scope">
<div class="cell-content">
<img :src="scope.row.projectSkuInfo.image" width="100px" height="100px" class="project-image">
<img :src="scope.row.image" width="100px" height="100px" class="project-image">
<div class="project-info">
<h3 class="project-name">{{ scope.row.projectInfo.name }}</h3>
<h3 class="project-name">{{ scope.row.name }}</h3>
<p class="project-description">{{ scope.row.detailSku }}</p>
</div>
</div>
@ -46,22 +40,18 @@
<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)"
@change="handleNumChange(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>
<span style="margin-left: 10px">{{ scope.row.subtotal }}</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"
@ -73,14 +63,15 @@
<el-divider></el-divider>
<span style="color: #97a8be">失效商品</span>
<el-table
:show-header="false"
:data="oldshop"
ref="multipleTableOld"
style="width: 100%"
@selection-change="handleSelectionChangeOld"
>
<el-table-column
type="selection"
width="55">
<template slot-scope="scope">
<el-checkbox disabled></el-checkbox>
</template>
</el-table-column>
<el-table-column
width="300">
@ -113,7 +104,7 @@
</el-table-column>
<el-table-column property="sum" width="120">
<template slot-scope="scope">
<span style="margin-left: 10px">{{ scope.row.num * scope.row.price }}</span>
<span style="margin-left: 10px">{{ scope.row.num * scope.row.price }}</span>
</template>
</el-table-column>
<el-table-column>
@ -130,18 +121,37 @@
</template>
</el-table-column>
</el-table>
<el-card>
<el-checkbox v-model="selectAll" @change="handleSelectionChangeAll">全选</el-checkbox>
删除选中商品 移入到收藏夹
<h1 style="color: red">￥ {{ totalPrice +totalPriceOld}}</h1>
<h1 style="color: red">Old￥ {{ totalPriceOld }}</h1>
<h1 style="color: red">选中商品个数 {{num+numOld}}</h1>
<el-button
size="mini"
type="danger"
style="margin-left: 600px"
>下单结算
</el-button>
<el-card style="margin-top: 20px">
<div>
<el-row>
<el-col :span="6">
<div style="padding-top: 8px">
<el-checkbox v-model="isAllCheck" @change="changeIsAllCheck">全选</el-checkbox>
<el-button type="text" style="margin-left: 10px" @click="handleDelete(undefined)">删除选中商品
</el-button>
<el-button type="text">添加我的收藏</el-button>
</div>
</el-col>
<el-col :span="14">
<div style="margin-left: 80px;padding-top: 8px">
<span>共<span style="color: red;">{{ statisticsShop.total }}</span> 件商品
，已选择 <span style="color: red;">{{ statisticsShop.selectTotal }}</span> 件</span>
<el-divider direction="vertical"></el-divider>
<span>商品合计 : <span style="color: red;">¥{{ statisticsShop.priceTotal }}</span></span>
<el-divider direction="vertical"></el-divider>
<span>商品合计 : <span style="color: red; font-size: 24px">¥{{
statisticsShop.priceTotal
}}</span></span>
</div>
</el-col>
<el-col :span="4">
<el-button style="float: right; " type="success" @click="orderShop">下单结算</el-button>
</el-col>
</el-row>
</div>
</el-card>
</el-card>
@ -150,35 +160,23 @@
</template>
<script>
import {listShop} from "@/api/product/shop";
import {checkState, testShop} from "@/api/shopCart/shop";
import {checkState, delShoppingMethod, editShopNum, shopDetail, testShop, updSelected} from "@/api/shopCart/shop";
import shop from "@/views/shopCart/shop/index.vue";
import item from "@/layout/components/Sidebar/Item.vue";
export default {
name: 'Index',
name: 'shop_detail',
data() {
return {
/**/
selectAll:false,
/*选中商品*/
selectedProduct: [],
num:0,
/*选中失效*/
selectedProductOld:[],
numOld:0,
/*每次选中的*/
selectedRows: [],
/*总价钱*/
totalPrice: 0,
/*失效总价*/
totalPriceOld:0,
/*购物车对象*/
/*生效商品对象*/
shop: [],
/*查询对象*/
queryParams: {},
/*多选框id*/
ids: [],
/*购物车状态为选中*/
checkEd: [],
/*失效商品*/
oldshop: [
{
"id": 3,
@ -212,130 +210,154 @@ export default {
"price": 123,
"sumPrice": null
}
]
],
isAllCheck: false,
/*统计*/
statisticsShop: {
/*商品总数*/
total: 0,
/*选中商品总数*/
selectTotal: 0,
/*商品总价*/
priceTotal: 0.00,
/*实际商品总价*/
actualTotal: 0.00
}
}
},
created() {
this.shopList()
this.init();
},
watch: {
selectedRows: {
handler(newVal, oldVal) {
// 处理新选中的行
newVal.forEach(row => {
if (row.isselected === 1) {
} else if (row.isselected === 0) {
}
});
// 处理之前选中的但现在未选中的行
oldVal.forEach(row => {
if (!newVal.find(newRow => newRow.id === row.id)) {
// 如果oldVal中的行不在newVal中，说明它被取消了选中
if (row.isselected === 1) {
// let state = {
// ids: []
// }
// state.ids=row.id
// state.flag = 0
// checkState(state).then(
// res => {
// this.$message.success("成功")
// this.shopList()
// }
// )
}
if (row.isselected === 0) {
// let state = {
// ids: []
// }
// state.ids=row.id
// state.flag = 1
// checkState(state).then(
// res => {
// this.$message.success("成功")
// this.shopList()
// }
// )
}
}
});
},
deep: true // 深度监听selectedRow中的对象变化
}
},
methods: {
/*多选框*/
handleSelectionChange(val) {
if (val.length === 0) {
this.selectedRows = []
/*下单结算*/
orderShop() {
this.$router.push('/orderShop')
},
/*删除*/
handleDelete(row) {
console.log(row)
let dekShopReq = []
if (row) {
dekShopReq.push({
"projectId": row.projectId,
"projectSku": row.projectSku,
"id": row.shoppingId,
})
} else {
this.selectedRows = val.slice(0, 1);
}
this.selectedProduct = val.map(item => ({...item}));
this.num=this.selectedProduct.length
this.selectAll=val.length
this.countTotalPrice()
},
/*失效商品*/
handleSelectionChangeOld(val){
this.selectedProductOld = val.map(item => ({...item}));
this.numOld=this.selectedProductOld.length
this.selectAll=val.length
this.countTotalPriceOld()
},
/*全选*/
handleSelectionChangeAll(){
if (this.selectAll) {
this.$refs.multipleTable.toggleRowSelection(this.shop, true);
this.$refs.multipleTableOld.toggleRowSelection(this.oldshop, true);
}
},
/*多选选中*/
select() {
this.shop.forEach((item, index) => {
if (item.isselected === 1) {
this.$nextTick(() => {
this.$refs.multipleTable.toggleRowSelection(this.shop[index], true)
})
if (this.selectedProduct.length === 0) {
this.$message.error("请选择商品")
return
}
this.selectedProduct.forEach(item => {
dekShopReq.push({
"projectId": item.projectId,
"projectSku": item.projectSku,
"id": item.shoppingId,
})
})
}
delShoppingMethod(dekShopReq).then(
res => {
this.init()
}
)
},
/*初始化*/
init() {
this.shop = []
this.selectedProduct = []
shopDetail().then(
res => {
this.statisticsShop = res.data.statisticsShop
this.shop = res.data.shopSkuList
setTimeout(this.initShopSelected, 200)
}
)
},
/*默认选中*/
initShopSelected() {
this.shop.forEach(item => {
if (item.isselected === 1) {
this.$refs.multipleTable.toggleRowSelection(item, true);
}
})
},
/*多选框*/
handleSelectionChange(val) {
let selectShopList = []
let newSelect = val.filter(
row => !this.selectedProduct.includes(row)
);
checkedd(rows) {
if (rows) {
rows.forEach(row => {
this.$refs.multipleTable.toggleRowSelection(row,true);
newSelect.forEach(item => {
selectShopList.push({
"projectId": item.projectId,
"projectSku": item.projectSku,
"isselected": 1,
})
})
let noSelect = this.selectedProduct.filter(
row => !val.includes(row)
);
noSelect.forEach(item => {
selectShopList.push({
"projectId": item.projectId,
"projectSku": item.projectSku,
"isselected": 0,
})
})
let cartProjectMap = {};
this.shop.map(item =>
cartProjectMap[`${item.projectId} + ${item.projectSku}`] = item.isselected)
let editCartProjectFilterList
= selectShopList.filter(item => item.isselected !==
cartProjectMap[`${item.projectId} + ${item.projectSku}`])
if (editCartProjectFilterList.length > 0) {
updSelected(selectShopList).then(
res => {
this.init();
}
)
}
this.selectedProduct = val
this.isAllCheck = val.length === this.shop.length
//this.countTotalPrice()
},
/*全选*/
changeIsAllCheck() {
if (this.isAllCheck) {
this.$refs.multipleTable.toggleAllSelection();
} else {
this.$refs.multipleTable.clearSelection();
}
},
/*数量计数器*/
handleNumChange(index, row) {
this.shop[index].num = row.num;
this.countTotalPrice()
handleNumChange(row) {
let shopNumEdit = {
"projectId": row.projectId,
"projectSku": row.projectSku,
"num": row.num,
}
editShopNum(shopNumEdit).then(
res => {
this.init()
}
)
// 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);
},
countTotalPriceOld(){
this.totalPriceOld = this.selectedProductOld.reduce((sum, shop) => {
this.statisticsShop.priceTotal = this.selectedProduct.reduce((sum, shop) => {
if (shop.hasOwnProperty('num') && shop.hasOwnProperty('price')) {
return sum + shop.num * shop.price;
} else {
@ -350,10 +372,7 @@ export default {
this.shop = res.data.rows
});
}
},
mounted() {
this.checkedd(this.oldshop)
},
}
}
</script>

22
src/views/shopCart/shop/order/orderShop.vue 100644
View File

@ -0,0 +1,22 @@
<template>
<div>
哈哈哈
</div>
</template>
<script>
export default {
name: 'order_shop',
data() {
return {}
},
created() {
},
methods: {}
}
</script>
<style scoped>
</style>