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

<template>
	<view class="comp">
		
		<!-- 学习状态 -->
		<view class="learnStatus">
			<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>
					</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="card" v-if="showAppointment">
				<view class="flex-b padTb">
					<view class="lab">科目三安全文明常识 {{ examReservationStatus[info.examReservationVO.examReservationStatus] }}</view>
					<view class="date">{{ $u.timeFormat(info.examReservationVO.examReservationTime, 'yyyy-mm-dd hh:MM:ss') }}</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 class="card" v-if="!showAppointment&&!showExam">
				<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">去预约</view>
					</view>
				</view>
			</view>
			
		</view>
	</view>
</template>

<script>
	import {
		getStudentSubject1Status,
	} from '@/config/api.js'
	export default {
		props: ['subjectStatus'],
		data() {
			return {
				info: {},
				showExam: false,//考试状态
				showAppointment: false,//预约状态
				examReservationStatus: ['预约失败', '预约通过', '-预约中']
			}
		},
		created() {
			this.showExam = false//考试状态
			this.showAppointment = false//预约状态
		},
		watch: {
			subjectStatus: {
				handler: function(res) {
					console.log('obj4改变了')
					this.getStudentSubject4StatusFn(res)
				},
				// immediate: true,
				deep: true
			}
		},
		methods: {
			async getStudentSubject4StatusFn(res) {
				// const {
				// 	data: res
				// } = await getStudentSubject1Status({
				// 	studentId: this.studentId
				// })
				this.info = res
				// 1如果返回了考试时间和预约时间
				if(res.studentExamVO&&res.examReservationVO) {
					// 如果考试的时间大于或等于预约的时间
					if(res.studentExamVO.examTime>res.examReservationVO.examTime||res.studentExamVO.examTime==res.examReservationVO.examTime) {
						this.showExam = true
						this.showAppointment = false
					}else {
						this.showAppointment = true
						this.showExam = false
					}
				}else if (res.studentExamVO&&!res.examReservationVO) {
					// 2如果只返回了考试时间
					this.showExam = true
					this.showAppointment = false
				}else if(res.studentExamVO&&!res.examReservationVO){
					// 3如果只返了预约时间
					this.showExam = false
					this.showAppointment = true
				}
				console.log(res)
			},
		}
	}
</script>

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