<template>
|
<div class="auth-page">
|
<x-header :left-options.showBack="{backText: ''}" :title="'实名认证'"></x-header>
|
<div class="tips">请确保录入本人真实信息，否则将影响您的贷款申请</div>
|
<div class="icon-box">
|
<svg class="icon" aria-hidden="true">
|
<use xlink:href="#icon-identification"></use>
|
</svg>
|
<!--<i class="iconfont icon-index-evaluation1"></i>-->
|
</div>
|
<Group :label-width="'100px'">
|
<x-input title="手机号" v-model="userInfo.phoneNum" placeholder="" :min="11" :max="11" :novalidate="true" readonly></x-input>
|
<x-input title="姓名" v-model="userInfo.userName" :max="10" required show-clear :novalidate="true" :readonly="!showChangeBtn" placeholder="请填写本人真实姓名"></x-input>
|
<x-input title="身份证号"
|
v-model="userInfo.idCard"
|
:max="18"
|
required
|
@input.native="handleInputIdCard"
|
:readonly="!showChangeBtn"
|
:novalidate="true" show-clear placeholder="请填写本人身份证号"></x-input>
|
</Group>
|
<div v-if="canModify" class="changeInfo">
|
<span @click="changeBut">修改信息</span>
|
</div>
|
<div class="auth-button">
|
<XButton v-show="showChangeBtn" text="认证" class="btn" @click.native="clickBut"></XButton>
|
</div>
|
<div class="auth-block" v-show="!showChangeBtn" style="height: 44px;margin-top: 48px;"></div>
|
<p class="notice">
|
<i class="iconfont icon-my-identification-fill"></i>
|
<span>实名信息仅用于验证身份，我们将严格保密</span>
|
</p>
|
<!--Confirm弹窗-->
|
<confirm v-model="showConfirm" :title="'提示'" @on-confirm="onConfirm">
|
<p style="text-align:center;">仅允许修改一次实名信息<br/>是否确认修改？</p>
|
</confirm>
|
<!--认证通过-->
|
<div class="passStatus" :class="{showAnimation:showAnimation}" v-show='showPass'>
|
<img src="../../assets/img/pass.png">
|
</div>
|
</div>
|
</template>
|
<script>
|
/**
|
* Created by 吴彦祖 on 2018/3/22.
|
* 我的--实名认证
|
*/
|
import {Confirm , XHeader , Group , XInput , Toast , XButton, TransferDomDirective as TransferDom } from 'vux';
|
import FButton from '../../components/common/FButton';
|
import validate from '../../tool/validator';
|
import SysApi from '../../api/api';
|
import statusCodeManage from '../../api/statusCodeManage';
|
import CryptoJS from 'crypto-js';
|
import idValidator from '../../tool/IDValidator';
|
|
export default {
|
name: 'f-auth',
|
directives: {
|
TransferDom
|
},
|
components:{
|
XHeader,
|
Group,
|
XInput,
|
XButton,
|
Toast,
|
Confirm
|
},
|
data(){
|
return {
|
fromProdDetail: false, // 是从产品详情跳转过来，认证成功后，自动跳转
|
userInfoRoot:{//这是源数据，只用于储存 不用于展示或者加密处理
|
phoneNum:'',
|
userName:'',
|
idCard:''
|
},
|
userInfo:{
|
phoneNum:'',
|
userName:'',
|
idCard:''
|
},
|
canModify:null,
|
showChangeBtn:true,
|
showConfirm:false,
|
showPass:false,
|
showAnimation:false
|
}
|
},
|
methods:{
|
// 处理身份证的输入只要数字与大小写x
|
handleInputIdCard () {
|
let _this = this;
|
setTimeout(function () {
|
if (_this.userInfo.idCard) {
|
_this.userInfo.idCard = _this.userInfo.idCard.replace(/[^\dxX]/g, '');
|
}
|
}, 50);
|
},
|
// 认证按钮
|
clickBut(){
|
let _this = this;
|
let obj={...this.userInfo};
|
if(validate.checkValEmpty(obj.userName)){
|
this.$vux.toast.text('请输入姓名','middle');
|
return;
|
}
|
if(validate.checkValEmpty(obj.idCard)){
|
this.$vux.toast.text('请输入身份证号','middle');
|
return;
|
}
|
if(!validate.checkName(obj.userName)){
|
this.$vux.toast.text('请输入正确的姓名','middle');
|
return;
|
}
|
if(!idValidator.isValid(obj.idCard)){
|
this.$vux.toast.text('请输入正确的身份证号','middle');
|
return;
|
}
|
this.$store.commit('UPDATE_LOADING',{isLoading:true});
|
let params={
|
mblNo:window.sessionStorage.getItem('newPhoneNum'),
|
userName:this.userInfo.userName,
|
cardNo:this.userInfo.idCard
|
};
|
let key = CryptoJS.enc.Utf8.parse('MdAJYhTz6jrZJ6Qh');
|
let parseId = CryptoJS.enc.Utf8.parse(params.cardNo);
|
let encrypted = CryptoJS.AES.encrypt(parseId, key, {mode: CryptoJS.mode.ECB, padding: CryptoJS.pad.Pkcs7});
|
let encryptedIDCards = encrypted.toString();
|
params.cardNo=encryptedIDCards;
|
SysApi.fetchAuth(params).then(
|
res=>{
|
setTimeout(()=>{
|
this.$store.commit('UPDATE_LOADING',{isLoading:false});
|
this.showAnimation=true;
|
this.showPass=true;
|
this.showChangeBtn=false;
|
this.canModify=false;
|
window.sessionStorage.setItem('newClientState',1);
|
// 如果是从产品详情跳转过来的话，那么就自动跳回原来的页面
|
// 不然的话，那么就手动点击返回再返回
|
setTimeout(function () {
|
if (_this.fromProdDetail) {
|
_this.$router.back();
|
}
|
}, 500);
|
},2000)
|
},
|
err=>{
|
this.$store.commit('UPDATE_LOADING',{isLoading:false});
|
statusCodeManage.showTipOfStatusCode(err, _this);
|
}
|
)
|
},
|
// 修改按钮
|
changeBut(){
|
this.showConfirm=true;
|
},
|
//确认修改模态框点击确认
|
onConfirm(){
|
this.userInfo.userName=this.userInfoRoot.userName;
|
this.userInfo.idCard=this.userInfoRoot.idCard;
|
this.showChangeBtn=true;
|
this.canModify=false;
|
this.showPass=false;
|
this.showAnimation=false;
|
},
|
aesFn(){
|
this.userInfo.phoneNum=`${this.userInfoRoot.phoneNum.substr(0,3)}****${this.userInfoRoot.phoneNum.substr(7)}`;
|
// let num='';
|
// for(let i=0;i<this.userInfoRoot.userName.length-1;i++){
|
// num+='*';
|
// }
|
this.userInfo.userName=`*${this.userInfoRoot.userName.substr(1,this.userInfoRoot.userName.length-1)}`;
|
this.userInfo.idCard=`${this.userInfoRoot.idCard.substr(0,6)}********${this.userInfoRoot.idCard.substr(14)}`;
|
}
|
},
|
activated(){
|
this.$store.commit('UPDATE_DIRECTION', {direction: 'in'});
|
let _this = this;
|
this.userInfo.phoneNum='';
|
this.userInfo.userName='';
|
this.userInfo.idCard='';
|
//判断是否已经进行过实名认证
|
let client = window.sessionStorage.getItem('newClientState');
|
//得到该用户的手机号
|
let phoneNum = window.sessionStorage.getItem('newPhoneNum');
|
if(parseInt(client)){
|
//已经通过实名认证了
|
SysApi.fetchAuthInit({}).then(
|
res=>{
|
//AES解密身份证
|
let key = CryptoJS.enc.Utf8.parse('MdAJYhTz6jrZJ6Qh');
|
let parseId = CryptoJS.enc.Utf8.parse(res.body.cardNo);
|
let decrypted = CryptoJS.AES.decrypt(res.body.cardNo, key, {mode: CryptoJS.mode.ECB, padding: CryptoJS.pad.Pkcs7});
|
let encryptedIDCards = decrypted.toString(CryptoJS.enc.Utf8);
|
this.userInfoRoot.idCard=encryptedIDCards;
|
this.userInfoRoot.phoneNum=phoneNum;
|
this.userInfoRoot.userName=res.body.name;
|
this.canModify=res.body.canModify;
|
//用于是否显示认证按钮和通过的动画,以及信息加密显示
|
this.showChangeBtn=false;
|
this.showAnimation=false;//不加载动画
|
this.showPass=true;
|
this.aesFn();
|
},
|
err=>{
|
statusCodeManage.showTipOfStatusCode(err, _this);
|
}
|
);
|
}else{
|
this.userInfo.phoneNum=`${phoneNum.substr(0,3)}****${phoneNum.substr(7)}`;;
|
this.showChangeBtn=true;
|
this.showPass=false;
|
this.showAnimation=false;
|
}
|
},
|
|
deactivated(){
|
this.$store.commit('UPDATE_DIRECTION', {direction: 'none'});
|
this.showPass=false;
|
this.showAnimation=false;
|
},
|
// 是从产品详情跳转过来，认证成功后，自动跳转
|
// 即从哪里来，会哪里去
|
beforeRouteEnter (to, from, next) {
|
next(vm => {
|
// 通过 `vm` 访问组件实例
|
if(from.path === '/f-credit-detail' || from.path === '/f-loan-detail') {
|
vm.fromProdDetail = true;
|
}
|
})
|
}
|
}
|
</script>
|
|
<style lang="less">
|
@import '../../style/mixin';
|
.auth-page {
|
position: relative;
|
.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;
|
}
|
}
|
}
|
.tips {
|
padding:10px 12px 10px 12px;
|
background-color: @color-background-default;
|
color: @color-text-third;
|
}
|
.icon-box {
|
height: 150px;
|
text-align: center;
|
.flexLayout(center,center,row);
|
svg {
|
width: 120px;
|
height: 120px;
|
}
|
}
|
.weui-cells {
|
&:before,
|
&:after {
|
border: none;
|
}
|
font-size: @font-size-base;
|
.weui-cell {
|
height: 44px;
|
box-sizing: border-box;
|
margin-left: 12px;
|
padding-left: 0;
|
border-bottom: 1px solid @color-divider-regular;
|
&:before,
|
&:after {
|
border: none;
|
}
|
}
|
}
|
.changeInfo {
|
text-align: right;
|
margin: 30px 13px 0;
|
span {
|
font-size: @font-size-medium;
|
color: @color-primary;
|
}
|
}
|
.auth-button{
|
padding:0 12px;
|
}
|
.btn {
|
margin-top: 48px;
|
.color-linear-gradient(@color-primary-light, @color-primary, 90deg);
|
color: #ffffff;
|
height: 44px;
|
font-size:16px;
|
}
|
.notice {
|
margin-top: 50px;
|
width: 100%;
|
text-align: center;
|
color: @color-text-third;
|
}
|
.weui-dialog__btn_primary {
|
color: @color-primary;
|
}
|
.passStatus {
|
position: absolute;
|
top: 280px;
|
right: 45px;
|
z-index: 99;
|
width: 78px;
|
height: 66px;
|
overflow: hidden;
|
img {
|
width: 78px;
|
height: 66px;
|
}
|
}
|
.showAnimation{
|
animation: pass 0.3s;
|
}
|
@keyframes pass {
|
from {
|
transform: scale(5, 5);
|
}
|
to {
|
transform: scale(1, 1);
|
}
|
}
|
|
.weui-btn:after{
|
display: none;
|
}
|
}
|
</style>
|
