JiangxiMiniProgram/pages/indexEntry/NonPlatformStudentInfo/NonPlatformStudentInfo.vue

<template>
	<view class="pageBgImg">
		<topNavbar title="学员信息"></topNavbar>
		<view class="pad">
			<view class="card">
				<view class="row">
					<view class="lab">姓名</view>
					<view class="value">{{form.name}}</view>
				</view>
				<view class="row">
					<view class="lab">证件号</view>
					<view class="value">{{form.idcard}}</view>
				</view>
				<view class="row">
					<view class="lab">证件类型</view>
					<view class="value">身份证</view>
				</view>
			</view>

			<view class="card">
				<view class="row">
					<view class="lab">手机号</view>
					<view class="rightCon">
						<view class="val">
							<input v-model="form.phone" placeholder="请输入手机号" /></input>
						</view>
					</view>
				</view>
				<view class="row">
					<view class="lab">驾校名称</view>
					<view class="rightCon">
						<view class="val">
							<input v-model="form.schoolName" placeholder="请输入驾校名称" /></input>
						</view>
					</view>
				</view>
				<view class="row">
					<view class="lab">学驾车型</view>
					<view class="rightCon">
						<view class="val" @click="showType=true">
							<input v-model="form.trainType" placeholder="请选择" disabled="" style="pointer-events: none;"/></input>
						</view>
						<view class="icon"  @click="showType=true">
							<u-icon name="arrow-right" size="14" color="#686B73" style="margin-left: 12rpx;"></u-icon>
						</view>
					</view>
				</view>
			</view>

			<view class="btnBg" @click="goNext">确认</view>
		</view>

		<u-picker :show="showType" :columns="typeArr"  @confirm="confirmType"
			@cancel="showType=false"></u-picker>

	</view>
</template>

<script>
	import {
		applyOnline
	} from '@/config/api.js'
	export default {
		data() {
			return {
				form: {
					value: 1,
					cardType: '身份证',
					phone: '',
					trainType: '',
					name: '',
					idcard: '',
					schoolName: '',
					applyType: 5,//（1：普通学员，2：免费学员，3：定向学员，4：理科免费学员，5：驾校免费学员）
				},
				showType: false,
				typeArr: [
					['C1','C2','C3','A2','B2','A1','A3','B1','D','E','F','C4','C5','C6']
				],
			}
			// 报名进度（0：待报名，1：已选驾校，2：已实名制，3：已填写报名信息，4：已签署合同，5：待支付，6：已支付）
		},
		onLoad(options) {
			this.form.userId = this.userId
			this.form.phone = this.vuex_userInfo.phone
			this.form.accountId = this.vuex_userInfo.accountId 
			this.form.address = this.vuex_userInfo.address 
			this.form.name = this.vuex_userInfo.name
			this.form.idcard = this.vuex_userInfo.idcard
			this.form.nationality = this.vuex_userInfo.nationality || '中国'
			this.form.cardType = this.vuex_userInfo.cardType || '1'
		},
		methods: {

			confirmType(val) {
				let item = val.value[0]
				console.log(item)
				this.form.trainType = item.value
				// this.form.typeName = item.label
				this.showType = false
			},

			async goNext() {
				if(!this.form.phone) return this.$u.toast('请输入手机号')
				if(!this.form.schoolName) return this.$u.toast('请输入驾校名称')
				if(!this.form.trainType) return this.$u.toast('请选择学驾车型')
				const {data: res} = await applyOnline(this.form)
				await this.$store.dispatch('getUserInfo')
				

				// this.$goPage('/pages/indexEntry/enroll/signContract/signContract')
				// this.$goPage('/pages/indexEntry/enroll/uploadAvatar/uploadAvatar')
			}
		}
	}
</script>
<style>
	.input1::placeholder {
		color: red !important;
	}
</style>
<style lang="scss" scoped>
	.card {
		padding: 10rpx 46rpx 10rpx 32rpx;
		margin-bottom: 20rpx;

		.row {
			height: 100rpx;
			display: flex;
			align-items: center;

			.lab {
				width: 152rpx;
			}

			.rightCon {
				flex: 1;
				width: 0;
				display: flex;

				.val {
					flex: 1;
					width: 0;

					input {
						font-size: 28rpx;
					}
				}

				.icon {
					width: 30rpx;
					height: 30rpx;

					u-icon {}
				}
			}
		}
	}

	.btnBg {
		width: 396rpx;
		margin: 100rpx auto 0 auto;
	}
</style>