jp-education-student/pages/parents/course/shoppingCar.vue

<template>
	<view>
		<u-navbar :title="'购物车(' + shoppingCartList.length + ')'" :is-back="false">
			<view class="u-nav-slot" slot="right" v-if="edit==false" @click="edit=true">
				编辑
			</view>

			<view class="u-nav-slot" slot="right" style="color: #FF3523;" v-if="edit==true" @click="edit=false">
				退出编辑
			</view>
		</u-navbar>
		<view class="class-card" v-for="(item,index) in shoppingCartList" :key="index">
			<!-- 单选框 -->
			<label class="radio" @click="radioChecked(item,index)">
				<radio value="" :checked="item.shoppingChecked" /><text></text>
			</label>
			<!-- 照片 -->
			<view class="photo" v-if="item.courseBase.posterUrl != null">
				<img :src="item.courseBase.posterUrl" alt="">
			</view>
			<view class="photo" v-else>
				<img src="../../../assets/img/picture1.png" alt="">
			</view>
			<!-- 课程信息 -->
			<view class="class-infos">
				<view class="title">
					<view :class="{className,editing:edit==true}">
						{{item.courseBase.courseName}}
					</view>
					<view class="amount" v-if="edit==false">
						<!-- x1 -->
					</view>
				</view>
				<!-- 课程标签 -->
				<view class="class-tags">
					<view class="item classname">
						{{item.tclass.className}}
					</view>
					<view class="item">
						{{item.coursePackage.packageName}}班
					</view>
					<view class="item">
						{{item.coursePackage.courseAmount}}节课
					</view>
					<view class="icon" v-if="!edit">
						<u-icon name="arrow-down" color="#B3B3B3" size="10"></u-icon>
					</view>
				</view>
				<!-- 价格 -->
				<view class="price">
					{{Math.round(item.coursePackage.unitPrice*item.coursePackage.courseAmount+item.coursePackage.waterElectricityAmount)}}元
				</view>
				<!-- <view :class="{priceInfo,editing:edit==true}">
					包含 报名费{{(item.coursePackage.unitPrice*item.coursePackage.courseAmount).toFixed(2)}}元
					水电费{{item.coursePackage.waterElectricityAmount.toFixed(2)}}元
				</view> -->
			</view>
			<view class="del-icon" v-if="edit==true" style="margin: auto 0;" @click="deleteShop(item,index)">
				<u-icon name="minus-circle-fill" color="#FF3523" size="40"></u-icon>
			</view>
		</view>

		<!-- 结算 -->
		<view class="settle" v-if="edit==false">
			<!-- 单选框 -->
			<label class="radio" @click="radioAllChecked()">
				<radio value="" :checked="shoppingAllChecked" /><text class="text">全选</text>
			</label>
			<!-- 总计 -->
			<view class="right">
				<view class="total">
					<view class="name">
						总计
					</view>
					<view class="price">
						{{totalMoney}}元
					</view>
				</view>
				<!-- 结算按钮 -->
				<button class="settle-btn" @click="toCnfirmOrder">结算</button>
			</view>
		</view>
		<!-- 删除 -->
		<view class="del" v-if="edit==true">
			<!-- 单选框 -->
			<label class="radio" @click="radioAllChecked()">
				<radio value="" :checked="shoppingAllChecked" /><text class="text">全选</text>
			</label>

			<!-- 删除按钮 -->
			<button class="del-btn" @click="deleteShopAll">删除</button>
		</view>

		<view>
			<u-popup v-model="popShow" mode="bottom" :closeable='true'>
				<view class="popup">
					<view class="class-infos">
						<view class="picture">
							<img v-if="courseBase.posterUrl!= null" :src="courseBase.posterUrl" alt="">
							<img v-else src="../../../assets/img/courseD.png" alt="">
						</view>
						<view class="infos">
							<view class="class-name">
								{{courseBase.courseName}}
							</view>
							<view class="price">
								{{Math.round(packageDetail.unitPrice*packageDetail.courseAmount+packageDetail.waterElectricityAmount)}}元
							</view>
							<!-- <view class="price-detail" v-if="packageDetail.unitPrice!=null && packageDetail.courseAmount!=null">
								(包含报名费{{(packageDetail.unitPrice*packageDetail.courseAmount).toFixed(2)}}元
								水电费{{packageDetail.waterElectricityAmount.toFixed(2)}}元)
							</view> -->
						</view>
					</view>
					<!-- 报名班级 -->
					<view class="sign-up">
						<view class="title">
							报名班级
						</view>
						<view class="options">
							<view class="item" v-for="(item,index) in tclassList" :key="index"
								:class="activeClass==index ? '' : 'item-state2'" @click="choseClass(item,index)">
								{{item.className}}
							</view>
						</view>
					</view>
					<!-- 选择套餐 -->
					<view class="set-meal" v-if="coursePackageList.length !=  0">
						<view class="title">
							选择套餐
						</view>
						<view class="options">
							<view class="item" v-for="(item,index) in coursePackageList" :key="index"
								:class="activePackage==index ? '' : 'item-state2'" @click="chosePackage(item,index)">
								{{item.packageName}}班 {{item.courseAmount}}课时
							</view>
						</view>
					</view>
					<!-- 报名学生 -->
					<view class="apply-student">
						<view class="title">
							报名学生
						</view>
						<view class="options">
							<view class="item" v-for="(item,index) in studentList" :key="index"
								:class="activeStudent==index ? 'item-checked' : ''" @click="choseStudent(item,index)">
								<view class="photo">
									<u-avatar class="avatar" mode="square"
										:src="item.headPhoto != null ? item.headPhoto : '../../assets/img/head.png'" size="80">
									</u-avatar>
								</view>
								<view class="infos">
									<view class="name-age">
										<view class="name">
											{{item.studentName}}
										</view>
										<view class="age">
											{{item.age}}岁
										</view>
									</view>
									<view class="tel">
										{{item.firstContactPhone}}
									</view>
								</view>
							</view>
						</view>
					</view>
					<!-- 加入购物车 -->
					<view class="btn-box">
						<button class="add" @click="confirmShop">确 认</button>
					</view>
					<view class="" style="height: 24rpx;">
					</view>
				</view>
			</u-popup>
		</view>

		<ParentsTabbar :current="2" ref="tabbarMain"></ParentsTabbar>
	</view>
</template>

<script>
	import * as mineApi from '@/apis/parents/mine.js'
	import * as courseApi from '@/apis/parents/course.js'
	import * as shoppingCarApi from '@/apis/parents/shoppingCar.js'
	import ParentsTabbar from '@/components/ParentsTabbar.vue'

	export default {
		components: {
			ParentsTabbar
		},
		data() {
			return {
				edit: false,
				priceInfo: {
					type: String,
					default: false
				},
				className: {
					type: String,
					default: false
				},
				shoppingCartList: [],
				shoppingAllChecked: false,
				totalMoney: 0,
				popShow: false,
				shopIndex: 0,
				activeClass: 0,
				activePackage: 0,
				activeStudent: 0,
				coursePackageList: [],
				tclassList: [],
				studentList: [],
				courseBase: {},
				classDetail: {},
				packageDetail: {},
				stuDetail: {},
				shopDetail: {}
			}
		},
		onReady() {
			if (this.carhelp.getStudentId()) {
				this.studentId = this.carhelp.getStudentId().studentId;
				this.getshoppingCarList(this.studentId);
			}
		},
		methods: {
			getshoppingCarList(studentId) {
				this.shoppingCartList = [];
				
				uni.showLoading({
					title: "加载中",
					mask: true,
				})
				shoppingCarApi.pageList({
					studentId: studentId,
					studentType: '1'
				}).then((res) => {
					uni.hideLoading();
					this.shoppingCartList = res.data.data;
					for (var i = 0; i < this.shoppingCartList.length; i++) {
						var key = "shoppingChecked";
						var value = false;
						this.shoppingCartList[i][key] = value;
					}
				}).catch(error => {
					uni.showToast({
						title: error,
						icon: "none"
					})
				})
			},
			confirmShop() {
				uni.showLoading({
					title: "加载中",
					mask: true,
				})
				shoppingCarApi.update({
					id: this.shopDetail.id,
					studentId: this.shopDetail.studentId,
					packageId: this.shopDetail.packageId,
					classId: this.shopDetail.classId
				}).then((res) => {
					uni.hideLoading();
					this.getshoppingCarList(this.studentId);
					this.popShow = false;
				}).catch(error => {
					uni.showToast({
						title: error,
						icon: "none"
					})
				})
			},
			choseClass(item, index) {
				this.activeClass = index;
				this.classDetail = item;
			},
			chosePackage(item, index) {
				this.activePackage = index;
				this.packageDetail = item;
			},
			choseStudent(item, index) {
				this.activeStudent = index;
				this.stuDetail = item;
			},
			selectShop(item, index) {
				this.shopDetail = item;
				this.getCourseDetail(item);
				this.getStudentList(item);
				this.popShow = true;
			},
			getCourseDetail(value) {
				uni.showLoading({
					title: "加载中",
					mask: true,
				})
				courseApi.getCourseDetail({
					courseId: value.courseBase.courseId,
					classId: value.classId
				}).then((res) => {
					uni.hideLoading();
					this.courseBase = res.data.courseBase;
					this.coursePackageList = res.data.coursePackageList;
					this.tclassList = res.data.tclassList;

					for (var i = 0; i < this.tclassList.length; i++) {
						if (this.tclassList[i].classId == value.classId) {
							this.activeClass = i;
							this.classDetail = this.tclassList[i];
						}
					}
					for (var j = 0; j < this.coursePackageList.length; j++) {
						if (this.coursePackageList[j].packageId == value.packageId) {
							this.activePackage = j;
							this.packageDetail = this.coursePackageList[j];
						}
					}
				}).catch(error => {
					uni.showToast({
						title: error,
						icon: "none"
					})
				})
			},
			getStudentList(value) {
				uni.showLoading({
					title: "加载中",
					mask: true,
				})
				mineApi.studentList().then((res) => {
					uni.hideLoading();
					this.studentList = res.data.studentList;
					for (var i = 0; i < this.studentList.length; i++) {
						if (this.studentList[i].studentId == value.studentId) {
							this.activeStudent = i;
							this.stuDetail = this.studentList[i];
						}
					}
				}).catch(error => {
					uni.showToast({
						title: error,
						icon: "none"
					})
				})
			},
			getAddBuyLogList(buyLogList,shoppingCartInfoIds) {
				uni.showLoading({
					title: "加载中",
					mask: true,
				})
				courseApi.addBuyLogList({buyLogList,shoppingCartInfoIds}).then((res) => {
					
					this.carhelp.setShoppingCartList(buyLogList);
					
					var id = res.data.ordInfoId;
					console.log(id)
				
					uni.hideLoading();
					uni.navigateTo({
						url: '/pages/parents/course/confirmOrder?id=' + id
					})
				}).catch(error => {
					uni.showToast({
						title: error,
						icon: "none"
					})
				})
			},
			toCnfirmOrder() {
				if (this.totalMoney != 0) {
					var buyLogList = [];
					var shoppingCartInfoIds = '';
					var idList = [];
					for (var i = 0; i < this.shoppingCartList.length; i++) {
						if (this.shoppingCartList[i].shoppingChecked) {
							buyLogList.push({
								courseId: this.shoppingCartList[i].courseBase.courseId,
								courseName: this.shoppingCartList[i].courseBase.courseName,
								posterUrl: this.shoppingCartList[i].courseBase.posterUrl,
								classId: this.shoppingCartList[i].classId,
								className: this.shoppingCartList[i].tclass.className,
								packageId: this.shoppingCartList[i].packageId,
								packageName: this.shoppingCartList[i].coursePackage.packageName,
								courseAmount: this.shoppingCartList[i].coursePackage.courseAmount,
								unitPrice: this.shoppingCartList[i].coursePackage.unitPrice,
								waterElectricityAmount: this.shoppingCartList[i].coursePackage.waterElectricityAmount,
								studentId: this.shoppingCartList[i].studentId,
								studentName: this.shoppingCartList[i].student.studentName,
								age: this.shoppingCartList[i].student.age,
								firstContactPhone: this.shoppingCartList[i].student.firstContactPhone,
								secondContactPhone: this.shoppingCartList[i].student.secondContactPhone,
								takerName: this.shoppingCartList[i].student.takerName
							});
							idList.push(this.shoppingCartList[i].id);
						}
					}
					shoppingCartInfoIds = idList.join(',');
					
					this.getAddBuyLogList(buyLogList,shoppingCartInfoIds);
				} else {
					uni.showToast({
						title: '请先勾选要购买的课程',
						icon: "none"
					})
				}
			},
			deleteShop(item, index) {
				uni.showLoading({
					title: "加载中",
					mask: true,
				})
				shoppingCarApi.deleteShop(item.id).then((res) => {
					uni.hideLoading();
					this.shoppingCartList.splice(index, 1);
					
					this.getTotalMoney();
				}).catch(error => {
					uni.showToast({
						title: error,
						icon: "none"
					})
				})
			},
			deleteShopAll() {
				var list = [];
				for (var i = 0; i < this.shoppingCartList.length; i++) {
					if (this.shoppingCartList[i].shoppingChecked) {
						list.push(this.shoppingCartList[i]);
					}
				}
				var idList = list.map(record => {
					return record.id;
				});
				console.log(idList)

				uni.showLoading({
					title: "加载中",
					mask: true,
				})
				shoppingCarApi.batchDelete(idList).then((res) => {
					uni.hideLoading();
					this.getshoppingCarList(this.studentId);
					
					this.getTotalMoney();
				}).catch(error => {
					uni.showToast({
						title: error,
						icon: "none"
					})
				})
			},
			radioChecked(item, index) {
				item.shoppingChecked = !item.shoppingChecked;
				this.$forceUpdate();
				this.getTotalMoney();
			},
			radioAllChecked() {
				this.shoppingAllChecked = !this.shoppingAllChecked;
				for (var i = 0; i < this.shoppingCartList.length; i++) {
					this.shoppingCartList[i].shoppingChecked = this.shoppingAllChecked;
				}

				this.getTotalMoney();
			},
			getTotalMoney() {
				var money = 0;
				var list = [];
				for (var i = 0; i < this.shoppingCartList.length; i++) {
					if (this.shoppingCartList[i].shoppingChecked) {
						list.push(this.shoppingCartList[i]);
					}
				}
				for (var j = 0; j < list.length; j++) {
					money += Math.round(list[j].coursePackage.courseAmount * list[j].coursePackage.unitPrice +
						list[j].coursePackage.waterElectricityAmount);
				}
				this.totalMoney = money;

				if (list.length == this.shoppingCartList.length) {
					this.shoppingAllChecked = true;
				} else {
					this.shoppingAllChecked = false;
				}
			},
		}
	}
</script>

<style lang="scss" scoped>
	.u-nav-slot {
		margin-right: 24rpx;
		font-size: 16px;
		color: #111111;
	}

	.class-card {
		margin: 24rpx;
		padding: 24rpx;
		background-color: #fff;
		border-radius: 8px;
		display: flex;

		// 单选框
		.radio {
			margin: auto 0
		}

		::v-deep.uni-radio-input-checked {
			background-color: rgba(13, 186, 199, 1) !important;
		}

		::v-deep.uni-radio-input {
			width: 40rpx;
			height: 40rpx;
		}

		//图片
		.photo {
			width: 152rpx;
			height: 152rpx;
			border-radius: 4px;
			overflow: hidden;
			margin-left: 16rpx;
			margin-top: 8rpx;

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

		// 课程信息
		.class-infos {
			margin-left: 16rpx;
			flex: 1;

			.title {
				display: flex;
				justify-content: space-between;
				align-items: center;

				.className {
					color: rgba(51, 51, 51, 1);
					font-size: 36rpx;
				}

				.class-name2 {
					width: 170px;
					white-space: nowrap;
					overflow: hidden;
					text-overflow: ellipsis;
				}

				.amount {
					color: rgba(51, 51, 51, 1);
					font-size: 32rpx;
				}
			}

			// 课程标签
			.class-tags {
				display: flex;
				align-items: center;
				margin-top: 4rpx;

				.classname {
					width: 220rpx !important;
					white-space: nowrap;
					overflow: hidden;
					text-overflow: ellipsis;
				}

				.item {
					width: 70rpx;
					white-space: nowrap;
					overflow: hidden;
					text-overflow: ellipsis;
					color: rgba(119, 119, 119, 1);
					font-size: 24rpx;
					margin-right: 8rpx;
				}
			}

			// 价格
			.price {
				color: rgba(255, 61, 0, 1);
				font-size: 36rpx;
				margin-top: 16rpx;
				font-weight: 600;
			}

			.priceInfo {
				color: rgba(119, 119, 119, 1);
				font-size: 24rpx;
				margin-top: 8rpx;
			}

			.editing {
				width: 170px;
				white-space: nowrap;
				overflow: hidden;
				text-overflow: ellipsis;
			}
		}


	}

	// 结算
	.settle {
		padding: 24rpx 32rpx;
		background-color: #fff;
		position: fixed;
		bottom: 110rpx;
		left: 0;
		right: 0;
		display: flex;
		align-items: center;
		justify-content: space-between;

		::v-deep.uni-radio-input {
			width: 32rpx;
			height: 32rpx;
		}

		::v-deep.uni-radio-input-checked {
			background-color: rgba(13, 186, 199, 1) !important;
		}

		.radio {
			.text {
				color: #777777;
				font-size: 32rpx;
			}
		}

		.total {
			display: flex;
			align-items: center;

			// margin-left: 120rpx;

			.name {
				color: rgba(51, 51, 51, 1);
				font-size: 36rpx;
			}

			.price {
				color: #0DBAC7;
				font-size: 36rpx;
				margin-left: 8rpx;

			}
		}

		// 结算按钮
		.settle-btn {
			width: 200rpx;
			height: 80rpx;
			line-height: 80rpx;
			border-radius: 50px;
			background-color: rgba(13, 186, 199, 1);
			color: rgba(255, 255, 255, 1);
			font-size: 32rpx;
			margin-left: 24rpx;
		}

	}

	.right {
		// flex:1;
		display: flex;

	}

	.del {
		padding: 24rpx 32rpx;
		background-color: #fff;
		position: fixed;
		bottom: 110rpx;
		left: 0;
		right: 0;
		display: flex;
		align-items: center;
		justify-content: space-between;

		::v-deep.uni-radio-input {
			width: 32rpx;
			height: 32rpx;
		}

		::v-deep.uni-radio-input-checked {
			background-color: rgba(13, 186, 199, 1) !important;
		}

		::v-deep.radio {

			.text {
				color: #777777;
				font-size: 32rpx;
			}

		}

		::v-deepuni-button {
			margin-right: 0;
		}

		.del-btn {
			width: 160rpx;
			height: 80rpx;
			line-height: 80rpx;
			border-radius: 50px;
			background-color: rgba(255, 53, 35, 1);
			color: rgba(255, 255, 255, 1);
			font-size: 32rpx;

		}
	}

	::v-deep.uni-label-pointer {

		display: flex;
		align-items: center;
	}

	// 弹出层
	.popup {
		padding: 32rpx;
		height: 520px;
		padding-bottom: 100rpx;

		.class-infos {
			display: flex;
			align-items: center;

			.picture {
				width: 152rpx;
				height: 152rpx;
				border-radius: 4px;
				overflow: hidden;

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

			.infos {
				margin-left: 24rpx;

				.class-name {
					color: rgba(51, 51, 51, 1);
					font-size: 36rpx;
				}

				.price {
					color: rgba(255, 61, 0, 1);
					font-size: 36rpx;
					margin-top: 20rpx;
					font-weight: bold;
				}

				.price-detail {
					color: rgba(119, 119, 119, 1);
					font-size: 24rpx;
					margin-top: 8rpx;
				}
			}
		}

		// 报名班级 选择套餐
		.sign-up,
		.set-meal {
			margin-top: 24rpx;

			.title {
				color: rgba(51, 51, 51, 1);
			}

			.options {
				margin-top: 16rpx;
				display: flex;
				flex-wrap: wrap;

				.item {
					padding: 0 8rpx;
					height: 64rpx;
					line-height: 64rpx;
					text-align: center;
					border-radius: 4px;
					background-color: rgba(255, 255, 255, 1);
					color: rgba(13, 186, 199, 1);
					border: 1px solid rgba(13, 186, 199, 1);
					margin-right: 12rpx;
					margin-bottom: 16rpx;
				}

				.item-state2 {
					background-color: rgba(244, 246, 247, 1);
					color: rgba(51, 51, 51, 1);
					border: none;
				}
			}
		}

		// 报名学生
		.apply-student {
			margin-top: 24rpx;
			margin-bottom: 140rpx;

			.title {
				color: rgba(51, 51, 51, 1);
			}

			.options {
				margin-top: 16rpx;
				display: flex;
				flex-wrap: wrap;

				.item-checked {
					border: 1px solid rgba(13, 186, 199, 1);
					background-color: #fff !important;
				}

				.item {
					display: flex;
					align-items: center;
					padding: 16rpx;
					width: 320rpx;
					height: 112rpx;
					border-radius: 4px;
					margin-right: 16rpx;
					margin-bottom: 16rpx;
					background-color: #F4F6F7;

					.photo {
						width: 80rpx;
						height: 80rpx;
						border-radius: 2px;
						overflow: hidden;

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

					.infos {
						margin-left: 16rpx;

						.name-age {
							display: flex;
							align-items: baseline;

							.name {
								color: rgba(51, 51, 51, 1);
								font-size: 32rpx;
							}

							.age {
								color: rgba(119, 119, 119, 1);
								font-size: 24rpx;
								margin-left: 8rpx;
							}
						}

						.tel {
							color: rgba(119, 119, 119, 1);
							font-size: 24rpx;
							margin-top: 4rpx;
						}
					}
				}
			}
		}

		.btn-box {
			background-color: #fff;
			padding: 32rpx;
			position: fixed;
			bottom: 0rpx;
			left: 0rpx;
			right: 0rpx;
			z-index: 99;
		}

		.add {
			height: 80rpx;
			line-height: 80rpx;
			border-radius: 50px;
			background-color: rgba(13, 186, 199, 1);
			color: rgba(255, 255, 255, 1);
			font-size: 32rpx;
			text-align: center;
		}



	}
</style>