jp-education-student/pages/youth/course/courseDetails.vue

<template>
	<view>
		<u-navbar :title="classDetail.className"></u-navbar>
		<view class="picture" v-if="courseBase.posterUrl != null">
			<img :src="courseBase.posterUrl" alt="">
		</view>
		<view class="space">

		</view>
		<view class="main">
			<view class="infos">
				<view class="title">
					{{classDetail.className}}
				</view>
				<!-- <view class="price">
					<text>￥1000元</text> / 36课次（春季班）
				</view> -->
				<view class="time" v-if="classDetail.scheduleBuilderList != null">
					<view class="name">
						时间
					</view>
					<view class="content">
						周{{classWeek}} {{classTime}}
					</view>
				</view>
				<view class="location">
					<view class="name">
						地址
					</view>
					<view class="content">
						<view class="text" v-if="courseBase.suitSchool == '1'">
							青少年宫校区
						</view>
						<view class="text" v-if="courseBase.suitSchool == '2'">
							分校区
						</view>
						<view class="img">
							<img src="../../../assets/img/riFill-navigation-fill@1x.png" alt="">
						</view>
					</view>
				</view>
				<view class="classroom">
					<view class="name">
						教室
					</view>
					<view class="content">
						{{classDetail.classRoomN}}

					</view>
				</view>


			</view>

			<view class="teacher">
				<view class="title">
					授课老师
				</view>
				<view class="teacher-card">
					<view class="item"
						@click="gotoUrl('pages/youth/teacherHomepage/teacherHomepage?id=' + classDetail.courseTeachers)">
						<view class="photo">
							<u-avatar class="avatar"
								:src="classDetail.teachersHeadPhoto!=null ? 
									classDetail.teachersHeadPhoto : '../../assets/img/head.png'" size="96">
							</u-avatar>
						</view>
						<view class="teacher-name">
							<view class="name">
								{{classDetail.courseTeachersN}}
							</view>
							<view class="status">
								主讲老师
							</view>
						</view>
						<view class="more">
							<u-icon name="arrow-right" color="#cccccc"></u-icon>
						</view>
					</view>
				</view>
			</view>

			<view class="tag">
				<view class="item">
					<view class="name">
						咨询电话：
					</view>
					<view class="phone-teacher">
						{{classDetail.consultPhone != null ? classDetail.consultPhone : '暂无'}}
					</view>
				</view>
			</view>

			<view class="class-detail">
				<view class="title">
					课程详情
				</view>
				<view class="detail">
					{{courseBase.remark!=null ? courseBase.remark : '无'}}
				</view>
			</view>
		</view>

		<view class="bottom">
			<view class="shopping-car" @click="toShoppingCar">
				<view class="icon">
					<u-icon name="shopping-cart" color="#777777" size="40"></u-icon>
				</view>
				<view class="text">
					购物车
				</view>
			</view>
			<button class="add" @click="popShowClick">加入购物车</button>
		</view>
		
		<u-toast ref="uToast" />

		<!-- 弹出层 -->
		<view >
			<u-popup v-model="popShow" mode="bottom" :closeable='true'>
						
						<view class="popup">
							<view class="class-infos">
								<view class="picture" v-if="courseBase.posterUrl != null">
									<img :src="courseBase.posterUrl" alt="">
								</view>
								<view class="picture" v-else>
									<img src="../../../assets/img/courseD.png" alt="">
								</view>
								<view class="infos">
									<view class="class-name">
										{{courseBase.courseName}}
									</view>
									<view class="price">
										{{packageDetail.unitPrice!=null && packageDetail.courseAmount!=null ?
											Math.round(packageDetail.unitPrice*packageDetail.courseAmount+packageDetail.waterElectricityAmount) : '0.00'}}元
									</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="btn-box">
						  	<button class="add" @click="addShoppingCart">加入购物车</button>
						  </view>
						  <view class="" style="height: 24rpx;">
						  	
						  </view>
						</view>
						
		  </u-popup>
		</view>
	</view>
</template>

<script>
	import * as mineApi from '@/apis/youth/mine.js'
	import * as courseApi from '@/apis/youth/course.js'
	import * as shoppingCarApi from '@/apis/youth/shoppingCar.js'
	import * as loginApi from '@/apis/login.js'
	
	export default {
		data() {
			return {
				swiperList: [{
						image: 'https://cdn.uviewui.com/uview/swiper/1.jpg'
					}
				],
				courseId: '',
				classId: '',
				courseBase: {},
				coursePackageList: [],
				tclassList: [],
				classDetail: {},
				packageDetail: {},
				studentId: '',
				stuDetail: {},
				show: false,
				studentList: [],
				popShow:false,
				activeClass: 0,
				activePackage: 0,
				activeStudent: 0,
				shoppingCartList: [],
				shoppDetail: {},
				classWeek: '',
				classTime: ''
			}
		},
		onLoad(op) {
			if(op.id) {
				this.courseId = op.id;
				this.classId = op.classId;
				this.getCourseDetail();
				if(this.carhelp.getNsStudentId()) {
					this.studentId = this.carhelp.getNsStudentId().studentId;
				}
			}
		},
		methods: {
			popShowClick() {
				this.popShow = true;
			},
			toShoppingCar() {
				uni.redirectTo({
					url: '/pages/youth/course/shoppingCar'
				});
			},
			addShoppingCart() {
				this.popShow = false;
				var data = {
					studentId: this.studentId,
					packageId: this.packageDetail.packageId,
					classId: this.classDetail.classId,
					studentType: '2'
				}
				
				uni.showLoading({
					title: "加载中",
					mask: true,
				})
				shoppingCarApi.add(data).then((res) => {
					uni.hideLoading();
					uni.showToast({
						title: '加入购物车成功',
						icon: "none"
					})
				}).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;
				if(this.packageDetail.unitPrice == null) {
					this.packageDetail.unitPrice = 0;
				}
				if(this.packageDetail.waterElectricityAmount == null) {
					this.packageDetail.waterElectricityAmount = 0;
				}
			},
			getCourseDetail() {
				uni.showLoading({
					title: "加载中",
					mask: true,
				})
				courseApi.getCourseDetail({
					courseId: this.courseId,
					classId: this.classId
				}).then((res) => {
					uni.hideLoading();
					this.courseBase = res.data.courseBase;
					this.coursePackageList = res.data.coursePackageList;
					if(this.coursePackageList.length !=  0) {
						this.packageDetail = this.coursePackageList[0];
						if(this.packageDetail.unitPrice == null) {
							this.packageDetail.unitPrice = 0;
						}
						if(this.packageDetail.waterElectricityAmount == null) {
							this.packageDetail.waterElectricityAmount = 0;
						}
					}
					this.tclassList = res.data.nsClassList;
					
					for (var i = 0; i < this.tclassList.length; i++) {
						if(this.tclassList[i].classId == this.classId) {
							this.classDetail = this.tclassList[i];
							this.activeClass = i;
						}
					}
					
					var week = this.classDetail.scheduleBuilderList[0].repeatSet;
					if(week.indexOf('1') != -1) {
						week = week.replace('1','一');
					}
					if(week.indexOf('2') != -1) {
						week = week.replace('2','二');
					}
					if(week.indexOf('3') != -1) {
						week = week.replace('3','三');
					}
					if(week.indexOf('4') != -1) {
						week = week.replace('4','四');
					}
					if(week.indexOf('5') != -1) {
						week = week.replace('5','五');
					}
					if(week.indexOf('6') != -1) {
						week = week.replace('6','六');
					}
					if(week.indexOf('0') != -1) {
						week = week.replace('0','日');
					}
					this.classWeek = week;
					this.classTime = this.classDetail.scheduleBuilderList[0].coursePeriods
				}).catch(error => {
					uni.showToast({
						title: error,
						icon: "none"
					})
				})
			},
		}
	}
</script>

<style lang="scss" scoped>
	page {
		padding-bottom: 132px;
		background-color: #fff;
	}

	.picture {
		height: 280px;
		position: relative;

		.icon {
			position: absolute;
			left: 10px;
			top: 10px;
			z-index: 1;
			font-size: 20px;
		}

		.tag {
			width: 120rpx;
			line-height: 64rpx;
			border-radius: 50px;
			background-color: rgba(0, 0, 0, 0.5);
			color: rgba(255, 255, 255, 1);
			font-size: 14px;
			text-align: center;
			position: absolute;
			right: 16px;
			bottom: 23px;
		}
		
		img {
			width: 100%;
			height: 100%;
		}
	}

	.space {
		background-color: #fff;
		border-radius: 24rpx 24rpx 0px 0px;
		height: 22px;
		width: 100%;
		margin-top: -12px;
		position: absolute;
		left: 0;
		right: 0;
		border-bottom: none;
	}

	.main {

		background-color: rgba(255, 255, 255, 1);
		padding: 16rpx 40rpx;

		.infos {
			.title {
				line-height: 26px;
				color: rgba(51, 51, 51, 1);
				font-size: 20px;
				font-weight: bold;
			}

			.price {
				margin-top: 16px;
				font-size: 18px;

				text {
					color: rgba(255, 61, 0, 1);

				}
			}

			.time,
			.location,
			.classroom {
				display: flex;
				margin-top: 12px;
				line-height: 24px;

				.name {
					color: rgba(119, 119, 119, 1);
				}

				.content {
					color: rgba(51, 51, 51, 1);
					margin-left: 12px;
					flex: 1;
					display: flex;
					justify-content: space-between;

					.img {
						width: 20px;
						height: 20px;

						img {
							width: 100%;
							height: 100%;
							vertical-align: middle;
						}
					}

				}
			}
		}

		.title {
			color: rgba(51, 51, 51, 1);
			font-size: 18px;
			font-weight: bold;
		}

		.teacher {
			margin-top: 40px;

			.teacher-card {

				margin-top: 24rpx;
				display: flex;
				justify-content: space-between;

				.item {
					width: 47.5%;
					padding: 24rpx 0 24rpx 24rpx;
					border-radius: 24rpx;
					background-color: rgba(236, 236, 236, 1);
					display: flex;
				}

				.photo {
					width: 96rpx;
					height: 96rpx;
					overflow: hidden;
					border-radius: 100rpx;

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

				.teacher-name {
					display: flex;
					flex-direction: column;
					justify-content: space-between;
					margin-left: 16rpx;

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

					.status {
						color: rgba(119, 119, 119, 1);
						line-height: 40rpx;
					}
				}

				.more {
					display: flex;
					align-items: center;
					margin-left: 16rpx;
				}
			}
		}

		.tag {
			margin-top: 48rpx;
			padding: 18px 12px;
			border-radius: 12px;
			background-color: rgba(13, 186, 199, 0.1);
			height: 120rpx;
			display: flex;
			justify-content: space-between;
			align-items: center;

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

				.name {
					margin-left: 8rpx;
					color: rgba(16, 16, 16, 1);
				}
				
				.phone-teacher {
					margin-left: 8px;
				}
			}
		}

		.class-detail {
			margin-top: 80rpx;

			.detail {
				color: rgba(119, 119, 119, 1);
				line-height: 20px;
				margin-top: 24rpx;
			}

			.img {
				margin-top: 40rpx;
				width: 100%;
				height: 200px;

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

		.school-age,
		.target {
			margin-top: 80rpx;

			.content {
				margin-top: 12px;
				color: rgba(119, 119, 119, 1);
			}
		}


	}

	.bottom {
		width: 100%;
		background-color: rgba(255, 255, 255, 1);
		position: fixed;
		bottom: 0;
		left: 0;
		right: 0;
		padding: 20rpx 32rpx;
        display: flex;
		justify-content: space-between;
		.icon{
			text-align: center;
		}
		.text{
			color: rgba(16, 16, 16, 1);
			font-size: 24rpx;
		}
		.add {
			width:560rpx;
			border-radius: 50px;
			background-color: rgba(13, 186, 199, 1);
			line-height: 40px;
			color: rgba(255, 255, 255, 1);
			font-size: 16px;
			z-index: 999;
			margin-right: 0;
			
		}
		.registered{
			width: 100%;
			height: 80rpx;
			line-height: 80rpx;
			border-radius: 50px;
			background-color: rgba(153, 153, 153, 1);
			color: rgba(255, 255, 255, 1);
			font-size: 32rpx;
		}
	}

// 弹出层
.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{
				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;
				padding: 0 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>