|
|
@ -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;
|
|
|
}
|
|
|
|
|
|
})()
|
zyz