saas_miniprogram/pages4/shopping/shoppingCart.vue

<template>
	<view>
		<nav-bar title="购物车"></nav-bar>
		<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>
								<!-- :show="item.show" -->
								<uni-swipe-action-item :autoClose="false" @change="swipeChange($event, item)"
									v-for="(item, index) in list" :key="index">
									<view class="goods-item">
										<view class="item-wrap">
											<view class="goods-msg">
												<u-checkbox :disabled="item.disabled" style="width: 100%"
													v-model="item.checked" @change="checkboxChange" shape="circle"
													:name="item.id">
													<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 }}
																<text v-if="item.sevenYear">
																	({{ item.sevenYear }})
																</text>
															</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 &&
                          !item.disabled
                        ">
												<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 v-if="item.templateType == 'class' && item.gradObj.gradeId"
													style="padding: 0 100rpx 0 15rpx">
													<Class-time-tip :classInfo="item.gradObj"></Class-time-tip>
												</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" :disabled="
                          item.studentNum > 0 &&
                          item.studentNum == item.studentUpper
                        ">
													<view :class="
                              index == gradeValue
                                ? 'white-box blue-box'
                                : 'white-box'
                            ">
														<view>
															<view class="blackTxt">{{ item.className }}</view>
															<Class-time-tip :classInfo="item"></Class-time-tip>
														</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 ClassTimeTip from "../../components/common/ClassTimeTip.vue";
	import navLogo from "../../components/nav-bar/nav-logo.vue";
	export default {
		data() {
			return {
				gradeValue: -1,
				isLogin: false,
				checkboxValue1: [],
				list: [],
				value: "",
				show: false,
				show1: false,
				allChecked: false,
				isOld: false,
				gradeList: [],
				examine: [],
				provinceList: [],
				cityList: [],
				detail: {},
				detailIndex: -1,
				applyObj: {
					applyAreasJson: null,
					examDateJson: null,
				},
				pAreaIndex: 0,
				cAreaIndex: 0,
				examIndex: 0,
				current: 3,
				indicatorStyle: `height: 50px;`,
			};
		},
		computed: {
			...mapGetters(["userInfo", "hideBuyState", "config"]),
			totalPrice() {
				let price = 0;
				this.checkList.forEach((e) => (price += e.standPrice));
				return price;
			},
			canCheckList() {
				return this.list.filter((e) => e.status == 1 && e.goodsStatus == 1);
			},
			checkList() {
				return this.canCheckList.filter((e) => e.checked == true);
			},
			selectGreadeId() {
				if (this.detail.gradObj) {
					return this.detail.gradObj.gradeId;
				}
				return "";
			},
		},
		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.$set(
					//   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);
						} else {
							let isGradeFull = self.gradeList.every(
								item =>
								item.studentNum > 0 && item.studentNum == item.studentUpper
							);
							//所有班级都满了
							if (isGradeFull) {
								let item = {
									className: "系统分班",
									gradeId: 0
								};
								self.gradeList.unshift(item);
							}
						}
						this.gradeValue = self.gradeList.findIndex(
							(e) => e.gradeId == this.selectGreadeId
						);
					}
				});
			},
			openPopup(index, item, itemIndex) {
				this.detail = item;
				console.log(this.detail, 798);
				this.detailIndex = itemIndex;
				if (index == 0) {
					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.allChecked = this.canCheckList.length === this.checkList.length;
			},
			checkboxChange(e) {
				this.updateCartCheckStatus([e.name], e.value);
			},
			login() {
				uni.navigateTo({
					url: "/pages4/login/login"
				});
			},
			cartList() {
				let self = this;
				this.$api.cartList().then((res) => {
					let {
						code,
						rows
					} = res.data;
					if (code == 200) {
						for (const item of rows) {
							let {
								choiceStatus,
								goodsStatus,
								status,
								gradeList,
								templateType,
								goodsType,
							} = item;
							item.gradObj = {};
							item.show = false;
							item.applyAreas = {};
							item.examDate = {};
							if (status != 1 || goodsStatus != 1) {
								item.disabled = true;
							} else {
								item.disabled = false;
								item.checked = choiceStatus == 1;
								if (templateType === "class" && goodsType == 1) {
									// 无返回就默认系统分班
									if (item.gradeList.length === 0) {
										gradeList = [{
											className: "系统分班",
											gradeId: 0,
										}, ];
									} else {
										let isGradeFull = item.gradeList.every(
											item =>
											item.studentNum > 0 && item.studentNum == item.studentUpper
										);
										//所有班级都满了
										if (isGradeFull) {
											let items = {
												className: "系统分班",
												gradeId: 0
											};
											item.gradeList.unshift(items);
										}
									}
									item.gradObj = item.gradeList[0] || gradeList[0];
								}
							}
						}
						self.list = res.data.rows;
						this.checkboxGroupChange();
					}
				});
			},
			updateCartCheckStatus(ids, check) {
				let data = {
					ids,
					choiceStatus: check ? 1 : 0,
				};
				this.$api.updateCartCheckStatus(data).then((res) => {});
			},
			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.checkList.length == 0) {
					uni.showModal({
						title: "提示",
						content: "请选择商品",
						showCancel: false,
					});
					return;
				}
				this.checkList.forEach((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: this.checkList,
				});
				this.$navTo.togo("/pages2/order/confirm_pay?fromCart=true");
			},
			checkboxAllChange(n) {
				let ids = [];
				this.canCheckList.forEach((e) => {
					e.checked = n.value;
					ids.push(e.id);
				});
				this.updateCartCheckStatus(ids, n.value);
			},
		},
		components: {
			ClassTimeTip,
			navLogo
		},
	};
</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;
	}

	.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.1);
		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>