jp-xpgj-GA-file/src/projects/pension/views/Master/User/RelationPersonRegister.vue

<template>
	<div>
		<common ref="common" @asynCallBack="asynCallBack" :projectCheck="false"></common>
		<top-header :pageTitle="pageTitle"></top-header>

		<div class="mui-content vongi-qqhm">
			<div class="mui-content-padded vongi-qingjiadt vongi-editme">
				<h5>第一步：验证手机号</h5>
				<form class="mui-input-group">
					<div class="mui-input-row">
						<label>姓名<i class="colorfe616c">*</i></label>
						<input v-model="subForm.name" type="text" class="mui-input-clear" placeholder="请输入姓名">
					</div>
					<div class="mui-input-row">
						<label>手机号码<i class="colorfe616c">*</i></label>
						<input v-model="subForm.telephone" type="text" class="mui-input-clear" placeholder="请输入手机号码">
					</div>
					<div class="mui-input-row vongi-yzm">
						<input v-model="subForm.verifyCode" type="text" class="mui-input-clear" placeholder="请输入验证码">
						<a @click="doSendMsg" class="mui-pull-right" v-text="sendMsgWz"></a>
					</div>
				</form>
			</div>
		</div>
		<div class="fyy-footer">
			<div class="bindfyy-btn" @click="nextStep"><button type="submit" class="mui-btn mui-btn-pink ">下一步</button></div>
		</div>

		<loading :visible="isLoading"></loading>
	</div>
</template>

<script>
	import * as API_Common from '$project/apis/common'
	import Common from '$project/components/Common.vue'
	import Loading from '$project/components/Loading.vue'
	import TopHeader from '$project/components/TopHeader.vue'
	import NavMenu from '@/components/NavMenu.vue'
	import {
		mapGetters,
		mapMutations
	} from 'vuex'
	import {
		checkPhone,
	} from '$project/utils'
	import * as types from '$project/store/mutation-types'
	import * as WxJsApi from '$project/utils/wxJsApi'
	export default {
		name: 'MasterUserRelationPersonRegister',
		components: {
			Common,
			Loading,
			TopHeader,
			NavMenu
		},
		data() {
			return {
				isLoading: false,

				pageTitle: '关联长者',

				id: this.$route.query.id,
				subForm: {
					name: '',
					telephone: '',
					verifyCode: '',
				},
				sendMsgWz: '发送验证码',
				isSendMsg: false,
			}
		},
		created() {
			if (this.person_data) {
				//如果用户存在直接调用扫码功能
				this.subForm.name = this.person_data.name;
				this.subForm.telephone = this.person_data.phone;
				//调用扫一扫
				WxJsApi.getWxConfig().then(res => {
					this.scanCode();
				});
			}
		},
		methods: {
			//微信扫二维码
			scanCode() {
				WxJsApi.scanQRCode(2);
			},
			//发送验证码
			sendMsg() {
				if (!this.isSendMsg) {
					this.isLoading = true;
					API_Common.sendMsg({
						personId: 0,
						telephone: this.subForm.telephone,
					}).then(response => {
						//倒计时
						this.isSendMsg = true;
						this.msgTimeInterval();
						this.isLoading = false;
					}).catch(error => {
						this.isLoading = false;
						mui.toast(error);
					})
				}
			},
			//倒计时
			msgTimeInterval() {
				var time = 60;
				var _this = this;
				this.timer = setInterval(() => {
					if (time > 0) {
						_this.sendMsgWz = time-- + '秒';
					} else {
						_this.isSendMsg = false;
						_this.sendMsgWz = '发送验证码';
						clearInterval(_this.timer)
					}
				}, 1000)
			},
			//表单检测
			checkForm() {
				let phoneResult = checkPhone(this.subForm.telephone);
				if (typeof phoneResult == 'string') {
					mui.toast(phoneResult);
					return false;
				} else {
					return true;
				}
			},
			//根据用户名和手机号查询人员信息
			doSendMsg() {
				if (this.checkForm()) {
					this.sendMsg();
				}
			},
			//下一步
			nextStep() {
				if (!this.subForm.verifyCode) {
					mui.toast('请获取并填写验证码');
				} else {
					this.isLoading = true;
					API_Common.validateCode({
						personId: 0,
						verifyCode: this.subForm.verifyCode,
						openId: this.openId,
						telephone: this.subForm.telephone,
					}).then(response => {

						this.set_old_relation_form_data(this.subForm);
						this.$router.push({
							name: 'MasterUserRelationPerson',
							id: this.id
						})

						this.isLoading = false;
					}).catch(error => {
						this.isLoading = false;
						mui.toast(error);
					})
				}
			},
			asynCallBack() {},
			...mapMutations({
				set_old_relation_form_data: types.SET_OLD_RELATION_FORM_DATA,
			})
		},
		mounted() {

		},
		destroyed() {

		},
		computed: {
			...mapGetters({
				openId: 'wx_openid',
				token: 'token',
				person_data: 'person_data',
				person_popedom: 'person_popedom',
				old_relation_form_data: 'old_relation_form_data'
			})
		}
	}
</script>

<style scoped src="$project/assets/css/pension.css"></style>
<style scoped src="$project/assets/css/xpwyfyy.css"></style>
<style src="$project/assets/css/iconfont.css"></style>
<style>
</style>