dyf
/
test-ui
1
0
Fork 0
Code Issues Pull Requests Packages Projects Releases Wiki Activity

购物车缓存+页面

dev
Yunfei Du 2024-04-03 13:27:11 +08:00
parent 144c245f61
commit f0c9c18833
1 changed files with 220 additions and 15 deletions
Show Stats Download Patch File Download Diff File Expand all files Collapse all files

233
src/views/shopCart/Info/detail/index.vue
View File

@ -1,21 +1,25 @@
<template>
<div>
{{cartInfoAttr}}
<span style="color: #8492a6">我的购物车</span>
<br> <br> <br>
<el-card class="box-card">
<template>
<el-table
ref="multipleTable"
:data="cartInfoAttr"
style="width: 100%;">
<el-table-column
type="selection"
width="55">
</el-table-column>
style="width: 100%;"
@selection-change="handleSelectionChange"
>
<el-table-column type="selection" width="55"></el-table-column>
<el-table-column label="商品信息" align="center">
<template v-slot="cartInfo">
<div>
<img style="float: left" :src="cartInfo.row.productSkuInfo.image" alt="暂无图片" width="80px" height="80px">
<span style="font-size: 16px"><b>{{ cartInfo.row.productSkuInfo.name }}</b></span> <br>
{{cartInfo.row.projectName}}
<br>
{{ cartInfo.row.productSkuInfo.sku }}
</div>
</template>
@ -25,15 +29,16 @@
<span style="font-size: 16px">¥{{ cartInfo.row.productSkuInfo.price }}</span>
</template>
</el-table-column>
<el-table-column label="数量" align="center">
<el-table-column label="数量" align="center" width="150">
<template v-slot="cartInfo">
<el-input-number v-model="cartInfo.row.num" :min="1" :max="cartInfo.row.productSkuInfo.stock" label="描述文字"></el-input-number>
<el-input-number v-model="cartInfo.row.num" :min="1" :max="cartInfo.row.productSkuInfo.stock" label="描述文字" @change="changeNum(cartInfo.row)"></el-input-number>
</template>
</el-table-column>
<el-table-column label="小计" align="center">
<template v-slot="cartInfo">
<span style="color: red;font-size: 16px">¥{{ cartInfo.row.subtotal }}</span>
</template>
show-overflow-tooltip
</el-table-column>
<el-table-column label="操作" align="center">
<template v-slot="cartInfo">
@ -55,7 +60,11 @@
<div>
<img style="float: left" :src="cartInfo.row.productSkuInfo.image" alt="暂无图片" width="80px" height="80px">
<span style="font-size: 16px"><b>{{ cartInfo.row.productSkuInfo.name }}</b></span> <br>
{{cartInfo.row.projectName}}
<br>
{{ cartInfo.row.productSkuInfo.sku }}
<span v-if="cartInfo.row.productSkuInfo.stock == 0" style="color: red">已售罄</span>
<span v-else style="color: red">已下架</span>
</div>
</template>
</el-table-column>
@ -76,14 +85,32 @@
</el-table-column>
<el-table-column align="center">
<template v-slot="cartInfo">
<el-button type="text" style="color: black">移入收藏夹</el-button>
<br>
<el-button type="text" style="color: black">删除</el-button>
</template>
</el-table-column>
</el-table>
</template>
</el-card>
<br><br>
<!-- 计算模块-->
<el-card>
<div>
<el-checkbox style="margin-top: 15px;margin-right: 20px" v-model="checkAll" @change="checkedAll">全选</el-checkbox>
<el-button type="text" style="color: black">删除选中商品</el-button>
<el-button type="text" style="color: black">移入收藏夹</el-button>
<div style="float: right;margin-bottom: 15px" >
<el-button style="width: 120px;height: 50px;" type="danger">下单结算</el-button>
</div>
<div style="float: right;margin-top: 12px;margin-right: 20px;font-size: 14px;color: #8492a6">
共 <span style="font-size: 16px;color: red">{{ computeInfo.packagesSum }}</span> 件商品，已选择 <span style="font-size: 16px;color: red">{{ computeInfo.packagesNumber }}</span> 件
<el-divider direction="vertical"></el-divider>
商品合计 : ¥{{ computeInfo.priceTotal }} <span style="margin-left: 10px"> 活动优惠 </span>: -¥{{ 0.00 }}
<el-divider direction="vertical"></el-divider>
应付总额：<span style="color: red;font-size: 20px"><b>¥{{ computeInfo.copeWith }}</b></span>
</div>
</div>
</el-card>
</div>
</template>
@ -92,38 +119,47 @@ export default {
name: "index",
data() {
return {
checkAll: false,
multipleSelection:[],
borderBoolean: false,
showHeader: false,
selectedList:[],
cartInfoAttr: [
{
id:1,
num: 2,
subtotal: 478,
isSelected:"Y",
projectName: '外套',
productSkuInfo: {
sku: '黑色-M',
price: 239.0,
name: '上衣撒大大大大大阿达大大',
stock: 10,
image: 'http://127.0.0.1:9300/statics/2024/03/22/小米logo_20240322190304A007.png'
}
},
{
id:2,
num: 1,
subtotal: 129,
isSelected:"Y",
projectName: '外套',
productSkuInfo: {
sku: '红色-S',
price: 129.0,
name: '裤子',
stock: 12,
image: 'http://127.0.0.1:9300/statics/2024/03/22/小米logo_20240322190304A007.png'
}
},
{
id:3,
num: 3,
subtotal: 477,
isSelected:"N",
projectName: '裤子',
productSkuInfo: {
sku: '白色-XL',
price: 159,
name: '外套',
stock: 10,
image: 'http://127.0.0.1:9300/statics/2024/03/22/小米logo_20240322182621A005.png'
}
@ -131,21 +167,190 @@ export default {
],
loseCartInfoAttr: [
{
id:4,
num: 2,
subtotal: 478,
projectName: 'T恤衫',
productSkuInfo: {
sku: '黑色-M',
price: 239.0,
name: '嘿嘿黑',
stock: 10,
image: 'http://127.0.0.1:9300/statics/2024/03/22/小米logo_20240322182621A005.png'
}
},
{
id:5,
num: 3,
subtotal: 478,
projectName: 'T恤衫',
productSkuInfo: {
sku: '红色-XL',
price: 239.0,
stock: 10,
image: 'http://127.0.0.1:9300/statics/2024/03/22/小米logo_20240322182621A005.png'
}
}
]
],
computeInfo: {
packagesNumber: 0,
packagesSum: 0,
priceTotal: 0,
copeWith: 0
}
}
},
methods: {
// // 按钮变色
// changeTextColor() {
// this.buttonTextColor = 'blue'; // 设置鼠标悬停时的文字颜色
// console.log(this.buttonTextColor)
// },
// resetTextColor() {
// this.buttonTextColor = 'black'; // 恢复默认的文字颜色
// },
//全选 true
checkedAll(selectAll) {
this.selectedList = []
if (selectAll) {
this.toggleSelection(this.cartInfoAttr)
this.selectedList = this.cartInfoAttr
}else{
this.$refs.multipleTable.clearSelection();
}
},
/**
* 重置购物车已选择商品计算信息
*/
computeInfoReset() {
this.computeInfo.packagesNumber = 0
this.computeInfo.priceTotal = 0
this.computeInfo.copeWith = 0
this.selectedList = []
},
//购物车商品选中
toggleSelection(rows) {
if (rows) {
rows.forEach(row => {
this.$refs.multipleTable.toggleRowSelection(row);
});
} else {
this.$refs.multipleTable.clearSelection();
}
},
//购物车商品选择改变方法
handleSelectionChange(val) {
console.log(val)
this.computeInfoReset()
this.selectedList = val
this.cartInfoAttr.forEach(cartInfo => {
cartInfo.isSelected = 'N'
})
if (val.length == this.cartInfoAttr.length) {
this.checkAll = true
}else{
this.checkAll = false
}
val.forEach(cartInfo => {
this.cartInfoAttr[this.cartInfoAttr.indexOf(cartInfo)].isSelected = 'Y'
this.computeInfo.copeWith += parseFloat(cartInfo.subtotal)
this.computeInfo.priceTotal += parseFloat(cartInfo.subtotal)
this.computeInfo.packagesNumber += parseInt(cartInfo.num)
})
},
//计算购物车商品总件数
computePackagesSum() {
this.computeInfo.packagesSum = 0
this.cartInfoAttr.forEach(cartInfo => {
this.computeInfo.packagesSum += cartInfo.num
})
this.loseCartInfoAttr.forEach(loseCartInfo => {
this.computeInfo.packagesSum += loseCartInfo.num
})
},
//改变购物车商品数量
changeNum(row) {
if (row.num === row.productSkuInfo.stock) {
this.$message({
message: '商品: '+row.projectName+' 库存不足',
type: 'warning'
});
}
this.computeInfoReset()
this.computeInfo.packagesSum = 0
this.cartInfoAttr.forEach(cartInfo => {
if (cartInfo.id == row.id){
cartInfo.subtotal = parseFloat(cartInfo.productSkuInfo.price) * parseInt(row.num)
}
if (cartInfo.isSelected == 't'){
this.computeInfo.copeWith += parseFloat(cartInfo.subtotal)
this.computeInfo.priceTotal += parseFloat(cartInfo.subtotal)
this.computeInfo.packagesNumber += parseInt(cartInfo.num)
}
})
this.computePackagesSum()
},
//获取购物车详情信息
cartInfoList() {
this.cartInfoAttr.forEach(cartInfo => {
this.computeInfo.packagesSum += cartInfo.num
})
this.loseCartInfoAttr.forEach(loseCartInfo => {
this.computeInfo.packagesSum += loseCartInfo.num
})
this.cartInfoAttr.forEach(cartInfo => {
if (cartInfo.isSelected == 't'){
this.selectedList.push(cartInfo)
}
})
}
},
mounted() {
this.toggleSelection(this.selectedList)
},
created() {
this.cartInfoList()
},
// handleSelectionChange(val){
// this.multipleSelection=[]
// this.cartInfoAttr.forEach(cartInfoAttr=>{
//
// // 检查val数组中是否有与当前cartInfoAttr的projectName和productSkuInfo.sku相匹配的对象
// const selected=val.find(item=>item.productSkuInfo.sku===cartInfoAttr.productSkuInfo.sku && item.projectName===cartInfoAttr.projectName)
//
// // 根据selectedItem是否存在来设置isSelected属性 有-->"Y" 没有-->"N"
// cartInfoAttr.isSelected=selected ? "Y" : "N";
//
// // 如果item被选中，则将其SKU添加到multipleSelection数组中
// if (cartInfoAttr.isSelected==="Y"){
// this.multipleSelection.push(cartInfoAttr.productSkuInfo.sku)
// }
// })
// console.log(this.multipleSelection)
// }
// handleSelectionChange(val){
// this.multipleSelection=[]
// this.cartInfoAttr.forEach(cartInfoAttr=>{
// const selected =val.find(item=>item.productSkuInfo.sku===cartInfoAttr.productSkuInfo.sku && item.projectName === cartInfoAttr.projectName)
//
// cartInfoAttr.isSelected=selected? "Y" :"N";
//
// if (cartInfoAttr.isSelected==="Y"){
// this.multipleSelection.push(cartInfoAttr.productSkuInfo.sku)
// }
//
// })
// console.log(this.multipleSelection)
// }
}
</script>