realty/virgo.wzfrontend/workark_wx/subPages/shopPage/cart/cart.vue

<template>
	<view class="wrap">
		<view class="no-data" v-if="cartList.length ===0 ">
			<uv-empty icon="https://file-node.oss-cn-shanghai.aliyuncs.com/youji/fa57e25b38c442ebb0ba023cace796bb"
				:isImg="true" textSize="14" width="180" text="购物车还是空的">
			</uv-empty>
		</view>
		<uv-list :customStyle="{'margin-top':'30rpx'}" v-else>
			<uv-list-item v-for="(item,index) in cartList" :key="item.id" border>
				<template #body>
					<view class="gl-item">
						<view class="checkbox" :class="{
							checked:item.checked
						}" @tap="changeCheckBox(item)">
							<uv-icon name="checkmark" color="#fff"></uv-icon>
						</view>
						<view class="gl-img">
							<uv-image width="170rpx" height="170rpx" :src="item.thumb">
							</uv-image>
						</view>
						<view class="gl-content">
							<view class="gl-name">{{item.title}}</view>
							<view class="gl-descript">{{item.goods.descript}}</view>
							<view class="gl-price">
								<uv-row>
									<uv-col :span="6">
										￥{{formatPrice(item.price)}}
									</uv-col>
									<uv-col :span="6" v-if="rightText=='编辑'">
										<uv-number-box v-model="item.count" :min="1" :max="item.goods.stock"
											@change="val=>countChange(item,val)">
										</uv-number-box>
									</uv-col>
								</uv-row>
							</view>
						</view>
					</view>
				</template>
			</uv-list-item>
		</uv-list>
		<view class="navigation" v-if="cartList.length>0">
			<view class="left">
				<view class="item">
					<view class="checkbox" :class="{
						checked:checkedAll
					}" @click="checkAll">
						<uv-icon name="checkmark" color="#fff"></uv-icon>
					</view>
				</view>
				<view class="item total-price" v-if="rightText=='编辑'">
					合计: ￥{{formatPrice(totalPrice)}}
				</view>
			</view>
			<view class="right">
				<view class="link-text" @click="onClickRight">
					{{rightText}}
				</view>
				<uv-button type="warning" v-if="rightText =='完成'" @click="addFav" :customStyle="{
					'margin-right':'10rpx'
				}">
					移入收藏
				</uv-button>
				<uv-button type="error" @click="submit">{{rightText=='编辑'?'结算':'删除'}}</uv-button>
			</view>
		</view>

	</view>
</template>

<script>
	import {
		getCartData,
		addGoodCount,
		like,
		removeCart
	} from '@/request/api/shop.js'
	export default {
		data() {
			return {
				activeFooter: 2,
				checkedCartItem: [], //当前选中的购物车项目id
				allCartItem: [], // 用户所有的购物车项目id列表
				cartList: [],
				checkedAll: true,
				showEdit: false,
				rightText: '编辑'
			}
		},
		computed: {
			totalPrice() {
				return this.cartList.reduce((total, item) => total + (item.checked == true ? (parseFloat(item.price) * item
					.count) : 0), 0);
			}
		},
		onShow() {
			this.init();
			this.rightText = '编辑';
		},
		methods: {
			async init() {
				let cartData = await getCartData();
				if (cartData.state) {
					this.cartList = cartData.data.map(node => {
						node['checked'] = true;
						node['thumb'] = this.shopImage(node.goods.pic);
						this.checkedCartItem.push(node.id);
						return node;
					})
					this.allCartItem = this.checkedCartItem;
					this.checkedAll = true;
				}
			},
			onClickRight() {
				this.showEdit = !this.showEdit
				this.rightText = this.rightText === '编辑' ? '完成' : '编辑'
			},
			formatPrice(price) {
				return (price / 100).toFixed(2);
			},
			toGoods(id) {
				this.$u.route({
					url: '/pages/goods/goods',
					params: {
						id: id
					}
				})
			},
			changeCheckBox(e) {
				e.checked = !e.checked;
				this.checkedAll = this.cartList.filter(node => !node.checked).length === 0;
			},
			countChange(item, val) {
				addGoodCount(item.id, val.value);
			},
			checkAll() {
				if (this.checkedAll) {
					for (var i in this.cartList) {
						this.cartList[i].checked = false;
					}
				} else {
					for (var i in this.cartList) {
						this.cartList[i].checked = true;
					}
				}
				this.checkedAll = !this.checkedAll;
			},
			addFav() {
				let idArr = new Array();
				let idGoods = new Array();
				for (const i in this.cartList) {
					if (this.cartList[i].checked) {
						idGoods.push(this.cartList[i].goods.id);
						idArr.push(this.cartList[i].id);
					}
				}
				if (idArr.length == 0) {
					this.$toast('请选择收藏的商品');
					return;
				}
				let count = 0;
				for (var index in idGoods) {
					like(idGoods[index]).then(res => {
						if (res.state) {
							count++;
							if (count == idGoods.length) {
								removeCart(idArr).then(res2 => {
									this.$toast('收藏成功');
									this.init();
								});
							}
						}
					});
				}
			},
			submit() {
				let idArr = new Array();
				for (const i in this.cartList) {
					if (this.cartList[i].checked) {
						idArr.push(this.cartList[i].id);
					}
				}
				if (idArr.length == 0) {
					this.$toast('请选择要处理的商品');
					return;
				}
				if (this.rightText == '编辑') {
					//结算
					this.$navigateTo('/subPages/shopPage/checkout/checkout?ids=' + idArr.join(','));
				}
				if (this.rightText == '完成') {
					//将商品移出购物车
					removeCart(idArr).then(res2 => {
						this.$toast('收藏成功');
						this.init();
					});
				}
			}
		}
	}
</script>

<style lang="scss" scoped>
	.wrap {
		.navbar-right {
			margin-right: 24rpx;
			display: flex;
		}

		.checkbox {
			width: 40rpx;
			height: 40rpx;
			border: 1px solid $uv-border-color;
			border-radius: 50%;
			display: flex;
			align-items: center;
			justify-content: center;

			&.checked {
				background: $uv-primary;
				border-color: $uv-primary;
			}
		}

		.gl-content {
			flex: 1;
			width: 0;
		}

		.gl-item {
			display: flex;
			align-items: center;
			width: 100%;
		}

		.gl-name {
			font-size: 26rpx;
		}

		.gl-img {
			margin: 0 20rpx;
		}

		.gl-descript {
			margin-top: 14rpx;
			font-size: 20rpx;
		}

		.gl-price {
			margin-top: 26rpx;
			font-size: 24rpx;
			color: #FA3534;
		}

		.no-data {
			padding-top: 80rpx;
		}

		.navigation {
			background-color: #ffffff;
			box-shadow: 0px 2px 10px rgba(3, 3, 3, 0.1);
			position: fixed;
			bottom: 0;
			left: 0;
			right: 0;
			height: 100rpx;
			display: flex;
			align-items: center;
			justify-content: flex-end;
			padding-bottom: 0;
			padding-bottom: constant(safe-area-inset-bottom);
			padding-bottom: env(safe-area-inset-bottom);
			padding-right: 40rpx;
			padding-left: 40rpx;
			justify-content: space-between;

			.left {
				display: flex;
				font-size: 20rpx;
				align-items: center;

				.item {
					margin: 0 8rpx;
				}

				.total-price {
					font-size: 30rpx;
					color: red;
				}
			}

			.right {
				display: flex;
				font-size: 28rpx;
				align-items: center;

			}

			.link-text {
				margin-right: 20rpx;
				color: $uv-primary;
			}
		}
	}
</style>