注册对接

component/login-register/login.js

@@ -115,7 +115,6 @@
						username: vm.account,
						password: vm.password
					}
					console.log(data)
					loginAPI.accessToken(data).then(function(oauthInfo) {
						sessionStorage.setItem("oauthInfo", JSON.stringify(oauthInfo));
						var data1 = {

component/login-register/register.js

@@ -1,60 +1,82 @@
(function() {
	Vue.component('register-form', {
		template: `<div><div class="container-fluid c-border-b">
				<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>
						<span class="backlogin" @click="gologin()">返回登录页</span>
					</div>
				</div>
			</div>
		<div class="container">
			<div class="ptb80">
				<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;">
						<div class="form-group">
							<input class="form-control" 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">
						</div>
						<div class="form-group">
							<input class="form-control" placeholder="请确认登录密码" v-model="Password" min-length="6" max-length="16">
						</div>
						<p class="c-909090" style="margin-top:-10px;">密码格式为6-16位，不允许有空格</p>
						<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" @click="register">完成注册并登录</button>
					</form>
				</div>
			</div>
		</div>
		</div>`,
		template: '<div><div class="container-fluid c-border-b">\
				<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>\
						<span class="backlogin" @click="gologin()">返回登录页</span>\
					</div>\
				</div>\
			</div>\
		<div class="container">\
			<div class="ptb80">\
				<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;">\
						<div class="form-group">\
							<select class="form-control" v-model="idCardType">\
								<option v-for="ct in idCardTypes" :value="ct.value">{{ct.name}}</option>\
							</select>\
						</div>\
						<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 form-password" type="password" placeholder="请输入登录密码" v-model="password" min-length="6" max-length="16">\
							<span class="type-change-icon" @click="changePwdType(event)"></span>\
						</div>\
						<div class="form-group">\
							<input class="form-control form-password" type="password" placeholder="请再次输入登录密码" v-model="rePassword" min-length="6" max-length="16">\
							<span class="type-change-icon" @click="changePwdType(event)"></span>\
						</div>\
						<p class="c-909090" style="margin-top:-10px;">密码格式为6-16位，不允许有空格</p>\
						<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>\
					</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 {
				IDCard: "",
				phone: "",
				Password: "",
				password: "",
				rePassword: "",
				captcha: "",
				toggle: false,
				toggle: true,
				idCardType:1,
				idCardTypes:[
					{value:1,name:'身份证'},
//					{value:2,name:'军官证'},
				],
				pwdType:false,
				codeMsg:"获取验证码",
			}
		},
		methods: {
			register: function() {
				var vm = this
				if(!isCardNo(vm.IDCard, vm.phone)) {
					return
				if(!vm.toggle){
					alert("协议未勾选！");
					return ;
				}
				if(!isCardNo(vm.IDCard)) {
					return ;
				}
				if(!vm.Password) {
					alert("登录密码不能为空！");
@@ -71,9 +93,7 @@
				//				location.href = "../login/login.html"
				//连接注册后台接口
				var data = {
					demographicId: vm.IDCard,
					codeType: vm.codeType,
					telephone: vm.tel,
					idCardNo: vm.IDCard,
					password: vm.password,
				}
				var params = {
@@ -83,7 +103,19 @@
				loginAPI.registe(params).then(function(res) {
					if(res.successFlg) {
						alert("注册成功");
						vm.login();
						sessionStorage.setItem("userAgent", JSON.stringify(res));
						var data1 = {
							grant_type: httpRequest.grant_type,
							client_id: httpRequest.client_id,
							idCardNo: vm.IDCard,
							password: vm.password,
						}
						loginAPI.accessToken(data1).then(function(oauthInfo) {
							sessionStorage.setItem("oauthInfo", JSON.stringify(oauthInfo));
						}).catch(function(e) {
							console.log("获取accessToken失败")
						})
						vm.getJueSeData(res);
					} else {
						alert(res.errorMsg);
					}
@@ -94,7 +126,41 @@
			},
			gologin: function() {
				location.href = "../../login/html/login.html"
			}
			},
			getCode: function(num){
				var vm=this;
				if(num<0){
					vm.codeMsg="获取验证码";
				}else{
					setTimeout(function(){
						num--;
						vm.codeMsg="("+num+"s)重新获取";
						vm.getCode(num);
					},1000)
				}
					
			},
			changePwdType:function(ev){
				var obj=$(ev.target);
				if(obj.hasClass('type-change-icon-active')){			
					obj.removeClass('type-change-icon-active');
					obj.parent().find('.form-password').attr('type','password')
				}else{
					obj.addClass('type-change-icon-active');
					obj.parent().find('.form-password').attr('type','text')
				}
			},
			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"
				})
			},
		},
		watch: {
			Password: function(newVal, oldVal) {
@@ -104,26 +170,27 @@
					this.Password = oldVal;
				}
			},
			idCardType:function(val){
				for(var i in this.idCardTypes){
					if(this.idCardTypes[i].value==val){
						$('.idCardType').attr('placeholder','请输入'+this.idCardTypes[i].name+'号码');
						break;
					}
				}
					
			}
		}
	});
	function isCardNo(card, phone) {
		// 身份证号码为15位或者18位，15位时全为数字，18位前17位为数字，最后一位是校验位，可能为数字或字符X
		var iscard = false,
			isphone = false
		var iscard = false;
		var reg1 = /(^\d{15}$)|(^\d{18}$)|(^\d{17}(\d|X|x)$)/;
		if(reg1.test(card) === false) {
			alert("身份证号输入不合法");
		} else {
			iscard = true
		}
		var reg2 = /0?(13|14|15|18|17)[0-9]{9}/;
		if(reg2.test(phone) === false) {
			alert("手机号码输入不合法");
		} else {
			isphone = true
		}
		return iscard && isphone
		return iscard;
	}
})()

page/register/html/register.html

@@ -36,6 +36,7 @@
		<script src="../../../api/http-request.js" type="text/javascript" charset="utf-8"></script>
		<script src="../../../plugins/artDialog/6.0.5/api/js/dialog-plus.js" type="text/javascript" charset="utf-8"></script>
		<script src="../../../component/login-register/register.js"></script>
		<script src="../../../api/patient/login-api.js" type="text/javascript" charset="utf-8"></script>
		<script src="../../../component/common/footer.js"></script>
		<script src="../register.js"></script>
	</body>

page/register/register.css

@@ -36,7 +36,8 @@ body {
	z-index: 2;
	box-shadow: 0 4px 8px 0 rgba(255, 255, 255, 0.2), 0 6px 20px 0 rgba(255, 255, 255, 0.19);
}
.type-change-icon{width: 40px;height: 34px;position: absolute;right: 0;top: 0;background: url(../../images/biyan_icon.png) no-repeat center;background-size: 25px 25px;}
.type-change-icon.type-change-icon-active{background-image: url(../../images/kanjian_icon.png);}
.main {
	margin: 0 auto;
	/*width: 1294px;*/
@@ -44,6 +45,9 @@ body {
	padding-top: 80px;
}
#getCode{width: 96px;height: 26px;text-align: center;line-height: 26px;z-index: 2;position: absolute;right: 4px;top: 4px;color: #fff;border-radius: 13px;background: #0bd8c9;}
.bgc-909090{background-color: #909090!important;}
.disabled{pointer-events: none;}
#head {
	background: #fff;
}
@@ -67,9 +71,9 @@ body {
.checkbox input[type=checkbox] {
	margin-top: 3px;
}
#registerForm {
	width: 800px;
	max-width: 800px;
	width: 100%;
	border: 1px solid #E3EDE8;
	border-radius: 10px;
	background-color: #fff;