<template>
|
<div class="loan-info-box" :style="styleObject">
|
<x-header slot="header"
|
style="width:100%;height:46px;background-color: #ec6758"
|
:title="headerTitle"
|
:left-options="{backText: '', preventGoBack:true}"
|
@on-click-back="goBackPage"
|
></x-header>
|
<flow class="progressState">
|
<flow-state state="1" title="个人信息" is-done></flow-state>
|
<flow-line is-done></flow-line>
|
<flow-state state="2" title="工作及居住信息" is-done></flow-state>
|
<flow-line is-done></flow-line>
|
<flow-state state="3" title="绑定银行卡" class="currentStep"></flow-state>
|
<flow-line></flow-line>
|
<flow-state state="4" title="证明材料"></flow-state>
|
</flow>
|
<group>
|
<group-title slot="title"><span style="color: #ec6758">*</span>银行卡信息</group-title>
|
<x-input title="姓名" v-model="bankInfo.name" :disabled="true"></x-input>
|
<x-input title="手机号" v-model="bankInfo.mobileNo" keyboard="number" :disabled="true"></x-input>
|
<x-input title="身份证号" v-model="bankInfo.idNo" keyboard="number" :disabled="true"></x-input>
|
<x-input type="tel" title="银行卡号" :max="19" v-model="bankInfo.card"
|
placeholder="请输入银行卡号" keyboard="number" pattern="[0-9]*" @on-change="inputBankCard"
|
@on-blur="blurBankCard"></x-input>
|
<x-input title="所属银行" v-model="bankName" v-if="bankName" :disabled="true" class="loan-cell"></x-input>
|
</group>
|
<div class="bind-tip">提示: 仅支持绑定储蓄卡</div>
|
<label for="registerAgree" class="register-agree">
|
<input id="registerAgree" type="checkbox" v-model="agreementChecked" class="register-checkbox">
|
<span class="register-agree-text">
|
我已阅读并同意
|
</span>
|
<a @click="showActionsheet" class="agreementContent">《个人信息查询使用授权书》及《数据采集使用授权书》</a>
|
</label>
|
|
<box gap="20px 15px">
|
<x-button type="primary" @click.native="bindBankCard">下一步</x-button>
|
</box>
|
<box gap="20px 15px">
|
<span style="float: left; color:#0092f1;" @click="updatePersonalInfo">修改个人信息</span>
|
<span style="float: right; color:#0092f1;" @click="querySupportBank">查询支持银行</span>
|
</box>
|
<div v-transfer-dom>
|
<x-dialog v-model="showBankList" class="support-bank">
|
<div class="bank-list">
|
<group>
|
<cell :title="item.name" v-for="item in bankInfo.bankNameList" :key="item.code"></cell>
|
</group>
|
</div>
|
<div @click="showBankList = false">
|
<span class="vux-close"></span>
|
</div>
|
</x-dialog>
|
</div>
|
<actionsheet v-model="isShowActionsheet" :menus="actionsheetMenus" @on-click-menu="clickActionsheetMenus"
|
show-cancel>
|
</actionsheet>
|
<!--协议弹窗-->
|
<div class="agreement-content" v-if="isShowAgreementContent">
|
<personInfo v-show="showAgreement"></personInfo>
|
<collectData v-show="!showAgreement"></collectData>
|
</div>
|
</div>
|
</template>
|
|
<script>
|
import personInfo from './agreement/personInfo';
|
import collectData from './agreement/collectData';
|
import {
|
Flow,
|
FlowState,
|
FlowLine,
|
XDialog,
|
XHeader,
|
Group,
|
GroupTitle,
|
Cell,
|
XInput,
|
Selector,
|
XButton,
|
Box,
|
Actionsheet,
|
TransferDomDirective as TransferDom
|
} from 'vux';
|
import store from '../../store/index';
|
import validate from '../../tool/validator';
|
import bankCardData from '../../tool/bankCardData';
|
import SystApi from '../../api/api';
|
import statusCodeManage from '../../api/statusCodeManage';
|
|
export default {
|
name: 'incoBindCard',
|
data() {
|
return {
|
headerTitle: '银行卡信息',
|
styleObject: {
|
overflow: 'initial',
|
minHeight: '100%',
|
height: 'auto'
|
},
|
agreementChecked: true,
|
bankInfo: {},
|
bankName: '',
|
showBankList: false,
|
isShowAgreementContent: false,
|
showAgreement: false,
|
isShowActionsheet: false,
|
actionsheetMenus: {
|
menu1: '个人信息查询使用授权书',
|
menu2: '数据采集使用授权书'
|
}
|
};
|
},
|
deactivated: function () {
|
this.$store.commit('UPDATE_DIRECTION', {direction: 'out'});
|
},
|
activated: function () {
|
// 初始化信息
|
let _this = this;
|
this.$store.commit('UPDATE_DIRECTION', {direction: 'in'});
|
let submitInfo = {
|
prodId: this.$route.query.prodId
|
};
|
SystApi.initBankCardInfo(submitInfo).then(
|
response => {
|
if (response.errorCode === 0) {
|
_this.bankInfo = response.body;
|
_this.bankName = _this.getBankName(_this.bankInfo.bankName);
|
}
|
},
|
error => {
|
statusCodeManage.showTipOfStatusCode(error, _this)
|
}
|
);
|
},
|
directives: {
|
TransferDom
|
},
|
methods: {
|
showActionsheet() {
|
this.isShowActionsheet = true;
|
},
|
// 显示协议内容
|
clickActionsheetMenus(menu) {
|
if (menu !== 'cancel') {
|
this.styleObject = {
|
overflow: 'hidden',
|
minHeight: '100%',
|
height: '100%'
|
};
|
if (menu === 'menu1') {
|
// 点击个人信息查询使用授权书
|
this.headerTitle = '个人信息查询使用授权书';
|
this.isShowAgreementContent = true;
|
this.showAgreement = true;
|
}
|
if (menu === 'menu2') {
|
// 点击数据采集使用授权书
|
this.headerTitle = '数据采集使用授权书';
|
this.isShowAgreementContent = true;
|
this.showAgreement = false;
|
}
|
}
|
},
|
validateTip(errorMsg) {
|
return this.$vux.toast.show({
|
width: 'auto',
|
type: 'text',
|
text: errorMsg,
|
time: 2000,
|
position: 'middle'
|
});
|
},
|
goBackPage: function () {
|
store.commit('updateDirection', {direction: 'out'});
|
if (this.isShowAgreementContent) {
|
// 协议弹窗内容点击返回时
|
this.isShowAgreementContent = false;
|
this.headerTitle = '银行卡信息';
|
this.styleObject = {
|
overflow: 'initial',
|
minHeight: '100%',
|
height: 'auto'
|
};
|
} else {
|
this.$router.back();
|
}
|
},
|
getBankCode: function (bankName) {
|
let bankNameList = this.bankInfo.bankNameList;
|
for (let i = 0; i < bankNameList.length; i++) {
|
if (bankNameList[i].name === bankName) {
|
return bankNameList[i].code;
|
}
|
}
|
},
|
getBankName: function (bankCode) {
|
let bankNameList = this.bankInfo.bankNameList;
|
for (let i = 0; i < bankNameList.length; i++) {
|
if (bankNameList[i].code === bankCode) {
|
return bankNameList[i].name;
|
}
|
}
|
},
|
inputBankCard: function (val) {
|
// 验证的银行卡的卡号长度分别为3,4,5,6,7,9
|
if (val) {
|
if (val.length >= 3) {
|
if (!validate.checkValEmpty(bankCardData[val])) {
|
this.bankName = bankCardData[val];
|
return null;
|
}
|
}
|
} else {
|
this.bankName = '';
|
}
|
},
|
// 失去焦点的时候
|
blurBankCard(val) {
|
if (val) {
|
if (val.length >= 3) {
|
// 开始的几个字符串获取银行
|
let str3 = val.substring(0, 3);
|
let str4 = val.substring(0, 4);
|
let str5 = val.substring(0, 5);
|
let str6 = val.substring(0, 6);
|
let str7 = val.substring(0, 7);
|
let str8 = val.substring(0, 8);
|
if (!validate.checkValEmpty(bankCardData[str3])) {
|
this.bankName = bankCardData[str3];
|
return null;
|
} else if (!validate.checkValEmpty(bankCardData[str4])) {
|
this.bankName = bankCardData[str4];
|
return null;
|
} else if (!validate.checkValEmpty(bankCardData[str5])) {
|
this.bankName = bankCardData[str5];
|
return null;
|
} else if (!validate.checkValEmpty(bankCardData[str6])) {
|
this.bankName = bankCardData[str6];
|
return null;
|
} else if (!validate.checkValEmpty(bankCardData[str7])) {
|
this.bankName = bankCardData[str7];
|
return null;
|
} else if (!validate.checkValEmpty(bankCardData[str8])) {
|
this.bankName = bankCardData[str8];
|
return null;
|
} else {
|
this.bankName = '';
|
}
|
} else {
|
this.bankName = '';
|
}
|
} else {
|
this.bankName = '';
|
}
|
},
|
// 银行卡号最后一位验证， （
|
// 1.将未带校验位的 15（或18）位卡号从右依次编号 1 到 15（18），位于奇数位号上的数字乘以 2。
|
// 2.将奇位乘积的个十位全部相加，再加上所有偶数位上的数字。
|
// 3.将加法和加上校验位能被 10 整除。 ）
|
luhn: function (iccid) {
|
var s1 = 0,
|
s2 = 0;
|
iccid = iccid.substring(0, iccid.length - 1);
|
var reverse = '';
|
for (var i = iccid.length; i > 0; i--) {
|
reverse += iccid.charAt(i - 1);
|
}
|
for (i = 0; i < reverse.length; i++) {
|
var digit = parseInt(reverse.charAt(i), 10);
|
if (i % 2 != 0) {
|
// this is for odd digits, they are 1-indexed in the
|
// algorithm
|
s1 += digit;
|
} else {
|
// add 2 * digit for 0-4, add 2 * digit - 9 for 5-9
|
s2 += 2 * digit;
|
if (digit >= 5) {
|
s2 -= 9;
|
}
|
}
|
}
|
var sum = 10 - (s1 + s2) % 10;
|
if (sum === 10) {
|
sum = 0;
|
}
|
return iccid + sum;
|
},
|
bindBankCard: function () {
|
let _this = this;
|
|
if (this.bankInfo.card) {
|
if (this.bankInfo.card.length !== 19) {
|
this.validateTip('请输入正确的银行卡号');
|
return false;
|
}
|
} else {
|
this.validateTip('请输入正确的银行卡号');
|
return false;
|
}
|
if (this.luhn(this.bankInfo.card) !== this.bankInfo.card) {
|
this.validateTip('请输入正确的银行卡号');
|
return false;
|
}
|
// 验证储蓄卡所属银行暂不支持---等规则
|
if (validate.checkValEmpty(this.bankName)) {
|
this.validateTip('该银行卡不属于储蓄卡或其所属银行暂不支持');
|
return false;
|
}
|
if (!this.agreementChecked) {
|
this.validateTip('请同意协议');
|
return false;
|
}
|
let submitBankInfo = {
|
prodId: this.$route.query.prodId,
|
card: this.bankInfo.card,
|
bankName: this.getBankCode(this.bankName),
|
bankNameValue: this.bankName
|
};
|
SystApi.saveBankCardInfo(submitBankInfo).then(
|
response => {
|
if (response.errorCode === 0) {
|
_this.$router.push({
|
path: '/incomeLoan/phototInfo',
|
query: {prodId: _this.$route.query.prodId}
|
});
|
}
|
},
|
error => {
|
statusCodeManage.showTipOfStatusCode(error, _this)
|
}
|
);
|
},
|
querySupportBank: function () {
|
// 查询支持的银行卡
|
this.showBankList = true;
|
},
|
updatePersonalInfo: function () {
|
this.$router.push({
|
path: '/incomeLoan/personalInfo',
|
query: {prodId: this.$route.query.prodId}
|
});
|
}
|
},
|
components: {
|
Group,
|
GroupTitle,
|
Cell,
|
XInput,
|
Selector,
|
XHeader,
|
XButton,
|
Box,
|
Flow,
|
FlowState,
|
FlowLine,
|
XDialog,
|
Actionsheet,
|
personInfo,
|
collectData
|
}
|
};
|
</script>
|
|
<style lang="less">
|
@import "../../style/mixin.less";
|
|
.loan-info-box {
|
background-color: @color-background-default;
|
.vux-header {
|
.color-linear-gradient(@color-primary-light, @color-primary, 90deg);
|
.vux-header-left {
|
.left-arrow:before {
|
border: solid 1px @color-white;
|
border-width: 2px 0 0 2px;
|
}
|
}
|
}
|
.vux-x-input.disabled .weui-input,
|
.vux-x-input.disabled .weui-label {
|
-webkit-opacity: 1;
|
opacity: 1;
|
color: @color-text-primary;
|
}
|
.progressState div p {
|
font-size: @font-size-tiny;
|
}
|
.weui-wepay-flow__state {
|
width: 16px;
|
height: 16px;
|
top: -1px;
|
padding-top: 1px;
|
}
|
.currentStep .weui-wepay-flow__state {
|
width: 16px;
|
height: 16px;
|
padding-top: 1px;
|
border: 1px solid @color-primary;
|
color: @color-primary;
|
border-radius: 50%;
|
background-color: @color-white;
|
}
|
.weui-input {
|
height: 28px;
|
line-height: 28px;
|
}
|
.weui-wepay-flow, .weui-wepay-flow-auto {
|
padding: 10px 40px 30px;
|
background: @color-white;
|
}
|
.weui-wepay-flow__li_done .weui-wepay-flow__state,
|
.weui-wepay-flow__process {
|
background-color: @color-primary;
|
}
|
}
|
|
.header-space {
|
height: 46px;
|
}
|
|
.weui-wepay-flow__title-bottom {
|
font-size: 12px;
|
}
|
|
.loan-info-box .weui-input {
|
text-align: right;
|
}
|
|
.loan-info-box .weui-cell_select .weui-select {
|
padding-right: 2.5rem;
|
direction: rtl;
|
}
|
|
.loan-info-box .weui-btn_primary {
|
.color-linear-gradient(@color-primary-light, @color-primary, 90deg);
|
}
|
|
.bind-tip {
|
padding-left: 15px;
|
padding-top: 10px;
|
line-height: 1.6;
|
color: @color-primary;
|
}
|
|
.support-bank .weui-dialog {
|
border-radius: 8px;
|
padding-bottom: 8px;
|
}
|
|
.support-bank .bank-list {
|
height: 350px;
|
overflow: auto;
|
}
|
|
.support-bank .vux-close {
|
margin-top: 8px;
|
margin-bottom: 8px;
|
}
|
|
.register-checkbox {
|
-webkit-appearance: none;
|
appearance: none;
|
outline: 0;
|
font-size: 0;
|
border: 1px solid @color-divider-regular;
|
background-color: @color-white;
|
border-radius: 3px;
|
width: 13px;
|
height: 13px;
|
position: relative;
|
vertical-align: 0;
|
top: 2px;
|
}
|
|
.register-checkbox:checked:before {
|
font-family: 'weui';
|
font-style: normal;
|
font-weight: normal;
|
font-letiant: normal;
|
text-transform: none;
|
text-align: center;
|
speak: none;
|
display: inline-block;
|
vertical-align: middle;
|
text-decoration: inherit;
|
content: '\EA08';
|
color: @color-primary;
|
font-size: 13px;
|
position: absolute;
|
top: 50%;
|
left: 50%;
|
-webkit-transform: translate(-50%, -48%) scale(0.73);
|
transform: translate(-50%, -48%) scale(0.73);
|
}
|
|
.register-agree {
|
display: inline-block;
|
margin-top: 10px;
|
padding-left: 15px;
|
font-size: 13px;
|
}
|
|
.register-agree-text {
|
color: @color-text-primary;
|
}
|
|
.agreementContent {
|
color: @color-primary;
|
}
|
|
.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: @color-white;
|
}
|
|
</style>
|
