guanmao-wxapp/pages/cart/index.vue

<template>
	<view class="app-container" :class="isNoticebar ? 'hasNoticebar':''">
		<view class="noticebar" v-if="isNoticebar">
			<uni-notice-bar v-if="noticeContent" scrollable="true" single="true" showClose="true" :text="noticeContent" background-color="#f6e6e7" color="#de3749" @close="closeNoticebar"></uni-notice-bar>
		</view>
		
		<view class="top" :class="isNoticebar ? 'hasNoticebar':''">
			<view class="total">共{{totalNum}}件商品</view>
			<view v-if="!isEditor" @tap="isEditor = !isEditor">编辑</view>
			<view v-else @tap="isEditor = !isEditor">完成</view>
		</view>
		<view class="list">
			<block v-for="(item, index) in goodsList" :key='index'>
				<view class="item">
					<view class="check" v-if="item.selected" @tap="selectList(index)"><image src="@/static/icon/select_1.png" mode=""></image></view>
					<view class="check" v-else @tap="selectList(index)"><image src="@/static/icon/select_0.png" mode=""></view>
					<image :src="item.goodsImg" mode="aspectFill" class="img"></image>
					<view class="right">
						<view class="title ellipsis-2">{{item.goodsName}}</view>
						<view class="des ellipsis">{{item.specValue}}</view>
						<view class="last">
							<view class="price">
								<view class="price-1">¥{{item.price | numToFixed}}</view>
								<view class="price-2">¥{{item.orgPrice | numToFixed}}</view>
							</view>
							<u-number-box
								@tap.stop
								v-model="item.num" 
								:min="1" 
								:buttonSize="26" 
								iconStyle="font-size: 12px;"
								@change="changeCount($event, index)">
							</u-number-box>
						</view>
						
					</view>
				</view>
			</block>
		</view>
		<no-data v-if="!goodsList.length" :showText="'购物车暂无商品'"></no-data>
		<view class="bottom">
			<view class="check" @tap="selectAll">
				<image src="@/static/icon/select_1.png" mode="" v-if="selectAllStatus">
				<image src="@/static/icon/select_0.png" mode="" v-else>
				<text class="text">全选</text>
			</view>
			<view class="right" v-if="!isEditor">
				<view class="price">
					<view class="price-1">合计：<text>￥{{totalPrice}}</text></view>
					<view class="price-2">不含运费</view>
				</view>
				<view class="button"><button @tap="toOrder">去结算</button></view>
			</view>
			<view class="right" v-else>
				<button class="delete" @tap="clickDelete">删除</button>
			</view>
		</view>
		
		<modal-dialog showText="确定要删除选中的商品吗？" :isShowDialog="isDialog" @cancel="isDialog = false" @confirm="confirmDelete"></modal-dialog>
	</view>
</template>

<script>
	import {mapState} from 'vuex';
	import modalDialog from '@/components/modalDialog.vue';
	
	export default {
		components:{
			modalDialog
		},
		data() {
			return {
				goodsList: [],
				totalPrice: 0, // 总价，初始为0
				totalNum: 0,
				selectAllStatus: true, // 全选状态，默认全选
				
				isEditor: false, // 是否编辑
				
				isDialog: false, // 是否显示删除弹窗
				
				isNoticebar: false, // 是否显示通告栏
				noticeContent: '', // 公告内容
			}
		},
		computed:{
			...mapState(['userInfo', 'isLogin', 'userId'])
		},
		onShow() {
			this.getGoodsList();
		},
		onLoad() {
			this.getNoticebar();
		},
		methods: {
			// 获取公告栏
			getNoticebar() {
				this.$axios({
					url: '/shpping/cart/notice',
					method: 'get',
					params: {
						userId: this.userId
					}
				}).then(res => {
					this.noticeContent = res.data;
					this.isNoticebar = res.data ? true : false;
				})
			},
			
			// 获取商品列表
			getGoodsList() {
				this.$axios({
					url: '/shpping/cart/list',
					method: 'get',
					params: {
						userId: this.userId
					}
				}).then(res => {
					this.goodsList = res.data.shoppingCartLists;
					this.totalNum = res.data.totalNum;
					this.goodsList.forEach((item, index) => {
						item.selected = true;
					})
					this.selectAllStatus = true;
					this.getTotalPrice();
				})
			},
			
			// 统计总价
			getTotalPrice() {
				// 获取购物车列表
				let goodsList = this.goodsList;
				let total = 0;
				// 循环列表
				for(let i = 0; i<goodsList.length; i++) {
					// 判断选中才会计算价格
					if(goodsList[i].selected) {
						// 所有价格加起来
						total += goodsList[i].num * goodsList[i].price;
					}
				}
				// 赋值到data中渲染到页面
				this.goodsList = goodsList;
				this.totalPrice = total.toFixed(2);
			},
			
			// 选择事件
			selectList(index) {
				// 获取购物车列表
				let goodsList = this.goodsList;
				// 获取当前商品的选中状态
				let selected = goodsList[index].selected;
				// 改变状态
				goodsList[index].selected = !selected;
				this.goodsList = goodsList;
			
				// 改变全选状态
				for (var i=0; i<this.goodsList.length; i++){
					// 当状态为全选时，每个元素其中有一个为false，则取消全选
					// 当状态为非全选时，每个元素都为true，则全选
					if(this.selectAllStatus){
						if(!this.goodsList[i].selected){
							this.selectAllStatus = false;
							break;
						}
					}else {
						if(this.goodsList[i].selected){
							this.selectAllStatus = true;
						}else {
							this.selectAllStatus = false;
							break;
						}
					}
				}
			
				// 重新获取总价
				this.getTotalPrice();
			},
			
			// 全选事件
			selectAll(e) {
				// 是否全选状态
				let selectAllStatus = this.selectAllStatus;
				selectAllStatus = !selectAllStatus;
				let goodsList = this.goodsList;
				for (let i = 0; i < goodsList.length; i++) {
					// 改变所有商品状态
					goodsList[i].selected = selectAllStatus;
				}
				this.selectAllStatus = selectAllStatus;
				this.goodsList = goodsList;
				// 重新获取总价
				this.getTotalPrice();
			},
			
			// 更改数量
			changeCount(e, index) {
				this.goodsList[index].num = e.value;
				this.initCart();
			},
			
			// 修改数量后更新购物车数据
			initCart() {
				let buyGoods = [];
				this.goodsList.forEach((item, index)=> {
					let goodsItem = {
						goodsId: item.goodsId,
						goodsSpecId: item.goodsSpecId,
						num: item.num,
						shoppingCartId: item.shoppingCartId,
						secKillId: item.secKillId || '',
						promotionGroupId: item.promotionGroupId || '',
					};
					buyGoods.push(goodsItem);
				})
				this.$axios({
					url: '/shpping/cart/add',
					type: 'application/json',
					params: {
						userId: this.userId,
						buyGoods: buyGoods,
					},
				}).then(res => {
					this.totalNum = res.data.totalNum;
					this.getTotalPrice();
				})
				
			},
			
			
			// 点击删除
			clickDelete() {
				let delIds = [];
				for(let i = 0; i < this.goodsList.length; i++) {
					if(this.goodsList[i].selected) {
						delIds.push(this.goodsList[i].shoppingCartId)
					}
				}
				if(delIds.length < 1) {
					return this.$toast('至少选择一件商品');
				}
				this.isDialog = true;
			},
			
			// 确认删除
			confirmDelete() {
				let delIds = [];
				for(let i = 0; i < this.goodsList.length; i++) {
					if(this.goodsList[i].selected) {
						delIds.push(this.goodsList[i].shoppingCartId)
					}
				}
				this.$axios({
					url: '/shpping/cart/remove',
					params: {
						shoppingCartIds: delIds,
						userId: this.userId
					}
				}).then(res => {
					this.isDialog = false;
					this.isEditor = false;
					this.$successToast('删除成功');
					this.getGoodsList();
				})
			},
			
			// 去结算
			toOrder() {
				let buyList = [];
				this.goodsList.forEach((item, index)=> {
					if(item.selected) {
						let goodsItem = {
							goodsId: item.goodsId,
							goodsSpecId: item.goodsSpecId,
							num: item.num,
							shoppingCartId: item.shoppingCartId,
							secKillId: item.secKillId || '',
							promotionGroupId: item.promotionGroupId || '',
						};
						buyList.push(goodsItem);
					}
				})
				if(buyList.length < 1) {
					return this.$toast('至少选择一件商品');
				}
				// 跳转结算页面
				uni.navigateTo({
					url: '/packageGoods/pages/order?buyList=' + JSON.stringify(buyList)
				})
			},
			
			// 关闭通告栏
			closeNoticebar() {
				this.isNoticebar = false;
			}
		}
	}
</script>

<style lang="scss">
	.app-container {
		background: #F4F2F2;
		box-sizing: border-box;
	}
	.app-container {
		height: auto;
		padding: 110rpx 0;
		&.hasNoticebar {
			padding-top: 174rpx;
		}
		.noticebar {
			position: fixed;
			top: 0;
			left: 0;
			width: 100%;
			z-index: 100;
		}
		.top {
			position: fixed;
			top: 0;
			left: 0;
			z-index: 99;
			width: 100%;
			padding: 0 20rpx;
			box-sizing: border-box;
			background: #FFFFFF;
			height: 88rpx;
			display: flex;
			justify-content: space-between;
			align-items: center;
			border-bottom: 1px solid #F4F2F2;
			&.hasNoticebar {
				top: 64rpx;
			}
			.total {
				font-size: 32rpx;
			}
		}
		.list {
			padding: 0 20rpx;
			.item {
				margin-bottom: 20rpx;
				border-radius: 10rpx;
				padding: 20rpx 20rpx;
				display: flex;
				align-items: center;
				background: #FFFFFF;
				.check {
					image {
						width: 32rpx;
						height: 32rpx;
						display: block;
					}
				}
				.img {
					width: 180rpx;
					height: 180rpx;
					display: block;
					margin: 0 20rpx;
					flex-shrink: 0;
				}
				.right {
					width: 420rpx;
					height: 190rpx;
					display: flex;
					justify-content: space-between;
					flex-direction: column;
					.title {
						font-size: 28rpx;
						color: #333333;
						line-height: 36rpx;
					}
					.des {
						font-size: 24rpx;
						color: #999999;
						line-height: 36rpx;
					}
					.last {
						display: flex;
						justify-content: space-between;
						align-items: center;
						.price {
							display: flex;
							flex-direction: column;
						}
						.price-1 {
							font-size: 32rpx;
							color: #FF3F42;
							line-height: 36rpx;
						}
						.price-2 {
							font-size: 26rpx;
							color: #666666;
							line-height: 30rpx;
							text-decoration: line-through;
						}
					}
				}
			}
		}
		.bottom {
			position: fixed;
			left: 0;
			bottom: 0;
			z-index: 99;
			width: 100%;
			box-sizing: border-box;
			background: #FFFFFF;
			height: 100rpx;
			display: flex;
			align-items: center;
			justify-content: space-between;
			padding: 0 20rpx;
			border-top: 1px solid #F4F2F2;
			.check {
				display: flex;
				align-items: center;
				image {
					width: 32rpx;
					height: 32rpx;
					display: block;
					margin-right: 20rpx;
				}
			}
			.right {
				display: flex;
				align-items: center;
				.price {
					display: flex;
					flex-direction: column;
					margin-right: 20rpx;
				}
				.price-1 {
					font-size: 28rpx;
					line-height: 36rpx;
					text {
						color: #FF3F42;
					}
				}
				.price-2 {
					font-size: 24rpx;
					color: #999999;
					line-height: 30rpx;
					text-align: right;
				}
				.button {
					button {
						height: 80rpx;
						line-height: 80rpx;
						padding: 0;
						border-radius: 80rpx;
						font-size: 30rpx;
						color: #fff;
						background: linear-gradient(-90deg,#ff3f42 0%, #fe781f 100%);
						padding: 0 40rpx;
					}
				}
				.delete {
					width: 170rpx;
					height: 80rpx;
					line-height: 80rpx;
					text-align: center;
					padding: 0;
					border-radius: 80rpx;
					font-size: 30rpx;
					color: #FF3F42;
					border: 1px solid #FF3F42;
				}
			}
			
		}
	}
</style>