JiangxiMiniProgram/pages/carEntry/examineAppointment/examineAppointment.vue

<template>
	<view class="pageBgImg">
		<topNavbar title="考场模拟训练预约"></topNavbar>
		<view class="pad">
			<view class="top_row">
				<view class="step_row">
					<view class="dian"  @click="changeStep(1)">
						<view class="num" :class="{active: currentStep==1}">1</view>
					</view>
					<view class="line"></view>
					<view class="dian"  @click="changeStep(2)">
						<view class="num" :class="{active: currentStep==2}">2</view>
					</view>
					<view class="line"></view>
					<view class="dian"  @click="changeStep(3)">
						<view class="num" :class="{active: currentStep==3}">3</view>
					</view>
					<!-- <view class="line"></view>
					<view class="dian"  @click="changeStep(4)">
						<view class="num" :class="{active: currentStep==4}">4</view>
					</view> -->
					<!-- <view class="line"></view>
					<view class="dian"  @click="changeStep(5)">
						<view class="num" :class="{active: currentStep==5}">5</view>
					</view> -->
				</view>
				<view class="step_text">
					<!-- <view class="txt">选择科目</view> -->
					<view class="txt">选择考场</view>
					<!-- <view class="txt">选择车型</view> -->
					<view class="txt">选择车辆</view>
					<view class="txt">选择时间</view>
				</view>
			</view>
			
			<step1 v-if="currentStep==1" @changeStep="changeStep" :list="siteList" @chooseSite="chooseSite" :siteId="FormData.examSiteId"></step1>
			<step2 v-if="currentStep==2" @changeStep="changeStep" :list="carList" @chooseCar="chooseCar" :carId="FormData.carId"></step2>
			<step3 v-if="currentStep==3" @changeStep="changeStep" :FormData="FormData"></step3>
			<!-- <step4 v-if="currentStep==4" @changeStep="changeStep"></step4> -->
			<!-- <step5 v-if="currentStep==5" @changeStep="changeStep"></step5> -->
		</view>
	</view>
</template>

<script>
	import step1 from './comp/step1'
	import step2 from './comp/step2'
	import step3 from './comp/step3'
	import { examSitePage,  examSimulationClass, examCarPage,  } from '@/config/api'
	// import step5 from './comp/step5'
	export default {
		components: { step1, step2, step3,},
		data() {
			return {
				currentStep: 1,
				siteParams: {
					siteType: '2',
					carType: 'C1',
					longitude: '',
					latitude: ''
				},
				carParams: {  "pageNo": 1,  "pageSize": 10,  "carType": 'C1',},
				FormData: {
					examSiteId: '',
					carId: '',
					subject: 2,
					classDate: '',
					classTime: '',
					licnum: '',
					siteName: '',
					trainType: 'C1'
				},
				siteList: [],
				carList: [],
				carTotal: 20
			}
		},
		onLoad(options) {
			if(options.subject) this.FormData.subject = options.subject
			this.FormData.trainType = this.vuex_userInfo.trainType
			// this.carType = 
			let vuex_cityInfo = this.$store.state.user.vuex_cityInfo
			if(!vuex_cityInfo.lat) {
				this.$store.dispatch('getCity')
			}else {
				this.siteParams.latitude = vuex_cityInfo.lat
				this.siteParams.longitude = vuex_cityInfo.lng
			}
			this.examSitePageFn()
		},
		methods: {
			// 选择车型
			chooseCar(item) {
				this.FormData.carId = item.id
				this.FormData.carId = item.id
				this.FormData.licnum = item.licnum
				console.log(this.FormData.carId)
			},
			// 选择考场
			chooseSite(item) {
				this.FormData.examSiteId = item.id
				this.FormData.siteName = item.name
				this.examCarPageFn()
			},
			// 获得考场
			async examSitePageFn() {
				const {data: res} = await examSitePage(this.siteParams)
				this.siteList = res
			},
			// 获得车辆
			async examCarPageFn() {
				this.carParams.examId = this.FormData.examSiteId
				const {data: res} = await examCarPage(this.carParams)
				this.carParams.pageNo++
				this.carList.push(...res.list)
				this.carTotal = res.total
			},
			
			 changeStep(num) {
				 this.currentStep = num
			 }
		}
	}
</script>

<style lang="scss" scoped>
	.top_row {
		width: 100%;
		padding-bottom: 36rpx;
	  .step_row {
		  display: flex;
		  align-items: center;
		  justify-content: space-between;
		  width: 100%;
		  padding: 0 32rpx;
		  .dian {
			  width: 180rpx;
			  height: 100rpx;
			  display: flex;
			  align-items: center;
			  justify-content: center;
			  position: relative;
			  // background: red;
		  }
	    .num {
			width: 46rpx;
			height: 46rpx;
			background: #D1E7FE;
			line-height: 46rpx;
			border-radius: 50%;
			text-align: center;
			color: $themC;
			font-size: 24rpx;
			position: absolute;
			z-index: 9;
			&.active {
				border:2rpx solid $themC;
				&::before {
					content: '';
					width: 66rpx;
					height: 66rpx;
					border-radius: 50%;
					position: absolute;
					z-index: -1;
					left: 50%;
					top: 50%;
					transform: translate(-50%,-50%);
					background: rgba(255,255,255,0.6);
					filter: blur(6rpx);
				}
			}
	    }
	
	    .line {
			width: 60rpx;
			height: 4rpx;
			background: rgba(255,255,255,0.4);
	    }
	  }
	
	  .step_text {
		  display: flex;
	    .txt {
			flex: 1;
			text-align: center;
			font-size: 28rpx;
			color: #fff;
			text-align: center;
	    }
	  }
	}
</style>