deming/pageC/cart/index.vue

<template>
	<view class="cart">
		<u-checkbox-group class="cart-main" @change="storeChange">
			<view v-for="(store, s_index) in list" :key="s_index" class="cart-item">
				<view class="store">
					<u-checkbox v-model="store.checked" shape="circle" active-color="#FF780F" icon-size="35" :name="s_index" @change="storeaAloneChange"></u-checkbox>
					<view class="name" @click="viewStoreDetails(store.store_id)">
						<image :src="store.store_avatar"></image>
						<view>{{ store.store_name }}</view>
					</view>
				</view>
				<view class="goods">
					<u-checkbox-group @change="goodsChange($event, s_index)">
						<view v-for="(goods, g_index) in store.goods" :key="g_index" class="goods-item">
							<u-checkbox v-model="goods.checked" shape="circle" active-color="#FF780F" icon-size="35" :name="g_index"></u-checkbox>
							<image :src="goods.goods_image" @click="viewGoodsDetails(goods.goods_id)"></image>
							<view class="info">
								<view class="name u-line-2" @click="viewGoodsDetails(goods.goods_id)">{{ goods.goods_name }}</view>
								<view class="cart-info">
									<view class="price">￥{{ goods.goods_price }}</view>
									<u-number-box :input-width="38" :input-height="39" :size="22" bg-color="#FFFFFF" :disabled-input=true color="#FF780F" :index="goods.cart_id" @minus="reduce" @plus="plus" v-model="goods.goods_num"></u-number-box>
								</view>
							</view>
						</view>
					</u-checkbox-group>
				</view>
			</view>
		</u-checkbox-group>
		<view class="empty-view">
			<u-empty mode="car" v-if="!list.length" :margin-top="240"></u-empty>
		</view>
		<view class="balance">
			<u-checkbox-group>
				<u-checkbox v-model="checkedAll" shape="circle" active-color="#FF780F" icon-size="35" label-size="30" @change="totalChange">
					全选
				</u-checkbox>
			</u-checkbox-group>
			<view class="total-price" v-if="status == '编辑'">
				<view class="title">合计：</view>
				<view class="value">￥{{ totalPrice }}</view>
			</view>
			<view class="cart-btn" v-if="status == '编辑'" @click="settlementOrder">结算</view>
			<view class="delete-btn" v-if="status == '完成'" @click="deleteGoods">删除</view>
			<u-toast ref="uToast" />
		</view>
	</view>
</template>
<script>
export default {
	data() {
		return {
			status: '编辑',
			list: [],
			checkedAll: false,
			checkedGoods: [],
			totalPrice: '0.00',
			debounce: true,
		}
	},
	watch: {
		list: {
			handler(cart){
				let checkedGoods = [];
				cart.forEach(store => {
					let temp = store.goods.filter(goods => {
						return goods.checked;
					})
					checkedGoods = checkedGoods.concat(temp);
				})
				// console.log(checkedGoods);
				this.checkedGoods = checkedGoods;
				this.calculatePrice();
			},
			deep: true
		}
	},
	onPullDownRefresh() {
		this.debounce = true;
		this.getCartList();
	},
	onShow() {
		this.debounce = true;
		this.getCartList();
	},
	methods: {
		// 计算价格
		calculatePrice() {
			// console.log(this.checkedGoods);
			let temp = 0;
			this.checkedGoods.forEach(item => {
				temp += item.goods_num * (item.goods_price * 100) / 100;
			})
			this.totalPrice = temp.toFixed(2);
		},
		// 结算
		settlementOrder() {
			if(!this.debounce) return;
			this.debounce = false;
			if(!this.checkedGoods.length) return false;
			// 拼接后端需要的数据形式
			let id = [], temp = '';
			this.checkedGoods.forEach(item => {
				temp = item.cart_id + '|' + item.goods_num;
				id.push(temp);
				temp = '';
			})
			// console.log(id);
			// ifcart 结算方式 1:购物车 0:直接结算（立即购买/拼团/秒杀）
			this.$u.api.settlementOrder({ ifcart: 1, cart_id: id }).then(res => {
				if(res.errCode == 0) {
					this.$store.commit('setOrderType', 5);
					this.$store.commit('updateOrderInfo', res.data);
					this.$u.route({
						url: '/pageC/cart/ConfirmOrder'
					})
				} else {
					this.$u.toast(res.message);
					this.debounce = true;
				}
			})
		},
		getCartList() {
			this.$u.api.getCartTreeList().then(res => {
				if (res.errCode == 0) {
					uni.stopPullDownRefresh();
					let list = res.data.store_cart_list;
					list.forEach((item, l_index) => {
						// 判断有无 checked 属性,如果有取值再赋值, 没有给默认值 false
						Object.assign(item, { checked: this.list.length ? this.list[l_index].checked : false });
						item.goods.forEach((goods, g_index) => {
							Object.assign(goods, { checked: this.list.length ? this.list[l_index].goods[g_index].checked : false });
						})
					})
					// console.log(list);
					this.list = list;
				}
			})
		},
		deleteGoods() {
			if(!this.checkedGoods.length) return false;
			let id = [];
			this.checkedGoods.forEach(item => {
				id.push(item.cart_id);
			})
			// console.log(id);
			this.$u.api.deleteCart({ id }).then(res => {
				if (res.errCode == 0) {
					if(!res.data.msg) {
						this.getCartList();
					} else {
						this.$refs.uToast.show({
							title: res.data.msg,
							type: 'error',
						})
					}
				}
			})
		},
		reduce(e) {
			this.cartUpdateNumber(e.index, e.value);
		},
		plus(e) {
			this.cartUpdateNumber(e.index, e.value);
		},
		async cartUpdateNumber(id, number) {
			await this.$u.api.cartUpdateNumber({
				cart_id: id,
				quantity: number,
			}).then(res => {
				this.getCartList();
			}).catch(() => {
				this.geCartList();
			})
		},
		totalChange(e) {
			// 切换所有商品的状态
			this.list.forEach(store => {
				store.checked = e.value;
				store.goods.forEach(goods => {
					goods.checked = store.checked;
				})
			})
		},
		storeChange() {
			// 判断所有商家状态
			let checked = true;
			this.list.forEach(item => {
				if(!item.checked) checked = false;
			})
			this.checkedAll = checked;
		},
		storeaAloneChange(e) {
			// 切换当前商家的商品状态
			this.list[e.name].goods.forEach(goods => {
				goods.checked = e.value;
			})
		},
		goodsChange(...value) {
			// console.log(value)
			// 判断商品是否全选
			let checked = true;
			this.list[value[1]].goods.forEach(item => {
				if(!item.checked) checked = false;
			})
			this.list[value[1]].checked = checked;
			this.storeChange();
		},
		viewStoreDetails(sid) {
			this.$u.route({
				url: 'pageC/merchant/index',
				params: {
					id: sid
				}
			})
		},
		viewGoodsDetails(gid) {
			this.$u.route({
				url: 'pageB/sdetails/index',
				params: {
					id: gid,
					type: 1,
				}
			})
		}
	},
	onNavigationBarButtonTap(btn) {
		// console.log(btn);
		// #ifdef H5
		if(this.status == '编辑'){
			this.status = "完成";
		}else{
			this.status = "编辑";
		}
		// #endif
		if(btn.index == 0){
			let pages = getCurrentPages();
			let page = pages[pages.length - 1];
			// #ifdef APP-PLUS
			let currentWebview = page.$getAppWebview();
			let titleObj = currentWebview.getStyle().titleNView;
			// console.log(JSON.stringify(titleObj.buttons[0]));
			if (!titleObj.buttons) {
				return;
			}
			if(titleObj.buttons[0].text == '编辑'){
				titleObj.buttons[0].text = "完成";
			}else{
				titleObj.buttons[0].text = "编辑";
			}
			currentWebview.setStyle({
				titleNView: titleObj
			});
			this.status = titleObj.buttons[0].text;
			// #endif
		}
	}
};
</script>
<style lang="scss" scoped>
.cart {
	min-height: calc(100vh - var(--window-top));
	position: relative;
	padding-bottom: 100rpx;
	.cart-main {
		display: block;
		.cart-item {
			padding: 40rpx 30rpx;
			.store {
				display: flex;
				align-items: center;
				margin-bottom: 20rpx;
				.u-checkbox {
					margin-right: 20rpx;
				}
				.name {
					display: flex;
					align-items: center;
					> image {
						width: 60rpx;
						height: 60rpx;
						border-radius: 50%;
						// border: 1rpx solid #000;
						margin-right: 15rpx;
					}
					> view {
						font-size: 28rpx;
						color: rgba(51,51,51,1);
					}
				}
			}
			.goods {
				.u-checkbox-group {
					display: flex;
					flex-direction: column;
					.goods-item {
						display: flex;
						align-items: center;
						&:not(:last-child) {
							margin-bottom: 20rpx;
						}
						> image {
							margin: 0 30rpx 0 20rpx; 
							width: 180rpx;
							height: 160rpx;
							border-radius: 10rpx;
							background-color: aqua;
							flex-shrink: 0;
						}
						.info {
							width: 418rpx;
							height: 160rpx;
							line-height: 48rpx;
							display: flex;
							flex-direction: column;
							justify-content: space-between;
							.name {
								font-size: 30rpx;
								color: rgba(51,51,51,1);
							}
							.cart-info {
								display: flex;
								align-items: center;
								justify-content: space-between;
								.price {
									font-size: 30rpx;
									font-weight: 500;
									color: rgba(255,49,49,1);
								}
								/deep/ .u-numberbox {
									border: 1rpx solid rgba(217,215,215,1);
									border-radius:4px;
									.u-icon-minus, .u-icon-plus {
										width: 38rpx;
									}
									.u-number-input {
										margin: 0;
										color: #333 !important;
										border: 1rpx #D9D7D7 solid {
											top: 0px;
											bottom: 0px;
										}
									}
								}
							}
						}
					}
				}
			}
		}
	}
	.empty-view {
		position: absolute;
		top: 50%;
		left: 50%;
		transform: translate(-50%, -100%);
	}
	.balance {
		position: fixed;
		bottom: 0;
		left: 0;
		z-index: 9;
		width: 100%;
		height: 98rpx;
		background: rgba(255,255,255,1);
		display: flex;
		align-items: center;
		padding: 30rpx;
		.total-price {
			margin-left: auto;
			font-size: 30rpx;
			display: flex;
			align-items: center;
			.title {
				color: #333333;
			}
			.value {
				color: #FF3131;
			}
		}
		.cart-btn {
			margin-left: 50rpx;
			justify-items: flex-end;
			width: 160rpx;
			height: 60rpx;
			background: rgba(255,120,15,1);
			border-radius: 30rpx;
			font-size: 30rpx;
			color: rgba(255,255,255,1);
			line-height: 60rpx;
			text-align: center;
		}
		.delete-btn {
			margin-left: auto;
			width: 160rpx;
			height: 60rpx;
			background: rgba(255,49,49,1);
			border-radius: 30rpx;
			font-size: 30rpx;
			color: rgba(255,255,255,1);
			line-height: 60rpx;
			text-align: center;
		}
	}
}
</style>