family-education/education_uni/subpkg/teacher/authentication/teacher_authentication_add.vue

<template>
	<view class="auth-Container" style="background-color: #f0f0f0;">
		<uni-forms ref="baseForm" :modelValue="baseFormData" labelWidth="75px" :rules="rules" validateTrigger="bind">
			<uni-forms-item label="真实姓名" name="name" required>
				<uni-easyinput v-model="baseFormData.name" placeholder="请输入姓名" maxlength="6" trim="both" />
			</uni-forms-item>
			<uni-forms-item label="手机号" required>
				<button class="getPhone" open-type="getPhoneNumber" type="primary" size="mini"
					@getphonenumber="getPhoneNumber">获取手机号</button>
			</uni-forms-item>
			<uni-forms-item label="微信号" name="weixinId" required>
				<uni-easyinput v-model="baseFormData.weixinId" placeholder="微信号(不便接听电话时微信沟通)" maxlength="25"
					trim="both" />
			</uni-forms-item>
			<uni-forms-item label="英文名" name="englishName">
				<uni-easyinput v-model="baseFormData.englishName" placeholder="请输入你的英文名" maxlength="25" trim="both" />
			</uni-forms-item>
			<uni-forms-item label="身份证号" name="idCard" required>
				<uni-easyinput v-model="baseFormData.idCard" type="idcard" placeholder="请输入你的身份证号" />
			</uni-forms-item>
			<uni-forms-item label="性别" name="sex" required>
				<uni-data-checkbox v-model="baseFormData.sex" :localdata="sexs" />
			</uni-forms-item>
			<uni-forms-item label="身份" name="identify" required>
				<uni-data-checkbox v-model="baseFormData.identify" :localdata="identifies" />
			</uni-forms-item>
			<uni-forms-item label="身份证照片" required>
				<text style="color: blue;">(说明：需要能看清楚证件号码、日期及头像)</text>
				<uni-file-picker fileMediatype="image"  :sizeType="sizeType" v-model="idCardFrontByte" :fileExtname="fileExtname" limit="1" title="身份证正面" @select="selectIdCardFront" @delete="deletePhoto" />
				<uni-file-picker fileMediatype="image"  :sizeType="sizeType" v-model="idCardBackByte" :fileExtname="fileExtname"  limit="1" title="身份证背面" @select="selcetIdCardBack" @delete="deletePhoto" />
			</uni-forms-item>
			<uni-forms-item label="学生/毕业证" required>
				<text style="color: blue;">(已毕业的需要上传毕业证)</text>
				<uni-file-picker fileMediatype="image"  :sizeType="sizeType" v-model="diplomaPhotoByte" :fileExtname="fileExtname" limit="1" @select="selectDiplomaPhoto" @delete="deletePhoto" />
			</uni-forms-item>
			<uni-forms-item label="头像" required>
				<text style="color: blue;">(说明：只能上传证件照，上传其他照片审核不予通过)</text>
				<uni-file-picker fileMediatype="image"  :sizeType="sizeType" v-model="profilePhotoByte" :fileExtname="fileExtname" limit="1" @select="selectProfilePhoto" @delete="deletePhoto" />
			</uni-forms-item>
			<uni-forms-item label="毕业/就读学校" name="school" required>
				<uni-easyinput v-model="baseFormData.school" placeholder="请输入学校全称" maxlength="30" trim="both" />
			</uni-forms-item>
			<uni-forms-item label="所学专业" name="major" required>
				<uni-easyinput v-model="baseFormData.major" placeholder="请输入专业名称" maxlength="20" trim="both" />
			</uni-forms-item>
			<uni-forms-item label="学历" name="education" required>
				<uni-data-select v-model="baseFormData.education" :localdata="educations" />
			</uni-forms-item>
			<uni-forms-item label="籍贯" name="nativePlace" required>
				<uni-easyinput v-model="baseFormData.nativePlace" placeholder="xx省xx市xx区" maxlength="30" trim="both" />
			</uni-forms-item>
		</uni-forms>
		<view class="authenticationBtnWrapper">
			<button class="authenticationBtn" type="primary" @click="submit">{{buttonMessage}}</button>
		</view>
	</view>
</template>

<script>
	import { mapState, mapMutations } from 'vuex'
	export default {
		computed: {
			...mapState('m_user', ['authentication']),
		},
		data() {
			return {
				fileExtname: 'png,jpg',
				sizeType: ['compressed'],
				idCardFrontByte: [{
					url: '',
					extname: '',
					name: ''
				}],
				idCardBackByte: [{
					url: '',
					extname: '',
					name: ''
				}],
				profilePhotoByte: [{
					url: '',
					extname: '',
					name: ''
				}],
				diplomaPhotoByte: [{
					url: '',
					extname: '',
					name: ''
				}],
				buttonMessage: '申请认证',
				isLoading: false, // 节流阀
				baseFormData: {
					name: '',
					weixinId: '',
					idCard: '',
					sex: '男',
					identify: '专职老师',
					school: '',
					major: '',
					education: '',
					nativePlace: '',
					education: '本科在读'
				},
				sexs: [{
					text: '男',
					value: '男'
				}, {
					text: '女',
					value: '女'
				}],
				// 单选老师身份
				identifies: [{
					text: '专职老师',
					value: '专职老师'
				}, {
					text: '在校大学生',
					value: '在校大学生'
				}],
				educations: [{
					value: '专科在读',
					text: '专科在读'
				}, {
					value: '专科毕业',
					text: '专科毕业'
				}, {
					value: '本科在读',
					text: '本科在读'
				}, {
					value: '本科毕业',
					text: '本科毕业'
				}, {
					value: '硕士在读',
					text: '硕士在读'
				}, {
					value: '硕士毕业',
					text: '硕士毕业'
				}, {
					value: '博士在读',
					text: '博士在读'
				}, {
					value: '博士毕业',
					text: '博士毕业'
				}],
				rules: {
					name: {
						rules: [{
							required: true,
							errorMessage: '请输入姓名',
						}]
					},
					weixinId: {
						rules: [{
							required: true,
							errorMessage: '请输入微信号',
						}, {
							errorMessage: '请输入正确的微信号',
							pattern: '^[a-zA-Z][a-zA-Z\\d_-]{5,19}$',
						}]
					},
					idCard: {
						rules: [{
							required: true,
							errorMessage: '请输入身份证号',
						}, {
							errorMessage: '请输入正确的身份证号',
							pattern: '^[1-9]\\d{5}(18|19|([23]\\d))\\d{2}((0[1-9])|(1[0-2]))(([0-2][1-9])|10|20|30|31)\\d{3}[0-9Xx]$',
						}]
					},
					school: {
						rules: [{
							required: true,
							errorMessage: '请输入学校全称',
						}]
					},
					major: {
						rules: [{
							required: true,
							errorMessage: '请输入专业名称',
						}]
					},
					nativePlace: {
						rules: [{
								required: true,
								errorMessage: '请输入籍贯',
							},
							{
								pattern: '[\\u4e00-\\u9fa5]+[\\u7701]{1}[\\u4e00-\\u9fa5]+[\\u5E02]{1}[\\u4e00-\\u9fa5]+[\\u53BF|\\u533A]{1}',
								errorMessage: '请输入正确的格式：xx省xx市xx区/县',
							}
						]
					}
				}
			};
		},
		onLoad(option) {
			if (option.item) {
				this.baseFormData = JSON.parse(decodeURIComponent(option.item))
				this.buttonMessage = '修改认证'
				this.getPhotoes()
			} else {
				this.idCardFrontByte = [],
				this.idCardBackByte = [],
				this.profilePhotoByte = [],
				this.diplomaPhotoByte = [],
				this.buttonMessage = '申请认证'
			}
		},
		methods: {
			...mapMutations('m_user', ['updateAuthentication']),
			// 获取图片
			async getPhotoes() {
				this.diplomaPhotoByte[0].url = this.baseFormData.diplomaPhoto
				this.diplomaPhotoByte[0].name = 'diplomaPhoto'
				this.idCardBackByte[0].url = this.baseFormData.idCardBack
				this.idCardBackByte[0].name = 'idCardBack'
				this.profilePhotoByte[0].url = this.baseFormData.profilePhoto
				this.profilePhotoByte[0].name = 'profilePhoto'
				this.idCardFrontByte[0].url = this.baseFormData.idCardFront
				this.idCardFrontByte[0].name = 'idCardFront'
			},
			// 手机号
			async getPhoneNumber(e) {
				if (e.detail.code === undefined) return uni.$showMsg('获取手机号失败！')
				const query = {
					code: e.detail.code
				}
				const {
					data: result
				} = await uni.$http.get('/ucenter/mini-program-openid-uid/wxGetPhone', query)
				if (result.code === 20000) {
					this.baseFormData.phone = result.data.phone
					return uni.$showMsg('获取手机成功！')
				}
			},
			deletePhoto(e) {
				const photoName = e.tempFile.name
				this.baseFormData[photoName] = ''
			},
			// 上传身份证正面
			selectIdCardFront(e) {
				this.getUploadPaths(e, 'this.baseFormData.idCardFront')
			},
			// 上传身份证背面
			selcetIdCardBack(e) {
				this.getUploadPaths(e, 'this.baseFormData.idCardBack')
			},
			// 上传毕业/学生证
			selectDiplomaPhoto(e) {
				this.getUploadPaths(e, 'this.baseFormData.diplomaPhoto')
			},
			// 上传头像
			selectProfilePhoto(e) {
				this.getUploadPaths(e, 'this.baseFormData.profilePhoto')
			},
			getUploadPaths(e, item) {
				if (e.tempFiles[0].size > 2000000) {
					return uni.$showMsg('图片大小最多2M,超出限制')
				}
				var that = this
				wx.uploadFile({
					url: uni.$http.baseUrl + '/file/uploading',
					filePath: e.tempFilePaths[0],
					name: 'file',
					header: {
						token: uni.getStorageSync('token')
					},
					success(res) {
						const result = JSON.parse(res.data)
						const item1 = item.substring(item.lastIndexOf('.') + 1)
						that.baseFormData[item1] = result.data.url
					},
					fail(res) {
						if (res.errno === 1001) {
							uni.$showMsg('只能选择.jpg或者.png的图片')
						}
					}
				})
			},
			submit() {
				if (this.isLoading) {
					return uni.$showMsg('操作过快,请耐心等待…')
				}
				this.isLoading = true
				this.$refs.baseForm.validate().then(res => {
					if (this.baseFormData.phone === undefined) return uni.$showMsg('手机号未获取！')
					if (this.baseFormData.idCardFront === undefined || this.baseFormData.idCardFront === '') return uni.$showMsg('身份证正面未上传！')
					if (this.baseFormData.idCardBack === undefined || this.baseFormData.idCardBack === '') return uni.$showMsg('身份证背面未上传！')
					if (this.baseFormData.diplomaPhoto === undefined || this.baseFormData.diplomaPhoto === '') return uni.$showMsg('学生/毕业证未上传！')
					if (this.baseFormData.profilePhoto === undefined || this.baseFormData.profilePhoto === '') return uni.$showMsg('头像未上传！')
					if (this.buttonMessage === '修改认证') {
						const certificationUrl = '/education/teacher-certifications/updateCertificationInfo'
						this.sendRequest(certificationUrl, 2)
						
					} else {
						const certificationUrl = '/education/teacher-certifications/saveCertificationInfo'
						this.sendRequest(certificationUrl, 1)
					}
				}).catch(err => {

					this.isLoading = false
				})
				this.isLoading = false
			},
			sendRequest(certificationUrl, count) {
				uni.request({
					url: uni.$http.baseUrl + certificationUrl,
					data: this.baseFormData,
					header: {
						token: uni.getStorageSync('token')
					},
					method: 'POST',
					success: res => {
						this.isLoading = false
						uni.$showMsg(res.data.message)
						this.updateAuthentication('审核中')
						setTimeout(() => {
							uni.navigateBack({
								delta: count
							})
						}, 1000)
					}
				})
			}
		}
	}
</script>

<!-- 设置页面背景 -->
<style lang="scss">
	page{
		height: 100%;
		//background-color: #FFF2CC;
	}
</style>

<style lang="scss" scoped>
.auth-Container{
	width: 96%;
	height: 100%;
	padding-left: 20rpx;
}

.warning {
	color: red
}
// 获取手机号按钮背景样式
.getPhone{
	background-color: #35b882;
}
// 申请认证按钮样式
.authenticationBtnWrapper{
	height: 140rpx;
}
.authenticationBtn{
	width: 260rpx;
	border-radius: 50rpx;
	margin-bottom: 40rpx;
	background-color: #35b882;
}
</style>