frontend-app/pages/shopping_cart/shopping_cart.vue

<template>
	<view>
		<view :style="{ 'height': isDataNull ? 'calc(100vh - 134rpx)' : 'calc(100vh - 410rpx)' }"
			class="shopping_cart_warp">
			<view class="shopping_cart_header">
				<view class="cart">购物车({{ shoppingTotal }})</view>
				<view class="enit_but" @click="isEdit = true" v-if="!isEdit" v-show="!isDataNull">编辑</view>
				<view class="enit_but" @click="isEdit = false" v-else v-show="isDataNull">取消</view>
			</view>
			<!-- 购物车列表 -->
			<up-loading-page :loading="listLoading"></up-loading-page>
			<view class="shopping_cart_content">
				<view v-if="!isDataNull" class="shopping_cart_content_item" v-for="(item, index) in shoppingList"
					:key="item.id">
					<!-- 店铺头部 -->
					<up-checkbox :customStyle="{ marginBottom: '8px' }" name="isCheck" usedAlone v-model:checked="item.isCheck"
						shape="circle" activeColor="#7934F6" size="19" iconSize="18"
						@change="(event) => shoppingChange(event, index)">
						<template #label>
							<view class="content_item_header">
								<up-image :src="item.shopLogo ? item.shopLogo : '/static/shopping/store.png'" width="22" height="22"
									bgColor="#f1f6ff00" shape="circle"></up-image>
								<view class="order_product_title">{{ item.shopName }}{{ item.id }}</view>
							</view>
						</template>
					</up-checkbox>

					<view>
						<view class="content_item_info" v-for="(pItem, pIndex) in item.product" :key="pItem.id">
							<!-- 单个商品 -->
							<up-checkbox :customStyle="{ marginBottom: '8px' }" name="isCheck" usedAlone
								v-model:checked="pItem.isCheck" shape="circle" activeColor="#7934F6" size="19" iconSize="18"
								:disabled="!isEdit && [1, 2].includes(pItem.goodsStatus)"
								@change="(event) => productChange(event, index, pIndex)">
							</up-checkbox>
							<view class="info_item">
								<up-image :src="pItem.mainGraph" width="100" height="100" bgColor="#f1f6ff00"
									@click="jumpInfo(pItem)"></up-image>
								<view class="content_info">
									<view class="shopping_content_info_title" @click="jumpInfo(pItem)">{{ pItem.name }}</view>
									<view class="content_info_description">
										{{ pItem.goodsSpece }}
									</view>
									<view class="shopping_info_amount">
										<view>
											<view style="color: #7934F6;">
												<text style="font-size: 22rpx;">￥</text>
												<text style="font-size: 32rpx;">{{ pItem.unitPrice }}</text>
											</view>
											<view class="shopping_info_amount_original">￥{{ pItem.unitPrice }}</view>
										</view>
										<view>
											<view class="shopping_info_quantity">
												<view class="quantity_but" @click="quantityFun('minus', index, pIndex, pItem.id)">-</view>
												<view class="quantity_value">{{ pItem.buyNum }}</view>
												<view class="quantity_but" @click="quantityFun('add', index, pIndex, pItem.id)">+</view>
											</view>
											<view v-if="[1].includes(pItem.goodsStatus)" class="insufficient_stock">库存不足</view>
											<view v-if="[2].includes(pItem.goodsStatus)" class="insufficient_stock">商品已下架</view>
										</view>
									</view>
								</view>
							</view>
						</view>
					</view>
				</view>
				<view v-else class="not_order_warp">
					<up-image src="https://cex-pub.s3.ap-southeast-1.amazonaws.com/static/not_shopping.png" width="80" height="80"
						bgColor="#f1f6ff00"></up-image>
					<view class="not_order_msg_warp">购物车是空的</view>
				</view>
				<choiceness />
			</view>
			<!-- 操作按钮 -->
			<view v-if="!isDataNull">
				<view class="shopping_cart_but">
					<!-- 全选 -->
					<view class="shopping_cart_but_total">
						<up-checkbox name="isAll" usedAlone v-model:checked="isAll" shape="circle" activeColor="#7934F6" size="19"
							iconSize="18" @change="isAllChange">
							<template #label>
								<text style="font-size: 26rpx;color: #444444;">全选</text>
							</template>
						</up-checkbox>
						<text style="margin-left: 20rpx;font-size: 24rpx;color: #444444;" v-if="!isEdit">合计：</text>
						<text style="font-size: 24rpx;" v-if="!isEdit">￥</text>
						<text style="font-size: 32rpx;" v-if="!isEdit">{{ total }}</text>
					</view>
					<view v-if="isEdit" class="delete_but_css" @click="deleteShopping">
						删除({{ count }})
					</view>
					<view v-else class="add_but_css" @click="settleShopping">
						结算({{ count }})
					</view>
				</view>
			</view>

			<up-toast ref="uToastRef"></up-toast>
		</view>

		<!-- #ifndef H5 -->
		<CustomTabBar :tabIndex="3" />
		<!-- #endif -->

	</view>
</template>

<script>

import choiceness from '@/components/choiceness/choiceness.vue';
import { getCartList, updateGoodsNum, removeGoods } from '@/api/cart.js';
import CustomTabBar from '@/components/custom-tab-bar.vue';

export default {
	components: { choiceness, CustomTabBar },
	data() {
		return {
			shoppingTotal: 0,// 总条数
			setShoppingList: [],
			isDataNull: false,// 数据是否为空
			shoppingList: [],// 购物车列表
			isEdit: false,// 是否编辑
			isAll: false,// 是否全选
			total: 0,// 总合计的金额
			count: 0,// 总条数
			listLoading: false,
		}
	},
	onShow() {
		/*#ifdef APP-PLUS*/
		uni.hideTabBar({
			animation: false
		})
		/*#endif*/
		this.getCartList();
	},
	onLoad() {

	},
	methods: {
		/**
		 * 查询购物车列表
		 */
		async getCartList() {
			this.listLoading = true;
			let result = [];
			const resp = await getCartList();
			if (resp && resp.bizcode === 100) {
				const data = resp.data || []
				if (data && data.length !== 0) {
					// 处理了后的数据
					result = this.transformedArray(data);
				}
				this.shoppingTotal = data.length;
			}
			this.shoppingList = result;
			this.listLoading = false;
			this.total = 0;// 总合计的金额
			this.count = 0;// 总条数
			this.isDataNull = result.length === 0 ? true : false;
		},
		// 处理购物车的数据
		transformedArray(originalArray) {
			const newOriginalArray = [];
			if (!originalArray || originalArray.length === 0) {
				return newOriginalArray;
			}
			originalArray.map(curr => {
				const existingShop = newOriginalArray.find(shop => shop.shopId === curr.shopId && shop.shopName === curr.shopName);
				if (existingShop) {
					// 如果商店已存在，则向 productObj 数组中添加新产品对象
					existingShop.product.push({
						id: curr.id,
						goodsId: curr.goodsId, // 商品ID
						name: curr.name, // 商品名称
						mainGraph: curr.mainGraph,// 主图
						buyNum: curr.buyNum,// 数量
						unitPrice: curr.unitPrice,// 商品单价
						goodsSpece: curr.goodsSpece,// 规格
						specsId: curr.specsId,// 规格Id
						isCheck: false,// 用作于全选
						goodsStatus: curr.goodsStatus,//商品状态:0-可下单，1-库存不够，2-商品已下架
					});
				} else {
					// 如果商店不存在，则创建一个新商店对象，并初始化 productObj 数组
					newOriginalArray.push({
						isCheck: false,// 用作于全选
						shopId: curr.shopId,
						shopName: curr.shopName,
						name: curr.name,
						shopLogo: curr.shopLogo,
						product: [{
							id: curr.id,
							goodsId: curr.goodsId, // 商品ID
							name: curr.name, // 商品名称
							mainGraph: curr.mainGraph,// 主图
							buyNum: curr.buyNum,// 数量
							unitPrice: curr.unitPrice,// 商品单价
							goodsSpece: curr.goodsSpece,// 规格
							specsId: curr.specsId,// 规格Id
							isCheck: false,// 用作于全选
							goodsStatus: curr.goodsStatus,//商品状态:0-可下单，1-库存不够，2-商品已下架
						}]
					});
				}
			})
			return newOriginalArray;
		},
		/**
		 * 数量进行增加删除
		 * @param {Object} type 区分是 + 还是 -
		 * @param {Object} pItem 父节点数据，用作与从新修改数据
		 * @param {Object} cItem 需要修改的数据节点
		 */
		async quantityFun(type, index, pIndex, id) {
			// 选中的当前商品
			const currentData = this.shoppingList[index].product[pIndex];
			let currentQuantity = this.shoppingList[index].product[pIndex].buyNum;// 当前数量
			let total = Number(this.total);
			let count = Number(this.count);

			const data = this.shoppingList[index].product[pIndex];

			if (type === "minus") {
				if (currentQuantity === 1) {
					this.$refs.uToastRef.show({
						type: 'warring',
						message: "宝贝数量不能在减少啦~",
					});
					return;
				} else {
					currentQuantity = currentQuantity - 1;
					total = total - data.unitPrice;
					count = count - 1;
				}
			} else if (type === "add") {
				// 需要判断一下库存
				currentQuantity = currentQuantity + 1;
				total = total + data.unitPrice;
				count = count + 1;
			}
			const params = {
				id,
				goodsNum: currentQuantity,
			}
			const result = await updateGoodsNum(params);
			if (result && result.bizcode === 100) {
				this.shoppingList[index].product[pIndex].buyNum = currentQuantity;
				if (currentData.isCheck) {
					this.total = total.toFixed(2);
					this.count = count;
				}
			}
		},
		/**
		 * 结算订单
		 */
		settleShopping() {
			const deleteId = this.getCheckList();
			if (!deleteId || deleteId.length === 0) {
				this.$refs.uToastRef.show({
					type: 'warring',
					message: "请先选择需要结算的商品",
				});
				return;
			}
			uni.navigateTo({
				url: "/pages/order_package/order_submit/order_submit?ids=" + deleteId.join(","),
			})
			this.isAll = false;
		},
		/**
		 * 删除选中的
		 */
		deleteShopping() {
			const then = this;
			uni.showModal({
				title: '提示',
				content: '您确定要删除选中的(' + this.getCheckList().length + '件)商品吗？',
				success: function (res) {
					if (res.confirm) {
						then.deleteShoppingFun();
					}
				}
			});
		},
		// 删除选中的
		async deleteShoppingFun() {
			const deleteId = this.getCheckList();
			if (!deleteId || deleteId.length === 0) {
				this.$refs.uToastRef.show({
					type: 'warring',
					message: "请先选择需要删除的商品",
				});
				return;
			}
			const params = {
				ids: deleteId.join(","),
			}
			const result = await removeGoods(params);
			if (result && result.bizcode === 100) {
				this.isEdit = false;
				this.$refs.uToastRef.show({
					type: 'success',
					message: "删除成功",
				});
				this.getCartList();
			} else {
				this.$refs.uToastRef.show({
					type: 'error',
					message: "删除失败",
				});
			}

		},
		// 获取选中的数据
		getCheckList() {
			const shoppingList = this.shoppingList;
			const deleteId = [];
			shoppingList.map(item => {
				if (item.product && item.product.length !== 0) {
					item.product.map(pItem => {
						if (pItem.isCheck) {
							deleteId.push(pItem.id);
						}
					})
				}
			})
			return deleteId;
		},

		// 全部选中 or 全部取消选中
		isAllChange(isAll) {
			const currentShoppingList = this.shoppingList;
			currentShoppingList.map((item, index) => {
				if (isAll) {
					item.isCheck = true;
				} else {
					item.isCheck = false;
				}
				if (item.product && item.product.length !== 0) {
					if (isAll) {
						item.product.forEach(o => o.isCheck = true);
					} else {
						item.product.forEach(o => o.isCheck = false);
					}
				}
			})
			this.shoppingList = currentShoppingList;
			if (isAll) {
				this.checkIsAll();
			} else {
				this.total = 0;
				this.count = 0;
			}
		},

		/**
		 * 商品详情
		 * @param {Object} item
		 */
		jumpInfo(item) {
			uni.navigateTo({
				url: '/pages/other_package/productInfo/productInfo?id=' + item.goodsId,
			})
		},

		// 单个产品的单选按钮选中与取消选中
		productChange(val, index, pIndex) {
			setTimeout(() => {
				// 检查全选按钮
				this.checkIsAll();
			}, 300);
		},
		// 单个店铺的单选按钮选中与取消选中
		shoppingChange(isAll, index) {
			const data = this.shoppingList[index];
			if (isAll) {
				data.product.forEach(o => o.isCheck = true);
			} else {
				data.product.forEach(o => o.isCheck = false);
			}
			this.shoppingList[index] = data;
			setTimeout(() => {
				// 检查全选按钮
				this.checkIsAll();
			}, 300);
		},
		/**
		 * 检查是否全选
		 */
		checkIsAll() {

			let total = 0;
			let count = 0;
			const shoppingList = this.shoppingList;
			if (shoppingList && shoppingList.length !== 0) {
				let sumFlag = false;
				shoppingList.map(item => {
					let flag = true;
					item.product.map(oItem => {
						if (oItem.isCheck) {
							total = total + oItem.buyNum * oItem.unitPrice;
							count = count + oItem.buyNum;
						} else {
							flag = false;
						}
					})
					if (flag) {
						item.isCheck = true;
						sumFlag = true;
					} else {
						item.isCheck = false;
					}
				})
				this.shoppingList = shoppingList;
				this.isAll = sumFlag;
				// 删除不需要显示价格
				if (!this.isEdit) {
					this.total = total.toFixed(2);
				}
				this.count = count;
			}
		},


	}
}
</script>

<style lang="scss" scoped>
.shopping_cart_warp {
	// height: calc(100vh - 256rpx);
	background-color: $app-bj;
	padding: 104rpx 30rpx 30rpx;
	overflow: hidden;
}

.shopping_cart_header {
	display: flex;
	justify-content: space-between;
	color: #222222;

	.cart {
		font-weight: bold;
		font-size: 38rpx;
	}

	.enit_but {
		font-weight: 500;
		font-size: 28rpx;
	}
}

.shopping_cart_content {
	margin-top: 30rpx;
	height: calc(100vh - 456rpx);
	overflow-y: auto;

	.shopping_cart_content_item {
		background-color: #FFFFFF;
		border-radius: 30rpx;
		padding: 30rpx;
		margin-bottom: 20rpx;

		.content_item_header {
			display: flex;
		}

		.order_product_title {
			margin-left: 10rpx;
		}

		.info_item {
			display: flex;
			margin-top: 10rpx;
			width: calc(100% - 40rpx);
		}

		.content_info {
			margin-left: 10rpx;
			width: calc(100% - 100rpx);
		}

		.shopping_content_info_title {
			font-weight: bold;
			font-size: 28rpx;
			color: #272727;
		}

		.shopping_info_amount {
			display: flex;
			justify-content: space-between;
			margin-top: 20rpx;
		}

		.shopping_info_amount_original {
			font-size: 24rpx;
			color: #999999;
			text-decoration-line: line-through;
		}

		.insufficient_stock {
			text-align: center;
			color: #9E9E9E;
			font-size: 22rpx;
			margin-top: 4rpx;
		}
	}


	.content_item_info {
		display: flex;
	}
}

.shopping_cart_but {
	position: fixed;
	bottom: 140rpx;
	left: 0;
	width: calc(100% - 40rpx);
	background: #FFFFFF;
	box-shadow: 0rpx -1rpx 0rpx 0rpx #EEEEEE;
	height: 84rpx;
	display: flex;
	justify-content: space-between;
	padding: 20rpx;
	align-items: center;

	.shopping_cart_but_total {
		font-weight: bold;
		color: $app-bt-bj;
		display: flex;
		align-items: center;
	}

	.add_but_css {
		height: 38rpx;
		width: 226rpx;
	}

	.delete_but_css {
		width: 226rpx;
	}
}
</style>