<template>
|
<div class="loan-info-box">
|
<x-header slot="header"
|
style="width:100%;height:46px;background-color: #ec6758; "
|
title="借款"
|
:left-options="{backText: ''}">
|
</x-header>
|
<div class="loan_jiekuan">
|
<h4>按日计息，日利率{{loanInfo.dayRate}}%，单笔最低贷款1,000元</h4>
|
<div>
|
<img src="../../../assets/imgs/yinghangbiaozhi.jpg" alt="">
|
<span>{{loanInfo.bankName}}</span><span>({{loanInfo.bankCardNo}})</span>
|
</div>
|
</div>
|
<group class="personInfo" text-align="right">
|
<div class="loanMoney_l">
|
<p>贷款金额</p>
|
<!--（可贷金额：<b style="color: #0092f1;">{{loanInfo.creditLimitAvailable|formatMoney}}</b>元）-->
|
<div class="inputBox">
|
<x-input v-model.trim="loanAmt" type="tel" title="￥" placeholder="请输入贷款金额"
|
required @on-blur="trial" @input.native="inputChange"></x-input>
|
<span @click="loanAmt=loanInfo.creditLimitAvailable">全部借出</span>
|
</div>
|
</div>
|
<selector title="还款期数" :options="loanTermList" placeholder="请选择"
|
v-model="loanTerm" @on-change="trial"></selector>
|
<selector title="贷款用途" :options="loanUseList" placeholder="请选择"
|
v-model="loanUse" @on-change="trial"></selector>
|
<cell title="还款方式">{{loanInfo.repayType}}</cell>
|
<cell title="首次还款日">{{showFormDate(repayTrial.firstRepayDay)}}</cell>
|
<cell title="固定还款日">暂定</cell>
|
<cell title="每期还款金额">{{repayTrial.repayAmt|formatMoney}}</cell>
|
</group>
|
<div style="height: 40px"></div>
|
<box gap="0 15px">
|
<x-button v-if="canClick" type="primary" @click.native="goQoutaInfo">下一步</x-button>
|
<x-button v-else type="" @click.native="clickTips">下一步</x-button>
|
</box>
|
<div class="nuber_l">客户热线：<span>{{loanInfo.customerHotline}}</span></div>
|
<div style="height: 20px"></div>
|
</div>
|
</template>
|
|
<script>
|
import {
|
XHeader,
|
XInput,
|
Group,
|
Cell,
|
Selector,
|
XButton,
|
Box
|
} from 'vux';
|
import SysApi from '../../../api/api';
|
import validate from '../../../tool/validator';
|
import fToast from '../../../tool/fToast';
|
import statusCodeManage from '../../../api/statusCodeManage';
|
import formDate from '../../../tool/date';
|
|
export default {
|
name: 'loanInfo',
|
components: {
|
XHeader,
|
Group,
|
XInput,
|
Cell,
|
Selector,
|
XButton,
|
Box
|
},
|
data() {
|
return {
|
//贷款信息数据
|
loanInfo: {},
|
//贷款用途列表
|
loanUseList: [],
|
//当前选择的贷款用途
|
loanUse: null,
|
//还款期数列表
|
loanTermList: [],
|
//当前选择的还款期数
|
loanTerm: null,
|
//当前输入的贷款金额
|
loanAmt: null,
|
//借款试算结果
|
repayTrial: {}
|
};
|
},
|
filters: {
|
// 金额格式化
|
formatMoney(val) {
|
return validate.formatMoney(val) + '元'
|
}
|
},
|
computed: {
|
canClick() {
|
return this.loanAmt && Number(this.loanAmt) % 100 === 0 && this.loanUse && this.loanTerm
|
}
|
},
|
methods: {
|
//格式化日期
|
showFormDate(dateTime) {
|
return formDate(dateTime, 'MM-DD') || '暂定';
|
},
|
//贷款金额输入框input事件，过滤非数字、不是整百
|
inputChange() {
|
setTimeout(() => {
|
if (this.loanAmt) {
|
if (this.loanAmt.length > 9) {
|
this.loanAmt = this.loanAmt.substring(0, 9);
|
} else {
|
this.loanAmt = this.loanAmt.replace(/[^\d]/g, '');
|
if (Number(this.loanAmt) > Number(this.loanInfo.creditLimitAvailable)) {
|
this.loanAmt = this.loanInfo.creditLimitAvailable
|
}
|
}
|
}
|
}, 1);
|
},
|
//未填写数据时，文字提示
|
clickTips() {
|
if (validate.checkValEmpty(this.loanAmt)) {
|
fToast.toast('请输入贷款金额');
|
return;
|
} else if (Number(this.loanAmt) % 100) {
|
fToast.toast('请输入整百贷款金额');
|
return;
|
}
|
if (validate.checkValEmpty(this.loanTerm)) {
|
fToast.toast('请选择还款期数');
|
return;
|
}
|
if (validate.checkValEmpty(this.loanUse)) {
|
fToast.toast('请选择贷款用途');
|
}
|
},
|
//跳转到【贷款信息确认】页面
|
goQoutaInfo() {
|
sessionStorage.loanInfo = JSON.stringify(Object.assign({}, this.loanInfo, this.repayTrial, {
|
loanAmt: this.loanAmt,
|
loanTerm: this.loanTerm,
|
loanUse: this.loanUse,
|
repayType: '等额本息'
|
}));
|
this.$router.push({path: '/bnd/loan/quotaInfo'});
|
},
|
//借款试算接口
|
trial() {
|
if (Number(this.loanAmt) % 100) {
|
fToast.toast('请输入整百贷款金额');
|
} else {
|
if (this.canClick) {
|
SysApi.trial({
|
prodId: sessionStorage.prodId,
|
loanAmt: this.loanAmt,
|
loanTerm: this.loanTerm
|
}).then(res => {
|
this.repayTrial = res.body
|
}, err => {
|
statusCodeManage.showTipOfStatusCode(err)
|
})
|
}
|
}
|
},
|
// 得到选项列表统一的方法
|
getOptionsList(optionList) {
|
let tmpList = [];
|
if (optionList instanceof Array) {
|
optionList.forEach(function (item) {
|
tmpList.push({
|
key: item.code,
|
value: item.name
|
});
|
});
|
}
|
return tmpList;
|
},
|
// 初始化我的贷款页面接口：获取【我的贷款】信息：如可用额度、总额度等等
|
initMyLoan() {
|
this.loanInfo = JSON.parse(sessionStorage.loanInfo);
|
this.loanInfo.repayType = '等额本息';
|
this.loanUseList = this.getOptionsList(this.loanInfo.loanUseList);
|
this.loanTermList = this.getOptionsList(this.loanInfo.loanTermList);
|
}
|
},
|
activated() {
|
this.initMyLoan()
|
}
|
};
|
</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;
|
}
|
}
|
}
|
.weui-cells {
|
margin-top: 0;
|
}
|
}
|
|
.weui-input, .weui-cell__bd {
|
font-size: @font-size-base;
|
}
|
|
.weui-label {
|
font-size: @font-size-base;
|
}
|
|
.loan-info-box .weui-cell_select .weui-select {
|
padding-right: 2.5rem;
|
direction: rtl;
|
font-size: @font-size-medium;
|
}
|
|
.loan-info-box .weui-btn_primary {
|
.color-linear-gradient(@color-primary-light, @color-primary, 90deg);
|
}
|
|
.loan-info-box .weui-btn_primary:not(.weui-btn_disabled):active {
|
color: rgba(255, 255, 255, 0.6);
|
background-color: rgb(241, 95, 79);;
|
}
|
|
/*------------------------------*/
|
|
.nuber_l {
|
text-align: center;
|
font-size: @font-size-medium;
|
width: 100%;
|
height: 2.5rem;
|
padding-top: 3rem;
|
span {
|
display: inline-block;
|
color: @color-primary;
|
text-decoration: underline;
|
}
|
}
|
|
.loan_jiekuan {
|
h4 {
|
color: @color-text-third;
|
font-size: @font-size-small;
|
font-weight: normal;
|
padding: 0.5rem 1rem;
|
}
|
div {
|
padding: 1rem;
|
background: @color-white;
|
}
|
div > img {
|
width: 1.25rem;
|
height: 1.25rem;
|
vertical-align: middle;
|
padding-right: 0.5rem;
|
}
|
div > span {
|
font-size: @font-size-base;
|
vertical-align: middle;
|
}
|
}
|
|
.vux-label {
|
font-size: @font-size-base !important;
|
}
|
|
.weui-cell__ft {
|
font-size: @font-size-medium !important;
|
color: @color-black !important;
|
}
|
|
.loanMoney_l {
|
padding: 1rem 1.25rem;
|
padding-bottom: 0;
|
position: relative;
|
p {
|
font-size: @font-size-base;
|
padding-bottom: 0.5rem;
|
}
|
.inputBox {
|
display: flex;
|
align-items: center;
|
justify-content: space-between;
|
.weui-cell {
|
padding: 0.83333rem 0;
|
}
|
span {
|
width: 80px;
|
text-align: right;
|
font-size: @font-size-medium;
|
color: @color-primary;
|
}
|
}
|
|
}
|
|
.weui-btn:after {
|
border: none !important;
|
}
|
|
.weui-btn {
|
font-size: @font-size-primary !important;
|
}
|
|
</style>
|
