123456789101112131415161718192021222324252627282930313233343536373839404142434445464748495051525354555657585960616263646566676869707172737475767778798081828384858687888990919293949596979899100101102103104105106107108109110111112113114115116117118119120121122123124125126127128129130131132133134135136137138139140141142143144145146147148149150151152153154155156157158159160161162163164165166167168169170171172173174175176177178179180181182183184185186187188189 |
- <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>
|