book-hi/pages/mall/shopping-cart.vue

<template>
	<view class="cartbox">
		<view class="topEditOpar" v-if="goodsList.length>0">
			<!-- <view class="">
				有心仪的宝贝，快去下单吧~
			</view> -->
			<view class="text opartxt" @click="isEdit = !isEdit">
				{{isEdit?'完成':'管理'}}
			</view>
		</view>
		<NoData v-if="finish&&goodsList.length<1"></NoData>
		<view class="scrollbox" v-else>
			<!-- 购物车列表 -->
			<view class="cart-list">
				<view class="item" v-for="(goods, index) in goodsList" :key="index">
					<u-icon class="delIcon" name="trash" color="#999" @click.stop="delCartGoods(goods.id,index)"></u-icon>
					<view class="left">
						<u-checkbox shape="circle" active-color="#ed3f14" icon-size="16" :disabled="goods.status==2&&!isEdit"
							v-model="goods.checked"></u-checkbox>
					</view>
					<view class="right" @click.stop="goGoodsDetail(goods.goods_id)">
						<view class="chuo" v-if="goods.status==2">
							已下架
						</view>
						<view class="img">
							<image :src="goods.goods.cover" mode=""></image>
						</view>
						<view class="info">
							<view class="title">{{ goods.goods.title }}</view>
							<!-- <view class="sku">{{ goods.difference }}</view> -->
							<u-tag :text="goods.difference" type="info" />
							<view class="operate">
								<view class="price">
									<text>￥</text>
									<text>{{ goods.amount }}</text>
								</view>
								<view class="num">
									<u-number-box v-model="goods.nums" :min="1" :max="5" :disabled-input="true"
										@minus="e=>changeNums(e,goods.id)" @plus="e=>changeNums(e,goods.id)"></u-number-box>
								</view>
							</view>
						</view>
					</view>
				</view>
			</view>
		</view>

		<!-- 底部按钮 -->
		<view class="bottom_opar" v-if="isEdit">
			<view class="check">
				<u-checkbox shape="circle" active-color="#ed3f14" icon-size="16" v-model="checkAllStauts"
					@change="checkAllGoods">全选</u-checkbox>
				<!-- <text>全选</text> -->
			</view>
			<view class="right">
				
				<view class="soldOutBtn" v-if="isJiesuanBtn">
					删除
				</view>
				<view class="buyBtn" v-else @click="delCarts">
					删除({{ goodsList.filter(item => item.checked).length }})
				</view>
			</view>
		</view>
		<view class="bottom_opar" v-else>
			<view class="check">
				<u-checkbox shape="circle"  active-color="#ed3f14" icon-size="16" v-model="checkAllStauts"
					@change="checkAllGoods">全选</u-checkbox>
				<!-- <text>全选</text> -->
			</view>
			<view class="right">
				<view class="price">
					<text>合计：</text>
					<text>￥</text>
					<text>{{ parseFloat(totalPrice).toFixed(2) }}</text>
				</view>
				<!-- <u-button type="primary" :disabled="isJiesuanBtn" @click="goPayResult">
					去结算({{ goodsList.filter(item => item.checked).length }})
				</u-button> -->
				
				<view class="soldOutBtn" v-if="isJiesuanBtn">
					去结算
				</view>
				<view class="buyBtn" v-else @click="goPayResult">
					去结算({{ goodsList.filter(item => item.checked).length }})
				</view>
			</view>
		</view>
	</view>
</template>

<script>
	var _self;
	export default {
		data() {
			return {
				isEdit:false,
				// showJiesuan:false,
				showRecommend: false, //是否显示推荐商品
				loading: false,
				page: 1,
				finish: false,
				totalPrice: 0,
				checkAllStauts: false,
				goodsList: [],

				isBiangeng: false,
				pullDown: false,
			};
		},
		computed: {
			checkAll() {
				let newList = this.goodsList;
				if(!this.isEdit){
					// 编辑状态
					newList = this.goodsList.filter(item=>item.status==1)
				}
				this.totalPrice = 0;
				if (newList.length < 1) {
					this.checkAllStauts = false;
					return;
				}
				newList.map(item => (item.checked ? (this.totalPrice += Number(item.amount) * item.nums) : 0));
				if (newList.filter(item => item.checked).length == newList.length) {
					this.checkAllStauts = true;
				} else {
					this.checkAllStauts = false;
				}
			},
			canBuyGoods(){
				return this.goodsList.filter(item=>item.status==1)
			},
			isJiesuanBtn() {
				return this.goodsList.filter(item => item.checked).length <= 0;
			},
		},
		onLoad() {
			_self = this;
		},
		onPullDownRefresh() {
			this.pullDown = true;
			this.reData();
		},
		onShow() {
			this.reData();
		},
		onReachBottom() {
			console.log('滚动到底部')
			// this.getData();
			this.getCartList();
		},
		methods: {
			reData(){
				this.finish = false;
				this.loading = false;
				this.page = 1;
				this.getCartList();
			},
			// 批量删除
			delCarts(){
				let selItems = this.goodsList.filter(item => item.checked);
				if(selItems.length>0){
					let ids = selItems.map(e=>e.id);
					_self.delCartGoods(ids.toString());
				}
			},
			// 删除
			delCartGoods(id, index) {
				console.log('>>>>>', id);
				uni.showModal({
					title: '提示',
					content: '确认要删除选择的商品吗？',
					success: function(res) {
						if (res.confirm) {
							_self.$u.api.delCartGoodsAjax(id).then(({code, data,msg}) => {
								if (code == 1) {
									_self.$u.toast(msg)
									if(_self.isEdit){
										_self.reData();
										return;
									}
									if(index||index==0){
										_self.goodsList.splice(index, 1);
									}
									
								}
							}).catch(() => {})
						}
					}
				});
			},
			changeNums(e, id) {
				uni.showLoading();
				this.$u.api.updateCartNumsAjax({
					cart_id: id,
					nums: e.value
				}).then(({
					code,
					data
				}) => {
					console.log(code, data)
					uni.hideLoading();
				}).catch(() => {
					uni.hideLoading();
				})
			},
			checkAllGoods() {
				if (this.checkAllStauts) {
					this.goodsList.forEach(item => (item.checked = false));
				} else {
					this.goodsList.forEach(item => (item.checked = true));
				}
				this.$forceUpdate();
			},
			goGoodsDetail(id) {
				uni.navigateTo({
					url: '/pages-mall/pages/goods/detail?goodsId=' + id
				});
			},
			goPayResult() {
				// goodsList.filter(item => item.checked).length<=0
				let orderInfos = [];
				let cartIds = [];
				_self.goodsList.forEach(e => {
					if (e.checked) {
						cartIds.push(e.id);
						orderInfos.push({
							id: e.goods_id,
							cover: e.goods.cover,
							isbn: '',
							price_selling: e.amount,
							publish: '',
							title: e.goods.title,
							nums: e.nums,
							selectdSku: {
								id: e.sku_id,
								difference: e.difference,
								price_selling: e.amount,
							},
						})
					}
				})
				console.log(orderInfos);

				uni.navigateTo({
					url: '/pages-mall/pages/order/submit?cartIds=' + cartIds.toString() + '&orderInfo=' + encodeURIComponent(
						JSON.stringify(orderInfos))
				});
			},
			getCartList() {
				if (this.finish) return false;
				if (this.loading) return false;
				this.loading = true;
				this.$u.api.getCartListAjax().then(({
					code,
					data
				}) => {
					if (this.pullDown) {
						uni.stopPullDownRefresh();
						this.pullDown = false;
					}
					this.isBiangeng = true;
					console.log(code, data)
					this.loading = false;
					let returnData = data.data;
					if (code == 1) {
						if (data.last_page <= data.current_page) {
							this.finish = true;
						}
						returnData.forEach(e => {
							e.checked = false;
						})
						if (data.current_page == 1) {
							this.goodsList = returnData;
						} else {
							this.goodsList = this.goodsList.concat(returnData);
						}
						this.page++;
						console.log(this.goodsList);
					} else {
						this.finish = true;
					}
				}).catch(() => {
					this.loading = false;
					this.finish = true;
				})
			},
			
			// nextPage(e){
			// 	if(this.finish){
			// 		/* 已滚动到底部，不继续加载 */
			// 		return false;
			// 	}
			// 	console.log(e);
			// 	this.page++;
			// 	this.getUserCouponList();
			// },
		}
	};
</script>

<style lang="scss" scoped>
	.topOpar{
		height: 80rpx;
		text-align: right;
		background-color: $app-theme-light-color;
		display: flex;
		align-items: center;
		justify-content: space-between;
		padding: 0 30rpx;
		margin-bottom: 20rpx;
	}
	.cartbox {
		height: 100vh;
		background: $app-theme-bg-gray-color;
		padding-top: 20rpx;
	}

	.scrollbox {
		// height: 100%;
		padding-bottom: 100rpx;
		box-sizing: border-box;
	}

	/deep/.u-icon {
		display: flex !important;
	}

	.delIcon {
		position: absolute;
		top: 10rpx;
		right: 10rpx;
	}

	.cart-list {
		.item {
			display: flex;
			align-items: center;
			background-color: $app-theme-bg-color;
			padding: 30rpx 24rpx 30rpx 24rpx;
			border-bottom: 1rpx solid $app-theme-border-color;
			position: relative;

			.left {
				display: flex;
				align-items: center;
				width: 46rpx;
			}

			.right {
				width: calc(100% - 46rpx);
				display: flex;
				align-items: center;
				position: relative;

				.img {
					width: 160rpx;
					height: 160rpx;
					margin-right: 20rpx;

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

				.info {
					width: 418rpx;

					.title {
						font-size: 28rpx;
						font-family: PingFang-SC-Regular, PingFang-SC;
						font-weight: 400;
						color: $app-theme-text-black-color;
						padding-bottom: 16rpx;
					}

					.sku {
						font-size: 22rpx;
						font-family: PingFang-SC-Regular, PingFang-SC;
						font-weight: 400;
						background: $app-theme-bg-gray-color;
						border-radius: 2px;
						color: $app-theme-card-gray-deep-color;
						padding: 4rpx 16rpx;
					}

					.operate {
						padding-top: 30rpx;
						display: flex;
						align-items: center;
						justify-content: space-between;

						.price {
							text:nth-child(1) {
								font-size: 24rpx;
								font-family: PingFangSC-Medium, PingFang SC;
								font-weight: 500;
								color: $app-theme-text-money-color;
							}

							text:nth-child(2) {
								font-size: 36rpx;
								font-family: PingFangSC-Regular, PingFang SC;
								font-weight: 400;
								color: $app-theme-text-money-color;
							}
						}

						.num {}
					}
				}
			}
		}
	}

	.bottom_opar {
		position: fixed;
		bottom: 0;
		left: 0;
		width: 100%;
		background-color: $app-theme-bg-color;
		height: 100rpx;
		z-index: $app-zIndex-fixed;
		display: flex;
		justify-content: space-between;
		align-items: center;
		.check {
			padding-left: 30rpx;
			display: flex;
			align-items: center;

			text {
				font-size: 28rpx;
				font-weight: 400;
				color: $app-theme-text-black-color;
			}
		}

		.right {
			display: flex;
			align-items: center;
			.price {
				margin-right: 54rpx;
				text:nth-child(1) {
					font-size: 28rpx;
					font-family: PingFangSC-Regular, PingFang SC;
					font-weight: 400;
					color: $app-theme-text-black-color;
				}

				text:nth-child(2) {
					font-size: 24rpx;
					font-family: PingFangSC-Medium, PingFang SC;
					font-weight: 500;
					color: $app-theme-text-money-color;
				}

				text:nth-child(3) {
					font-size: 36rpx;
					font-family: PingFangSC-Regular, PingFang SC;
					font-weight: 400;
					color: $app-theme-text-money-color;
				}
			}
		}

	}
	.topEditOpar{
		display: flex;
		padding: 10rpx 20rpx;
		display: flex;
		align-items: center;
		justify-content: space-between;
		text-align: center;
		.text{
			flex: 1;
			text-align: right;
			font-weight: bold;
			font-size: 32rpx;
		}
		.opartxt{
			color: $app-theme-deep-color;
		}
	}
	
	.chuo{
		position: absolute;
		width: 90rpx;
		height: 90rpx;
		border-radius: 50%;
		color: #fff;
		display: flex;
		align-items: center;
		justify-content: center;
		background-color: rgba(0, 0, 0, .5);
		top: 40rpx;
		left: 40rpx;
		transform: rotate(30deg);
		font-size: 24rpx;
	}
</style>