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>
			</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: 'UserLogin',
		components: {
			Common,
			Loading,
			TopHeader
		},
		data() {
			return {
				pageTitle: '登录账号',

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

				isLoading: false,

				project: this.$route.query.project,
			}
		},
		created() {
			//设置默认值,退出帐号后进入登录页面，输入框中保留上次登录时的姓名和手机号信息；
			if (this.person_temp) {
				this.subForm.name = this.person_temp.name;
				this.subForm.phone = this.person_temp.phone;
			}
		},
		methods: {
			//表单检测
			checkForm() {
				let phoneResult = checkPhone(this.subForm.phone);
				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.isLoading = false;

						this.personId = response;
						this.sendMsg();

					}).catch(error => {
						this.isLoading = false;
						mui.toast(error);
					})
				}
			},
			//发送验证码
			sendMsg() {
				this.isLoading = true;
				API_Common.sendMsg({
					personId: this.personId,
					telephone: this.subForm.phone,
				}).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) {
					mui.toast('请获取并填写验证码');
				} else {
					this.isLoading = true;
					API_Person.validateCode({
						personId: this.personId,
						verifyCode: this.verifyCode,
						openId: this.openId,
						telephone: this.subForm.phone,
					}).then(response => {
						if (response.token) {
							this.set_token(response.token);
							if (response.personInfo.faceImageUrl) {
								//跳转到项目主页上去
								window.location.href = '../' + this.project + '/#/master';
							} else {
								//上传头像					
								this.$router.push({
									name: 'UserUploadPhoto',
									query: {
										personId: this.personId,
										project: this.project
									}
								})
							}
						} else {
							//注册
							this.confirmRegister();
						}

						this.isLoading = false;
					}).catch(error => {
						this.isLoading = false;
						mui.toast(error);
					})
				}
			},
			//注册
			confirmRegister() {
				var _this = this;
				var btnArray = ['否', '是'];
				mui.confirm('当前用户不存在，是否立即注册？', '提示', btnArray, function(e) {
					if (e.index == 1) {
						_this.$router.push({
							name: 'RegisterHome',
							query: {
								telephone: _this.subForm.phone,
								project: this.$route.query.project
							}
						})
					}
				})
			},
			//注册
			register() {
				this.$router.push({
					name: 'RegisterHome',
					query: {}
				})
			},
			asynCallBack() {

			},
			...mapMutations({
				set_token: types.SET_TOKEN,
			})
		},
		mounted() {
			document.body.style.backgroundColor = '#fff';
		},
		destroyed() {
			document.body.style.backgroundColor = '';
		},
		computed: {
			...mapGetters({
				openId: 'wx_openid',
				token: 'token',
				person_data: 'person_data',
				person_popedom: 'person_popedom',
				person_temp: 'person_temp'
			})
		}
	}
</script>

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