luoyang-uniapp-app/pages/tabbar/learnCar/comp/subject3.vue

<template>
	<view class="comp">
		
		<!-- 学习状态 -->
		<view class="learnStatus">
			<view class="card mt20">
				<view class="flex-b" >
					<view class="lab">实操预约</view>
					<view class="link-arrow" @click="$goPage('/pages/carEntry/operaAppointment/operaAppointment?subject=3')">
						<view class="txt">去预约</view>
						<u-icon name="arrow-right" color="#3776FF" :size="16"></u-icon>
					</view>
					<!-- <view class="btn" @click.stop="$goPage('/pages/carEntry/evaluate/evaluate?subject=3&coachType=1')">去学习</view> -->
				</view>
			</view>
			<view class="h1"><text class="active">学习状态</text></view>
			<!-- 考试结果 -->
			<view class="exam"  v-if="showExam">
				<view class="card" v-if="info.studentExamVO.pass">
					<view class="flex-b padTb">
						<view class="lab">科目三考试成绩已通过</view>
						<view class="date">
							{{ $u.timeFormat(info.studentExamVO.examTime, 'yyyy-mm-dd hh:MM:ss') }}
						</view>
					</view>
					<view class="flex-b bg" >
						<view class="row">
							<view class="text">考试成绩：{{ info.studentExamVO.examResult }}分</view>
							<view class="btn" @click="$goPage('/pages/carEntry/evaluate/evaluate?subject=3&coachType=1')" v-if="!info.studentExamVO.canComment">去评价</view>
						</view>
					</view>
				</view>
				
				<view class="card" v-else>
					<view class="flex-b padTb">
						<view class="lab">科目三考试成绩未通过</view>
						<view class="date">{{ $u.timeFormat(info.studentExamVO.examTime, 'yyyy-mm-dd hh:MM:ss') }}</view>
					</view>
					<view class="bg">
						<view class="row bg">
							<view class="text">前往"12123"APP预约考试</view>
							<view class="btn" @click="$u.toast('请打开12123App预约')">去预约</view>
						</view>
					</view>
				</view>
			</view>
			
			
			
			<!-- 预约考试 -->
			<view class="" v-if="showAppointmentExam">
				<view class="card" v-if="!info.examReservationVO">
					<view class="flex-b padTb">
						<view class="lab">科目三学习进度已通过</view>
					</view>
					<view class="bg">
						<view class="row bg">
							<view class="text">前往"12123"APP预约考试</view>
							<view class="btn"  @click="$u.toast('请打开12123App预约')">去预约</view>
						</view>
					</view>
				</view>
				<view class="card" v-else>
					<view class="flex-b padTb">
						<view class="lab">科目三考试预约{{ examReservationStatus[info.examReservationVO.examReservationStatus]}}</view>
					</view>
					<view class="bg">
						<view class="row">
							<view class="text">考试场地：{{info.examReservationVO.examAddress}}</view>
						</view>
						<view class="row">
							<view class="text">考试时间：{{ $u.timeFormat(info.examReservationVO.examTime, 'yyyy-mm-dd hh:MM:ss') }} </view>
						</view>
					</view>
				</view>
			</view>
			
			<!-- 预约实操训练 -->
			<view class="" v-if="info.operationReservationVO&&info.operationReservationVO.length">
				<view class="card"  v-for="(item,index) in info.operationReservationVO" :key="index">
					<view class="flex-b padTb">
						<view class="lab">科目三实操训练 {{ item.reservationStatus==9?'已取消': reservationStatus[item.reservationStatus]}}</view>
						<view class="date">{{ $u.timeFormat(item.joe, 'yyyy-mm-dd hh:MM:ss') }}</view>
					</view>
					<view class="bg">
						<view class="row oneRowText">预约场地：{{item.reservationAddress}}</view>
						<view class="row">预约教练：{{item.reservationCoach}}</view>
						<view class="row">预约车辆：{{item.reservationCar}}</view>
						<view class="row">预约时间：{{ $u.timeFormat(item.reservationTime, 'yyyy-mm-dd hh:MM:ss') }}</view>
						<view class="row" v-if="item.joe">核销时间：{{ $u.timeFormat(item.joe, 'yyyy-mm-dd hh:MM:ss') }}</view>
					</view>
				</view>
			</view>
			
		</view>
	</view>
</template>

<script>
	import {
		getStudentSubject3Status,
	} from '@/config/api.js'
	export default {
		props: ['subjectStatus'],
		data() {
			return {
				info: {},
				showAppointment: false,//预约状态
				showAppointmentExam: false,//预约考试
				showExam: false,//考试状态
				reservationStatus: ['未签到', '已签到', '已签退', '已过期'],
				examReservationStatus: ['预约失败', '预约通过', '-预约中']
			}
		},
		created() {
			// 状态
			// 1,已预约训练,
			// 2,学时达标,去预约考试,
			// 3,考试结果
		},
		watch: {
			subjectStatus: {
				handler: function(res) {
					console.log('obj3改变了')
					this.getStudentSubject3StatusFn(res)
				},
				// immediate: true,
				deep: true
			}
		},
		methods: {
			changeStep(type) {
				this.showAppointment = false,//预约状态
				this.showAppointmentExam = false,//预约考试
				this.showExam = false,//考试状态
				this[type] = true
			},
			async getStudentSubject3StatusFn(res) {
				// const {data: res} = await getStudentSubject3Status({studentId: this.studentId})
				let studentExamVO = res.studentExamVO || {} //考试结果
				let examReservationVO = res.examReservationVO || {} //考试预约情况
				let operationReservationVO = res.operationReservationVO?res.operationReservationVO[0] : {} //实操预约情况
				if(studentExamVO.pass) {
					// 如果通过了考试
					this.changeStep('showExam')
				}else if(res.studentClassHourVO.classHourReachStatus) {
					// 如果学时达标，
					let ExamVOTime = studentExamVO.examTime
					let ExamReservationVOTime = examReservationVO.examTime
					// 如果没有预约考试时间也没有考试时间  去预约考试
					if (!ExamVOTime&&!ExamReservationVOTime) this.changeStep('showAppointmentExam')
					// 如果有预约时间没有考试时间, 显示预约考试详情
					if(!ExamVOTime&&ExamReservationVOTime) {
						this.changeStep('showAppointmentExam')
					}
					if(ExamVOTime&&!ExamReservationVOTime) {
						this.changeStep('showExam')
					}
					// 如果都有比时间
					if(ExamVOTime&&ExamReservationVOTime) {
						ExamVOTime>ExamReservationVOTime?this.changeStep('showExam'):this.changeStep('showAppointmentExam')
					}
				}
				
				console.log('时间')
				console.log(res)
				this.info = res
			}
		}
	}
</script>

<style lang="scss" scoped>
	@import './comp.scss';
</style>