sr-publicServicePlatform/component/login-register/login.js

(function() {
	Vue.component('login-form', {
		template: `<div><div class="container-fluid">
				<div class="container" id="head">
					<div class="ptb30 top-banner">
						<img src="../../../images/LOGO.png"/>
						<span class="qr-container">
							<img src="../../../images/qr_code.png" class="qr_code" />
							<p class="c-f12 text-center c-909090" style="padding-top:5px">下载APP</p>
						</span>
					</div>
				</div>
			</div>
			<div class="container-fluid chahua-bg">
				<div class="chahua container">
					<div class="loginForm fr" :class="{'loginForm-active':!registerFlag}">
						<div class="tabs-container no-borders mtb20 plr30">
							<ul class="nav nav-tabs c-border-b">
								<li :class="{'active': type==1}" @click="changeType(1)">
									<a style="padding:10px 0px;margin-left:35px;margin-right: 35px;font-size: 20px;">密码登录</a>
								</li>
								<li :class="{'active': type==2}" @click="changeType(2)">
									<a style="padding:10px 0px;margin-left:25px;margin-right: 25px;font-size: 20px;">验证码登录</a>
								</li>
							</ul>
							<div class="tab-content">
								<div class="tab-pane" :class="{'active': type==1}">
									<div class="panel-body  no-borders" style="padding: 0px;">
										<form id="form1" class="m-t" role="form" onsubmit="return false;">
											<div class="form-group">
												<input class="form-control" type="text"  v-model="account" placeholder="请输入身份证号或者手机号码">
											</div>
											<div class="form-group">
												<input class="form-control" type="password" v-model="password" placeholder="请输入密码">
											</div>
											<div class="text-right c-323232" style="margin-top:-10px;">忘记密码</div>
											<button type="submit" class="btn btn-theme block full-width m-b" @click="login">登 录</button>
											<a type="button" class="btn btn-default block full-width m-b"  @click="toggleRegister">注 册</a>
										</form>
									</div>
								</div>
								<div class="tab-pane" :class="{'active': type==2}">
									<div class="panel-body no-borders" style="padding: 0px;">
										<form id="form2" class="m-t" role="form" onsubmit="return false;">
											<div class="form-group">
												<input class="form-control" type="text" maxlength="11" v-model="mobile" placeholder="请输入手机号码">
											</div>
											<div class="form-group">
												<input class="form-control" type="text" v-model="imgcaptcha" placeholder="请输入图形验证码">
												<a class="getCaptcha" :class="{'disabled': countdown}" @click="getCaptcha">{{infoText}}</a>
											</div>
											<div class="form-group">
												<input class="form-control" type="text" v-model="captcha" placeholder="请输入短信验证码">
												<a class="getCaptcha" :class="{'disabled': countdown}" @click="getCaptcha">{{infoText}}</a>
											</div>
											<button type="submit" class="btn btn-theme block full-width m-b" @click="login">登 录</button>
											<a type="button" class="btn btn-default block full-width m-b"  @click="toggleRegister">注 册</a>
										</form>
									</div>
								</div>
							</div>
						</div>
					</div>
				</div>
			</div></div>`,
		props: [],
		data: function() {
			return {
				type: 1, //记录选择的登录方式，1-手机号登录，2-验证码登录
				account: '362321199703137824',
				mobile: '',
				password: '11111111',
				imgcaptcha: '',
				captcha: '',
				infoText: '获取验证码',
				countdown: false, //是否在倒计时
				codeType: 1,
				idCardNo: "350526199501142015",
				rPassword: 'a123123',
				confirmPassword: "a123123",
				toggle: true,
				registerFlag: false,
				maxLength: 18,
			}
		},
		methods: {
			changeType: function(val) {
				this.type = val;
			},
			getCaptcha: function() {
				//先校验手机号码是否正确
				var isMobile = isMobilePhone(this.mobile);
				if(!isMobile) {
					alert('请输入正确的手机号码！');
					return false;
				}
				setTimer(this);
				//发送请求
				//			sendToGetCaptcha(this);
			},
			login: function() {
				var vm = this
				if(this.type == 1) {
					if(!vm.account) {
						console.log("账号不能为空！");
						return false;
					}
					if(!vm.password) {
						console.log("登录密码不能为空！");
						return false;
					}
					var data = {
						grant_type: httpRequest.grant_type,
						client_id: httpRequest.client_id,
						username: vm.account,
						password: vm.password
					}
					loginAPI.accessToken(data).then(function(oauthInfo) {
						sessionStorage.setItem("oauthInfo", JSON.stringify(oauthInfo));
						var data1 = {
							userName: oauthInfo.user,
							accessToken: "token=" + oauthInfo.accessToken
						}
						loginAPI.getUserInfo(data1).then(function(res) {
								console.log("登录成功");
								loginedList = [res.telephone]
								sessionStorage.setItem("loginedList", JSON.stringify(loginedList));
								sessionStorage.setItem("userAgent", JSON.stringify(res));
								vm.getJueSeData(res);
							}),
							function error(xhr, type, errorThrown) {
								if(type == "timeout" || type == "abort" || type == "error") {
									console.log("账号或密码错误");
								}
							}
					}).catch(function(e) {
						console.log("账号或密码错误")
					})
				} else {
					if(!vm.mobile) {
						console.log("手机号不能为空！");
						return false;
					}
					if(!vm.imgcaptcha) {
						console.log("图形验证码不能为空！");
						return false;
					}
					if(!vm.captcha) {
						console.log("手机验证码不能为空！");
						return false;
					}
				}
			},
			getJueSeData: function(userAgent) {
				var vm = this;
				//获取居民权限接口
				loginAPI.findByUserId({
					userId: userAgent.id
				}).then(function(data) {
					sessionStorage.setItem("roleList", JSON.stringify(data.detailModelList)); //缓存角色列表
					//					location.href = "../../../home/html/home.html"//跳转到主页面
					location.href = "../../../page/mine/html/personal-info.html"
				})
			},

			toggleRegister: function() {
				location.href = "../../register/html/register.html"
			}
		},
		watch: {
			Password: function(newVal, oldVal) {
				var val = newVal.toString();
				var reg = /\s+/g; //去除空格
				if(reg.test(val)) {
					this.Password = oldVal;
				}
			},
			confirmPassword: function(newVal, oldVal) {
				var val = newVal.toString();
				var reg = /\s+/g; //去除空格
				if(reg.test(val)) {
					this.confirmPassword = oldVal;
				}
			},
			codeType: function(newVal) {
				var vm = this;
				var val = newVal.toString();
				if(val == 1) {
					$("#IDCard").attr("placeholder", "请输入身份证号")
					vm.maxLength = 18
				} else if(val == 2) {
					$("#IDCard").attr("placeholder", "请输入手机号码")
					vm.maxLength = 11
				}
			}
		}
	})

	//验证码定时
	function setTimer(vm) {
		var seconds = 59;
		vm.countdown = true;
		timer = setInterval(function() {
			if(seconds == 0) {
				clearInterval(timer);
				timer = null;
				seconds = 59;
				vm.infoText = "获取验证码";
				vm.countdown = false;
				return;
			}
			seconds--;
			vm.infoText = seconds + "s后重新获取";
		}, 1000)
	}

	function isCardNo(card, codeType) {
		var isidcard = false
		if(codeType == 1) { // 身份证号码为15位或者18位，15位时全为数字，18位前17位为数字，最后一位是校验位，可能为数字或字符X 
			var reg = /(^\d{15}$)|(^\d{18}$)|(^\d{17}(\d|X|x)$)/;
			if(!reg.test(card)) {
				alert("身份证号输入不合法");
			} else {
				isidcard = true
			}
		} else {
			var reg = /0?(13|14|15|18|17)[0-9]{9}/;
			if(!reg.test(card)) {
				alert("手机号码输入不合法");
			} else {
				isidcard = true
			}
		}
		return isidcard
	}

	function sendToGetCaptcha(vm) {
		var url = "common/captcha",
			params = {
				mobile: vm.mobile,
				type: 5,
				captchaToken: 5
			};
		httpRequest.post(url, {
			data: params
		}).then(function(res) {
			if(res.status == 200) {
				tip('发送成功', 'add');
			} else {
				tip('获取验证码失败');
			}
		});
	}

	function getPublicKey(vm) {
		var url = "login/public_key";
		httpRequest.post(url).then(function(res) {
			if(res.status) {
				var mod = res.data.modulus;
				var exp = res.data.exponent;
				key = RSAUtils.getKeyPair(exp, "", mod);
				if(key) {
					encryedPwd = RSAUtils.encryStr(key, vm.password);
					login({
						mobile: vm.mobile,
						password: encryedPwd,
						platform: 4
					})
				} else {
					tip("获取数据失败")
					$submit.removeAttr('disabled')
				}
			} else {
				tip(res.msg);
			}
		})
	}

	function login(data) {
		httpRequest.post('login/doctor', {
			data: data
		}).then(function(res) {
			if(res.status == 200) {
				var docInfo = res.data;
				localoginlStorage.setItem(httpRequest.agentName, JSON.stringify({
					id: docInfo.id,
					uid: docInfo.uid,
					token: docInfo.token,
					imei: localStorage.getItem('WLYY_IMEI'),
					platform: 4
				}));
				//将用户的角色信息单独存储在localstorage中
				localStorage.setItem("userRole", JSON.stringify(docInfo.userRole));
				window.location.href = "../home/html/index.html";
			} else {
				tip(res.msg);
			}
		});
	}

})()