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="captcha" placeholder="请输入短信验证码">
												<a class="getCaptcha" v-text="codeMsg" :class="{\'disabled bgc-909090\':codeMsg!==\'获取验证码\'}" @click="sendMsg">获取验证码</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: '17805985317',
				password: '11111111',
				codeType: 1,
				captcha:'',
				idCardNo: "",
				rPassword: '',
				confirmPassword: "",
				toggle: true,
				registerFlag: false,
				maxLength: 18,
				codeMsg:"获取验证码",
				spaceTime:60,//验证码间隔时间
			}
		},
		methods: {
			changeType: function(val) {
				this.type = val;
			},
			getCode: function(num){
				var vm=this;
				if(num<0){
					vm.codeMsg="获取验证码";
				}else{
					setTimeout(function(){
						num--;
						vm.codeMsg="("+num+"s)重新获取";
						vm.getCode(num);
					},1000)
				}
			},
			login: function() {
				var vm = this
				if(vm.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;
					}
					var isMobile = isCardNo(vm.mobile,2);
					if(!isMobile) {
						alert('请输入正确的手机号码！');
						return false;
					}
					if(!vm.captcha) {
						console.log("手机验证码不能为空！");
						return false;
					}
					vm.verifyCodeExpire(2);
				}
			},
			sendMsg:function(){
				var vm=this;
				var isMobile = isCardNo(vm.mobile,2);
				if(!isMobile) {
					alert('请输入正确的手机号码！');
					return false;
				}
				if(vm.codeMsg==="获取验证码"){
					vm.codeMsg="正在获取验证码";
				}
				vm.verifyCodeExpire(1);
			},
			verifyCodeExpire:function(num){//num：1表示验证短信发送间隔问题，2表示时效性
				var vm=this;
				loginAPI.verifyCodeExpire({
					client_id: httpRequest.client_id,
					username: vm.mobile
				}).then(function(res){
					console.log(res)
					if(num===1){
						if(res.nextRequestTime<=0) vm.verifyCode();//获取验证码
						else{
							console.log(vm.codeMsg || (vm.spaceTime+"秒内只能获取一次验证码"));
							vm.codeMsg=vm.spaceTime+"秒内只能获取一次验证码";
						}
					}
					if(num===2){
						if(res.expiresIn<=0){
							alert("验证码已失效，请重新获取验证码！");
						}else{
							var data = {
//								grant_type: httpRequest.grant_type,
								client_id: httpRequest.client_id,
								username: vm.mobile,
								verify_code: vm.captcha
							}
							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.error&&console.error(e);
								console.log("服务器繁忙，请稍后再试")
							})
						}
						
					}
				}).catch(function(err){
					console.log(err)
					alert("获取短信验证码失败")
					vm.codeMsg="获取验证码";
					verifyCodeFlag=false;
				})
			},
			verifyCode :function(){
				var vm=this;
				if(vm.codeMsg!=="获取验证码"&&vm.codeMsg!=="正在获取验证码"){
					console.log(vm.codeMsg || (vm.spaceTime+"秒内只能获取一次验证码"));
					vm.codeMsg="正在获取验证码";
					return ;
				}
				if(vm.codeMsg==="获取验证码"){
					vm.codeMsg="正在获取验证码";
				}
				var data = {
					username:vm.mobile,
					client_id: httpRequest.client_id,
				}
				loginAPI.verifyCode(data).then(function(res) {
					if(res.expiresIn==600) vm.getCode(vm.spaceTime);
					else{
						vm.codeMsg="获取验证码";
						console.log(res.errorMsg);
					}
					
				}).catch(function(err) {
					console.error(err);
					vm.codeMsg="获取验证码";
				})
			},
			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"//跳转到主页面
					if(history.length>=2){
						history.back();
					}else{						
						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 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
	}

})()