|
|
@ -1,83 +1,116 @@
|
|
|
(function() {
|
|
|
Vue.component('login-form', {
|
|
|
template: `<div><div id="head">
|
|
|
<div class="hlogo ptb15">
|
|
|
<img src="../../images/LOGO.png" />
|
|
|
<span class="fr" style="margin-top:-5px;">
|
|
|
<img src="../../images/qr_code.png" width="65" height="65" class="box-border" />
|
|
|
<p class="c-f12 text-center"><b>下载APP</b></p>
|
|
|
</span>
|
|
|
template: `<div><div class="container-fluid">
|
|
|
<div class="container" id="head">
|
|
|
<div class="ptb15 top-banner">
|
|
|
<img src="../../images/LOGO.png" class="hlogo" />
|
|
|
<span class="qr-container">
|
|
|
<img src="../../images/qr_code.png" class="qr_code" />
|
|
|
<p class="c-f12 text-center">下载APP</p>
|
|
|
</span>
|
|
|
</div>
|
|
|
</div>
|
|
|
</div>
|
|
|
</div>
|
|
|
<div class="mainbox">
|
|
|
<div id="main">
|
|
|
<img src="../../images/chahua.png" />
|
|
|
<div id="loginForm" class="fr">
|
|
|
<div class="tabs-container no-borders mtb30 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" 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" href="../register/register.html">注 册</a>
|
|
|
</form>
|
|
|
<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>
|
|
|
<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" href="../register/register.html">注 册</a>
|
|
|
</form>
|
|
|
<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 class="registerForm fr" :class="{'registerForm-active':registerFlag}">
|
|
|
<div class="ptb10 plr30 c-border-b c-f26">注册<span class="fr c-909090 c-f14 fhdl" @click="toggleRegister">返回登录</span></div>
|
|
|
<form id="form" class="m-t plr30" role="form" onsubmit="return false;">
|
|
|
<div class="form-group">
|
|
|
<select class="form-control codeType" v-model="codeType">
|
|
|
<option value="1">身份证</option>
|
|
|
<option value="2">手机</option>
|
|
|
</select>
|
|
|
</div>
|
|
|
<div class="form-group">
|
|
|
<input class="form-control" type="text" :maxlength="maxLength" placeholder="请输入身份证号" v-model="idCardNo" id="IDCard">
|
|
|
</div>
|
|
|
<div class="form-group">
|
|
|
<input class="form-control" placeholder="请输入登录密码" v-model="rPassword" type="password" minlength="6" maxlength="16">
|
|
|
</div>
|
|
|
<div class="form-group">
|
|
|
<input class="form-control" placeholder="请确认登录密码" v-model="confirmPassword" type="password" minlength="6" maxlength="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" :class="{'disabled':!toggle}" @click="register">完成注册并登录</button>
|
|
|
</form>
|
|
|
</div>
|
|
|
</div>
|
|
|
</div>
|
|
|
</div>
|
|
|
<div id="foot">
|
|
|
<p>主办方：上饶市卫生与计划生育委员会 技术支持：健康之路（中国）信息技术有限公司 备案号登记号：赣ICP98273877号-1</p>
|
|
|
<p>上饶市卫生信息中心 Copyright <span class="glyphicon glyphicon-copyright-mark"></span> 2009-2017 All Rights Reserved</p>
|
|
|
</div>
|
|
|
</div>`,
|
|
|
<div id="foot">
|
|
|
<p>主办方：上饶市卫生与计划生育委员会 技术支持：健康之路（中国）信息技术有限公司 备案号登记号：赣ICP98273877号-1</p>
|
|
|
<p>上饶市卫生信息中心 Copyright <span class="glyphicon glyphicon-copyright-mark"></span> 2009-2017 All Rights Reserved</p>
|
|
|
</div></div>`,
|
|
|
props: [],
|
|
|
data: function() {
|
|
|
return {
|
|
|
type: 1, //记录选择的登录方式，1-手机号登录，2-验证码登录
|
|
|
account: '',
|
|
|
account: '17500000001',
|
|
|
mobile: '',
|
|
|
password: '',
|
|
|
password: '123456',
|
|
|
imgcaptcha: '',
|
|
|
captcha: '',
|
|
|
infoText: '获取验证码',
|
|
|
countdown: false //是否在倒计时
|
|
|
countdown: false ,//是否在倒计时
|
|
|
codeType: 1,
|
|
|
idCardNo: "350526199501142015",
|
|
|
rPassword: 'a123123',
|
|
|
confirmPassword: "a123123",
|
|
|
toggle: true,
|
|
|
registerFlag:false,
|
|
|
maxLength:18,
|
|
|
}
|
|
|
},
|
|
|
methods: {
|
|
|
@ -99,34 +132,151 @@
|
|
|
var vm = this
|
|
|
if(this.type == 1) {
|
|
|
if(!vm.account) {
|
|
|
alert("账号不能为空！");
|
|
|
console.log("账号不能为空！");
|
|
|
return false;
|
|
|
}
|
|
|
if(!vm.password) {
|
|
|
alert("登录密码不能为空！");
|
|
|
console.log("登录密码不能为空！");
|
|
|
return false;
|
|
|
}
|
|
|
// getPublicKey(this);
|
|
|
console.log(httpRequest)
|
|
|
var data={
|
|
|
grant_type: httpRequest.grant_type,
|
|
|
client_id: httpRequest.client_id,
|
|
|
username: vm.account,
|
|
|
password: vm.password
|
|
|
}
|
|
|
console.log(data)
|
|
|
loginAPI.accessToken(data).then(function(oauthInfo) {
|
|
|
storage.setItem("oauthInfo", JSON.stringify(oauthInfo));
|
|
|
var data1={
|
|
|
userName:oauthInfo.user,
|
|
|
accessToken: oauthInfo.accessToken
|
|
|
}
|
|
|
loginAPI.getUserInfo(data1).then(function(res) {
|
|
|
console.log("登录成功");
|
|
|
loginedList = [res.telephone]
|
|
|
storage.setItem("loginedList", JSON.stringify(loginedList));
|
|
|
storage.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) {
|
|
|
alert("手机号不能为空！");
|
|
|
console.log("手机号不能为空！");
|
|
|
return false;
|
|
|
}
|
|
|
if(!vm.imgcaptcha) {
|
|
|
alert("图形验证码不能为空！");
|
|
|
console.log("图形验证码不能为空！");
|
|
|
return false;
|
|
|
}
|
|
|
if(!vm.captcha) {
|
|
|
alert("手机验证码不能为空！");
|
|
|
console.log("手机验证码不能为空！");
|
|
|
return false;
|
|
|
}
|
|
|
// login({
|
|
|
// mobile: this.mobile,
|
|
|
// captcha: this.captcha,
|
|
|
// platform: 4
|
|
|
// })
|
|
|
}
|
|
|
},
|
|
|
getJueSeData: function(userAgent) {
|
|
|
var vm = this;
|
|
|
//获取居民权限接口
|
|
|
loginAPI.findByUserId({
|
|
|
userId: userAgent.id
|
|
|
}).then(function(data) {
|
|
|
storage.setItem("roleList",JSON.stringify(data.detailModelList));//缓存角色列表
|
|
|
// app.openWebviewExtras("../../home/html/home.html");//跳转到主页面
|
|
|
})
|
|
|
},
|
|
|
register: function() {
|
|
|
var vm = this
|
|
|
if(!isCardNo(vm.idCardNo, vm.codeType)) {
|
|
|
return
|
|
|
}
|
|
|
if(!vm.rPassword) {
|
|
|
alert("登录密码不能为空！");
|
|
|
return false;
|
|
|
}
|
|
|
if(!vm.confirmPassword) {
|
|
|
alert("确认密码不能为空！");
|
|
|
return false;
|
|
|
}
|
|
|
if(vm.rPassword.length < 6 && vm.rPassword.length > 16) {
|
|
|
alert("登录密码需6-16位");
|
|
|
return false;
|
|
|
}
|
|
|
if(vm.confirmPassword.length < 6 && vm.confirmPassword.length > 16) {
|
|
|
alert("确认密码需6-16位");
|
|
|
return false;
|
|
|
}
|
|
|
if(vm.rPassword != vm.confirmPassword) {
|
|
|
alert("新密码和确认密码必须一致");
|
|
|
return false;
|
|
|
}
|
|
|
if(!vm.toggle) {
|
|
|
alert("未确认是否阅读并接受条款");
|
|
|
return false;
|
|
|
}
|
|
|
// location.href = "../login/login.html"
|
|
|
//连接注册后台接口
|
|
|
var data={
|
|
|
demographicId: vm.idCardNo,
|
|
|
codeType:vm.codeType,
|
|
|
telephone: vm.tel,
|
|
|
password: vm.password,
|
|
|
}
|
|
|
var params = {
|
|
|
userJsonData:JSON.stringify(data),
|
|
|
appId: httpRequest.client_id
|
|
|
}
|
|
|
loginAPI.registe(params).then(function (res) {
|
|
|
if (res.successFlg) {
|
|
|
alert("注册成功");
|
|
|
vm.login();
|
|
|
} else {
|
|
|
alert(res.errorMsg);
|
|
|
}
|
|
|
|
|
|
}).catch(function (err) {
|
|
|
alert(err.errorMsg);
|
|
|
})
|
|
|
|
|
|
},
|
|
|
toggleRegister:function(){
|
|
|
var vm=this;
|
|
|
vm.registerFlag=!vm.registerFlag
|
|
|
}
|
|
|
},
|
|
|
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
|
|
|
}
|
|
|
}
|
|
|
}
|
|
|
})
|
|
|
|
|
|
@ -147,7 +297,25 @@
|
|
|
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 = {
|
zyz