zhibo/pages_shop/cart.vue

<template>
	<view class="content">
		<!-- 商品列表 -->
		<!-- <view class="shopbox" v-for="(shop,idx) in shopList" :key="idx"> -->
		<!-- <view class="shopbox-name" v-if="shop.storeName && shop.storeName != 'null'">
				<label style="margin-right: 30upx;">
					<checkbox :value="shop.checked" :checked="shop.checked" @click="checkShopChange(shop)" />
				</label>
				<text>{{shop.storeName}}</text>
			</view> -->
		<view class="shopbox">
			<view class="goods-list">
				<view class="item" v-for="(item,index) in shopList" :key="index">
					<label style="margin-right: 30upx;">
						<checkbox :value="item.checked" :checked="item.checked" @click="checkChange(item,shop)" />
					</label>
					<image class="goods-img" @click="showProduct(item)" :src="item.imgUrl" mode="aspectFit"></image>
					<view class="info-box">
						<view>
							<view class="title-box">
								<!-- <view class="tag">{{utils.getDictLabelName("storeProductType",item.productType)}}</view> -->
								<view class="title ellipsis">{{ item.productName }}</view>
							</view>
							<!-- <view class="intro ellipsis">{{item.productAttrName}}</view> -->
						</view>
						<view class="price-num">
							<view class="price">
								<text class="unit">¥</text>
								<text class="text">{{item.price}}</text>
							</view>
							<view class="num-box">
								<view class="img-box" @click="delNum(item)">
									<image v-if="item.cartNum <= 1" src="/static/images/jian.png" mode=""></image>
									<image v-else src="/static/images/jian2.png" mode=""></image>
								</view>
								<input type="number" @change="changeNum($event,item)" :value="item.cartNum" />
								<view class="img-box" @click="addNum(item)">
									<image src="/static/images/add.png" mode=""></image>
								</view>
							</view>
						</view>
					</view>
				</view>
			</view>
		</view>
		<view v-if="shopList.length == 0" class="no-data-box">
			<image src="/static/images/no_data.png" mode="aspectFit"></image>
			<view class="empty-title">暂无数据</view>
		</view>

		<!-- 底部按钮 -->
		<view class="btn-foot">
			<view class="left">
				<label>
					<checkbox :checked="checkAll" @click="handleCheckAll()" />
				</label>
				<text class="text">全选</text>
				<text class="text" @click="delCart()">删除</text>
			</view>
			<view class="right">
				<view class="total">
					<text class="label">合计：</text>
					<view class="price">
						<text class="unit">¥</text>
						<text class="num">{{totalMoney.toFixed(2)}}</text>
					</view>
				</view>
				<view class="btn" @click="submit">结算</view>
			</view>
		</view>

	</view>
</template>

<script>
	import {
		queryLiveCartList, // 查询购物车列表
		exportLiveCartList, // 导出购物车列表
		liveCartDetails, //获取购物车详情
		// addLiveCart, //新增购物车 
		modifyLiveCart, //修改购物车
		delLiveCart, // 删除购物车
		liveOrderKey // 生成订单key
	} from "@/api/order.js"
	// import {getCarts,cartNum,delCart} from '@/api/product'
	// import likeProduct from './components/likeProduct.vue'
	export default {
		// components: {
		// 	likeProduct
		// },
		data() {
			return {
				shopList: [],
				totalMoney: 0.00,
				// carts: [],
				checkAll: false,
			}
		},
		onLoad() {
			// this.getCarts();

		},

		onReachBottom() {
			// this.$refs.product.getGoodsProducts();
		},
		mounted() {
			this.queryLiveCart();
		},
		methods: {
			// 获得key
			getKey() {
				liveOrderKey().then(res => {
						if (res.code == 200) {
							console.log("下订单的key>>>>", res)
							this.orderKey = res.orderKey
							console.log("key>>>>", this.orderKey)
						
							uni.navigateTo({
								url: '/pages_shop/confirmCreateOrder?type=cart&orderKey=' + this.orderKey
							});
						} else {
							uni.showToast({
								title: res.msg,
								icon: 'none'
							});
						}
					},
					rej => {}
				);
			},
			// 修改购物车
			modifyLiveCart(item) {
				let data = {
					checked: item.checked,
					cartId: item.cartId,
					cartNum: item.cartNum
				};
				modifyLiveCart(data).then(
					res => {
						if (res.code == 200) {
							this.computedMoney();

						} else {

							uni.showToast({
								icon: 'none',
								title: res.msg,
							});
						}
					},
					rej => {}
				);
			},



			// modifyLiveCartList() {
			// 	modifyLiveCart().then(
			// 		res => {
			// 			if (res.code == 200) {
			// 				this.shopList = res.rows;
			// 				console.log(this.shopList)
			// 				console.log(res.rows)
			// 				this.shopList.forEach(item => {
			// 					item.checked == 1 ? true : false
			// 				});

			// 				// this.computedMoney();
			// 			} else {
			// 				uni.showToast({
			// 					icon: 'none',
			// 					title: "请求失败",
			// 				});
			// 			}
			// 		},
			// 		rej => {}
			// 	);
			// },
			// 查询购物车列表
			queryLiveCart() {
				queryLiveCartList().then(
					res => {
						if (res.code == 200) {
							this.shopList = res.rows;
							this.shopList.forEach(item => {
								item.checked == 1 ? true : false
							});

							// this.computedMoney();
						} else {
							uni.showToast({
								icon: 'none',
								title: "请求失败",
							});
						}
					},
					rej => {}
				);
			},
			// 删除购物车
			delCart() {
				// 直接过滤已选商品
				const data = this.shopList
					.filter(item => item.checked)
					.map(item => item.cartId);

				if (data.length === 0) {
					uni.showToast({
						icon: 'none',
						title: "请选择商品删除"
					});
					return;
				}
				delLiveCart(data).then(res => {
					if (res.code === 200) {
						uni.showToast({
							icon: 'success',
							title: "操作成功"
						});
						this.queryLiveCart(); // 重新加载数据
					} else {
						uni.showToast({
							icon: 'none',
							title: res.msg
						});
					}
				});
			},
			// 计算价格
			computedMoney() {
				this.totalMoney = this.shopList.reduce((total, item) => {
					return total + (item.checked ? item.price * item.cartNum : 0);
				}, 0);
			},
			// 全选
			handleCheckAll() {
				this.checkAll = !this.checkAll;
				this.shopList.forEach(item => {
					item.checked = this.checkAll; // 直接操作商品
				});
				this.computedMoney();
			},
			//选择
			checkChange(item, shop) {
				item.checked = !item.checked;
				// console.log(item.checked)
				this.computedMoney(item.checked);
			},
			// 改数量
			changeNum(e, item) {
				item.cartNum = e.detail.value.replace(/\D/g, '')
				if (item.cartNum <= 1) {
					uni.showToast({
						title: "已经是底线啦!",
						icon: "none",
						duration: 2000
					});
					return;
				}
				if (item.cartNum < 1) {
					item.cartNum = 1
				}
				if (item.cartNum >= item.stock) {
					item.cartNum = item.stock;
				}
				this.modifyLiveCart(item)
			},

			// 购物车减法
			delNum(item) {
				if (item.cartNum <= 1) {
					uni.showToast({
						title: "已经是底线啦!",
						icon: "none",
						duration: 2000
					});
					return;
				}
				item.cartNum--
				if (item.cartNum < 1) {
					item.cartNum = 1
				}

				this.modifyLiveCart(item)
			},
			// 购物车加法
			addNum(item) {
				// console.log(item)
				item.cartNum++
				if (item.cartNum >= item.stock) {
					item.cartNum = item.stock;
				}
				this.modifyLiveCart(item)
			},
			// 结算
			submit() {
				const selectedItems = this.shopList.filter(item => item.checked);

				if (selectedItems.length === 0) {
					uni.showToast({
						icon: 'none',
						title: "请选择商品"
					});
					return;
				}

				
				this.getKey()
				
			},
			showProduct(item) {
				uni.navigateTo({
					url: './goods?productId=' + item.productId
				})
			},
		}
	}
</script>

<style lang="scss">
	page {
		height: 100%;
	}

	.content {
		height: 100%;
		padding: 20upx;

		.shopbox {
			background: #FFFFFF;
			border-radius: 16rpx;
			margin-bottom: 20rpx;
		}

		.no-data-box {
			display: flex;
			flex-direction: column;
			align-items: center;
		}

		.shopbox-name {
			padding: 30rpx 30rpx 0 30rpx;
			font-family: PingFang SC, PingFang SC;
			font-weight: 400;
			font-size: 30rpx;
			color: #111;
			overflow: hidden;
			white-space: nowrap;
			text-overflow: ellipsis;
		}

		.goods-list {
			padding-bottom: 140rpx;

			.item {
				box-sizing: border-box;
				height: 221upx;
				background: #FFFFFF;
				border-radius: 16upx;
				margin-bottom: 20upx;
				padding: 30upx;
				display: flex;
				align-items: center;

				&:last-child {
					margin-bottom: 0;
				}

				.goods-img {
					width: 160upx;
					height: 160upx;
					background: #FFFFFF;
					margin-right: 30upx;
					flex-shrink: 0;
				}

				.info-box {
					height: 160upx;
					display: flex;
					flex-direction: column;
					justify-content: space-between;
					width: calc(100% - 255upx);

					.title-box {
						width: 100%;
						display: flex;
						align-items: center;

						.tag {
							padding: 0 6upx;
							height: 30upx;
							line-height: 30upx;
							font-size: 22upx;
							font-family: PingFang SC;
							font-weight: bold;
							color: #FFFFFF;
							background: linear-gradient(90deg, #66b2ef 0%, #0bb3f2 100%);
							border-radius: 4upx;
							margin-right: 10upx;
							flex-shrink: 0;
						}

						.title {
							flex: 1;
							font-size: 28upx;
							font-family: PingFang SC;
							font-weight: 500;
							color: #111111;
							line-height: 1;
						}
					}

					.intro {
						font-size: 24upx;
						font-family: PingFang SC;
						font-weight: 500;
						color: #999999;
						margin-top: 22upx;
						line-height: 1;
					}

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

						.price {
							display: flex;
							align-items: flex-end;

							.unit {
								font-size: 24upx;
								font-family: PingFang SC;
								font-weight: 500;
								color: #FF6633;
								line-height: 1.2;
								margin-right: 4upx;
							}

							.text {
								font-size: 32upx;
								font-family: PingFang SC;
								font-weight: bold;
								color: #FF6633;
								line-height: 1;
							}
						}

						.num-box {
							display: flex;
							align-items: center;

							.img-box {
								width: 60upx;
								height: 60upx;
								// border-radius: 4upx;
								border: 1px solid #dddddd;
								display: flex;
								align-items: center;
								justify-content: center;

								image {
									width: 25rpx;
									height: 25rpx;
								}
							}

							input {
								width: 60upx;
								height: 60upx;
								line-height: 60upx;
								font-size: 28upx;
								font-family: PingFang SC;
								font-weight: 500;
								color: #111111;
								// border-radius: 4upx;
								border-top: 1px solid #dddddd;
								border-bottom: 1px solid #dddddd;
								text-align: center;
								// margin: 0 16upx;
							}
						}
					}
				}
			}
		}

		.like-product {
			padding-bottom: 120upx;
		}

		.btn-foot {
			box-sizing: border-box;
			width: 100%;
			height: 121upx;
			background: #FFFFFF;
			padding: 16upx 30upx 16upx 60upx;
			display: flex;
			align-items: center;
			justify-content: space-between;
			position: fixed;
			left: 0;
			bottom: 0;
			z-index: 99;

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

				.text {
					margin-left: 14upx;
					font-size: 28upx;
					font-family: PingFang SC;
					font-weight: 500;
					color: #666666;
					line-height: 1;
				}
			}

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

				.total {
					display: flex;
					align-items: flex-end;
					margin-right: 36upx;

					.label {
						font-size: 26upx;
						font-family: PingFang SC;
						font-weight: 500;
						color: #999999;
						line-height: 1.5;
					}

					.price {
						display: flex;
						align-items: flex-end;

						.unit {
							font-size: 32upx;
							font-family: PingFang SC;
							font-weight: bold;
							color: #FF6633;
							line-height: 1.2;
							margin-right: 10upx;
						}

						.num {
							font-size: 30upx;
							font-family: PingFang SC;
							font-weight: bold;
							color: #FF6633;
							line-height: 1;
						}
					}
				}

				.btn {
					width: 200upx;
					height: 88upx;
					line-height: 88upx;
					text-align: center;
					font-size: 30upx;
					font-family: PingFang SC;
					font-weight: bold;
					color: #FFFFFF;
					background: #0bb3f2;
					border-radius: 44upx;
				}
			}
		}
	}
</style>