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="手机号" name="phone" required>
				<uni-row>
					<uni-col :span="14">
						<uni-easyinput v-model="baseFormData.phone" placeholder="请输入手机号" :disabled="disabledPhone" trim="both" />
					</uni-col>
					<uni-col :span="8" :offset="2">
						<view class="phoneClass">
							<button class="getPhone" open-type="getPhoneNumber" type="primary" size="mini"
								@getphonenumber="getPhoneNumber">一键获取</button>
						</view>
					</uni-col>
				</uni-row>
			</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" :imageStyles="listStyle" v-model="idCardFrontByte" :fileExtname="fileExtname" limit="1" title="身份证正面" @select="selectPhoto('idCardFront', $event)" @delete="deletePhoto('idCardFront', $event)" />
				<uni-file-picker fileMediatype="image"  :sizeType="sizeType" :imageStyles="listStyle" v-model="idCardBackByte" :fileExtname="fileExtname"  limit="1" title="身份证背面" @select="selectPhoto('idCardBack', $event)" @delete="deletePhoto('idCardBack', $event)" />
			</uni-forms-item>
			<uni-forms-item label="学生/毕业证" required>
				<text style="color: blue;">(已毕业的需要上传毕业证)</text>
				<uni-file-picker fileMediatype="image"  :sizeType="sizeType" :imageStyles="listStyle" v-model="diplomaPhotoByte" :fileExtname="fileExtname" limit="1" @select="selectPhoto('diplomaPhoto', $event)" @delete="deletePhoto('diplomaPhoto', $event)" />
			</uni-forms-item>
			<uni-forms-item label="头像" required>
				<text style="color: blue;">(说明：只能上传证件照，上传其他照片审核不予通过)</text>
				<uni-file-picker fileMediatype="image"  :sizeType="sizeType" :imageStyles="listStyle" v-model="profilePhotoByte" :fileExtname="fileExtname" limit="1" @select="selectPhoto('profilePhoto', $event)" @delete="deletePhoto('profilePhoto', $event)" />
			</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>
		
		<!-- <canvas canvas-id="idCardFront" class="idCardFrontClass" :style="{width:idCardFrontWidth, height:idCardFrontHeight}"></canvas>
		<canvas canvas-id="idCardBack" class="idCardBackClass" :style="{width:idCardBackWidth, height:idCardBackHeight}"></canvas>
		<canvas canvas-id="diplomaPhoto" class="diplomaPhotoClass" :style="{width:diplomaPhotoWidth, height:diplomaPhotoHeight}"></canvas>
		<canvas canvas-id="profilePhoto" class="profilePhotoClass" :style="{width:profilePhotoWidth, height:profilePhotoHeight}"></canvas> -->
		<view class="authenticationBtnWrapper">
			<button class="authenticationBtn" type="primary" @click="submit">{{buttonMessage}}</button>
		</view>
		
		<!-- 裁剪图片的插件 -->
		<ksp-cropper mode="free" :width="1024" :height="1024" :maxWidth="1024" :maxHeight="1024" :url="idCardFrontUrl" @cancel="urloncancel('idCardFront')" @ok="urlonok('idCardFront', $event)"></ksp-cropper>
		<ksp-cropper mode="free" :width="1024" :height="1024" :maxWidth="1024" :maxHeight="1024" :url="idCardBackUrl" @cancel="urloncancel('idCardBack')" @ok="urlonok('idCardBack', $event)"></ksp-cropper>
		<ksp-cropper mode="free" :width="1024" :height="1024" :maxWidth="1600" :maxHeight="1600" :url="diplomaPhotoUrl" @cancel="urloncancel('diplomaPhoto')" @ok="urlonok('diplomaPhoto', $event)"></ksp-cropper>
		<ksp-cropper mode="fixed" :width="160" :height="160" :maxWidth="1024" :maxHeight="1024" :url="profilePhotoUrl" @cancel="urloncancel('profilePhoto')" @ok="urlonok('profilePhoto', $event)"></ksp-cropper>
	</view>
</template>

<script>
	import { mapState, mapMutations } from 'vuex'
	export default {
		computed: {
			...mapState('m_user', ['authentication']),
		},
		data() {
			return {
				disabledPhone: true,
				listStyle: {
					"height": 100,	// 边框高度
					"width": 100,	// 边框宽度
					"border":{ // 如果为 Boolean 值，可以控制边框显示与否
						"color":"#ccc",		// 边框颜色
						"width":"1px",		// 边框宽度
						"style":"solid", 	// 边框样式
					}
				},
				idCardFrontUrl: '',
				idCardBackUrl: '',
				diplomaPhotoUrl: '',
				profilePhotoUrl: '',
				// idCardFrontWidth: 0,
				// idCardFrontHeight: 0,
				// idCardBackWidth: 0,
				// idCardBackHeight: 0,
				// diplomaPhotoWidth: 0,
				// diplomaPhotoHeight: 0,
				// profilePhotoWidth: 0,
				// profilePhotoHeight: 0,
				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: '',
					phone: '',
					idCard: '',
					sex: '男',
					identify: '专职老师',
					school: '',
					major: '',
					education: '',
					nativePlace: '',
					education: '本科在读',
					idCardFront: '',
					idCardBack: '',
					diplomaPhoto: '',
					profilePhoto: ''
				},
				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}$',
						}]
					},
					phone: {
						rules: [{
							required: true,
							errorMessage: '请输入手机号',
						}, {
							errorMessage: '请输入正确的手机号',
							pattern: '^1(3[0-9]|4[01456879]|5[0-35-9]|6[2567]|7[0-8]|8[0-9]|9[0-35-9])\\d{8}$',
						}]
					},
					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.data.phone === '' || result.data.phone === null) {
					this.disabledPhone = false
					return uni.$showMsg('手机号获取失败,请手动输入')
				} else {
					this.baseFormData.phone = result.data.phone
					return uni.$showMsg('获取手机成功！')
				}
			},
			deletePhoto(item,e) {
				// console.log("删除",item)
				this.baseFormData[item] = ''
			},
			// 上传身份证正面
			selectPhoto(item,e) {
				// console.log('上传',item)
				switch(item) {
					case 'idCardFront':
						this.idCardFrontByte = []
						this.idCardFrontUrl = e.tempFilePaths[0]
						break
					case 'idCardBack':
						this.idCardBackByte = []
						this.idCardBackUrl = e.tempFilePaths[0]
						break
					case 'diplomaPhoto':
						this.diplomaPhotoByte = []
						this.diplomaPhotoUrl = e.tempFilePaths[0]
						break
					case 'profilePhoto':
						this.profilePhotoByte = []
						this.profilePhotoUrl = e.tempFilePaths[0]
						break
				}
			},
			urlonok(item,ev) {
				// console.log('裁剪',item)
				const evPath = ev.path
				switch(item) {
					case 'idCardFront':
						this.idCardFrontByte = {
							url: evPath
						}
						this.idCardFrontUrl = ''
						this.upload(evPath, 'idCardFront')
						break
					case 'idCardBack':
						this.idCardBackByte = {
							url: evPath
						}
						this.idCardBackUrl = ''
						this.upload(evPath, 'idCardBack')
						break
					case 'diplomaPhoto':
						this.diplomaPhotoByte = {
							url: evPath
						}
						this.diplomaPhotoUrl = ''
						this.upload(evPath, 'diplomaPhoto')
						break
					case 'profilePhoto':
						this.profilePhotoByte = {
							url: evPath
						}
						this.profilePhotoUrl = ''
						this.upload(evPath, 'profilePhoto')
						break
				}
			},
			urloncancel(item) {
				// console.log('取消',item)
				switch(item) {
					case 'idCardFront':
						this.idCardFrontByte = null
						// url设置为空，隐藏控件
						this.idCardFrontUrl = "";
						break
					case 'idCardBack':
						this.idCardBackByte = null
						this.idCardBackUrl = "";
						break
					case 'diplomaPhoto':
						this.diplomaPhotoByte = null
						this.diplomaPhotoUrl = "";
						break
					case 'profilePhoto':
						this.profilePhotoByte = null
						this.profilePhotoUrl = "";
						break
				}
			},
			upload(path, item) {
				wx.uploadFile({
					url: uni.$http.baseUrl + '/file/uploading',
					filePath: path,
					name: 'file',
					header: {
						token: uni.getStorageSync('token')
					},
					success: res => {
						const result = JSON.parse(res.data)
						this.baseFormData[item] = result.data.url
					},
					fail: res => {
						if (res.errno === 1001) {
							uni.$showMsg('只能选择.jpg或者.png的图片')
						}
					}
				})
			},
			// getUploadPaths(e, item) {
			// 	if (e.tempFiles[0] === undefined) return false
			// 	var that = this
			// 	// 大于1M压缩
			// 	if (e.tempFiles[0].size > 1000 * 1000) {
			// 		uni.showLoading({
			// 			title: '正在压缩中…',
			// 			mask:true
			// 		})
					
			// 		// 获取图片信息
			// 		wx.getImageInfo({
			// 			src: e.tempFilePaths[0],
			// 			success: (imageInfo) => {
			// 				let arr = item.split('.')
			// 				let CanvasContext = wx.createCanvasContext(arr[2], that)
			// 				let ratio = 1
			// 				let canvasWidth = imageInfo.width
			// 				let canvasHeight = imageInfo.height
			// 				let quality = 0.1	// 图片质量
			// 				while(canvasWidth > 1000 || canvasHeight > 1000) {
			// 					// 比例取整
			// 					canvasWidth = Math.trunc(imageInfo.width / ratio)
			// 					canvasHeight = Math.trunc(imageInfo.height / ratio)
			// 					ratio += 0.1
			// 				}
			// 				quality = (quality + (ratio/10)).toFixed(1)
			// 				if (quality > 1) {
			// 					quality = 1
			// 				}
			// 				// 设置canvas尺寸
			// 				switch(item) {
			// 					case 'this.baseFormData.idCardFront':
			// 						that.idCardFrontWidth = canvasWidth + 'px'
			// 						that.idCardFrontHeight = canvasHeight + 'px'
			// 						break;
			// 					case 'this.baseFormData.idCardBack':
			// 						that.idCardBackWidth = canvasWidth + 'px'
			// 						that.idCardBackHeight = canvasHeight + 'px'
			// 						break;
			// 					case 'this.baseFormData.diplomaPhoto':
			// 						that.diplomaPhotoWidth = canvasWidth + 'px'
			// 						that.diplomaPhotoHeight = canvasHeight + 'px'
			// 						break;
			// 					case 'this.baseFormData.profilePhoto':
			// 						that.profilePhotoWidth = canvasWidth + 'px'
			// 						that.profilePhotoHeight = canvasHeight + 'px'
			// 						break;
			// 				}
			// 				// 将图片填充到canvas上
			// 				CanvasContext.drawImage(e.tempFilePaths[0], 0, 0, canvasWidth, canvasHeight)
			// 				CanvasContext.draw()
							
			// 				// 下载canvas图片
			// 				setTimeout(() => {
			// 					wx.canvasToTempFilePath({
			// 						canvasId: arr[2],
			// 						width: canvasWidth,
			// 						height: canvasHeight,
			// 						destWidth: canvasWidth,
			// 						destHeight: canvasHeight,
			// 						fileType: 'jpg,png',
			// 						quality: quality,
			// 						success: path => {
			// 							uni.hideLoading()
			// 							that.upload(path.tempFilePath, item)
			// 						},
			// 						fail: e => {
			// 							uni.hideLoading()
			// 							uni.$showMsg('上传失败')
			// 						}
			// 					}, that)
			// 				}, 1000)
			// 			}
			// 		})
			// 	} else {
			// 		that.upload(e.tempFilePaths[0], item)
			// 	}
			// },
			submit() {
				if (this.isLoading) {
					return uni.$showMsg('操作过快,请耐心等待…')
				}
				this.isLoading = true
				this.$refs.baseForm.validate().then(res => {
					if (this.baseFormData.phone === undefined || this.baseFormData.phone === '') 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.baseFormData.education === undefined || this.baseFormData.education === '') 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>
	.idCardFrontClass {
		position: absolute;
		left:-8000px;
		top:-8000px;
	}
	
	.idCardBackClass {
		position: absolute;
		left:-9000px;
		top:-9000px;
	}
	
	.diplomaPhotoClass {
		position: absolute;
		left:-7000px;
		top:-7000px;
	}
	
	.profilePhotoClass {
		position: absolute;
		left:-6000px;
		top:-6000px;
	}
	
.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;
}

.phoneClass {
		margin-top: 6rpx;
	}
</style>