验证码登录对接，注册页面对接

api/patient/login-api.js

@@ -2,19 +2,33 @@
    var loginAPI = {
        //获取accessToken
        accessToken: function(data) {
			return httpRequest.post("/authentication/oauth/login",{data: data})
			return httpRequest.post("authentication/oauth/login",{data: data})
		},
        //查询用户信息
        getUserInfo: function(data){
        	return httpRequest.get("/basic/api/v1.0/users/"+data.userName,{data: data.accessToken})
        	return httpRequest.get("basic/api/v1.0/users/"+data.userName,{data: data.accessToken})
        },
        //获取居民权限接口
		findByUserId:function(data){
			return httpRequest.get("/basic/api/v1.0/roles/findByUserId",{data: data})
			return httpRequest.get("basic/api/v1.0/roles/findByUserId",{data: data})
		},
		registe:function(data){
			return httpRequest.post("/basic/api/v1.0/usersOfApp",{data: data})
       }
			return httpRequest.post("basic/api/v1.0/usersOfApp",{data: data})
      	},
      	sendMsg:function(data){
      		return httpRequest.msgHttpGet("api/v1.0/admin/msg/sendMsg",{data: data})
      	},
      	validate:function(data){
      		return httpRequest.msgHttpGet("api/v1.0/admin/msg/validate",{data: data})
      	},
      	verifyCode:function(data){
      		return httpRequest.post("authentication/oauth/verifyCode",{data: data})
      	},
      	verifyCodeExpire:function(data){
      		return httpRequest.post("authentication/oauth/verifyCodeExpire",{data: data})
      	}
      	
		
    }
    exports.loginAPI = loginAPI;

component/login-register/login.js

@@ -45,13 +45,9 @@
											<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>
												<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>
@@ -68,39 +64,39 @@
			return {
				type: 1, //记录选择的登录方式，1-手机号登录，2-验证码登录
				account: '362321199703137824',
				mobile: '',
				mobile: '17805985317',
				password: '11111111',
				imgcaptcha: '',
				captcha: '',
				infoText: '获取验证码',
				countdown: false, //是否在倒计时
				codeType: 1,
				idCardNo: "350526199501142015",
				rPassword: 'a123123',
				confirmPassword: "a123123",
				captcha:'',
				idCardNo: "",
				rPassword: '',
				confirmPassword: "",
				toggle: true,
				registerFlag: false,
				maxLength: 18,
				codeMsg:"获取验证码",
				spaceTime:60,//验证码间隔时间
			}
		},
		methods: {
			changeType: function(val) {
				this.type = val;
			},
			getCaptcha: function() {
				//先校验手机号码是否正确
				var isMobile = isMobilePhone(this.mobile);
				if(!isMobile) {
					alert('请输入正确的手机号码！');
					return false;
			getCode: function(num){
				var vm=this;
				if(num<0){
					vm.codeMsg="获取验证码";
				}else{
					setTimeout(function(){
						num--;
						vm.codeMsg="("+num+"s)重新获取";
						vm.getCode(num);
					},1000)
				}
				setTimer(this);
				//发送请求
				//			sendToGetCaptcha(this);
			},
			login: function() {
				var vm = this
				if(this.type == 1) {
				if(vm.type == 1) {
					if(!vm.account) {
						console.log("账号不能为空！");
						return false;
@@ -141,15 +137,111 @@
						console.log("手机号不能为空！");
						return false;
					}
					if(!vm.imgcaptcha) {
						console.log("图形验证码不能为空！");
					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;
@@ -159,7 +251,11 @@
				}).then(function(data) {
					sessionStorage.setItem("roleList", JSON.stringify(data.detailModelList)); //缓存角色列表
					//					location.href = "../../../home/html/home.html"//跳转到主页面
					location.href = "../../../page/mine/html/personal-info.html"
					if(history.length>=2){
						history.back();
					}else{						
						location.href = "../../../page/mine/html/personal-info.html"
					}
				})
			},
@@ -196,24 +292,6 @@
		}
	})
	//验证码定时
	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 
@@ -234,68 +312,4 @@
		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);
			}
		});
	}
})()

component/login-register/register.js

@@ -13,7 +13,7 @@
				</div>\
			</div>\
		<div class="container">\
			<div class="ptb80">\
			<div class="ptb40">\
				<div id="registerForm" class="main">\
					<div class="ptb10 c-border-b c-f20">注册</div>\
					<form id="form" class="m-t" role="form" onsubmit="return false;" style="width:310px;">\
@@ -25,6 +25,13 @@
						<div class="form-group">\
							<input class="form-control idCardType" type="text" maxlength="18" placeholder="请输入身份证号码" v-model="IDCard" id="IDCard">\
						</div>\
						<div class="form-group">\
							<input class="form-control" placeholder="请输入手机号码" v-model="phone" type="text" length="11">\
						</div>\
						<div class="form-group">\
							<input class="form-control" placeholder="请确认验证码" v-model="captcha">\
							<span id="getCode" @click="sendMsg" v-text="codeMsg" :class="{\'disabled bgc-909090\':codeMsg!==\'获取验证码\'}">获取验证码</span>\
						</div>\
						<div class="form-group">\
							<input class="form-control form-password" type="password" placeholder="请输入登录密码" v-model="password" min-length="6" max-length="16">\
							<span class="type-change-icon" @click="changePwdType(event)"></span>\
@@ -37,19 +44,12 @@
						<div class="checkbox">\
							<label><input type="checkbox" v-model="toggle"> 阅读并接受<a href="#" target="_blank">《健康之路用户协议》</a>及<a href="#" target="_blank">《健康之路隐私保护声明》</a></label>\
						</div>\
						<button type="submit" class="btn btn-theme block full-width m-b" :class="{\'disabled\' : !toggle}" @click="register">完成注册并登录</button>\
						<button type="submit" class="btn btn-theme block full-width m-b" :class="{\'disabled\' : !toggle}" @click="validate">完成注册并登录</button>\
					</form>\
				</div>\
			</div>\
		</div>\
		</div>',
//		<div class="form-group">\
//			<input class="form-control" placeholder="请输入手机号码" v-model="phone" type="text" length="11">\
//		</div>\
//		<div class="form-group">\
//			<input class="form-control" placeholder="请确认验证码" v-model="captcha">\
//			<span id="getCode" @click="getCode(60)" v-text="codeMsg" :class="{\'disabled bgc-909090\':codeMsg!==\'获取验证码\'}">获取验证码</span>\
//		</div>\
		props: [],
		data: function() {
			return {
@@ -66,34 +66,39 @@
				],
				pwdType:false,
				codeMsg:"获取验证码",
				spaceTime:60,//验证码间隔时间
			}
		},
		methods: {
			register: function() {
				var vm = this
				if(!vm.toggle){
					alert("协议未勾选！");
					return ;
				}
				if(!isCardNo(vm.IDCard)) {
					return ;
					return false;
				}
				if(!vm.Password) {
					alert("登录密码不能为空！");
				if(!vm.phone) {
					console.log("手机号码不能为空！");
					return false;
				}
				if(!vm.captcha) {
					alert("验证码不能为空！");
					console.log("验证码不能为空！");
					return false;
				}
				if(!vm.password) {
					console.log("登录密码不能为空！");
					return false;
				}
				if(vm.password!==vm.rePassword) {
					console.log("两次密码输入不一致！");
					return false;
				}
				if(!vm.toggle) {
					alert("未确认是否阅读并接受条款");
					console.log("未确认是否阅读并接受条款");
					return false;
				}
				//				location.href = "../login/login.html"
				//连接注册后台接口
				var data = {
					idCardNo: vm.IDCard,
					demographicId: vm.IDCard,
					telephone: vm.phone,
					password: vm.password,
				}
				var params = {
@@ -102,26 +107,26 @@
				}
				loginAPI.registe(params).then(function(res) {
					if(res.successFlg) {
						alert("注册成功");
						sessionStorage.setItem("userAgent", JSON.stringify(res));
						console.log("注册成功");
						sessionStorage.setItem("userAgent", JSON.stringify(res.obj));
						var data1 = {
							grant_type: httpRequest.grant_type,
							client_id: httpRequest.client_id,
							idCardNo: vm.IDCard,
							username: vm.phone,
							password: vm.password,
						}
						loginAPI.accessToken(data1).then(function(oauthInfo) {
							sessionStorage.setItem("oauthInfo", JSON.stringify(oauthInfo));
							vm.getJueSeData(res.obj);
						}).catch(function(e) {
							console.log("获取accessToken失败")
						})
						vm.getJueSeData(res);
					} else {
						alert(res.errorMsg);
						console.log(res.errorMsg);
					}
				}).catch(function(err) {
					alert(err.errorMsg);
					console.log(err);
				})
			},
			gologin: function() {
@@ -138,7 +143,55 @@
						vm.getCode(num);
					},1000)
				}
			},
			sendMsg:function(){
				var vm=this;
				var isMobile = isMobilePhone(this.mobile);
				if(!isMobile) {
					alert('请输入正确的手机号码！');
					return false;
				}
				if(vm.codeMsg!=="获取验证码"){
					console.log(vm.codeMsg || (vm.spaceTime+"秒内只能获取一次验证码"));
					vm.codeMsg="正在获取验证码";
					return ;
				}
				if(vm.codeMsg==="获取验证码"){
					vm.codeMsg="正在获取验证码";
				}
				var data = {
					tel:vm.phone,
					appId: httpRequest.client_id,
				}
				loginAPI.sendMsg(data).then(function(res) {
					if(res.successFlg) vm.getCode(vm.spaceTime);
					else{
						vm.codeMsg="获取验证码";
						console.log(res.errorMsg);
					}
					
				}).catch(function(err) {
					console.error(err);
					vm.codeMsg="获取验证码";
				})
			},
			validate : function(){
				var vm=this;
				var data = {
					tel:vm.phone,
					appId: httpRequest.client_id,
					verificationCode:vm.captcha
				}
				loginAPI.validate(data).then(function(res) {
					console.log(res)
					if(res.successFlg){
						vm.register();
					}else{				
						console.log(res.errorMsg);
					}
				}).catch(function(err) {
					console.log(err.errorMsg);
				})
			},
			changePwdType:function(ev){
				var obj=$(ev.target);
@@ -181,12 +234,20 @@
			}
		}
	});
	function isCardNo(card, phone) {
	function isMobilePhone(phone) {  
	    var myreg=/^[1][3,4,5,7,8][0-9]{9}$/;  
	    if (!myreg.test(phone.val())) {  
	        return false;  
	    } else {  
	        return true;  
	    }
  	}  
	function isCardNo(card) {
		// 身份证号码为15位或者18位，15位时全为数字，18位前17位为数字，最后一位是校验位，可能为数字或字符X
		var iscard = false;
		var reg1 = /(^\d{15}$)|(^\d{18}$)|(^\d{17}(\d|X|x)$)/;
		if(reg1.test(card) === false) {
			alert("身份证号输入不合法");
			console.log("身份证号输入不合法");
		} else {
			iscard = true
		}

page/register/register.css

@@ -77,7 +77,7 @@ body {
	border: 1px solid #E3EDE8;
	border-radius: 10px;
	background-color: #fff;
	padding: 20px 40px;
	padding: 5px 40px;
}
.btn-theme {
@@ -108,8 +108,8 @@ a:active {
	padding-left: 80px;
}
.ptb80 {
	padding: 80px 0;
.ptb40 {
	padding: 40px 0;
}
option {
@@ -141,5 +141,5 @@ option {
form {
	width: 310px;
	margin: 0 auto;
	padding:50px 0;
	padding:40px 0 20px;
}