JiangxiMiniProgram/pages/carEntry/operaAppointment/operaAppointment.vue

<template>
	<view class="pageBgImg">
		<topNavbar :title="title"></topNavbar>
		<view class="pad" style="padding-bottom: 60rpx;">
			<step1 v-if="currentStep==1" @openPopup="openPopup" :FormData="FormData" @showStep2="showStep2"></step1>
			<step2 v-if="currentStep==2" @changeStep="changeStep" :FormData="FormData" ref="step2Ref"></step2>
		</view>
		
		<u-popup :show="show" mode="center" :round="8">
			<view class="popupCon">
				<view class="h2">再次确认预约信息</view>
				<view class="content">
					<view class="row">
						<view class="lab">预约类型</view>
						<view class="val">实操训练预约</view>
					</view>
					<view class="row">
						<view class="lab">预约科目</view>
						<view class="val">{{FormData.subject==2?'科目二': '科目三'}}</view>
					</view>
					<view class="row">
						<view class="lab">预约场地</view>
						<view class="val">{{FormData.siteName}}</view>
					</view>
					<view class="row">
						<view class="lab">预约车辆</view>
						<view class="val">{{ FormData.carNumber }}</view>
					</view>
					<view class="row">
						<view class="lab">预约时间</view>
						<view class="val">{{ FormData.classDate}} {{FormData.classTime}}</view>
					</view>
				</view>
				<view class="btn_row">
					<view class="border btn" @click="show = false">返回修改</view>
					<view class="btn" @click="masterCreateFn">确认</view>
				</view>
			</view>
		</u-popup>
		
	</view>
</template>

<script>
	import step1 from './comp/step1'
	import step2 from './comp/step2'
	import { masterCreate } from '@/config/api.js'
	export default {
		components: { step1, step2,},
		data() {
			return {
				currentStep: 1,
				title: '实操训练预约',
				FormData: {
					carId: '',
					subject: 2,
					classDate: '',
					classTime: '',
					licnum: '',
					trainType: 'C1',
					coachId: '',
					coachName: '',
					carNumber: '',//车牌号
					siteName: '',//场地名称
					siteAddress: '',//场地地址
					photoPath: ''
				},
				
				show: false
			}
		},
		onLoad(options) {
			this.subject = options.subject
			if(this.subject==2) {
				this.title = '实操训练科目二预约'
			}else if(this.subject==3) {
				this.title = '实操训练科目三预约'
			}
			if(options.subject) this.FormData.subject = options.subject
			this.FormData.trainType = this.vuex_userInfo.trainType
			this.FormData.studentId = this.vuex_userInfo.id
			this.FormData.coachId = this.vuex_userInfo.coachId
			this.FormData.coachName = this.vuex_userInfo.coachName
			
		},
		onReachBottom() {
			if(this.currentStep==2) {
				this.$refs.step2Ref.addCoachPage()
			}
		},
		methods: {
			 changeStep(num) {
				 this.currentStep = num
			 },
			 openPopup() {
				 this.show = true
			 },
			 showStep2() {
				 this.currentStep = 2
			 },
			 async masterCreateFn()  {
				 this.show = false
				let obj = {
				  "studentId": this.FormData.studentId,
				  "coachId": this.FormData.coachId,
				  "classDate": this.FormData.classDate,
				  "selectScheduleClass": [this.FormData.courseIds],
				  // classId: [this.FormData.courseIds]
				}
				const {data: res} = await masterCreate(obj)
				if(res) {
					this.$u.toast('预约成功')
					setTimeout(()=>{
						this.$goPage('/pages/mineEntry/myAppointment/myAppointment?currentTab=2')
					},1500)
				}
				console.log(res)
			 }
		}
	}
</script>

<style lang="scss" scoped>
	
	.popupCon {
		padding: 30rpx 50rpx;
	
		.h2 {
			font-weight: 600;
			color: #333333;
			line-height: 70rpx;
			font-size: 36rpx;
			text-align: center;
			margin-bottom: 20rpx;
		}
	
		.content {
			padding-bottom: 20rpx;
	
			.row {
				padding: 22rpx 0;
				display: flex;
				font-size: 28rpx;
				align-items: center;
	
				.lab {
					width: 180rpx;
					color: #686B73;
	
				}
	
				.val {
					flex: 1;
					font-weight: 500;
				}
			}
		}
	}
	
	.btn_row {
		display: flex;
		justify-content: space-between;
		padding-bottom: 30rpx;
		.btn {
			width: 47%;
			height: 72rpx;
			background: #1989FA;
			border-radius: 8rpx;
			font-size: 28rpx;
			color: #fff;
			text-align: center;
			line-height: 72rpx;
	
			&.border {
				background: rgba(25, 137, 250, 0.1);
				border: 2rpx solid $themC;
				color: $themC;
			}
		}
	}
</style>