jp-xpgj-GA-file/src/projects/home/views/User/Login.vue

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

		<div class="mui-content">
			<div class="mui-content-padded">
				<div class="vongi-login-logo">
					<img src="~$project/assets/img/logo_xiaopengguanjia.png" />
					<h2>小鹏管家</h2>
				</div>
				<form class="mui-input-group vongi-login-form">
					<div class="mui-input-row">
						<input name="name" v-model="subForm.name" type="text" class="mui-input-clear" placeholder="请填写您的姓名">
					</div>
					<div class="mui-input-row">
						<input name="phone" v-model="subForm.phone" type="text" class="mui-input-clear" placeholder="请输入手机号码">
					</div>
					<div class="mui-input-row">
						<input v-model="verifyCode" type="text" class="mui-input-clear" placeholder="请输入验证码">
						<a @click="findByNameAndPhone" v-html="sendMsgWz"></a>
					</div>
				</form>
				<form class="mui-input-group vongi-xieyi">
					<div class="mui-input-row mui-radio mui-left">
						<label class="mui-h6">我已阅读并同意<span class="color4fc5f7">《用户使用协议》</span></label>
						<input name="radio1" type="radio">
					</div>
				</form>

			</div>
			<div class="vongi-btn vongi-login-btn">
				<button class="mui-btn mui-btn-primary" @click="nextStep">
					登录
				</button>
				<button type="button" class="mui-btn mui-btn-primary mui-btn-outlined">
					申请加入
				</button>
			</div>
		</div>

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

<script>
	import * as API_Person from '@/apis/person'
	import * as API_Common from '@/apis/common'
	import Common from '$project/components/Common.vue'
	import Loading from '$project/components/Loading.vue'
	import TopHeader from '$project/components/TopHeader.vue'
	import {
		mapGetters,
		mapMutations
	} from 'vuex'
	import {
		checkPhone,
	} from '$project/utils'
	import * as types from '$project/store/mutation-types'
	export default {
		name: 'Home',
		components: {
			Common,
			Loading,
			TopHeader
		},
		data() {
			return {
				pageTitle: '登录账号',

				subForm: {
					name: '',
					phone: '',
				},
				personId: '',
				verifyCode: '',
				sendMsgWz: '发送验证码',

				isLoading: false,
			}
		},
		created() {

		},
		methods: {
			//表单检测
			checkForm() {
				let phoneResult = checkPhone(this.subForm.phone);
				if (!this.subForm.name) {
					mui.toast('请输入您的姓名');
					return false;
				} else if (typeof phoneResult == 'string') {
					mui.toast(phoneResult);
					return false;
				} else {
					return true;
				}
			},
			//根据用户名和手机号查询人员信息
			findByNameAndPhone() {
				if (this.checkForm()) {
					this.isLoading = true;
					API_Person.findByNameAndPhone(this.subForm).then(response => {

						this.personId = response;
						this.isLoading = false;

						this.sendMsg();
					}).catch(error => {
						this.isLoading = false;
						mui.toast(error);
					})
				}
			},
			//发送验证码
			sendMsg() {
				this.isLoading = true;
				API_Common.sendMsg({
					personId: this.personId
				}).then(response => {
					//倒计时
					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 = true;
						_this.sendMsgWz = '发送验证码';
						clearInterval(_this.timer)
					}
				}, 1000)
			},
			//下一步
			nextStep() {
				if (!this.verifyCode || !this.personId) {
					mui.toast('请获取并填写验证码');
				} else {
					this.isLoading = true;
					API_Person.validateCode({
						personId: this.personId,
						verifyCode: this.verifyCode,
						openId: this.openId
					}).then(response => {

						this.set_token(response);
						//上传头像					
						this.$router.push({
							name: 'UploadPhoto',
							query: {
								personId: this.personId,
								project: this.$route.query.project
							}
						})

						this.isLoading = false;
					}).catch(error => {
						this.isLoading = false;
						mui.toast(error);
					})
				}
			},
			asynCallBack() {

			},
			...mapMutations({
				set_token: types.SET_TOKEN,
			})
		},
		mounted() {
			document.body.style.backgroundColor = '#fff';
		},
		destroyed() {

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

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