zhihuixiaoyuan2-ui/mine/components/login/applyparent.vue

<template>
	<view class="regbox flexdc">
		
			<block v-if="type=='add'">
				<uni-forms ref="form" :rules="rulebs" :modelValue="datainfob">
				<uni-forms-item label="姓名" required name="userName">
					<uni-easyinput :inputBorder="false" v-model="datainfob.userName" placeholder="请输入您的姓名">
					</uni-easyinput>
					<view class="rimg"></view>
				</uni-forms-item>
				<uni-forms-item label="联系方式" required name="userPhone">
					<uni-easyinput :inputBorder="false" v-model="datainfob.userPhone" placeholder="请输入您的联系方式">
					</uni-easyinput>
					<view class="rimg"></view>
				</uni-forms-item>

				<!-- 单选 -->
				<view v-for="(ite,idx) in classlist" class="pr" :key="idx" @click="getShow(idx)">
					<view @click="getDel(idx)" class="delbox" v-if="idx!=0">
						<image :src="tcdel"></image>
					</view>
					<uni-forms-item label="学生姓名" required name="studentName">
						<uni-easyinput :inputBorder="false" v-model="ite.studentName" placeholder="请输入学生姓名">
						</uni-easyinput>
						<view class="rimg"></view>
					</uni-forms-item>
					<uni-forms-item label="学生身份证号" required name="studentNumber">
						<uni-easyinput :inputBorder="false" type="number" v-model="ite.studentNumber"
							placeholder="请输入学生身份证号"></uni-easyinput>
						<view class="rimg"></view>
					</uni-forms-item>
					<picker range-key='dictLabel'  :value="xxindex" :range="schoolval"
						@change='bindDateChangea'>
						<uni-forms-item label="学校" required name="schoolName">
							<view class="f16  flex1 txr" :class="ite.schoolName?'co16':'coa'">
								{{ite.schoolName||"请选择学校"}}</view>
							<view class="rimg">
								<image :src="rimg" class="rimgs"></image>
							</view>
						</uni-forms-item>
					</picker>
					<picker range-key='dictLabel'  :value="xkindex" :range="classval" @change='bindDateChangeb'>
						<uni-forms-item label="班级" required name="className">
							<view class="f16  flex1 txr" :class="ite.className?'co16':'coa'">{{ite.className||"请选择班级"}}
							</view>
							<view class="rimg">
								<image :src="rimg" class="rimgs"></image>
							</view>
						</uni-forms-item>
					</picker>
					<view class="line"></view>
				</view>
				<view class="addbox f17 co47 flexcc mt26" @click="getAddFn">
					<image :src="addimg"></image>
					新增学校信息
				</view>
				</uni-forms>
			</block>
			<!-- 家长的修改 -->
			<block v-else>
				<uni-forms ref="form" :rules="rulesup" :modelValue="datainfob">
				<uni-forms-item label="姓名" required name="parentsName">
					<uni-easyinput :inputBorder="false" v-model="datainfob.parentsName" placeholder="请输入您的姓名">
					</uni-easyinput>
					<view class="rimg"></view>
				</uni-forms-item>
				<uni-forms-item label="联系方式" required name="parentsPhone">
					<uni-easyinput :inputBorder="false" v-model="datainfob.parentsPhone" placeholder="请输入您的联系方式">
					</uni-easyinput>
					<view class="rimg"></view>
				</uni-forms-item>

				<!-- 单选 -->
				<uni-forms-item label="学生姓名" required name="studentName">
					<uni-easyinput :inputBorder="false" v-model="datainfob.studentName" placeholder="请输入学生姓名">
					</uni-easyinput>
					<view class="rimg"></view>
				</uni-forms-item>
				<uni-forms-item label="学生身份证号" required name="studentNumber">
					<uni-easyinput :inputBorder="false" type="number" v-model="datainfob.studentNumber"
						placeholder="请输入学生身份证号"></uni-easyinput>
					<view class="rimg"></view>
				</uni-forms-item>
				<picker range-key='dictLabel'  :value="xxindex" :range="schoolval" @change='bindDateChangea'>
					<uni-forms-item label="学校" required name="schoolName">
						<view class="f16  flex1 txr" :class="datainfob.schoolName?'co16':'coa'">
							{{datainfob.schoolName||"请选择学校"}}</view>
						<view class="rimg">
							<image :src="rimg" class="rimgs"></image>
						</view>
					</uni-forms-item>
				</picker>
				<picker range-key='dictLabel'  :value="xkindex" :range="classval" @change='bindDateChangeb'>
					<uni-forms-item label="班级" required name="className">
						<view class="f16  flex1 txr" :class="datainfob.className?'co16':'coa'">
							{{datainfob.className||"请选择班级"}}
						</view>
						<view class="rimg">
							<image :src="rimg" class="rimgs"></image>
						</view>
					</uni-forms-item>
				</picker>
				<view class="line"></view>
				</uni-forms>
			</block>
		<view class="mt26">
			<view class="rbtn" @click="getSubmit">保存</view>
			<view class="apllytxt f15" @click="gethome">稍后完善</view>
		</view>
	</view>
</template>

<script>
	import {getDeptList,getDeptListminea} from "@/api/mine/mine.js"
	import config from '@/config'
	const baseUrl = config.baseUrl
	import {getToken} from '@/utils/auth'
	import {getparentsregFn,getstudentdetFn,getstudentputFn} from "@/api/mine/register.js"
	export default {
		props:{
			schoolval:{
				type: Array,
				default () {
					return []
				}
			},
			classvals:{
				type: Array,
				default () {
					return []
				}
			}
		},
		watch:{
			classvals(val){
				this.classval=val
			}
		},
		data() {
			return {
				rimg: require("@/static/images/rimg.png"),
				wimg: require('@/static/images/read.png'),
				delimg: require('@/static/images/del.png'),
				addimg: require('@/static/images/add.png'),
				tcdel: require('@/static/images/tcdel.png'),
				cyvalue: '',
				xxindex: 0,
				bjindex: 0,
				xkindex: 0,
				rulebs: {
					userName: {
						rules: [{
							required: true,
							errorMessage: '请输入姓名',
						}]
					},
					userPhone: {
						rules: [{
							required: true,
							errorMessage: '请输入联系方式',
						},{pattern:"^(13[0-9]|14[01456879]|15[0-35-9]|16[2567]|17[0-8]|18[0-9]|19[0-35-9])\\d{8}$",errorMessage: '请输入正确的联系方式'}]
					},
					registerParentsStudentList: {
						rules: [{
							required: true,
							errorMessage: '请填写学生信息',
						}]
					}
				},
				rulesup: {
					parentsName: {
						rules: [{
							required: true,
							errorMessage: '请输入姓名',
						}]
					},
					parentsPhone: {
						rules: [{
							required: true,
							errorMessage: '请输入联系方式',
						},{pattern:"^(13[0-9]|14[01456879]|15[0-35-9]|16[2567]|17[0-8]|18[0-9]|19[0-35-9])\\d{8}$",errorMessage: '请输入正确的联系方式'}]
					},
					studentName: {
						rules: [{
							required: true,
							errorMessage: '请输入学生姓名',
						}]
					},
					schoolName: {
						rules: [{
							required: true,
							errorMessage: '请选择学校',
						}]
					},
					className: {
						rules: [{
							required: true,
							errorMessage: '请选择班级',
						}]
					},
				},
				datainfob: {
					"userName": "",
					"userPhone": "",
					"registerParentsStudentList": [{
						"schoolId": "",
						"schoolName": "",
						"classId": "",
						"className": "",
						"studentName": "",
						"studentNumber": ""
					}]
				},
				classlist: [{
					"schoolId": "",
					"schoolName": "",
					"classId": "",
					"className": "",
					"studentName": "",
					"studentNumber": ""
				}],
				classval: [],
				checkidx: -1,
				id: '',
				type: 'add', //页面类型
			}
		},
		methods: {
			// 班级
			
			getAddFn() {
				var obj = {
					"schoolId": "",
					"schoolName": "",
					"classId": "",
					"className": "",
					"studentName": "",
					"studentNumber": ""
				}
				this.classlist.push(obj);
			},
			getDel(idx) {
				var that = this;
				uni.showModal({
					title: '确认删除',
					content: "是否确认删除",
					cancelText: '取消删除',
					confirmText: '确认删除',
					success: function(res) {
						if (res.confirm) {
							that.classlist.splice(idx, 1)
						} else if (res.cancel) {
							// console.log('用户点击取消');
						}
					}
				});
			},
			getShow(idx) {
				this.checkidx = idx;
			},
			// 选择学校
			bindDateChangea(e) {
				var val = e.detail.value;
				var v = this.schoolval[val];
				var id = v.dictValue;
				var idx = this.checkidx;
				if (this.classlist[idx].schoolId != id) {
					this.classlist[idx].schoolName = v.dictLabel
					this.classlist[idx].tenantId = v.tenantId
					this.classlist[idx].schoolId = id
					this.classlist[idx].className = '';
					this.classlist[idx].classId = '';
					this.$emit('getclassListFn',id)
				}

			},
			// 班级
			bindDateChangeb(e) {
				var val = e.detail.value;
				var idx = this.checkidx;
				this.classlist[idx].className = this.classval[val].dictLabel
				this.classlist[idx].classId = this.classval[val].dictValue

			},
			getSubmit() {
				var that = this;
				this.$refs.form.validate().then(res => {
					var params = JSON.parse(JSON.stringify(this.datainfob))
					var list=this.classlist;
					var newArr = []
					var a=0;
					Object.keys(list).some((key) => {
						if(!list[key].studentName){
							a=1;
							this.$toast("请输入学生姓名" )
							return
						}else if(!list[key].studentNumber){
							a=1;
							this.$toast("请输入学生身份证号" )
							return	
						}else if (list[key].schoolName && list[key].className) {
							let _IDRe18 =
								/^([1-6][1-9]|50)\d{4}(18|19|20)\d{2}((0[1-9])|10|11|12)(([0-2][1-9])|10|20|30|31)\d{3}[0-9Xx]$/
							let _IDre15 = /^([1-6][1-9]|50)\d{4}\d{2}((0[1-9])|10|11|12)(([0-2][1-9])|10|20|30|31)\d{3}$/
							// 校验身份证：
							if (_IDRe18.test(list[key].studentNumber) || _IDre15.test(list[key].studentNumber)) {
								newArr.push(list[key])
							}else{
								a=1;
								this.$toast('请输入学生'+ list[key].studentName + "正确身份证号")
								return
							}
						} else if (list[key].schoolName && !list[key].className) {
							a=1;
							this.$toast("请选择" + list[key].schoolName + "的班级")
							return
						} else if(!list[key].schoolName){
							a=1;
							this.$toast("请选择学校")
							return
						}
					})
					if(a==1){
						return
					}
					params.registerParentsStudentList = JSON.parse(JSON.stringify(newArr))
					this.$emit('getparentsregFn',params)
					


					// this.$tab.navigateTo(`/mine/pages/mine/success`)
				})

			},
			gethome() {
				this.$tab.reLaunch(`/pages/index/index`)
			},
		},

	}
</script>

<style lang="scss" scoped>
.regbox{padding: 20rpx 36rpx 80rpx;box-sizing: border-box;min-height: auto;overflow: auto;
	.apllytxt{font-size:30rpx ;}
	.line{width: 40rpx;height: 6rpx;background: #FFB132;margin: 60rpx auto 0;}
	
	.addbox{font-weight: 500;
		image{width: 44rpx;height: 44rpx;margin-right: 24rpx;flex: 0 0 auto;}
	}
	
	.delbox{width: 40rpx;height: 40rpx;position: absolute;right: 0;top: -40rpx;
		image{
			width: 36rpx;height: 36rpx;
		}
	}
}
.regbox /deep/ .uni-forms{flex: 1;}
.regbox /deep/ .uni-forms-item__label{flex: 0 0 auto;width: auto !important;font-size: 32rpx;font-weight: bold;
color: #161616;}
.regbox /deep/ .uni-forms .uni-forms-item{padding: 28rpx 24rpx 20rpx;border-bottom: 2rpx #C1C1C1 solid;margin-bottom: 0;
	// &:nth-of-type(3){margin-bottom: 0;border-bottom: 0;}
}
.regbox /deep/ .uni-forms-item__content{display: flex;align-items: center;flex-direction: row;}
.regbox /deep/ .uni-easyinput{flex: 1;text-align: right;}
.regbox /deep/ .uni-easyinput__placeholder-class{font-size: 30rpx;}
.regbox /deep/ .uni-easyinput__content-input{font-size: 30rpx;}
 .regbox /deep/ .uni-forms-item__error{margin-top:20rpx;left: auto;right: 0;}

</style>