<template>
|
<div class="register-page" :style="styleObject">
|
<x-header :left-options="{showBack: true, backText: '', preventGoBack:true}"
|
:title="headerTitle"
|
@on-click-back="goBackPage"></x-header>
|
<div class="pagebody">
|
<div class="register-portrait">
|
<div class="register-head-portrait">
|
<img :src="loginLogo">
|
</div>
|
</div>
|
<group class="register-input" label-width="73px">
|
<x-input title="手机号"
|
name="mobile"
|
type="tel"
|
v-model="userObj.mblNo"
|
:min="11"
|
:max="11"
|
:novalidate="true"
|
placeholder="请输入手机号码"
|
keyboard="number"></x-input>
|
<x-input title="密码"
|
name="password"
|
:type="pwdType"
|
v-model="userObj.password"
|
:min="8" :max="16"
|
:novalidate="true"
|
onpaste="return false"
|
oncopy="return false"
|
placeholder="请输入8-16位数字字母组合密码">
|
<i slot="right" v-show="pwdType=='text'" class="iconfont icon-eye" @click="showPassword"></i>
|
<i slot="right" v-show="pwdType=='password'" class="iconfont icon-hide" @click="showPassword"></i>
|
</x-input>
|
<x-input title="验证码"
|
v-model="userObj.verificationCode"
|
name="verCode"
|
type="tel"
|
placeholder="请输入验证码"
|
keyboard="number"
|
:min="4" :max="4"
|
:novalidate="true">
|
<span slot="right" class="getverCode" @click="checkAferThreeTimes">{{codeButText}}</span>
|
</x-input>
|
</group>
|
<div class="input-btnbox">
|
<FButton :text="'注册'" @on-click-button="handleRegister"></FButton>
|
</div>
|
<div class="input-other">
|
<span>
|
注册即视为同意
|
<span @click="handlerClickAgreement">《注册协议》</span>
|
</span>
|
<span @click="toLogin">登录</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 class="register-mask" v-if="registerTip"></div>
|
<div class="register-countdown" v-if="registerTip">{{ '注册成功' + registerCountdown + 's后跳转' }}</div>
|
<!-- 协议弹窗 -->
|
<div class="agreement-content" v-if="isShowAgreementContent">
|
<div v-html="agreementContent"></div>
|
</div>
|
</div>
|
</template>
|
|
<script>
|
import {
|
XButton,
|
XInput,
|
Group,
|
cookie,
|
Flexbox,
|
FlexboxItem,
|
XHeader,
|
TransferDomDirective as TransferDom,
|
Confirm
|
} from 'vux';
|
import FButton from '../../components/common/FButton';
|
import SystApi from '../../api/api';
|
import validate from '../../tool/validator';
|
import IDValidator from '../../tool/IDValidator';
|
import {md5} from 'vux';
|
import {mapState} from 'vuex';
|
import statusCodeManage from '../../api/statusCodeManage';
|
/**
|
* Created by z.x.q on 2018/3/22.
|
* 我的--注册
|
*/
|
export default {
|
name: 'f-register',
|
components: {
|
XButton, XInput, Group, FButton, XHeader, Confirm, cookie
|
},
|
directives: {
|
TransferDom
|
},
|
data(){
|
return {
|
loginLogo: '',
|
headerTitle: '注册', // 头部title
|
agreementContent: '', // 协议的内容
|
isShowAgreementContent: false,
|
styleObject: {
|
overflow: 'initial',
|
minHeight: '100%',
|
height: 'auto'
|
},
|
pwdType: "password",
|
showImageCode: false,//显示图形验证码界面
|
imgCode: '',//图形验证码对应的值
|
imgCodeUrl: '',//图形验证码路径
|
userObj: {
|
mblNo: '',
|
password: '',
|
confirmPwd: '',
|
verificationCode: ''
|
},
|
clearID: null,//获取验证码倒计时的定时器
|
codeButText: '获取验证码',//倒计时显示的文字
|
abledClick: true,//是否可以点击发送验证码
|
registerTip: false,//自动登录的tip
|
registerCountdown: 3,
|
}
|
},
|
methods: {
|
// 显示协议内容
|
handlerClickAgreement() {
|
let _this = this;
|
this.styleObject = {
|
overflow: 'hidden',
|
minHeight: '100%',
|
height: '100%'
|
};
|
this.headerTitle = '注册协议';
|
SystApi.getAgreementContent().then(function (response) {
|
_this.agreementContent = response;
|
_this.isShowAgreementContent = true;
|
}).catch(function (error) {
|
statusCodeManage.showTipOfStatusCode(error,_this);
|
});
|
},
|
//注册
|
handleRegister() {
|
let _this = this;
|
if (validate.checkValEmpty(this.userObj.mblNo)) {
|
this.$vux.toast.text('请输入手机号', 'middle');
|
return;
|
}
|
if (validate.checkValEmpty(this.userObj.verificationCode)) {
|
this.$vux.toast.text('请输入验证码', 'middle');
|
return;
|
}
|
if (validate.checkValEmpty(this.userObj.password)) {
|
this.$vux.toast.text('请设置密码', 'middle');
|
return;
|
}
|
if (!validate.checkPhone(this.userObj.mblNo)) {
|
this.$vux.toast.text('请输入正确的手机号', 'middle');
|
return;
|
}
|
if (!validate.checkDynamicCode(this.userObj.verificationCode)) {
|
this.$vux.toast.text('请输入正确的验证码', 'middle');
|
return;
|
}
|
if (!validate.checkPassword(this.userObj.password)) {
|
this.$vux.toast.text('请设置8-16位字母数字组合密码', 'middle');
|
return;
|
}
|
let tmpPassword = md5(this.userObj.mblNo + this.userObj.password);
|
SystApi.register({
|
mblNo: this.userObj.mblNo,
|
password: tmpPassword,
|
confirmPwd: tmpPassword,
|
verificationCode: this.userObj.verificationCode,
|
// referralCode: this.invitationCode
|
}).then(response => {
|
if (response.errorCode === 0) {
|
this.registerTip = true;
|
this.autoLogin(tmpPassword);
|
// 登录倒计时3 秒
|
function registerCountdown() {
|
let timeId = setTimeout(function () {
|
// 1秒的时候，就倒计时停止，进行跳转
|
if (_this.registerCountdown === 1) {
|
_this.registerTip = false;
|
// /prodInfo?id=50000095&cn=dRbq8m
|
let _url = window.sessionStorage.getItem('newBackPage');
|
try {
|
clearInterval(_this.clearID);
|
_this.codeButText = '获取验证码';
|
} catch (e) {
|
|
}
|
// 在产品详情页 ，信用卡详情页 首页的值往回跳转
|
let _path = window.sessionStorage.getItem('newGoBackPage');
|
if (_path) {
|
window.location.href = window.location.pathname +'#'+_path;
|
}
|
clearTimeout(timeId);
|
return false;
|
} else {
|
_this.registerCountdown--;
|
registerCountdown();
|
}
|
}, 1000);
|
}
|
registerCountdown();
|
}
|
}, err => {
|
statusCodeManage.showTipOfStatusCode(err, _this);
|
});
|
},
|
//自动登录
|
autoLogin: function (tmpPassword) {
|
let _this = this;
|
SystApi.userLogin({mblNo: this.userObj.mblNo, password: tmpPassword}).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
|
}, err => {
|
statusCodeManage.showTipOfStatusCode(err,_this);
|
})
|
},
|
checkUserName() {
|
if (validate.checkValEmpty(this.userObj.mblNo)) {
|
this.$vux.toast.text('请输入手机号', 'middle');
|
return false;
|
} else if (!validate.checkPhone(this.userObj.mblNo)) {
|
this.$vux.toast.text('请输入正确的手机号', 'middle');
|
return false;
|
} else {
|
return true;
|
}
|
},
|
//获取验证码
|
checkAferThreeTimes () {
|
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.userObj.mblNo + '&' + new Date();
|
_this.showImageCode = true;
|
} else {
|
cookie.set('ecImageCodeNum', _times -= 1);
|
this.sendCode();
|
}
|
},
|
//点击图形验证码再次获取验证码
|
getImgCodeAgain () { // 发送图形验证码
|
this.imgCodeUrl = '/commerce/user/imageCode?mblNo=' + this.userObj.mblNo + '&' + new Date();
|
},
|
//提交图形验证码
|
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.userObj.mblNo}).then(function (res) {
|
if (res.errorCode === 0) {
|
_this.sendCode();
|
}
|
}, function (error) {
|
if (error.response) {
|
statusCodeManage.showTipOfStatusCode(error,_this);
|
}
|
});
|
},
|
//发送验证码
|
sendCode () { // 发送验证码
|
if (!this.abledClick) {
|
return;
|
}
|
let _this = this;
|
this.abledClick = false;
|
// 防止快速点击，事件触发多次，倒计时出现错误
|
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 = true;
|
}
|
}, 1000);
|
let _par = {mblNo: this.userObj.mblNo, verCodeType: 0};
|
SystApi.getVerCode(_par).then(function (res) {
|
if (res.errorCode === 0) {
|
}
|
}, function (error) {
|
if (error.response) {
|
clearInterval(_this.clearID);
|
_this.codeButText = '重新发送验证码';
|
_this.abledClick = true;
|
}
|
statusCodeManage.showTipOfStatusCode(error,_this);
|
});
|
},
|
//隐藏图形验证码弹窗
|
onHide(){
|
this.imgCode = '';
|
},
|
//切换为登录
|
toLogin(){
|
clearInterval(this.clearID);
|
this.codeButText = '获取验证码';
|
this.$router.push({name: 'f-login'})
|
},
|
//显示-隐藏密码
|
showPassword(){
|
if (this.pwdType == "password") {
|
this.pwdType = "text";
|
}
|
else {
|
this.pwdType = "password";
|
}
|
},
|
goBackPage: function () {
|
try {
|
clearInterval(this.clearID);
|
this.codeButText = '获取验证码';
|
} catch (e) {
|
|
}
|
// 点击返回，使注册协议消失
|
if (this.isShowAgreementContent) {
|
// 协议弹窗内容点击返回时
|
this.isShowAgreementContent = false;
|
this.headerTitle = '注册';
|
this.styleObject = {
|
overflow: 'initial',
|
minHeight: '100%',
|
height: 'auto'
|
};
|
} else {
|
this.$router.back();
|
}
|
},
|
},
|
computed: {
|
...mapState({
|
cn: state => state.vux.cn
|
})
|
},
|
activated(){
|
this.$store.commit('UPDATE_DIRECTION', {direction: 'in'});
|
this.headerTitle = '注册';
|
this.agreementContent = '';
|
this.isShowAgreementContent = false;
|
this.styleObject = {
|
overflow: 'initial',
|
minHeight: '100%',
|
height: 'auto'
|
};
|
this.pwdType = "password";
|
this.showImageCode = false;
|
this.imgCode = '';
|
this.imgCodeUrl = '';
|
this.userObj.mblNo = '';
|
this.userObj.password = '';
|
this.userObj.confirmPwd = '';
|
this.userObj.verificationCode = '';
|
this.clearID = null;
|
this.codeButText = '获取验证码';
|
this.abledClick = true;
|
this.registerTip = false;
|
this.registerCountdown = 3;
|
let prodConfig = JSON.parse(window.localStorage.getItem('newProdConfig'));
|
this.loginLogo = prodConfig.logoPath;
|
},
|
deactivated () {
|
this.$store.commit('UPDATE_DIRECTION', {direction: 'none'});
|
}
|
|
}
|
</script>
|
|
<style lang="less">
|
@import "../../style/mixin.less";
|
.register-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;
|
}
|
|
}
|
}
|
.pagebody {
|
padding: 0 12px 0 12px;
|
.register-portrait {
|
height: 150px;
|
.flexLayout(center, center, column);
|
.register-head-portrait {
|
width: 84px;
|
height: 84px;
|
border-radius: @border-radius-normal-size;
|
overflow: hidden;
|
img {
|
width: 100%;
|
height: 100%;
|
}
|
}
|
}
|
.register-input {
|
.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;
|
.flexLayout(space-between, center, row);
|
span {
|
&:first-child {
|
color: @color-text-third;
|
span {
|
color: @color-primary;
|
}
|
}
|
&:nth-child(2) {
|
color: @color-primary;
|
}
|
}
|
}
|
}
|
.register-mask {
|
position: fixed;
|
left: 0;
|
right: 0;
|
top: 0;
|
bottom: 0;
|
width: 100%;
|
height: 100%;
|
background: rgba(17, 17, 17, 0.4);
|
}
|
.register-countdown {
|
position: fixed;
|
bottom: 50px;
|
left: 50%;
|
top: 50%;
|
padding: 8px 20px;
|
line-height: 20px;
|
height: 20px;
|
color: #fff;
|
text-align: center;
|
border-radius: 5px;
|
transform: translateY(-50%);
|
transform: translateX(-50%);
|
background: rgba(17, 17, 17, 0.7);
|
z-index: 100;
|
}
|
/*协议弹窗*/
|
.agreement-content {
|
position: fixed;
|
left: 0;
|
top: 46px;
|
bottom: 0;
|
right: 0;
|
z-index: 10;
|
width: 100%;
|
height: 100%;
|
overflow-y: scroll;
|
padding: 20px 20px 66px;
|
box-sizing: border-box;
|
background: #fff;
|
}
|
}
|
|
</style>
|
