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="#FF7C41"
						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="#FF7C41"
								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: #FF7C41;">
												<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="/static/common/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="#FF7C41"
							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>
		<CustomTabBar :tabIndex="2"/>
	</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_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/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>