saas_miniprogram/pages4/shopping/shoppingCart.vue

<template>
	<view>
		<u-navbar :is-back="false" title="购物车" :border-bottom="false" title-color="#333333" back-icon-color="#ffffff">
			<view class="slot-wrap">
				<image :src="logo" style="width: 178rpx;height: 31rpx;margin-left: 30rpx;"></image>
			</view>
		</u-navbar>
		<view v-show="isLogin">
			<view v-if="!list.length"><u-empty text="购物车为空" margin-top="500" mode="car"></u-empty></view>
			<view v-else>
				<view class="shop_list">
					<uni-swipe-action>
						<u-checkbox-group @change="checkboxGroupChange" placement="column" >
							<view>
								<uni-swipe-action-item :autoClose="false" @change="swipeChange($event, item)" :show="item.show" v-for="(item, index) in list" :key="index">
									<view class="goods-item">
										<view class="item-wrap">
											<view class="goods-msg">
												<u-checkbox @change="checkboxChange" :disabled="item.goodsStatus == 0"  style="width: 100%;" v-model="list[index].checked" shape="circle" :name="index">
													<view class="flex">
														<view class="goods-img">
															<image :src="$method.splitImgHost(item.coverUrl, true)"></image>
														</view>
														<view class="flex__auto">
															<view class="goods-title">{{ item.goodsName }}</view>
															<view class="priceTag">¥ {{ item.standPrice }}</view>
															<view class="priceTag" v-if="item.goodsStatus == 0">该商品已下架</view>
														</view>
													</view>
												</u-checkbox>
											</view>
											<view class="goods-select" v-if="item.templateType != null && item.goodsType == 1">
												<u-line color="#D6D6DB" />
												<view class="goods-select__type" v-if="item.templateType == 'class'"
													@click="openPopup(0, item, index)">
													<view style="color: #666666;font-size: 24rpx;">{{ !item.gradObj.className ? '选择班级' : item.gradObj.className }}</view>
													<view><u-icon name="arrow-right" color="#999999" size="28"></u-icon></view>
												</view>
												<view class="goods-select__type" v-if="item.templateType == 'apply'"
													@click="openPopup(1, item, index)"
												>
													<view style="color: #666666;font-size: 24rpx;">
														{{
															!item.applyAreas.areaName
																? '报考地区'
																: item.examDate.examineName + '-' + item.applyAreas.areaName + '-' + item.applyAreas.cityName
														}}
													</view>
													<view><u-icon name="arrow-right" color="#999999" size="28"></u-icon></view>
												</view>
											</view>
										</view>
									</view>
									<template v-slot:right>
										<view class="operate" @click="delItem(item)">
											<view><text>删除</text></view>
										</view>
									</template>
								</uni-swipe-action-item>
							</view>
						</u-checkbox-group>
					</uni-swipe-action>
				</view>
				
			</view>
			<u-popup v-model="show" mode="bottom" border-radius="40">
				<view class="popup_box">
					<view style="margin-bottom: 20rpx;">
						<view class="line1"></view>
						<view class="grade">选择班级</view>
					</view>
					<u-line color="#D6D6DB" />
					<view>
						<scroll-view scroll-y="true" style="height: 536rpx;">
							<view>
								<u-radio-group v-model="gradeValue">
									<view v-for="(item, index) in gradeList" :key="index">
										<view style="display: flex;align-items: center;padding: 20rpx;">
											<view>
												<u-radio shape="circle" :name="index">
													<view :class="index == gradeValue? 'white-box blue-box' : 'white-box'">
														<view>
															<view class="blackTxt">{{ item.className }}</view>
															<view class="redTxt" v-if="item.classEndTime">有效期至：{{ $method.timestampToTime(item.classEndTime) }}</view>
															<view class="redTxt" v-if="item.classEndTime">本班还剩{{ $method.GetRTime(item.classEndTime) }}天将结束学习</view>
														</view>
													</view>
												</u-radio>
											</view>
										</view>
									</view>
								</u-radio-group>
							</view>
						</scroll-view>
					</view>
					<view class="confrim-btn"><view class="okBtn" @click="okPopup(0)">确定</view></view>
				</view>
			</u-popup>
			<u-popup v-model="show1" mode="bottom" border-radius="40">
				<view class="popup_box">
					<view style="margin-bottom: 20rpx;">
						<view class="line1"></view>
						<view class="grade">选择考期/地区</view>
					</view>
					<u-line color="#D6D6DB" />
					<view style="display: flex;height: 536rpx;">
						<view style="width: 50%;">
							<view class="topTxt">考期</view>
							<view>
								<picker-view :indicator-style="indicatorStyle" :value="value" @change="bindChangeE" class="picker-view">
									<picker-view-column>
										<view class="picker-item" v-for="(item, index) in examine" :key="index">{{ item.examineName }}</view>
									</picker-view-column>
								</picker-view>
							</view>
						</view>
						<view style="width: 50%;">
							<view class="topTxt">地区</view>
							<view>
								<picker-view :indicator-style="indicatorStyle" :value="value" @change="bindChange" class="picker-view">
									<picker-view-column>
										<view class="picker-item" v-for="(item, index) in provinceList" :key="index">{{ item.areaName }}</view>
									</picker-view-column>
									<picker-view-column>
										<view class="picker-item" v-for="(item, index) in cityList" :key="index">{{ item.areaName }}</view>
									</picker-view-column>
								</picker-view>
							</view>
						</view>
					</view>
					<view class="confrim-btn"><view class="okBtn" @click="okPopup(1)">确定</view></view>
				</view>
			</u-popup>
		</view>
		<view v-show="!isLogin">
			<view style="display: flex;align-items:center;flex-direction: column;margin-top: 40%;font-size: 32rpx;">
				<view style="color: #999999;">您还没有登录哦~</view>
				<view style="margin-top: 30rpx;"><u-button type="primary" @click="login">去登录</u-button></view>
			</view>
		</view>

		<view class="bottomBox" v-if="!hideBuyState">
			<view class="bottons_all">
				<view class="check_alls">
					<u-checkbox label="all" name="all" shape="circle" @change="checkboxAllChange" v-model="allChecked"></u-checkbox>
					<text class="checkall">全选</text>
					<!-- <text class="rmb">￥</text> -->
					<view class="all_sum">结算：</view>
					<view class="priceTag">¥ {{ toFixed(totalPrice) }}</view>
				</view>
				<view style="display: flex;align-items: center;">
					<!-- <view style="color: #999999;margin-right: 8rpx;">合计</view> -->
					<view style="display: flex;color: #FFFFFF;align-items: center;" @click="goBuy()">
						<view class="btn2">结算</view>
						<!-- <u-icon name="arrow-right" color="#fff" size="30"></u-icon> -->
					</view>
				</view>
			</view>
			
		</view>
	</view>
</template>

<script>
import { mapGetters } from 'vuex';
import config from '@/common/config'
export default {
	data() {
		return {
			logo: config.TOP_LOGO,
			gradeValue: -1,
			isLogin: false,
			allChecked: false,
			checkboxValue1: [],
			list: [],
			value1: '',
			show: false,
			show1: false,
			totalPrice: 0.0,
			isOld: false,
			checkboxList: [],
			gradeList: [],
			examine: [],
			provinceList: [],
			cityList: [],
			detail: {},
			detailIndex: -1,
			applyObj: {
				applyAreasJson: null,
				examDateJson: null
			},
			pAreaIndex: 0,
			cAreaIndex: 0,
			examIndex: 0,
			current: 3,
		};
	},
	computed: { ...mapGetters(['userInfo','hideBuyState']) },
	onLoad(option) {
		// console.log(option,987)
	},
	onShow() {
		this.isLogin = this.$method.isLogin();
		if (this.isLogin) {
			if (uni.getStorageSync('updateCart') || !this.isOld) {
				this.isOld = true;
				this.cartList();
				uni.removeStorageSync('updateCart'); //消费购物车刷新事件
			}
		}
	},
	methods: {
		toFixed(num) {
			return num.toFixed(2)
		},
		bindChangeE(e) {
			this.examIndex = e.detail.value[0];
		},
		bindChange(e) {
			const val = e.detail.value;
			if (this.pAreaIndex != e.detail.value[0]) {
				this.pAreaIndex = e.detail.value[0];
				this.getCityList(this.provinceList[this.pAreaIndex].areaId);
			}
			if (this.cAreaIndex != e.detail.value[1]) {
				this.cAreaIndex = e.detail.value[1];
			}
		},
		checkAreaData() {
			if (this.examine.length == 0) {
				uni.showModal({
					title: '提示',
					content: '请选择考期',
					showCancel: false
				});
				return false;
			}
			return true;
		},
		checkData() {
			if (this.detail.templateType == 'class') {
				if (this.gradeValue < 0) {
					uni.showModal({
						title: '提示',
						content: '请选择班级',
						showCancel: false
					});
					return false;
				}
			} else if (this.detail.templateType == 'apply') {
				if (!this.applyObj.examDateJson) {
					uni.showModal({
						title: '提示',
						content: '请选择考期',
						showCancel: false
					});
					return false;
				}
			}
			return true;
		},
		//弹出框确定
		okPopup(index) {
			if (index == 0) {
				if (!this.checkData()) {
					return;
				}
				this.gradeIndex = this.gradeValue;
				this.list[this.detailIndex].gradObj = this.gradeList[this.gradeIndex]; //商品赋值选中班级
				this.show = false;
			} else {
				if (!this.checkAreaData()) {
					return;
				}
				this.examDate = this.examine[this.examIndex];
				let pData = this.provinceList[this.pAreaIndex];
				let cData = this.cityList[this.cAreaIndex];
				this.applyAreas = { areaName: pData.areaName, areaId: pData.areaId, cityId: cData.areaId, cityName: cData.areaName };
				//	this.applyObj.applyAreasJson = JSON.stringify(this.applyAreas)
				//	this.applyObj.examDateJson = JSON.stringify(this.examDate)
				this.list[this.detailIndex].examDate = this.examDate; //商品赋值选中考期地区
				this.list[this.detailIndex].applyAreas = this.applyAreas; //商品赋值选中考期地区
				this.show1 = false;
			}
		},
		getExamine(id) {
			let self = this;
			this.$api.getExamine({ projectId: id }).then(res => {
				if (res.data.code == 200) {
					self.examine = res.data.rows;
				}
			});
		},
		getCityList(id) {
			let self = this;
			this.$api.getCityList({ parentId: id }).then(res => {
				if (res.data.code == 200) {
					self.cityList = res.data.rows;
				}
			});
		},
		getProvinceList() {
			let self = this;
			if (self.provinceList.length > 0) {
				return;
			}
			this.$api.getProvinceList().then(res => {
				if (res.data.code == 200) {
					self.provinceList = res.data.rows;
					if (self.provinceList.length > 0) {
						self.getCityList(self.provinceList[0].areaId);
					}
				}
			});
		},
		goodsGradeList(goodsId) {
			let self = this;
			this.$api.goodsGradeList({ goodsId: goodsId }).then(res => {
				if (res.data.code == 200) {
					self.gradeList = res.data.rows;
					if (self.gradeList.length == 0) {
						let item = {
							className: '系统分班',
							gradeId: 0
						};
						self.gradeList.push(item);
					}
				}
			});
		},
		openPopup(index, item, itemIndex) {
			this.detail = item;
			this.detailIndex = itemIndex;
			if (index == 0) {
				this.gradeValue = -1;
				this.show = true;
				this.goodsGradeList(item.goodsId);
			} else {
				this.applyObj = {
					applyAreasJson: null,
					examDateJson: null
				};
				(this.pAreaIndex = 0), (this.cAreaIndex = 0), (this.examIndex = 0), (this.show1 = true);
				this.getProvinceList();
				this.getExamine(item.projectId);
			}
		},
		checkboxGroupChange(e) {
			this.checkboxList = e;
			if(this.checkboxList.length==this.list.length){
				this.allChecked = true;
			}else{
				this.allChecked = false;
			}
		},

		login() {
			uni.navigateTo({ url: '/pages4/login/login' });
		},
		cartList() {
			let self = this;
			this.allChecked = false;
			this.totalPrice = 0.0;
			this.checkboxList = [];
			this.$api.cartList().then(res => {
				if (res.data.code == 200) {
					for (let i = 0; i < res.data.rows.length; i++) {
						let item = res.data.rows[i];
						item.checked = false;
						if (item.status != 1 || item.goodsStatus != 1) {
							item.disabled = true;
						} else {
							item.disabled = false;
						}
						item.show = false;
						item.gradObj = {}; //存储班级
						item.applyAreas = {};
						item.examDate = {};
					}
					self.list = res.data.rows;
				}
			});
		},
		delItem(item) {
			let self = this;
			this.$api.deleteCart(item.id).then(res => {
				if (res.data.code == 200) {
					self.cartList();
				}
			});
		},
		swipeChange(e, item) {
			item.show = e;
		},
		goBuy() {
			if (this.checkboxList.length == 0) {
				uni.showModal({
					title: '提示',
					content: '请选择商品',
					showCancel: false
				});
				return;
			}
			let checkGoodsList = [];
			for (let i = 0; i < this.checkboxList.length; i++) {
				let index = this.checkboxList[i];
				let item = this.list[index];
				checkGoodsList.push(item);
				if (item.templateType == 'class' && item.goodsType == 1) {
					if (!item.gradObj.className) {
						uni.showModal({
							title: '提示',
							content: '请选择班级',
							showCancel: false
						});
						return false;
					}
				}
				if (item.templateType == 'apply' && item.goodsType == 1) {
					// if (!item.applyAreas.areaName) {
					// 	uni.showModal({
					// 		title: '提示',
					// 		content: '请选择报考地区',
					// 		showCancel: false
					// 	});
					// 	return false;
					// }
				}
			}
			this.$store.commit('setShoppingCartList', { shoppingCartList: checkGoodsList });
			this.$navTo.togo('/pages2/order/confirm_pay?fromCart=true');
		},
		checkboxChange(n) {
			this.$nextTick(() => {
				
				this.totalPrice = 0.0;
				for (let i = 0; i < this.list.length; i++) {
					if(this.list[i].checked) {
						this.totalPrice += this.list[i].standPrice;
					}
					
				}
			})
		},
		checkboxAllChange(n) {
			this.$nextTick(() => {
				this.totalPrice = 0.0;
				this.checkboxList = [];
				if (n.value) {
					for (let i = 0; i < this.list.length; i++) {
						this.list[i].checked = true;
						this.totalPrice += this.list[i].standPrice;
						this.checkboxList.push(i);
					}
				} else {
					for (let i = 0; i < this.list.length; i++) {
						this.list[i].checked = false;
					}
				}
			})
			
		}
	}
};
</script>
<style>
page {
  background-color: #eaeef1;
}
</style>
<style scoped lang="scss">
.shop_list {
	padding: 16rpx 16rpx 180rpx 16rpx;
	// padding-bottom: 98rpx;
}
.operate {
  background-color: #ff3b30;
  color: #ffffff;
  border-top-right-radius: 16rpx;
  border-bottom-right-radius: 16rpx;
  margin-bottom: 20rpx;
  display: flex;
  align-items: center;
  justify-content: center;
  padding: 0 20rpx;
}
.picker-item {
  height: 50px;
  align-items: center;
  justify-content: center;
  text-align: center;
}
.picker-view {
  width: 100%;
  height: 420rpx;
  text-align: center;
}
.topTxt {
  font-size: 30rpx;
  color: #666666;
  text-align: center;
  padding: 20rpx 0;
}
.blackTxt {
  font-size: 30rpx;
  font-family: PingFang SC;
  font-weight: bold;
  color: #333333;
}
.redTxt {
  font-size: 30rpx;
  font-family: PingFang SC;
  color: #ff2d55;
  margin-top: 13rpx;
}
.blue-box {
  background: #ebf5ff;
}
.white-box {
  width: 646rpx;
  border-radius: 24rpx;
  align-items: center;
  display: flex;
  padding-left: 15rpx;
}
.okBtn {
  width: 200rpx;
  height: 64rpx;
  background: linear-gradient(0deg, #015eea, #00c0fa);
  border-radius: 32rpx;
  color: #ffffff;
  text-align: center;
  line-height: 64rpx;
}
.confrim-btn {
  border-top: 1px solid #eeeeee;
  height: 98rpx;
  width: 100%;
  display: flex;
  align-items: center;
  justify-content: center;
}
.grade {
  height: 23rpx;
  font-size: 24rpx;
  color: #999999;
  margin: 0 auto;
  margin-top: 15rpx;
  text-align: center;
}
.line1 {
  width: 80rpx;
  height: 8rpx;
  background: #999999;
  border-radius: 4rpx;
  margin: 0 auto;
  margin-top: 15rpx;
}
.popup_box {
  height: 700rpx;
  box-shadow: 0rpx 0rpx 16rpx 4rpx rgba(145, 156, 178, 0.1);
  border-radius: 32rpx 32rpx 0rpx 0rpx;
}

.goods-item {
	width: 100%;
	background: #ffffff;
	border-radius: 24rpx;
	margin-bottom: 12rpx;
	padding: 15rpx 0;
	display: flex;
	
	.item-wrap {
		width:100%;
		.goods-msg {
			padding: 0rpx 0rpx 0rpx 22rpx;
			display: flex;
			align-items:center;
			
			.flex {
				display: flex;
				padding-bottom: 15rpx;
				width:630rpx;
				
				
				.goods-img {
					overflow: hidden;
					width: 204rpx;
					height: 120rpx;
					border-radius: 22rpx;
					margin-left: 22rpx;
					margin-right: 24rpx;
					image {
						display: block;
						// width: 278rpx;
						// height: 156rpx;
						width: 100%;
						height: 100%;
					}
				}
				
				&__auto {
					flex: 1;
					
					.goods-title {
						color: #333333;
						font-size: 28rpx;
						font-weight: bold;
						text-align: right;
						width: 378rpx;
						overflow:hidden;
						text-overflow:ellipsis;
						white-space:nowrap;
						
					}
					
					.priceTag {
						font-size: 32rpx;
						font-family: PingFang SC;
						font-weight: bold;
						color: #FC3F3F;
						display: flex;
						// flex-direction: row-reverse;
						margin-right: 8rpx;
						margin-top: 25rpx;
					}
				}
				
				
			}
		}
		
		.goods-select {
			
			&__type {
				display: flex;
				justify-content: space-between;
				align-items: center;
				height: 50rpx;
				padding: 0 15rpx;
			}
			
			
		}
	}
}

.btn2 {
	font-size: 32rpx;
	font-weight: 500;
	color: #FFFFFF;
	margin-right: 8rpx;
	width: 232rpx;
	height: 92rpx;
	line-height: 92rpx;
	text-align: center;
	background: #FC3F3F;
	border-radius: 120rpx;
}
.bottomBox {
	position: fixed;
	bottom: 0rpx;
	width: 100%;
	left: 0;
	height: 132rpx;
	background-color: #ffffff;
	display: flex;
	justify-content: space-between;
	align-items: center;
	padding: 0 32rpx;
	box-shadow: 0px -2px 6px 0px rgba(0,0,0,0.1000);
	z-index: 9999;
	.bottons_all {
		// width: 674rpx;
		// height: 104rpx;
		// background: #007AFF;
		// border-radius: 52rpx;
		width: 100%;
		display: flex;
		align-items: center;
		justify-content: space-between;
		// padding: 0rpx 26rpx 0rpx 23rpx;
	}
	.priceTag {
		font-size: 32rpx;
		font-family: PingFang SC;
		font-weight: bold;
		color: #FC3F3F;
		display: flex;
		flex-direction: row-reverse;
		margin-right: 20rpx;
	}
	.check_alls {
		display: flex;
		align-items: center;
		color: #969696;
		// .rmb {
		// 	// margin-right: 9rpx;
		// 	// margin-left: 35rpx;
		// 	// font-size: 20rpx;
		// 	// position: relative;
		// 	// top: -14rpx;
		// 	// left: 0rpx;
		// }
	}
	.all_sum {
		font-size: 28rpx;
		font-weight: 800;
		color: #303030;
		margin-left: 35rpx;
	}
	.checkall {
		font-weight: 500;
		color: #969696;
		font-size: 28rpx;
	}
}
.half_circle {
	position: fixed;
	bottom: 0rpx;
	width: 100%;
	left: 0;
	height: 20rpx;
	border: 1rpx solid;
	display: flex;
    justify-content: center;
	.bulge {
		width: 110rpx;
		height: 55rpx;
		border-radius: 55px 55px 0px 0px;
		background-color: #fff;
	}
}
</style>