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

<template>
	<view>
		<u-navbar title="课程报名"></u-navbar>
		<!-- 课程信息 -->
		<view class="class-infos">
			<view class="picture">
				<img src="../../../assets/img/picture1.png" alt="">
			</view>
			<view class="infos">
				<view class="title">
					{{classDetail.className}}
				</view>
				<!-- <view class="else">
					<text>春季班</text>
					<text>36课时</text>
					<text>x1</text>
				</view> -->
			</view>
		</view>

		<!-- 班级信息 -->
		<view class="infos" style="margin-top: 24rpx;">
			<view class="item">
				<view class="title">
					<text class="asterisk">*</text>
					<text>报名班级</text>
				</view>
				<view class="value" @click="classSelect">
					<text>{{className}}</text>
					<text class="icon"><u-icon name="arrow-right" color="#c8c8c8"></u-icon></text>
				</view>
			</view>
			
			<view class="item">
				<view class="title">
					<text class="asterisk">*</text>
					<text>选择套餐</text>
				</view>
				<view class="value" @click="packageSelect">
					<text class="placeholder" v-if="!packageName">请选择套餐</text>
					<text v-else>{{packageName}}</text>
					<text class="icon"><u-icon name="arrow-right" color="#c8c8c8"></u-icon></text>
				</view>
			</view>
		</view>
		<!-- 学员信息 -->
		<view class="infos">
			<view class="item">
				<view class="title">
					<text class="asterisk">*</text>
					<text>学员姓名</text>
				</view>
				<view class="value">
					<text class="add" v-if="!studentId" @click="toAddChildInformation">请先添加子女信息</text>
					<text v-else @click="studentSelect">{{stuDetail.studentName}}</text>
					<text class="icon"><u-icon name="arrow-right" color="#c8c8c8"></u-icon></text>
				</view>
			</view>

			<u-select v-model="show" mode="single-column" :list="list" @confirm="confirm"></u-select>

			<view class="item">
				<view class="title">
					<text>年龄</text>
				</view>
				<view class="value">
					<text class="placeholder" v-if="!studentId">选择学员后自动显示</text>
					<text v-else>{{stuDetail.age}}</text>
				</view>
			</view>
			<view class="item">
				<view class="title">
					<text class="asterisk">*</text>
					<text>联系人手机号</text>
				</view>
				<view class="value">
					<text>{{stuDetail.firstContactPhone}}</text>
				</view>
			</view>

			<view class="item">
				<view class="title">
					<text>第二联系人手机号</text>
				</view>
				<view class="value">
					<text>
						<input type="text" placeholder="请填写手机号">
					</text>
				</view>
			</view>

			<view class="item">
				<view class="title">
					<text>接送家长姓名</text>
				</view>
				<view class="value">
					<text>
						<input type="text" placeholder="请填写家长姓名">
					</text>
				</view>
			</view>
		</view>
		<!-- 家长信息 -->
		<!-- <view class="infos">
			

		</view> -->
		
		<!-- 金额 -->
		<view class="amount" style="margin-top: 12px;">
			<view class="amount-payable">
				<view class="title">
					应付金额
				</view>
				<view class="value" v-if="packageId == '1'">
					1200.00元
				</view>
				<view class="value" v-if="packageId == '2'">
					4600.00元
				</view>
			</view>
			<view class="discount-amount">
				<view class="title">
					优惠金额
				</view>
				<view class="value" v-if="packageId == '1'">
					0.00元
				</view>
				<view class="value" v-if="packageId == '2'">
					0.00元
				</view>
			</view>
			<view class="amount-paid">
				<view class="title">
					实付金额
				</view>
				<view class="value" v-if="packageId == '1'">
					1200.00元
				</view>
				<view class="value" v-if="packageId == '2'">
					4600.00元
				</view>
			</view>
		
		</view>
		
		<view class="amount">
			<view class="amount-paid">
				<view class="title">
					老师信息
				</view>
				<view class="value">
					{{classDetail.teacherName}}
				</view>
			</view>
			<view class="amount-paid">
				<view class="title">
					教室
				</view>
				<view class="value">
					三楼{{className}}
				</view>
			</view>
			<view class="amount-paid">
				<view class="title">
					上课时间
				</view>
				<view class="value" v-if="classId == '1'">
					周一 周三 周五
				</view>
				<view class="value" v-if="classId == '2'">
					周二 周四 周六
				</view>
			</view>
			<view class="amount-paid">
				<view class="title">
					联系电话
				</view>
				<view class="value" v-if="classDetail.consultPhone != null">
					{{classDetail.consultPhone.slice(0,11)}}
				</view>
			</view>
		</view>

		<!-- 确认订单 -->
		<view class="confirm">
			<view class="money">
				<view class="title">实付金额</view>
				<view class="value" v-if="packageId == '1'">1200.00元</view>
				<view class="value" v-if="packageId == '2'">4600.00元</view>
			</view>
			<view class="pay">
				<button @click="topayResult">去支付</button>
			</view>
		</view>

	</view>
</template>

<script>
	import * as mineApi from '@/apis/parents/mine.js'
	import * as homePageApi from '@/apis/parents/homePage.js'

	export default {
		data() {
			return {
				studentId: '',
				stuDetail: {},
				show: false,
				list: [],
				studentList: [],
				classList: [
					{
						value: '1',
						label: ''
					},
					{
						value: '2',
						label: ''
					}
				],
				packageList: [
					{
						value: '1',
						label: '暑期班 24课时'
					},
					{
						value: '2',
						label: '全年 92课时'
					}
				],
				selectNum: '',
				packageId: '',
				packageName: '',
				classId: '1',
				className: '',
				classDetail: {},
				id: ''
			}
		},
		onLoad(op) {
			if(op.id) {
				this.id = op.id;
				this.getReCoursesList();
			}
		},
		onReady() {
			if (this.carhelp.getStudentId()) {
				this.studentId = this.carhelp.getStudentId().studentId;
				this.getStudentDetail();
			}
			this.getStudentList();
		},
		methods: {
			topayResult() {
				uni.navigateTo({
					url: '/pages/parents/course/payResult'
				})
			},
			getReCoursesList() {
				uni.showLoading({
					title: "加载中",
					mask: true,
				})
				homePageApi.loadCoursesForHomeShow({
					tag: '',
					pageNum: 1,
					pageSize: 10000
				}).then((res) => {
					uni.hideLoading();
					var list = res.data.data;
					for (var i = 0; i < list.length; i++) {
						if(list[i].class_id == this.id) {
							this.classDetail = list[i];
						}
					}
					this.classList[0].label = this.classDetail.className + '一班';
					this.classList[1].label = this.classDetail.className + '二班';
					this.className = this.classList[0].label;
				}).catch(error => {
					uni.showToast({
						title: error,
						icon: "none"
					})
				})
			},
			classSelect() {
				this.selectNum = 'class';
				this.list = this.classList;
				this.show = true;
			},
			packageSelect() {
				this.selectNum = 'package';
				this.list = this.packageList;
				this.show = true;
			},
			studentSelect() {
				this.selectNum = 'student';
				this.list = this.studentList;
				this.show = true;
			},
			confirm(e) {
				if(this.selectNum == 'class') {
					this.classId = e[0].value;
					this.className = e[0].label;
				} else if(this.selectNum == 'package') {
					this.packageId = e[0].value;
					this.packageName = e[0].label;
				} else if(this.selectNum == 'student') {
					this.studentId = e[0].value;
					this.getStudentDetail();
				} else {
					
				}
			},
			getStudentList() {
				uni.showLoading({
					title: "加载中",
					mask: true,
				})
				mineApi.studentList().then((res) => {
					uni.hideLoading();
					var list1 = res.data.studentList;
					var list2 = [];
					for (var i = 0; i < list1.length; i++) {
						list2.push({
							value: list1[i].studentId,
							label: list1[i].studentName
						})
					}
					this.studentList = list2;
				}).catch(error => {
					uni.showToast({
						title: error,
						icon: "none"
					})
				})
			},
			toAddChildInformation() {
				uni.navigateTo({
					url: '/pages/parents/mine/addChildInformation'
				})
			},
			getStudentDetail() {
				uni.showLoading({
					title: "加载中",
					mask: true,
				})
				mineApi.getStudentDtl({
					studentId: this.studentId
				}).then((response) => {
					uni.hideLoading();
					this.stuDetail = response.data;
				}).catch(error => {
					uni.showToast({
						title: error,
						icon: "none"
					})
				})
			},
		}
	}
</script>

<style lang="scss" scoped>
	// 课程信息
	.class-infos {
		padding: 24rpx 32rpx;
		background-color: #fff;
		display: flex;

		.picture {
			width: 160rpx;
			height: 160rpx;
			border-radius: 8rpx;
			overflow: hidden;

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

		.infos {
			margin-left: 16rpx;

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

			.else {
				margin-top: 8rpx;

				text {
					margin-right: 8rpx;
					color: #8c8c8c;
					font-size: 12px;
				}
			}
		}
	}

	// 金额
	.amount {
		background-color: #fff;
		padding: 20rpx 32rpx;
		border-top: 1px solid rgba(244, 244, 244, 1);

		.title {
			color: #777777;
		}

		.amount-payable,
		.discount-amount,
		.amount-paid {
			display: flex;
			justify-content: space-between;
			margin-bottom: 16rpx;

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

		.discount-amount {
			.value {
				color: #E60012;
			}
		}

		.amount-paid {
			margin-bottom: 0;

			.value {
				color: #101010
			}
		}
	}


	.infos {
		padding: 0px 30rpx;
		background-color: #fff;
		// margin-top: 24rpx;

		.item {
			display: flex;
			justify-content: space-between;
			border-bottom: 1px solid rgba(244, 244, 244, 1);
			padding: 24rpx 0;

			.title {
				color: #333333;
				font-weight: bold;

				.asterisk {
					color: rgba(244, 68, 68, 1);
				}
			}

			.value {
				color: rgba(51, 51, 51, 1);
				font-weight: bold;

				.icon {
					margin-left: 8rpx;
				}

				.add {
					color: #FF3D00;
				}

				.placeholder {
					color: #CCCCCC;
				}
			}
		}
	}

	/deep/uni-input {
		width: 300rpx;
		text-align: right !important;

	}

	/deep/.uni-input-placeholder {
		color: #cccccc !important;
	}

	// 确认订单
	.confirm {
		background-color: #fff;
		display: flex;
		justify-content: space-between;
		position: fixed;
		bottom: 0;
		left: 0;
		right: 0;
		padding: 40rpx 32rpx;

		.money {
			display: flex;
			font-size: 18px;
			align-items: center;
			font-weight: bold;

			.title {
				color: #101010;
			}

			.value {
				color: #0DBAC7;
				margin-left: 8rpx;

			}
		}

		uni-button {
			width: 256rpx;
			height: 80rpx;
			border-radius: 50px;
			background-color: rgba(13, 186, 199, 1);
			color: rgba(255, 255, 255, 1);
			font-size: 16px;
		}
	}
</style>