dingdong-mall/pages/my/my-cart.vue

<template>
	<view>
		<!-- 顶部操作条 -->
		<cu-custom :bgColor="'bg-main-color'" :isBack="true">
			<block slot="backText">返回</block>
			<block slot="content">购物车</block>
		</cu-custom>
		<!-- 选购的商品列表 -->
		<view class="margin-lr-sm margin-top-sm margin-bottom-with-bar">
			<checkbox-group class="block" @change="checked2Buy($event)">
				<view class="margin-top-sm bg-white" v-for="(item, index0) in pickedProductList">
					<view class="cu-bar solid-bottom">
						<view class="action bar-first-action">
							<checkbox class='round margin-right main-color' :value="index0" :checked="allChecked">
							</checkbox>
							<text class="cuIcon-shopfill text-main-color"></text>
							{{item.shopName}}
							<view>
								<view class="cuIcon-right"></view>
							</view>
						</view>
					</view>
					<view class="margin-top-sm padding-lr">
						<product-picked v-for="(product, index1) in item.product" :product="product"
							:pickedList="product.pickedList" :numberBox="true">
						</product-picked>
					</view>
				</view>
			</checkbox-group>
		</view>
		<!-- 底部操作栏 -->
		<view class="cu-bar bg-white tabbar border shop fixed-bottom-bar">
			<view class="action left-grid">
				<view class="flex justify-start align-center checked-bar">
					<checkbox class='round margin-right main-color' @click="toggleCheckedAll"></checkbox>
					<view class="text-lg">全选</view>
				</view>
			</view>
			<view class="bg-main-color submit" @click="submit">提交订单</view>
		</view>
		<!-- 模态框 -->
		<view class="cu-modal" :class="modalName=='delProductModal'?'show':''">
			<view class="cu-dialog">
				<view class="padding-xl">
					是否删除该服务项或商品项？
				</view>
				<view class="cu-bar bg-white">
					<view class="action margin-0 flex-sub text-black" @tap="hideModal">取消</view>
					<view class="action margin-0 flex-sub text-main-color solid-left" @tap="hideModal"
						@click="delPickedSpec">确定</view>
				</view>
			</view>
		</view>
	</view>
</template>

<script>
	import productPicked from '@/components/goods-card/product-picked.vue';

	export default {
		components: {
			productPicked
		},
		data() {
			return {
				pickedProductList: [],
				modalName: '',
				curPickedSpec: {},
				checkedIndexList: [],
				allChecked: false
			}
		},
		onLoad() {
			this.loadData();
			this.bindEvent();
		},
		onUnload() {
			this.offBindEvent();
		},
		methods: {
			async loadData() {
				this.pickedProductList = await this.$api.data('pickedProductList');
			},
			bindEvent() {
				uni.$on('changePickedNum', this.changePickedNum);
			},
			offBindEvent() {
				uni.$off('changePickedNum');
			},
			changePickedNum(curNum, curItem) {
				if (curNum === 0) {
					this.showModal('delProductModal');
					this.curPickedSpec = curItem;
				}
			},
			delPickedSpec() {
				let indexPathArr = this.curPickedSpec.indexPath.split("-");
				let shopIndex = Number(indexPathArr[0]);
				let productIndex = Number(indexPathArr[1]);
				let specIndex = Number(indexPathArr[2]);

				// 获取对应商铺下的对应产品选购的规格List
				let curPickedList = this.pickedProductList[shopIndex].product[productIndex].pickedList;
				// 判断curPickedList是否只有一个元素，只有一个元素则需要删除整个商品或服务
				if (curPickedList.length === 1) {
					let curProductList = this.pickedProductList[shopIndex].product;
					// 判断curProductList是否只有一个元素，只有一个元素则需要删除整个商铺信息
					if (curProductList.length === 1) {
						this.pickedProductList = this.delPickedItem(this.pickedProductList, shopIndex);
					} else {
						curProductList = this.delPickedItem(curProductList, productIndex);
						this.pickedProductList[shopIndex].product = curProductList;
					}
				}
				curPickedList = this.delPickedItem(curPickedList, specIndex);
				this.pickedProductList[shopIndex].product[productIndex].pickedList = curPickedList;
			},
			delPickedItem(list, index) {
				// 判断待删除的元素是否为List中的最后一个元素，不是的话需要调整待删元素后面所有元素的indexPath属性
				if (index !== list.length - 1) {
					for (let i = index + 1; i < list.length; i++) {
						let lastSplitIndex = Number(list[i].indexPath.lastIndexOf("-"));
						let oldIndex = list[i].indexPath.slice(++lastSplitIndex);
						list[i].indexPath = list[i].indexPath.slice(0, lastSplitIndex) + (Number(oldIndex) - 1);
					}
				}
				// 删除指定下标的元素并返回结果List
				return list.slice(0, index).concat(list.slice(index + 1));
			},
			showModal(e) {
				this.modalName = typeof e === 'string' ? e : e.currentTarget.dataset.target
			},
			hideModal(e) {
				this.modalName = null
			},
			checked2Buy(e) {
				this.checkedIndexList = e.detail.value;
			},
			toggleCheckedAll() {
				this.allChecked = !this.allChecked;
			},
			submit() {
				uni.navigateTo({
					url: '/pages/order/order-detail'
				})
			}
		}
	}
</script>

<style scoped>
	.fixed-bottom-bar .left-grid {
		width: 50% !important;
		text-align: left;
	}

	.fixed-bottom-bar .checked-bar {
		padding-left: 15%;
	}

	.bar-first-action {
		margin-left: unset !important;
		padding-left: 23rpx;
		font-size: 30rpx !important;
	}
</style>