baiyuApp/pages_mall/cart.vue

<template>
	<view class="cart-page">
		<!-- 自定义头部 -->
		<view class="custom-header" :style="{paddingTop: statusBarHeight + 'px'}">
			<view class="header-content">
				<view class="back-btn" @click="goBack">
					<u-icon name="arrow-left" color="#fff" size="20"></u-icon>
				</view>
				<text class="title">购物车</text>
				<view class="placeholder"></view>
			</view>
		</view>

		<scroll-view scroll-y class="cart-scroll" :style="{marginTop: (statusBarHeight + 44) + 'px'}">
			<view class="cart-list">
				<view v-if="carts.length === 0" class="empty-cart">
					<image src="/static/images/empty.png" mode="aspectFit"
						style="width: 300rpx; height: 300rpx;"></image>
					<text>购物车是空的</text>
					<button class="go-btn" @click="goHome">去逛逛</button>
				</view>

				<view v-else class="cart-item" v-for="(item, index) in carts" :key="index">
					<view class="checkbox">
						<u-checkbox :name="item.id" :checked="item.checked" shape="circle" activeColor="#2583EB"
							@change="checkChange(item)"></u-checkbox>
					</view>
					<image :src="item.productAttrImage || item.productImage" mode="aspectFill" class="goods-img">
					</image>
					<view class="item-right">
						<text class="title ellipsis2">{{item.productName}}</text>
						<text class="attr">{{item.productAttrName}}</text>
						<view class="price-box">
							<text class="price">¥{{item.price}}</text>
							<view class="number-box">
								<view class="icon-btn" @click="delNum(item)">
									<u-icon name="minus" size="12" color="#333"></u-icon>
								</view>
								<input class="num-input" type="number" v-model="item.cartNum"
									@blur="changeNum($event, item)" />
								<view class="icon-btn" @click="addNum(item)">
									<u-icon name="plus" size="12" color="#333"></u-icon>
								</view>
							</view>
						</view>
					</view>
				</view>
			</view>
		</scroll-view>

		<view class="action-section" v-if="carts.length > 0">
			<view class="left-action">
				<u-checkbox :checked="checkAll" shape="circle" activeColor="#2583EB"
					@change="handleCheckAll">全选</u-checkbox>
				<text class="del-btn" @click="delCart">删除</text>
			</view>
			<view class="right-action">
				<view class="total-box">
					<text class="label">合计：</text>
					<text class="price">¥{{totalMoney.toFixed(2)}}</text>
				</view>
				<button class="confirm-btn" @click="submit">结算</button>
			</view>
		</view>
	</view>
</template>

<script>
	import {
		getCarts,
		cartNum,
		delCart
	} from '@/api/product'

	export default {
		data() {
			return {
				statusBarHeight: 20,
				totalMoney: 0.00,
				carts: [],
				checkAll: false,
			}
		},
		created() {
			this.statusBarHeight = uni.getSystemInfoSync().statusBarHeight;
			this.getCarts();
		},
		methods: {
			goBack() {
				uni.showTabBar()
				uni.switchTab({
					url: '/pages_im/pages/conversation/conversationList/index'
				})
			},
			goHome() {
				uni.switchTab({
					url: '/pages_mall/index'
				});
			},
			// 获取购物车列表
			getCarts() {
				getCarts().then(res => {
					if (res.code == 200) {
						this.carts = res.carts || [];
						this.carts.forEach(item => {
							// 确保checked属性存在
							if (typeof item.checked === 'undefined') {
								this.$set(item, 'checked', false);
							}
						});
						this.computedMoney();
					} else {
						uni.showToast({
							icon: 'none',
							title: "请求失败",
						});
					}
				});
			},
			// 计算总价
			computedMoney() {
				let money = 0;
				this.carts.forEach(item => {
					if (item.checked) {
						money += item.price * item.cartNum;
					}
				});
				this.totalMoney = money;
				// 更新全选状态
				this.checkAll = this.carts.length > 0 && this.carts.every(item => item.checked);
			},
			// 单选
			checkChange(item) {
				item.checked = !item.checked;
				this.computedMoney();
			},
			// 全选
			handleCheckAll() {
				this.checkAll = !this.checkAll;
				this.carts.forEach(item => {
					item.checked = this.checkAll;
				});
				this.computedMoney();
			},
			// 修改数量接口
			changeCartNum(item) {
				let data = {
					number: item.cartNum,
					id: item.id
				};
				cartNum(data).then(res => {
					if (res.code == 200) {
						this.computedMoney();
					} else {
						uni.showToast({
							icon: 'none',
							title: res.msg || "操作失败",
						});
					}
				});
			},
			// 减少数量
			delNum(item) {
				if (item.cartNum <= 1) {
					uni.showToast({
						title: "已经是底线啦!",
						icon: "none"
					});
					return;
				}
				item.cartNum--;
				this.changeCartNum(item);
			},
			// 增加数量
			addNum(item) {
				if (item.stock && item.cartNum >= item.stock) {
					item.cartNum = item.stock;
					uni.showToast({
						title: "库存不足",
						icon: "none"
					});
					return;
				}
				item.cartNum++;
				this.changeCartNum(item);
			},
			// 输入框修改数量
			changeNum(e, item) {
				let val = parseInt(e.detail.value);
				if (!val || val < 1) val = 1;
				if (item.stock && val > item.stock) val = item.stock;
				item.cartNum = val;
				this.changeCartNum(item);
			},
			// 删除购物车
			delCart() {
				let selectCarts = this.carts.filter(ele => ele.checked).map(ele => ele.id);
				if (selectCarts.length == 0) {
					uni.showToast({
						icon: 'none',
						title: "请选择商品删除",
					});
					return;
				}

				uni.showModal({
					title: '提示',
					content: '确定要删除选中的商品吗？',
					success: (res) => {
						if (res.confirm) {
							delCart({
								ids: selectCarts
							}).then(res => {
								if (res.code == 200) {
									uni.showToast({
										title: "删除成功"
									});
									this.getCarts();
									this.checkAll = false;
								} else {
									uni.showToast({
										icon: 'none',
										title: res.msg
									});
								}
							});
						}
					}
				});
			},
			// 结算
			submit() {
				let selectCarts = this.carts.filter(ele => ele.checked).map(ele => ele.id);
				if (selectCarts.length == 0) {
					uni.showToast({
						icon: 'none',
						title: "请选择商品",
					});
					return;
				}
				uni.navigateTo({
					url: '/pages_mall/confirmOrder?type=cart&cartIds=' + selectCarts.toString()
				});
			}
		}
	}
</script>

<style scoped lang="scss">
	.cart-page {
		height: 100%;
		display: flex;
		flex-direction: column;
		background-color: #F5F7FA;
	}

	.custom-header {
		background: linear-gradient(to right, #2583EB, #4FACFE);
		position: fixed;
		top: 0;
		left: 0;
		right: 0;
		z-index: 10000;

		.header-content {
			height: 44px;
			display: flex;
			align-items: center;
			justify-content: space-between;
			padding: 0 30rpx;

			.title {
				color: #fff;
				font-size: 36rpx;
				font-weight: bold;
			}

			.back-btn,
			.placeholder {
				width: 40rpx;
				height: 40rpx;
				display: flex;
				align-items: center;
				justify-content: center;
			}
		}
	}

	.cart-scroll {
		flex: 1;
		height: 0;
		padding-bottom: 120rpx; // Space for action bar
	}

	.empty-cart {
		padding-top: 100rpx;
		display: flex;
		flex-direction: column;
		align-items: center;

		text {
			color: #999;
			font-size: 30rpx;
			margin-bottom: 30rpx;
			margin-top: 20rpx;
		}

		.go-btn {
			width: 240rpx;
			height: 80rpx;
			line-height: 80rpx;
			background: linear-gradient(to right, #2583EB, #4FACFE);
			color: #fff;
			font-size: 30rpx;
			border-radius: 40rpx;
			box-shadow: 0 8rpx 16rpx rgba(37, 131, 235, 0.3);
		}
	}

	.cart-item {
		display: flex;
		padding: 30rpx;
		background: #fff;
		margin: 20rpx;
		border-radius: 20rpx;
		box-shadow: 0 4rpx 16rpx rgba(0, 0, 0, 0.04);
		align-items: center;

		.checkbox {
			margin-right: 20rpx;
		}

		.goods-img {
			width: 180rpx;
			height: 180rpx;
			border-radius: 12rpx;
			background: #eee;
			flex-shrink: 0;
		}

		.item-right {
			flex: 1;
			display: flex;
			flex-direction: column;
			padding-left: 24rpx;
			height: 180rpx;
			justify-content: space-between;
			overflow: hidden;

			.title {
				font-size: 30rpx;
				color: #333;
				line-height: 1.4;
				font-weight: 500;
			}

			.attr {
				font-size: 24rpx;
				color: #999;
				background: #f8f8f8;
				padding: 4rpx 12rpx;
				border-radius: 6rpx;
				align-self: flex-start;
				margin-top: 8rpx;
			}

			.price-box {
				display: flex;
				justify-content: space-between;
				align-items: center;

				.price {
					font-size: 34rpx;
					color: #FF5000;
					font-weight: bold;
				}

				.number-box {
					display: flex;
					align-items: center;
					background: #f5f5f5;
					border-radius: 8rpx;

					.icon-btn {
						width: 50rpx;
						height: 50rpx;
						display: flex;
						align-items: center;
						justify-content: center;
					}

					.num-input {
						width: 70rpx;
						text-align: center;
						font-size: 28rpx;
						color: #333;
					}
				}
			}
		}
	}

	.action-section {
		position: fixed;
		bottom: 100rpx; // Above TabBar (which is 100rpx height)
		left: 0;
		right: 0;
		height: 100rpx;
		background: #fff;
		display: flex;
		align-items: center;
		justify-content: space-between;
		padding: 0 30rpx;
		box-shadow: 0 -4rpx 16rpx rgba(0, 0, 0, 0.05);
		z-index: 999;

		.left-action {
			display: flex;
			align-items: center;

			.del-btn {
				margin-left: 30rpx;
				color: #FF5000;
				font-size: 28rpx;
			}
		}

		.right-action {
			display: flex;
			align-items: center;

			.total-box {
				margin-right: 20rpx;

				.label {
					font-size: 28rpx;
					color: #333;
				}

				.price {
					font-size: 32rpx;
					color: #FF5000;
					font-weight: bold;
				}
			}

			.confirm-btn {
				margin: 0;
				background: linear-gradient(to right, #2583EB, #4FACFE);
				color: #fff;
				font-size: 28rpx;
				border-radius: 40rpx;
				padding: 0 40rpx;
				height: 70rpx;
				line-height: 70rpx;
			}
		}
	}

	.ellipsis2 {
		overflow: hidden;
		text-overflow: ellipsis;
		display: -webkit-box;
		-webkit-line-clamp: 2;
		-webkit-box-orient: vertical;
	}
</style>