购物车

pages/parents/course/courseDetails.vue

@@ -254,8 +254,6 @@
 						
 		  </u-popup>
 		</view>
-				
-		</view>
 	</view>
 </template>
 

pages/parents/course/shoppingCar.vue

@@ -30,7 +30,7 @@
 					</view>
 				</view>
 				<!-- 课程标签 -->
-				<view class="class-tags">
+				<view class="class-tags" @click="selectShop(item,index)">
 					<view class="item">
 						{{item.className}}
 					</view>
@@ -86,11 +86,96 @@
 			<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 src="../../../assets/img/courseD.png" alt="">
+						</view>
+						<view class="infos">
+							<view class="class-name">
+								{{courseBase.courseName}}
+							</view>
+							<view class="price">
+								{{(packageDetail.unitPrice*packageDetail.courseAmount).toFixed(2)}}元
+							</view>
+							<view class="price-detail">
+								(包含报名费700.00元 水电费20.00元)
+							</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 ParentsTabbar from '@/components/ParentsTabbar.vue'
 	export default {
 		components: {
@@ -110,7 +195,19 @@
 				shoppingCartList: [],
 				shoppingAllChecked: false,
 				selectedCoursesList: [],
-				totalMoney: 0
+				totalMoney: 0,
+				popShow: false,
+				shopIndex: 0,
+				activeClass: 0,
+				activePackage: 0,
+				activeStudent: 0,
+				coursePackageList: [],
+				tclassList: [],
+				studentList: [],
+				courseBase: {},
+				classDetail: {},
+				packageDetail: {},
+				stuDetail: {}
 			}
 		},
 		onReady() {
@@ -119,45 +216,133 @@
 			}
 		},
 		methods: {
+			confirmShop() {
+				this.shoppingCartList[this.shopIndex].classId = this.classDetail.classId;
+				this.shoppingCartList[this.shopIndex].className = this.classDetail.className;
+				this.shoppingCartList[this.shopIndex].packageId = this.packageDetail.packageId;
+				this.shoppingCartList[this.shopIndex].packageName = this.packageDetail.packageName;
+				this.shoppingCartList[this.shopIndex].courseAmount = this.packageDetail.courseAmount;
+				this.shoppingCartList[this.shopIndex].unitPrice = this.packageDetail.unitPrice;
+				this.shoppingCartList[this.shopIndex].studentId = this.stuDetail.studentId;
+				this.shoppingCartList[this.shopIndex].studentName = this.stuDetail.studentName;
+				this.shoppingCartList[this.shopIndex].firstContactName = this.stuDetail.firstContactName;
+				this.shoppingCartList[this.shopIndex].firstContactPhone = this.stuDetail.firstContactPhone;
+				this.shoppingCartList[this.shopIndex].secondContactName = this.stuDetail.secondContactName;
+				this.shoppingCartList[this.shopIndex].secondContactPhone = this.stuDetail.secondContactPhone;
+
+				this.carhelp.setShoppingCartList(this.shoppingCartList);
+				this.popShow = false;
+			},
+			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.shopIndex = index;
+				this.getCourseDetail(item);
+				this.getStudentList(item);
+				this.popShow = true;
+			},
+			getCourseDetail(value) {
+				uni.showLoading({
+					title: "加载中",
+					mask: true,
+				})
+				courseApi.getCourseDetail({
+					courseId: value.courseId
+				}).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"
+					})
+				})
+			},
 			toCnfirmOrder() {
 				this.carhelp.setShoppingCartList(this.shoppingCartList);
 				// if(this.totalMoney != 0) {
-					uni.navigateTo({
-						url: '/pages/parents/course/confirmOrder'
-					})
+				uni.navigateTo({
+					url: '/pages/parents/course/confirmOrder'
+				})
 				// }
 			},
-			deleteShop(item,index) {
-				this.shoppingCartList.splice(index,1);
+			deleteShop(item, index) {
+				this.shoppingCartList.splice(index, 1);
 				this.carhelp.setShoppingCartList(this.shoppingCartList);
-				
+
 				this.getTotalMoney();
 			},
 			deleteShopAll() {
 				var list = [];
 				for (var i = 0; i < this.shoppingCartList.length; i++) {
-					if(!this.shoppingCartList[i].shoppingChecked) {
+					if (!this.shoppingCartList[i].shoppingChecked) {
 						list.push(this.shoppingCartList[i]);
 					}
 				}
 				this.shoppingCartList = list;
 				this.carhelp.setShoppingCartList(this.shoppingCartList);
-				
+
 				this.getTotalMoney();
 			},
 			radioChecked(item) {
 				item.shoppingChecked = !item.shoppingChecked;
-				if(item.shoppingChecked) {
+				if (item.shoppingChecked) {
 					this.selectedCoursesList.push(item);
 				} else {
-					this.selectedCoursesList.splice(this.selectedCoursesList.indexOf(item),1);
+					this.selectedCoursesList.splice(this.selectedCoursesList.indexOf(item), 1);
 				}
-				if(this.selectedCoursesList.length == this.shoppingCartList.length) {
+				if (this.selectedCoursesList.length == this.shoppingCartList.length) {
 					this.shoppingAllChecked = true;
 				} else {
 					this.shoppingAllChecked = false;
 				}
-				
+
 				this.getTotalMoney();
 			},
 			radioAllChecked() {
@@ -165,24 +350,24 @@
 				for (var i = 0; i < this.shoppingCartList.length; i++) {
 					this.shoppingCartList[i].shoppingChecked = this.shoppingAllChecked;
 				}
-				if(this.shoppingAllChecked) {
+				if (this.shoppingAllChecked) {
 					this.selectedCoursesList = this.shoppingCartList;
 				} else {
 					this.selectedCoursesList = [];
 				}
-				
+
 				this.getTotalMoney();
 			},
 			getTotalMoney() {
 				var money = 0;
 				var list = [];
 				for (var i = 0; i < this.shoppingCartList.length; i++) {
-					if(this.shoppingCartList[i].shoppingChecked) {
+					if (this.shoppingCartList[i].shoppingChecked) {
 						list.push(this.shoppingCartList[i]);
 					}
 				}
 				for (var j = 0; j < list.length; j++) {
-					money += list[j].courseAmount*list[j].unitPrice;
+					money += list[j].courseAmount * list[j].unitPrice;
 				}
 				this.totalMoney = money;
 			},
@@ -408,4 +593,176 @@
 		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 {
+					width: 216rpx;
+					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>