exam-h5/pages/register/register.vue

<template>
	<view class="app">
		<view class="user">
			<view class="title">
				个人信息
			</view>
			<view class="item">
				<span>姓名：</span>
				<span class='addition'>
					<u-input type="text" placeholder="请输入姓名" v-model="personInfo.realName" />
				</span>
			</view>
			<view class="item">
				<span>手机号：</span>
				<span class='addition'>
					<u-input type="text" placeholder="请输入手机号" v-model="personInfo.phone" />
				</span>
			</view>
			<view class="item">
				<span>身份证号：</span>
				<span class='addition'>
					<u-input type="text" placeholder="请输入身份证号" v-model="personInfo.userName" />
				</span>
			</view>
			<view class="item">
				<span>电子邮箱(用于接收考试通知)：</span>
				<span class='addition'>
					<u-input type="text" placeholder="请输入电子邮箱" v-model="personInfo.email" />
				</span>
			</view>
			<view class="item">
				<span>通讯地址：</span>
				<span class='addition'>
					<u-input type="text" placeholder="请输入通讯地址" v-model="personInfo.address" />
				</span>
			</view>
		</view>
		<view class="user">
			<view class="title">
				教育背景
			</view>
			<view class="item">
				<span>最高学历：</span>
				<span class='addition'>
					<u-radio-group v-model="personInfo.education" @change="">
						<u-radio @change="" v-for="(item, index) in educationlist" :key="index" :name="item.label"
							style="padding: 0 15rpx;" :disabled="item.checked">
							{{item.name}}
						</u-radio>
					</u-radio-group>
				</span>
			</view>
			<view class="item">
				<span>毕业院校：</span>
				<span class='addition'>
					<u-input type="text" placeholder="请输入毕业院校" v-model="personInfo.graduateSchool" />
				</span>
			</view>
			<view class="item">
				<span>专业(如适用)：</span>
				<span class='addition'>
					<u-input type="text" placeholder="请输入专业" v-model="personInfo.major" />
				</span>
			</view>
		</view>
		<view class="user">
			<view class="title">
				报考信息
			</view>
			<view class="item">
				<span>报考类别(可选)：</span>
				<span class='addition'>
					<u-radio-group v-model="personInfo.regType" @change="">
						<u-radio @change="" v-for="(item, index) in  regTypelist" :key="index" :name="item.label"
							style="padding: 15rpx;" :disabled="item.checked">
							{{item.name}}
						</u-radio>
					</u-radio-group>
				</span>
			</view>
			<view class="item">
				<span>培训经历(如有)：</span>
				<span class='addition'>
					<view class="item" style="padding: 10rpx 0;">
						<span>机构名称：</span>
						<span class='addition'>
							<u-input type="text" placeholder="请输入机构名称" v-model="personInfo.trainInstitution" />
						</span>
					</view>
					<view class="item" style="padding: 10rpx 0;">
						<span>培训时间：</span>
						<span class='addition' @click="trainDateshow=true"
							style="margin-left:50rpx;display: inline-block;padding: 10rpx;background-color: #4C7BC9;border-radius: 10rpx;color: #fff;">
							选择时间区间
						</span>
						<view class="" v-if="personInfo.trainStartDate" style="padding: 16rpx 0;">
							{{personInfo.trainStartDate+'至'}}{{personInfo.trainEndDate}}
						</view>
					</view>
				</span>
			</view>
		</view>
		<view class="user">
			<view class="title">
				上传材料
			</view>
			<view class="item">
				<span>身份证正面：</span>
				<span class='addition'>
					<u-upload :action="action" :form-data="{
						type:'cardFrontUrl'
					}" :file-list="fileList" :max-count="1" @on-uploaded="uploadedcardFront"></u-upload>
				</span>
			</view>
			<view class="item">
				<span>身份证反面：</span>
				<span class='addition'>
					<u-upload :action="action" :form-data="{
						type:'cardBackUrl'
					}" :file-list="fileList" :max-count="1" @on-uploaded="uploadedcardBack"></u-upload>
				</span>
			</view>
			<view class="item" style="line-height: 50rpx;">
				<span>近期白底免冠证件照(1寸,JPG格式,&lt;20KB)：</span>
				<span class='addition'>
					<u-upload :action="action" :form-data="{
						type:'photoUrl'
					}" :file-list="fileList" :max-count="1" @on-uploaded="uploadedphoto"></u-upload>
				</span>
			</view>
			<view class="item" style="line-height: 50rpx;">
				<span>学历证明(毕业证或学信网截图)：</span>
				<span class='addition'>
					<u-upload :action="action" :form-data="{
						type:'certificateUrl'
					}" :file-list="fileList" :max-count="1" @on-uploaded="uploadedcertificate"></u-upload>
				</span>
			</view>
		</view>
		<view class="user">
			<view class="title">
				密码
			</view>
			<view class="item">
				<span>密码：</span>
				<span class='addition'>
					<u-input placeholder="请输入密码" v-model="personInfo.password" type="password" :password-icon="true" />
				</span>
			</view>
			<view class="item">
				<span>重复密码：</span>
				<span class='addition'>
					<u-input placeholder="请再次输入密码" v-model="personInfo.newpassword" type="password"
						:password-icon="true" />
				</span>
			</view>
			<!-- <view class="item">
						<view class="lefttext">
							验证码
						</view>
						<input class="righttext" style='left:23%' type="text" placeholder="" maxlength="6" v-model="verification" />
						<view class="obtaincode" :style="{'color':getCodeBtnColor}" @click.stop="getCode()">
							{{getCodeText}}
						</view>
					</view> -->
		</view>
		<view class="priceback">
			<view class="queren" @tap='register'>注册</view>
			<view class="switch" @tap='gologin'>
				已有账号,去登录
			</view>
		</view>
		<u-toast ref="uToast" />
		<u-mask :show="signatureshow" @click="signatureshow = false">
			<view style="position:absolute;bottom:0;height:900rpx;width:100%;background-color: #fff;"
				v-if='signatureshow'>
				<signature @userSignaturePictureUrl='userSignaturePicture' @click.native.stop
					style='background-color: #F4F5F7;width: 100%;height: 900rpx;'></signature>
			</view>
		</u-mask>
		<u-calendar v-model="trainDateshow" mode="range" @change="trainDatechange"></u-calendar>
		<u-toast ref="uToast" />
	</view>
</template>
<script>
	import {
		reg
	} from '@/api/register/index.js'
	import {
		getExamList,
		save
	} from '@/api/addexam/index.js'
	import baseurl from '@/api/baseurl.js'
	import signature from '@/components/signature/signature.vue'
	export default {
		components: {
			signature
		},
		data() {
			return {
				trainDateshow: false,
				signatureshow: false,
				userSignaturePictureUrl: null,
				examlist: [],
				educationlist: [{
						name: '初中',
						label: 1,
						checked: false,
					},
					{
						name: '高中/中专',
						label: 2,
						checked: false,
					},
					{
						name: '大专及以上',
						label: 3,
						checked: false,
					}
				],
				regTypelist: [{
						name: '普通医疗护理员',
						label: 1,
						checked: false,
					},
					{
						name: '老年医疗护理员',
						label: 2,
						checked: false,
					},
					{
						name: '孕产妇和新生儿医疗护理员',
						label: 3,
						checked: false,
					}
				],
				action: baseurl + '/exam/api/file/upload',
				fileList: [],
				personInfo: {
					password: undefined,
					newpassword: undefined,
					"address": "",
					"cardBack": "",
					"cardCopy": "", //	身份证正反面复印件
					"cardFront": "",
					"certificate": "",
					"education": 0,
					"email": "",
					"examId": "",
					startTime: undefined,
					endTime: undefined,
					startDate: undefined,
					endDate: undefined,
					"graduateSchool": "",
					"major": "",
					"phone": "",
					"photo": "",
					"physicalReport": "", //健康体检报告
					"realName": "",
					"regTime": "",
					"regType": 0,
					"signPicture": "",
					"title": "",
					"trainEndDate": "",
					"trainInstitution": "",
					"trainStartDate": "",
					"userId": "",
					"userName": "",
					examFee: undefined,
				},
				verification: '',
				getCodeText: '获取验证码', //获取验证码的文字
				getCodeBtnColor: "#4C7BC9", //获取验证码的color
				getCodeisWaiting: false, //判断是否在倒计时中
			};
		},
		onLoad() {},
		methods: {
			uploadedcertificate(res) {
				this.personInfo.certificate = res[0].response.data.url
			},
			uploadedphoto(res) {
				this.personInfo.photo = res[0].response.data.url
			},
			uploadedcardBack(res) {
				this.personInfo.cardBack = res[0].response.data.url
			},
			uploadedcardFront(res) {
				this.personInfo.cardFront = res[0].response.data.url
			},
			trainDatechange(e) {
				this.personInfo.trainEndDate = e.endDate
				this.personInfo.trainStartDate = e.startDate
			},
			//签名
			userSignaturePicture(data) {
				let that = this
				this.userSignaturePictureUrl = data
				this.signatureshow = false
				uni.uploadFile({
					url: baseurl + '/exam/api/file/upload',
					filePath: this.userSignaturePictureUrl,
					name: 'file',
					formData: {
						type: 'signPictureUrl'
					},
					timeout: 5000,
					success(res) {
						that.personInfo.signPicture = JSON.parse(res.data).data.url
					}
				})
			},
			//注册功能
			register() {
				if (this.personInfo.password !== this.personInfo.newpassword) {
					this.$refs.uToast.show({
						title: '密码输入不一致，请重新输入',
						type: 'error',
						duration: '1500'
					})
				} else if (!this.validateIDCard(this.personInfo.userName)) {
					this.$refs.uToast.show({
						title: '身份证错误，请重新输入',
						type: 'error',
						duration: '1500'
					})
				} else if (!this.validatePhone(this.personInfo.phone)) {
					this.$refs.uToast.show({
						title: '手机号错误，请重新输入',
						type: 'error',
						duration: '1500'
					})
				} else {
					reg(this.personInfo).then(res => {
						if (res.code == 0) {
							uni.setStorageSync("examh5token", res.data.token)
							uni.setStorageSync("examh5user", {
								id: res.data.id,
								phone: res.data.phone,
								name: res.data.realName,
								cardNo: res.data.userName
							})
							this.$refs.uToast.show({
								title: '注册成功，前往登录',
								type: 'success',
								duration: '1500'
							})
							setTimeout(e => {
								uni.reLaunch({
									url: `/pages/login/login?phone=${this.patientName}&password=${this.password}`
								})
							}, 1500)
						} else {
							this.$refs.uToast.show({
								title: res.msg,
								type: 'error'
							})
						}
					})
				}
			},
			// 校验手机号的通用方法
			validatePhone(phone) {
				// 简单的手机号正则（匹配11位数字，1开头）
				const reg = /^1[3-9]\d{9}$/;
				return reg.test(phone);
			},
			// 校验身份证号码的通用方法
			validateIDCard(idCard) {
				// 15位和18位身份证号码的正则表达式
				const reg15 = /^[1-9]\d{7}((0\d)|(1[0-2]))(([0|1|2]\d)|3[0-1])\d{3}$/;
				const reg18 = /^[1-9]\d{5}(18|19|20)\d{2}((0[1-9])|(1[0-2]))(([0-2][1-9])|10|20|30|31)\d{3}[0-9Xx]$/;
				// 校验长度
				if (idCard.length === 15) {
					return reg15.test(idCard);
				} else if (idCard.length === 18) {
					// 18位身份证需要校验最后一位校验码
					if (reg18.test(idCard)) {
						return this.checkIDCardLastCode(idCard);
					}
					return false;
				}
				return false;
			},
			// 校验18位身份证最后一位校验码
			checkIDCardLastCode(idCard) {
				if (idCard.length !== 18) return false;
				// 加权因子
				const weight = [7, 9, 10, 5, 8, 4, 2, 1, 6, 3, 7, 9, 10, 5, 8, 4, 2];
				// 校验码
				const checkCode = ['1', '0', 'X', '9', '8', '7', '6', '5', '4', '3', '2'];
				let sum = 0;
				for (let i = 0; i < 17; i++) {
					sum += parseInt(idCard[i]) * weight[i];
				}
				const mod = sum % 11;
				return idCard[17].toUpperCase() === checkCode[mod];
			},
			//跳转登录页
			gologin() {
				uni.reLaunch({
					url: `/pages/login/login`
				})
			},
			//点击获取验证码
			getCode() {
				uni.hideKeyboard() //隐藏已经显示的软键盘，如果软键盘没有显示则不做任何操作。
				if (this.getCodeisWaiting) { //是否在倒计时中
					return;
				}
				if (!(/^1(3|4|5|6|7|8|9)\d{9}$/.test(this.phone))) { //校验手机号码是否有误
					uni.showToast({
						title: '请填写正确手机号码',
						icon: "none"
					});
					return false;
				}
				this.getCodeText = "发送中..." //发送验证码
				this.getCodeisWaiting = true;
				this.getCodeBtnColor = "rgba(138,139,133,1)" //追加样式，修改颜色
				//示例用定时器模拟请求效果
				//setTimeout(()用于在指定的毫秒数后调用函数或计算表达式
				setTimeout(() => {
					uni.showToast({
						title: '验证码已发送',
						icon: "none"
					}); //弹出提示框
					// this.code = '1234'; //发送验证码，进行填入	示例默认1234，生产中请删除这一句。
					this.setTimer(); //调用定时器方法
				}, 1000)
			},
			//获取验证码的倒计时 setTimer： 需要每隔一段时间执行一件事的的时候就需要使用SetTimer函数
			setTimer() {
				let holdTime = 60; //定义变量并赋值
				this.getCodeText = "重新获取(60)"
				//setInterval（）是一个实现定时调用的函数，可按照指定的周期（以毫秒计）来调用函数或计算表达式。
				//setInterval方法会不停地调用函数，直到 clearInterval被调用或窗口被关闭。
				this.Timer = setInterval(() => {
					if (holdTime <= 0) {
						this.getCodeisWaiting = false;
						this.getCodeBtnColor = "#4C7BC9";
						this.getCodeText = "获取验证码"
						clearInterval(this.Timer); //清除该函数
						return; //返回前面
					}
					this.getCodeText = "重新获取(" + holdTime + ")"
					holdTime--;
				}, 1000)
			},
			doReg() {
				// uni.hideKeyboard() //隐藏已经显示的软键盘，如果软键盘没有显示则不做任何操作。
				// //模板示例部分验证规则
				// if (!(/^1(3|4|5|6|7|8|9)\d{9}$/.test(this.phoneNumber))) { //校验手机号码
				// 	uni.showToast({
				// 		title: '请填写正确手机号码',
				// 		icon: "none"
				// 	});
				// 	return false;
				// }
				// //示例验证码，实际使用中应为请求服务器比对验证码是否正确。
				// if (this.code != 1234) {
				// 	uni.showToast({
				// 		title: '验证码不正确',
				// 		icon: "none"
				// 	});
				// 	return false;
				// }
				// uni.showLoading({
				// 	title: '提交中...'
				// })
				// //模板示例把用户注册信息储存在本地，实际使用中请替换为上传服务器。
				// setTimeout(() => {
				// 	uni.getStorage({
				// 		key: 'UserList',
				// 		success: (res) => {
				// 			//增加记录，密码md5
				// 			res.data.push({
				// 				username: this.phoneNumber,
				// 				passwd: md5(this.passwd)
				// 			})
				// 			uni.setStorage({
				// 				key: 'UserList',
				// 				data: res.data,
				// 				success: function() {
				// 					uni.hideLoading()
				// 					uni.showToast({
				// 						title: '注册成功',
				// 						icon: "success"
				// 					});
				// 					setTimeout(function() {
				// 						uni.navigateBack();
				// 					}, 1000)
				// 				}
				// 			});
				// 		},
				// 		fail: (e) => {
				// 			uni.hideLoading()
				// 			//新建UserList
				// 			uni.setStorage({
				// 				key: 'UserList',
				// 				data: [{
				// 					username: this.phoneNumber,
				// 					passwd: md5(this.passwd)
				// 				}],
				// 				success: function() {
				// 					uni.hideLoading()
				// 					uni.showToast({
				// 						title: '注册成功',
				// 						icon: "success"
				// 					});
				// 					setTimeout(function() {
				// 						uni.navigateBack();
				// 					}, 1000)
				// 				},
				// 				fail: function(e) {
				// 				}
				// 			});
				// 		}
				// 	});
				// }, 1000)
			},
		},
	}
</script>

<style lang="scss">
	@import "./register.scss";
</style>