<template>
|
<view class="mainbox">
|
|
<!-- 商品列表 -->
|
<view class="listbox"> <div class="listitem" v-for="(item, index) in cartGoods" :key="index"> <!-- 复选框 --> <checkbox-group @change="itemCheckboxChange(index, $event)"> <checkbox :value="String(index)" :checked="item.checked == 1" style="transform:scale(0.7)" class="blue" /> </checkbox-group> <!-- 商品图片 --> <image class="img" :src="item.picUrl" mode="aspectFill"></image> <!-- 商品信息 --> <div class="rightinfo"> <!-- 商品名称和数量同一行 --> <div class="goodsname-box"> <div class="goodsname">{{ item.goodsName || '商品名称' }}</div> <text class="quantity">×{{ item.quantity || 1 }}</text> </div> <div class="goodsdesc">{{ item.goodsDesc || '商品描述' }}</div> <div class="pricebox"> <text class="price">￥{{ item.price || 0 }}</text> </div> </div> <!-- 删除按钮 --> <view class="delete-btn" @tap="deleteItem(index)"> <u-icon name="trash" color="#FFFFFF" size="24"></u-icon> </view> </div> <!-- 空状态 --> <view v-if="!cartGoods.length" class="empty"> <u-empty mode="car" text="购物车为空"></u-empty> </view> </view>
|
<!-- 底部栏 -->
|
<view class="bottom" v-if="cartGoods.length">
|
<view class="left">
|
<div class="all">
|
<checkbox-group @change="checkboxChange">
|
<checkbox style="transform:scale(0.7)" class="blue" :checked="checkedAllStatus"
|
:value="'all'" />
|
</checkbox-group>
|
<span>全选</span>
|
</div>
|
<div class="chong">
|
<span>合计：</span>
|
<span class="amount">{{ num }}</span>
|
</div>
|
</view>
|
<view class="right">
|
<u-button type="success" text="立即预约" loadingText="预约中" :disabled="checkedadd.length === 0"
|
color="#419FFD" @click="handlePay"></u-button>
|
</view>
|
</view>
|
</view>
|
</template>
|
|
<script>
|
import {
|
getMyCart,
|
removeMyCart
|
} from "@/api/system/cart";
|
|
export default {
|
data() {
|
return {
|
|
cartGoods: [], // 购物车商品列表
|
checkedadd: [], // 已选中的商品
|
checkedAllStatus: false, // 全选状态
|
cartTotal: {
|
checkedGoodsAmount: 0, // 已选商品总金额
|
checkedGoodsCount: 0, // 已选商品数量
|
},
|
num: 0, // 总计金额
|
};
|
},
|
onLoad() {
|
this.getCartList();
|
},
|
methods: {
|
// 获取购物车列表
|
getCartList() {
|
uni.showLoading({
|
title: '加载中...',
|
});
|
getMyCart()
|
.then(res => {
|
this.cartGoods = res.data.map(item => ({
|
...item,
|
quantity: item.quantity || 1, // 确保数量字段存在
|
checked: item.checked || 0, // 确保checked字段存在
|
}));
|
this.checkedadd = [];
|
this.cartGoods.forEach(item => {
|
if (item.checked == 1) {
|
this.checkedadd.push(item);
|
}
|
});
|
this.updateCartTotal();
|
uni.hideLoading();
|
})
|
.catch(err => {
|
console.error('接口调用失败：', err);
|
uni.hideLoading();
|
uni.showToast({
|
title: '加载购物车失败',
|
icon: 'error',
|
});
|
});
|
},
|
// 更新总计信息
|
updateCartTotal() {
|
if (this.checkedadd.length > 0) {
|
this.checkedAllStatus = this.checkedadd.length === this.cartGoods.length;
|
this.cartTotal.checkedGoodsAmount = 0;
|
this.checkedadd.forEach(item => {
|
this.cartTotal.checkedGoodsAmount += item.price * (item.quantity || 1);
|
});
|
this.cartTotal.checkedGoodsCount = this.checkedadd.length;
|
this.num = this.cartTotal.checkedGoodsAmount.toFixed(2);
|
} else {
|
this.checkedAllStatus = false;
|
this.cartTotal.checkedGoodsAmount = 0;
|
this.cartTotal.checkedGoodsCount = 0;
|
this.num = 0;
|
}
|
},
|
// 单项复选框变化
|
itemCheckboxChange(index, e) {
|
const value = e.detail.value;
|
const item = this.cartGoods[index];
|
if (value.length > 0) {
|
item.checked = 1;
|
if (!this.checkedadd.includes(item)) {
|
this.checkedadd.push(item);
|
}
|
} else {
|
item.checked = 0;
|
this.checkedadd = this.checkedadd.filter(i => i !== item);
|
}
|
this.updateCartTotal();
|
},
|
// 全选复选框变化
|
checkboxChange(e) {
|
const value = e.detail.value;
|
if (value.length > 0) {
|
this.checkedAllStatus = true;
|
this.cartGoods.forEach(item => {
|
item.checked = 1;
|
if (!this.checkedadd.includes(item)) {
|
this.checkedadd.push(item);
|
}
|
});
|
} else {
|
this.checkedAllStatus = false;
|
this.checkedadd = [];
|
this.cartGoods.forEach(item => {
|
item.checked = 0;
|
});
|
}
|
this.updateCartTotal();
|
},
|
|
|
|
// 删除商品
|
deleteItem(index) {
|
const item = this.cartGoods[index];
|
uni.showModal({
|
title: '提示',
|
content: '确定删除该商品吗？',
|
success: res => {
|
if (res.confirm) {
|
removeMyCart([item.id])
|
.then(() => {
|
this.cartGoods.splice(index, 1);
|
this.checkedadd = this.checkedadd.filter(i => i !== item);
|
this.updateCartTotal();
|
uni.showToast({
|
title: '删除成功',
|
icon: 'success',
|
});
|
})
|
.catch(err => {
|
console.error('删除失败：', err);
|
uni.showToast({
|
title: '删除失败',
|
icon: 'error',
|
});
|
});
|
}
|
},
|
});
|
},
|
// 立即支付
|
handlePay() {
|
if (this.checkedadd.length === 0) {
|
uni.showToast({
|
title: '请选择商品',
|
icon: 'none',
|
});
|
return;
|
}
|
uni.showLoading({
|
title: '支付中...',
|
});
|
setTimeout(() => {
|
uni.hideLoading();
|
uni.showToast({
|
title: '支付成功',
|
icon: 'success',
|
});
|
this.checkedadd = [];
|
this.cartGoods.forEach(item => {
|
item.checked = 0;
|
});
|
this.updateCartTotal();
|
}, 1000);
|
},
|
},
|
};
|
</script>
|
|
<style lang="scss" scoped>
|
.mainbox {
|
width: 750rpx;
|
min-height: 100vh;
|
background: #FFFFFF;
|
padding: 20rpx 0 118rpx;
|
/* 调整为 98rpx + 20rpx 间距 */
|
}
|
|
.listbox {
|
padding: 0 24rpx;
|
}
|
|
.listitem {
|
display: flex;
|
align-items: center;
|
padding: 20rpx 0;
|
border-bottom: 1rpx solid #EEEEEE;
|
position: relative;
|
}
|
|
.img {
|
width: 128rpx;
|
height: 128rpx;
|
border-radius: 8rpx;
|
margin: 0 20rpx;
|
}
|
|
.rightinfo {
|
flex: 1;
|
display: flex;
|
flex-direction: column;
|
}
|
|
.goodsname-box {
|
display: flex;
|
justify-content: space-between;
|
align-items: center;
|
}
|
|
.goodsname {
|
font-size: 28rpx;
|
color: #333333;
|
line-height: 40rpx;
|
}
|
|
.goodsdesc {
|
font-size: 24rpx;
|
color: #999999;
|
line-height: 34rpx;
|
margin-top: 8rpx;
|
}
|
|
.pricebox {
|
display: flex;
|
margin-top: 12rpx;
|
}
|
|
.price {
|
font-size: 32rpx;
|
color: #F5981F;
|
font-weight: bold;
|
}
|
|
.quantity {
|
font-size: 24rpx;
|
color: #999999;
|
line-height: 40rpx;
|
/* 与 goodsname 的行高一致，确保垂直对齐 */
|
}
|
|
.delete-btn {
|
width: 48rpx;
|
height: 48rpx;
|
background: #FF4070;
|
border-radius: 8rpx;
|
display: flex;
|
justify-content: center;
|
align-items: center;
|
margin-left: 20rpx;
|
}
|
|
.empty {
|
margin-top: 200rpx;
|
}
|
|
.bottom {
|
display: flex;
|
align-items: center;
|
position: fixed;
|
left: 0;
|
bottom: 0;
|
width: 750rpx;
|
height: 98rpx;
|
background: #FFFFFF;
|
box-shadow: 0rpx 0rpx 12rpx 1rpx rgba(127, 153, 177, 0.14);
|
border-radius: 0rpx 0rpx 0rpx 0rpx;
|
}
|
|
.left {
|
flex: 1;
|
display: flex;
|
align-items: center;
|
justify-content: space-between;
|
padding: 0 24rpx;
|
height: 98rpx;
|
}
|
|
.all {
|
display: flex;
|
align-items: center;
|
}
|
|
.all span {
|
font-size: 28rpx;
|
color: #333333;
|
margin-left: 10rpx;
|
}
|
|
.chong {
|
font-size: 28rpx;
|
color: #333333;
|
}
|
|
.amount {
|
font-size: 32rpx;
|
color: #F5981F;
|
font-weight: bold;
|
}
|
|
.right {
|
width: 216rpx;
|
height: 98rpx;
|
display: flex;
|
justify-content: center;
|
align-items: center;
|
font-size: 30rpx;
|
}
|
|
::v-deep .u-button {
|
width: 216rpx;
|
height: 98rpx !important;
|
font-size: 30rpx;
|
padding: 0 !important;
|
border: none !important;
|
line-height: 98rpx !important;
|
display: flex !important;
|
align-items: center !important;
|
justify-content: center !important;
|
margin: 0 !important;
|
box-sizing: border-box !important;
|
}
|
|
::v-deep .u-button--disabled {
|
background: #CCCCCC !important;
|
color: #FFFFFF !important;
|
}
|
|
checkbox {
|
display: inline-block !important;
|
visibility: visible !important;
|
}
|
|
.blue {
|
color: #419FFD;
|
}
|
</style>
|
