mnsx/pages/menu/Child/chooseListBar.vue

<template>
	<view class="all" v-if="show">
		<uni-popup ref="popup" type="bottom">
			<view class="box">
				<view class="top">
					<view class="top-left">
						<view class="quan"><view class="qzq"></view></view>
						<view class="top-font">已选商品</view>
					</view>
					<view class="top-right" @click="clearCart">
						<image src="../../../static/icon/clear.png" mode=""></image>
						<view class="right-clear">清空购物车</view>
					</view>
				</view>
				<scroll-view scroll-y class="scoroll">
					<view v-for="(item, index) in cartList" :key="item.id">
						<view class="cart-item" :class="{ 'b-b': index !== cartList.length - 1 }">
							<view class="image-wrapper">
								<image
									:src="item.productInfo.image"
									:class="[item.loaded]"
									mode="aspectFill"
									lazy-load
									@load="onImageLoad('cartList', index)"
									@error="onImageError('cartList', index)"
								></image>
							</view>
							<view class="item-right">
								<text class="clamp title">{{ item.productInfo.store_name }}</text>
								<text class="attr">{{ item.productInfo.attrInfo.suk }}</text>
								<text class="price" style="margin-top: 30rpx;">¥{{ item.productInfo.attrInfo.price }}</text>
							</view>
							<view class="item-num">
								<view class="munbox flex">
									<image src="../../../static/icon/reduce.png" mode="" @click="reduce(item, index)"></image>
									<input type="number" :value="item.cart_num" disabled />
									<image src="../../../static/icon/add.png" mode="" @click="add(item)"></image>
								</view>
							</view>
						</view>
					</view>
					<view class="db"></view>
				</scroll-view>
			</view>
		</uni-popup>
		<view class="action-section">
			<view class="total-box" @click.stop="showPopup">
				<view class="bg">
					<image src="../../../static/img/pay.png" mode=""></image>
					<view class="num" v-if="num != 0">{{ num }}</view>
				</view>

				<view class="total-price">
					￥
					<text>{{ total }}</text>
				</view>
			</view>
			<button type="primary" class="confirm-btn" @click.stop="createOrder">去结算</button>
		</view>
	</view>
</template>

<script>
import { getCartList, getCartNum, cartDel } from '@/api/user.js';
import { mapState } from 'vuex';
import uniNumberBox from '@/components/uni-number-box.vue';
import { saveUrl, interceptor } from '@/utils/loginUtils.js';
import uniPopup from '@/components/uni-popup/uni-popup.vue';
export default {
	components: {
		uniNumberBox,
		uniPopup
	},
	data() {
		return {
			total: 0, //总价格
			allChecked: false, //全选状态  true|false
			empty: false, //空白页现实  true|false
			cartList: [],
			num: '',
			show: false
		};
	},
	mounted() {
		this.loadData();
	},
	watch: {
		cartList: {
			deep: true, //深度监听
			immediate: true,
			handler(newValue, oldValue) {
				let empty = newValue.length === 0 ? true : false;
				if (this.empty !== empty) {
					this.empty = empty;
				}
			}
		}
	},
	computed: {
		...mapState('user', ['hasLogin'])
	},
	methods: {
		reduce(item, index) {
			if (item.cart_num == 1) {
				uni.showModal({
					content: '删除该商品？',
					success: e => {
						if (e.confirm) {
							this.deleteCartItem(index);
						}
					}
				});
			} else {
				item.cart_num--;
				getCartNum({
					id: item.id,
					number: item.cart_num
				})
					.then(e => {
						console.log(e);
					})
					.catch(function(e) {
						console.log(e);
					});
				this.calcTotal(item);
			}
		},
		add(item) {
			console.log(item);
			if (item.productInfo.stock > item.cart_num) {
				item.cart_num++;
				getCartNum({
					id: item.id,
					number: item.cart_num
				})
					.then(e => {
						console.log(e);
					})
					.catch(function(e) {
						console.log(e);
					});
				this.calcTotal(item);
			} else {
				return;
			}
		},
		//请求数据
		async loadData() {
			let obj = this;
			getCartList({})
				.then(function(e) {
					console.log(e, '111');
					// 获取当前购物车物品增加数量
					let nub = obj.cartList.length;
					// 获取之前对象数组
					let aArray = obj.cartList.reverse();
					// 获取返回数据对象数组
					let bArray = e.data.valid.reverse();
					obj.cartList = bArray
						.map((item, ind) => {
							// 设置返回数据默认为勾选状态
							item.checked = true;
							// 获取相同数组之前对象的数据
							let carlist = aArray[ind];
							// 判断之前是否已经加载完毕
							if (carlist && carlist.loaded == 'loaded') {
								item.loaded = 'loaded';
							}

							return item;
						})
						.reverse();
					obj.calcTotal(); //计算总价
					obj.show = true;
				})
				.catch(function(e) {
					console.log(e);
				});
		},
		//监听image加载完成
		onImageLoad(key, index) {
			// 修改载入完成后图片class样式
			this.$set(this[key][index], 'loaded', 'loaded');
		},
		//监听image加载失败
		onImageError(key, index) {
			this[key][index].image = '/static/error/errorImage.jpg';
		},
		showPopup() {
			this.$refs.popup.open();
		},
		// 跳转到登录页
		navToLogin() {
			// 保存地址
			saveUrl();
			// 登录拦截
			interceptor();
		},
		//数量
		numberChange(data) {
			let arr = this.cartList[data.index];
			arr.cart_num = data.number;
			getCartNum({
				id: arr.id,
				number: data.number
			})
				.then(e => {
					console.log(e);
				})
				.catch(function(e) {
					console.log(e);
				});
			this.calcTotal();
		},
		//删除
		deleteCartItem(index) {
			const obj = this;
			let list = this.cartList;
			let row = list[index];
			let id = row.id;
			cartDel({
				ids: id
			});
			this.cartList.splice(index, 1);
			uni.hideLoading();
			this.calcTotal();
			if (this.num == 0) {
				obj.$emit('delChoose');
			}
		},
		//清空
		clearCart() {
			const obj = this;
			uni.showModal({
				content: '清空购物车？',
				success: e => {
					if (e.confirm) {
						let st = this.cartList.map(e => {
							return e.id;
						});
						cartDel({
							ids: st.join(',')
						}).then(e => {
							obj.$emit('delChoose');
							console.log(e);
						});
						this.cartList = [];
						this.$refs.popup.close();
						(this.total = 0), (this.num = 0);
					}
				}
			});
		},
		//计算总价
		calcTotal() {
			console.log('111111');
			let list = this.cartList;
			let total = 0;
			let num = 0;
			let checked = true;
			list.forEach(item => {
				console.log(item, '123123');
				num += item.cart_num;
				total += item.productInfo.attrInfo.price * item.cart_num;
			});
			this.num = num * 1;
			this.allChecked = checked;
			this.total = Number(total.toFixed(2));
		},
		//创建订单
		createOrder() {
			let list = this.cartList;
			let goodsData = [];
			list.forEach(item => {
				if (item.checked) {
					goodsData.push(item.id);
				}
			});
			this.$emit('createOrder', goodsData);
		}
	}
};
</script>

<style lang="scss">
.container {
	padding-bottom: 134rpx;
	background-color: $page-color-base;

	/* 空白页 */
	.empty {
		position: fixed;
		left: 0;
		top: 0;
		width: 100%;
		height: 100vh;
		padding-bottom: 100rpx;
		display: flex;
		justify-content: center;
		flex-direction: column;
		align-items: center;
		background: #fff;

		.emptyImg {
			width: 300rpx;
			height: 250rpx;
			margin-bottom: 30rpx;
		}

		.empty-tips {
			display: flex;
			font-size: $font-sm + 2rpx;
			color: $font-color-disabled;

			.navigator {
				color: $uni-color-primary;
				margin-left: 16rpx;
			}
		}
	}
}

.box {
	max-height: 700rpx;
	position: relative;
	background: #ffffff;
	border-radius: 20rpx 20rpx 0rpx 0rpx;

	.top {
		height: 90rpx;
		width: 100%;
		display: flex;
		justify-content: space-between;
		align-items: center;
		padding: 0 30rpx 0 36rpx;

		.top-left {
			display: flex;
			justify-content: flex-start;
			align-items: center;

			.quan {
				width: 24rpx;
				height: 24rpx;
				border: 1px solid #ee2f72;
				border-radius: 50%;
				position: relative;
				flex-shrink: 0;

				.qzq {
					position: absolute;
					top: 50%;
					left: 50%;
					margin: -8rpx 0 0 -8rpx;
					width: 12rpx;
					height: 12rpx;
					background: #ee2f72;
					border-radius: 50%;
				}
			}

			.top-font {
				margin-left: 10rpx;
				font-size: 28rpx;
				font-family: PingFang SC;
				font-weight: 500;
				color: #333333;
			}
		}

		.top-right {
			font-size: 28rpx;
			font-family: PingFang SC;
			font-weight: 500;
			color: #999999;
			display: flex;
			align-items: center;

			image {
				width: 28rpx;
				height: 28rpx;
			}

			.right-clear {
				margin-left: 6rpx;
			}
		}
	}

	.scoroll {
		max-height: 600rpx;
	}
}

.db {
	width: 750rpx;
	height: 150rpx;
}

/* 购物车列表项 */
.cart-item {
	position: relative;
	display: flex;
	padding: 18rpx 29rpx 60rpx 30rpx;
	border-top: 1px solid #eeeeee;

	.image-wrapper {
		width: 160rpx;
		height: 160rpx;
		flex-shrink: 0;
		position: relative;

		image {
			border-radius: 2rpx;
		}
	}

	.checkbox {
		position: absolute;
		left: -16rpx;
		top: -16rpx;
		z-index: 8;
		font-size: 44rpx;
		line-height: 1;
		padding: 4rpx;
		color: $font-color-disabled;
		background: #fff;
		border-radius: 50px;
	}

	.item-right {
		display: flex;
		flex-direction: column;
		flex: 1;
		overflow: hidden;
		position: relative;
		padding-left: 30rpx;

		.title,
		.price {
			font-size: $font-base + 2rpx;
			color: #ee2f72;
			height: 40rpx;
			line-height: 40rpx;
		}

		.attr {
			font-size: $font-sm + 2rpx;
			color: $font-color-light;
			height: 50rpx;
			line-height: 50rpx;
		}

		.price {
			height: 50rpx;
			line-height: 50rpx;
		}

		.step {
			margin-top: 20rpx;
		}
	}

	.item-num {
		position: absolute;
		bottom: 60rpx;
		right: 30rpx;

		.munbox {
			width: 144rpx;
			height: 44rpx;

			input {
				display: inline-block;
				text-align: center;
			}

			image {
				flex-shrink: 0;
				width: 44rpx;
				height: 44rpx;
			}
		}
	}
}

/* 底部栏 */
.action-section {
	/* #ifdef H5 */
	margin-bottom: 100rpx;
	/* #endif */
	position: fixed;
	bottom: 0;
	z-index: 1000;
	display: flex;
	align-items: center;
	width: 100%;
	height: 100rpx;
	background: #ffffff;

	.total-box {
		width: 490rpx;
		height: 100rpx;
		background: #fff6e1;
		padding-left: 50rpx;
		display: flex;
		align-items: center;

		.bg {
			position: relative;
			width: 56rpx;
			height: 58rpx;

			image {
				width: 100%;
				height: 100%;
			}

			.num {
				position: absolute;
				top: -10rpx;
				right: -10rpx;
				min-width: 30rpx;
				padding: 0 5rpx;
				display: inline-block;
				height: 30rpx;
				background: #ff7144;
				border-radius: 50%;
				font-size: 24rpx;
				font-family: PingFang SC;
				font-weight: bold;
				color: #ffffff;
				text-align: center;
				line-height: 30rpx;
			}
		}

		.total-price {
			font-size: 24rpx;
			font-family: PingFang SC;
			font-weight: bold;
			color: #ee2f72;
			margin-left: 30rpx;

			text {
				font-size: 32rpx;
			}
		}
	}

	.confirm-btn {
		border-radius: 0;
		width: 260rpx;
		height: 100rpx;
		background: #ee2f72;
		text-align: center;
		line-height: 100rpx;
		font-size: 38rpx;
		font-family: PingFang SC;
		font-weight: 500;
		color: #ffffff;
	}
}

/* 复选框选中状态 */
.action-section .checkbox.checked,
.cart-item .checkbox.checked {
	color: $base-color;
}
</style>