<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="repay_button">
|
<div class="repay_div vux-1px-b">请选择还款期数</div>
|
<ul>
|
<li v-for="(item,index) in repayPlanList" :key="index">
|
<span>
|
<img v-if="item.tableStatus" src="../../../assets/imgs/yuqi.png" alt="">
|
<img v-if="item.payOffFlag" src="../../../assets/imgs/jieqing.png" alt="">
|
</span>
|
<x-button v-if="item.isChoose" :type="item.isClick?'primary':'default'"
|
@click.native="onprimt(item)"> {{item.currTerm}}期
|
</x-button>
|
<x-button v-else disabled>{{item.currTerm}}期</x-button>
|
</li>
|
</ul>
|
</div>
|
<group class="mt_20">
|
<div class="info_queren">
|
<h4>还款信息</h4>
|
</div>
|
<ul class="list_shuju">
|
<li>
|
<span>还款总额</span>
|
<span>{{repayTrialObj.total|formatMoney}}</span>
|
</li>
|
<li>
|
<span>本金金额</span>
|
<span>{{repayTrialObj.principal|formatMoney}}</span>
|
</li>
|
<li>
|
<span>利息</span>
|
<span>{{repayTrialObj.interest|formatMoney}}</span>
|
</li>
|
<li>
|
<span>服务费</span>
|
<span>{{repayTrialObj.servicecharge|formatMoney}}</span>
|
</li>
|
<li>
|
<span>罚息金额</span>
|
<span>{{repayTrialObj.penalty|formatMoney}}</span>
|
</li>
|
<li>
|
<span>代扣银行卡</span>
|
<span>{{repayTrialObj.bankName}} ****{{repayTrialObj.bankCardNo}}</span>
|
</li>
|
</ul>
|
</group>
|
<div class="zhuyi">
|
<span>注：1.仅能在当期还款日7天内提前还款；</span>
|
<span>2.若存在逾期，须按顺序先将逾期项还清。</span>
|
</div>
|
<div style="height: 20px"></div>
|
<box gap="0 15px">
|
<x-button :type="termList.length?'primary':''" :disabled="!termList.length"
|
@click.native="isPay=true">确认还款
|
</x-button>
|
</box>
|
<div style="height: 20px"></div>
|
<div class="passwrod_jianpan">
|
<pay-keyboard
|
v-if="isPay"
|
:is-pay='isPay'
|
@pas-end='pasEnd'
|
@close='isPay=false'>
|
<!-- 自定义支付动画 -->
|
<div slot="loading-ani">
|
<svg></svg>
|
</div>
|
</pay-keyboard>
|
</div>
|
</div>
|
</template>
|
|
<script>
|
import {XHeader, Group, XButton, Box, md5} from 'vux';
|
import SysApi from '../../../api/api';
|
import validate from '../../../tool/validator';
|
import statusCodeManage from '../../../api/statusCodeManage';
|
// ---------支付密码----
|
import payKeyboard from '../../../components/payKeyboard/PayKeyboard'
|
|
export default {
|
name: 'activeRepayment',
|
components: {XHeader, Group, XButton, Box, payKeyboard},
|
data() {
|
return {
|
repayTrialObj: {},// 主动还款/提前结清还款信息数据
|
repayPlanList: [],//还款计划
|
termList: [],//主动还款选取的还款期数
|
isPay: false, // 是否显示支付密码输入框
|
repayType: 1//还款类型 1-主动还款，2-提前结清
|
};
|
},
|
filters: {
|
// 金额格式化
|
formatMoney(val) {
|
return validate.formatMoney(val) + '元'
|
}
|
},
|
methods: {
|
//期数点击事件
|
onprimt(item) {
|
item.isClick = !item.isClick;
|
if (item.isClick) {
|
this.termList.push(item.currTerm)
|
} else {
|
let i = this.termList.findIndex(val => {
|
return val === item.currTerm;
|
});
|
this.termList.splice(i, 1);
|
}
|
this.repayTrial();
|
},
|
// 主动还款/提前结清还款信息查询：获取数据
|
repayTrial() {
|
SysApi.repayTrial({
|
prodId: sessionStorage.prodId,
|
loanId: this.$route.query.loanId,
|
repayType: this.repayType,
|
termList: this.termList
|
}).then(res => {
|
this.repayTrialObj = res.body
|
}, err => {
|
statusCodeManage.showTipOfStatusCode(err)
|
})
|
},
|
// 输入支付密码回调的方法
|
pasEnd(val) {
|
this.isPay = false;
|
let pwd = md5(sessionStorage.newPhoneNum + val);
|
sessionStorage.repayType = this.repayType;
|
let parmas = {
|
pwd,
|
termList: this.termList,
|
repayType: this.repayType,
|
prodId: sessionStorage.prodId,
|
loanId: this.$route.query.loanId,
|
repayAmt: this.repayTrialObj.total,
|
};
|
SysApi.repaySubmitRepay(parmas).then(
|
res => {
|
this.$router.push({
|
path: '/bnd/repayMent/subSuccess',
|
query: {loanId: this.$route.query.loanId}
|
});
|
},
|
err => {
|
statusCodeManage.showTipOfStatusCode(err)
|
}
|
)
|
}
|
},
|
activated() {
|
this.isPay = false;
|
this.repayPlanList = JSON.parse(sessionStorage.repayPlanList).map(val => {
|
this.$set(val, 'isClick', false);
|
return val
|
})
|
}
|
};
|
</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;
|
}
|
}
|
}
|
}
|
|
.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);;
|
}
|
|
.vux-no-group-title {
|
margin-top: 0 !important;
|
}
|
|
.info_queren {
|
position: relative;
|
height: 3.5rem;
|
padding: 0 1rem;
|
border-bottom: 1px solid @color-divider-regular;
|
h4 {
|
font-size: @font-size-primary;
|
font-weight: normal;
|
line-height: 3.5rem;
|
}
|
p {
|
position: absolute;
|
top: 1rem;
|
right: 1rem;
|
vertical-align: middle;
|
font-size: @font-size-medium;
|
color: @color-primary;
|
}
|
img {
|
width: 1.2rem;
|
padding-right: 0.5rem;
|
vertical-align: middle;
|
position: relative;
|
top: -0.1rem;
|
}
|
}
|
|
.list_shuju {
|
padding: 1rem;
|
li {
|
padding-bottom: 0.5rem;
|
list-style: none;
|
}
|
span {
|
display: inline-block;
|
}
|
span:first-child {
|
color: @color-text-secondary;
|
width: 9rem;
|
font-size: @font-size-base;
|
}
|
span:last-child {
|
font-size: @font-size-medium;
|
color: @color-text-third;
|
}
|
}
|
|
.repay_button {
|
background-color: @color-white !important;
|
.repay_div {
|
padding: 0.8rem 1rem 0.8rem 1rem;
|
font-size: @font-size-primary;
|
}
|
ul {
|
overflow: hidden;
|
width: 96%;
|
padding: 2% 2% 4% 2%;
|
}
|
ul > li {
|
float: left;
|
width: 25%;
|
list-style: none;
|
margin-top: 0.5rem;
|
position: relative;
|
}
|
ul > li span {
|
display: inline-block;
|
width: 2rem;
|
height: 2rem;
|
position: absolute;
|
top: 0;
|
left: 5%;
|
z-index: 9999;
|
}
|
img {
|
width: 100%;
|
height: 100%;
|
border-top-left-radius: 3px;
|
position: absolute;
|
left: 0;
|
top: 0;
|
}
|
.weui-btn_primary {
|
color: @color-white !important;
|
background-color: @color-primary !important;
|
width: 91%;
|
margin: 0 auto;
|
overflow: hidden;
|
}
|
ul > li button {
|
width: 90%;
|
height: 3.5rem;
|
margin: 0 auto;
|
background-color: @color-white;
|
color: @color-black;
|
border-radius: 3px !important;
|
font-size: @font-size-base !important;
|
/*<!--border: 1Px solid @color-divider-regular;-->*/
|
&:before {
|
.setTopLine();
|
}
|
overflow: inherit;
|
}
|
button:before {
|
border-radius: 8px;
|
}
|
button:after {
|
border: none !important;
|
}
|
|
}
|
|
.zhuyi {
|
padding: 0.5rem 1rem;
|
color: @color-text-placeholder-red;
|
font-size: @font-size-small;
|
span:last-child {
|
display: block;
|
padding-left: 2rem;
|
}
|
}
|
|
.mt_20 {
|
margin-top: 0.5rem;
|
}
|
|
.weui-btn:after {
|
border: none !important;
|
}
|
|
.weui-btn {
|
font-size: @font-size-primary !important;
|
}
|
</style>
|
