<template>
|
<div class="login-page">
|
<x-header
|
:left-options.showBack="{backText: ''}"
|
:title="'登录'"
|
><span slot="right" @click="changeLoginMethods">{{loginMethodsWord}}</span></x-header>
|
<div class="pagebody">
|
<div class="login-portrait">
|
<div class="login-head-portrait">
|
<img :src="loginLogo">
|
</div>
|
</div>
|
<group class="login-input" label-width="73px">
|
<x-input title="手机号"
|
name="mobile"
|
v-model="mblNo"
|
type="tel"
|
:min="11" :max="11"
|
:novalidate="true"
|
placeholder="请输入手机号码"
|
keyboard="number"
|
></x-input>
|
<x-input title="密码"
|
name="password"
|
:type="pwdType"
|
v-model="password"
|
v-show="!loginMethods"
|
:min="8" :max="16"
|
:novalidate="true"
|
onpaste="return false"
|
oncopy="return false"
|
placeholder="请输入8-16位数字字母组合密码">
|
<i slot="right"
|
class="iconfont"
|
:class="{ 'icon-eye' : pwdType=='text', 'icon-hide': pwdType=='password'}"
|
@click="showPassword"></i>
|
</x-input>
|
<x-input title="验证码"
|
name="verCode"
|
v-show="loginMethods"
|
v-model="verCode"
|
type="tel"
|
:min="4" :max="4"
|
:novalidate="true"
|
placeholder="请输入验证码"
|
keyboard="number">
|
<span slot="right" class="getverCode" @click="checkAferThreeTimes">{{codeButText}}</span>
|
</x-input>
|
</group>
|
<FButton :text="'登录'" @on-click-button="loginBut"></FButton>
|
<div class="input-other">
|
<span class="forget-pwd" @click="toForgetPwd" v-show="!loginMethods">忘记密码？</span>
|
<span class="register" @click="toRegister">注册</span>
|
</div>
|
</div>
|
<!-- 图形验证码 -->
|
<div v-transfer-dom>
|
<confirm
|
v-model="showImageCode"
|
:title="'输入图形验证码'"
|
@on-confirm="onConfirm"
|
@on-hide="onHide">
|
<slot>
|
<input ref="imgcode" v-model="imgCode" maxlength="4" style="height: 28px;width: 90px;border:1px solid #999;"/>
|
<img style="width: 76px; position: relative;top: 10px;" :src="imgCodeUrl" @click="getImgCodeAgain"/>
|
</slot>
|
</confirm>
|
</div>
|
</div>
|
</template>
|
|
<script>
|
import {XButton, XInput, Group, cookie, Confirm, XHeader, TransferDomDirective as TransferDom,} from 'vux';
|
import FButton from'../../components/common/FButton';
|
import validate from '../../tool/validator';
|
import SystApi from '../../api/api';
|
import {md5} from 'vux';
|
import statusCodeManage from '../../api/statusCodeManage';
|
import initData from '../../tool/initData';
|
/**
|
* Created by c.y on 2018/3/22.
|
* 我的--登录
|
*/
|
export default {
|
name: 'f-login',
|
components: {
|
XButton, XInput, Group, XHeader, Confirm, FButton
|
},
|
directives: {
|
TransferDom
|
},
|
data(){
|
return {
|
fromProdDetail: false, // 是从产品详情跳转过来，认证成功后，自动跳转
|
loginLogo:'',//登录的logo
|
//右上角的文字
|
loginMethodsWord:'验证码登录',
|
//获取验证码
|
codeButText:'获取验证码',
|
//是否可以点击按钮获取验证码,false为可以点
|
abledClick:false,
|
//获取三次后显示图形验证码
|
showImageCode:false,
|
imgCode:'',
|
imgCodeUrl:'',
|
//登录方式,false为密码登录
|
loginMethods:false,
|
//数据
|
mblNo:'',
|
password:'',
|
verCode:'',
|
//点击显示密码为明文,眼睛的样式也是根据这个来判断的
|
pwdType:'password',
|
}
|
},
|
methods:{
|
toForgetPwd(){
|
this.$router.push({name:'f-forget-password'});
|
},
|
toRegister(){
|
this.$router.push({name:'f-register'});
|
},
|
//切换登录方式
|
changeLoginMethods(){
|
this.loginMethods=!this.loginMethods;
|
if(this.loginMethods){
|
//当前为验证码登录
|
this.loginMethodsWord='密码登录'
|
}else{
|
//当前为密码登录
|
this.loginMethodsWord='验证码登录'
|
}
|
},
|
//是否显示明文密码
|
showPassword(){
|
if(this.pwdType==='password'){
|
this.pwdType='text';
|
}else{
|
this.pwdType='password';
|
}
|
},
|
// 获取验证码
|
checkAferThreeTimes () {
|
if(this.abledClick){
|
return;
|
}
|
let _this = this;
|
const _userNameState = this.checkUserName();
|
if (!_userNameState) {
|
return false;
|
}
|
let _times = cookie.get('ecImageCodeNum');
|
_times = parseInt(_times);
|
if (_times <= 0) {
|
_this.imgCodeUrl = '/commerce/user/imageCode?mblNo=' + _this.userName + '&' + new Date();
|
_this.showImageCode = true;
|
} else {
|
cookie.set('ecImageCodeNum', _times -= 1);
|
this.sendCode();
|
}
|
},
|
//验证手机号正则
|
checkUserName() {
|
if (validate.checkValEmpty(this.mblNo)) {
|
this.$vux.toast.text('请输入手机号','middle');
|
return false;
|
} else if (!validate.checkPhone(this.mblNo)) {
|
this.$vux.toast.text('请输入正确的手机号','middle');
|
return false;
|
} else {
|
return true;
|
}
|
},
|
sendCode () { // 发送验证码
|
let _this = this;
|
// 防止快速点击，事件触发多次，倒计时出现错误
|
_this.abledClick = true;
|
let countDown = 60;
|
_this.codeButText = countDown + 's后重发';
|
this.clearID = setInterval(function () {
|
countDown--;
|
_this.codeButText = countDown + 's后重发';
|
if (countDown === 0) {
|
clearInterval(_this.clearID);
|
_this.codeButText = '重新获取';
|
_this.abledClick = false;
|
}
|
}, 1000);
|
// 通过验证码登录，verCodeType传递2
|
let _par = {mblNo: this.mblNo, verCodeType: 2};
|
SystApi.getVerCode(_par).then(function (res) {
|
if (res.errorCode === 0) {
|
}
|
}, function (error) {
|
if (error.response) {
|
clearInterval(_this.clearID);
|
_this.codeButText = '重新发送验证码';
|
_this.abledClick = false;
|
}
|
statusCodeManage.showTipOfStatusCode(error,_this);
|
});
|
},
|
//输入图形验证码点击确定
|
onConfirm () {
|
let _this = this;
|
if (validate.checkValEmpty(_this.imgCode)) {
|
this.$vux.toast.text('请输入图片验证码','middle');
|
return;
|
}
|
if (_this.imgCode.length !== 4) {
|
this.$vux.toast.text('验证码错误','middle');
|
return;
|
}
|
SystApi.checkImageCode({imageCode: _this.imgCode, mblNo: _this.mblNo}).then(function (res) {
|
if (res.errorCode === 0) {
|
_this.sendCode();
|
}
|
}, function (error) {
|
if (error.response) {
|
statusCodeManage.showTipOfStatusCode(error,_this);
|
}
|
});
|
},
|
//取消输入图形验证码
|
onHide () {
|
this.imgCode = '';
|
},
|
//重新获取图形验证码
|
getImgCodeAgain () {
|
this.imgCodeUrl = '/commerce/user/imageCode?mblNo=' + this.mblNo + '&' + new Date();
|
},
|
//登录验证
|
loginBut() {
|
let _this = this;
|
if (validate.checkValEmpty(this.mblNo)) {
|
this.$vux.toast.text('请输入手机号','middle');
|
return;
|
}
|
if (this.loginMethods) {
|
if (validate.checkValEmpty(this.verCode)) {
|
this.$vux.toast.text('请输入验证码','middle');
|
return;
|
}
|
} else if (!this.loginMethods) {
|
if (validate.checkValEmpty(this.password)) {
|
this.$vux.toast.text('请输入密码','middle');
|
return;
|
}
|
}
|
if (!validate.checkPhone(this.mblNo)) {
|
this.$vux.toast.text('请输入正确的手机号','middle');
|
return;
|
}
|
if (this.loginMethods) {
|
if (!validate.checkDynamicCode(this.verCode)) {
|
this.$vux.toast.text('请输入正确的验证码','middle');
|
return;
|
}
|
} else if (!this.loginMethods) {
|
if (!validate.checkPassword(this.password)) {
|
this.$vux.toast.text('请输入正确的密码','middle');
|
return;
|
}
|
}
|
// 验证码登录,false为密码登录
|
if (this.loginMethods) {
|
let verCodeLogin = {
|
mblNo: this.mblNo,
|
verCode: this.verCode
|
};
|
this.userLogin('loginByCode', verCodeLogin);
|
// 密码登录
|
} else{
|
let tmpPassword = md5(this.mblNo + this.password);
|
let passwordLogin = {
|
mblNo: this.mblNo,
|
password: tmpPassword
|
};
|
this.userLogin('userLogin', passwordLogin);
|
}
|
},
|
// 验证通过后登录 api接口地址，submitInfo接口需要的参数
|
userLogin (api, submitInfo) {
|
let _this = this;
|
SystApi[api](submitInfo).then(
|
response => {
|
window.sessionStorage.setItem('newSid', response.body.sessionId);
|
window.sessionStorage.setItem('newPhoneNum', response.body.account);
|
window.sessionStorage.setItem('newClientState', response.body.isClient);
|
this.$store.commit('UPDATE_SESSION_ID', {sid: response.body.sessionId}); // 更新sid
|
// 在产品详情页 ，信用卡详情页 首页的值往回跳转
|
let _path = window.sessionStorage.getItem('newGoBackPage');
|
if (_path) {
|
_this.$router.push(_path);
|
// window.location.href = window.location.pathname +'#'+_path;
|
}else{
|
// 不然的话，那么就手动点击返回再返回
|
// if (_this.fromProdDetail) {
|
// _this.$router.back();
|
// return false;
|
// } else {
|
// _this.$router.push({name: '/f-main'});
|
// }
|
_this.$router.back();
|
}
|
},
|
error => {
|
statusCodeManage.showTipOfStatusCode(error,_this);
|
}
|
);
|
},
|
},
|
activated(){
|
// [].slice.call(document.getElementsByTagName('*')).forEach
|
// ((ele) => {ele.style.setProperty('border', '1px solid #' + Math.random().toString(16).slice(2, 8));});
|
this.$store.commit('UPDATE_DIRECTION', {direction: 'in'});
|
initData(['mblNo', 'password', 'verCode'], this);
|
let prodConfig = JSON.parse(window.localStorage.getItem('newProdConfig'));
|
this.loginLogo = prodConfig.logoPath;
|
},
|
deactivated: function () {
|
this.$store.commit('UPDATE_DIRECTION', {direction: 'none'});
|
},
|
// 是从产品详情跳转过来，认证成功后，自动跳转
|
// 即从哪里来，会哪里去
|
beforeRouteEnter (to, from, next) {
|
next(vm => {
|
// 通过 `vm` 访问组件实例
|
if (from.path === '/f-credit-detail' || from.path === '/f-loan-detail' || from.path === '/f-mine') {
|
vm.fromProdDetail = true;
|
}
|
})
|
}
|
}
|
</script>
|
<style lang="less">
|
@import "../../style/mixin.less";
|
|
.login-page {
|
.vux-header {
|
.color-linear-gradient(@color-primary-light, @color-primary, 90deg);
|
.vux-header-title {
|
font-size: 18px;
|
}
|
.vux-header-left {
|
.left-arrow:before {
|
border: solid 1px @color-white;
|
border-width: 2px 0 0 2px;
|
}
|
}
|
.vux-header-right {
|
color: @color-white !important;
|
}
|
}
|
.pagebody{
|
padding:0 12px;
|
.login-portrait{
|
height:150px;
|
.flexLayout(center,center,column);
|
.login-head-portrait{
|
width: 84px;
|
height:84px;
|
border-radius: @border-radius-normal-size;
|
overflow: hidden;
|
img{
|
width: 100%;
|
height:100%;
|
}
|
}
|
}
|
.login-input{
|
margin-top: 0;
|
.weui-cells{
|
margin: 0;
|
.weui-cell{
|
height:23px;
|
border:1px solid @color-disabled;
|
border-radius: @border-radius-normal-size;
|
margin-bottom: 10px;
|
font-size:@font-size-base;
|
.weui-cell__ft{
|
.getverCode{
|
padding-left: 10px;
|
display:inline-block;
|
color: @color-primary;
|
border-left:1px solid @color-divider-regular;
|
}
|
}
|
}
|
.weui-cell:before{
|
display: none;
|
}
|
|
}
|
.weui-cells:before{
|
display: none;
|
}
|
.weui-cells:after{
|
display: none;
|
}
|
}
|
.f-button{
|
width: 100%;
|
}
|
.input-other{
|
font-size:@font-size-medium;
|
.register{
|
color: @color-primary;
|
float: right;
|
}
|
.forget-pwd{
|
color: @color-text-secondary;
|
}
|
}
|
}
|
}
|
|
</style>
|
