<template>
|
<div class="loan-info-box">
|
<x-header slot="header"
|
style="width:100%;height:46px;background-color: #ec6758"
|
title="还款计划"
|
:left-options="{backText: ''}"></x-header>
|
<group class="pd_btom">
|
<selector title="还款期数" :options="qualificationList" v-model="chooseTerm"></selector>
|
</group>
|
<group>
|
<div class="info_queren">
|
<h4>第{{chooseTerm}}期还款信息</h4>
|
</div>
|
<ul class="list_shuju">
|
<li>
|
<span>应还款总额</span>
|
<span>{{repayPlanObj.currTotal|formatMoney}}</span>
|
</li>
|
<li>
|
<span>应换总本金</span>
|
<span>{{repayPlanObj.currPrincipal|formatMoney}}</span>
|
</li>
|
<li>
|
<span>已还总本金</span>
|
<span>{{repayPlanObj.repayPrincipal|formatMoney}}</span>
|
</li>
|
<li>
|
<span>已还总利息</span>
|
<span>{{repayPlanObj.repayInterest|formatMoney}}</span>
|
</li>
|
<li>
|
<span>应还总服务费</span>
|
<span>{{repayPlanObj.currServicecharge|formatMoney}}</span>
|
</li>
|
<li>
|
<span>已还总服务费</span>
|
<span>{{repayPlanObj.repayServicecharge|formatMoney}}</span>
|
</li>
|
<li>
|
<span>应还总罚息</span>
|
<span>{{repayPlanObj.currPenalty|formatMoney}}</span>
|
</li>
|
<li>
|
<span>已还总罚息</span>
|
<span>{{repayPlanObj.repayPenalty|formatMoney}}</span>
|
</li>
|
<li>
|
<span>是否已还清</span>
|
<span>{{repayPlanObj.payOffFlag?'还清':'未还清'}}</span>
|
</li>
|
<li>
|
<span>是否逾期</span>
|
<span>{{repayPlanObj.tableStatus?'是':'否'}}</span>
|
</li>
|
<li>
|
<span>逾期天数</span>
|
<span>{{repayPlanObj.overdueDay||0}}天</span>
|
</li>
|
</ul>
|
</group>
|
</div>
|
</template>
|
|
<script>
|
import {XHeader, Group, GroupTitle, Selector} from 'vux';
|
import SysApi from '../../../api/api';
|
import validate from '../../../tool/validator';
|
import statusCodeManage from '../../../api/statusCodeManage';
|
|
export default {
|
name: 'repayPlan',
|
components: {XHeader, Group, GroupTitle, Selector},
|
data() {
|
return {
|
repayPlanList: [],// 还款计划取数据
|
chooseTerm: 1// 当前选择的期数,默认为1
|
};
|
},
|
filters: {
|
// 金额格式化
|
formatMoney(val) {
|
return validate.formatMoney(val || 0) + '元'
|
}
|
},
|
computed: {
|
qualificationList() {
|
return this.getOptionsList(this.repayPlanList)
|
},
|
repayPlanObj() {
|
if (this.repayPlanList.length) return this.repayPlanList[this.chooseTerm - 1]
|
else return {}
|
}
|
},
|
methods: {
|
// 还款计划页面初始化
|
repayDetail() {
|
SysApi.repayDetail({prodId: sessionStorage.prodId, loanId: this.$route.query.loanId}).then(res => {
|
this.repayPlanList = res.body.repayPlanList
|
}, err => {
|
statusCodeManage.showTipOfStatusCode(err)
|
})
|
},
|
// 得到选项列表统一的方法
|
getOptionsList(optionList) {
|
let tmpList = [];
|
if (optionList instanceof Array) {
|
optionList.forEach(function (item) {
|
tmpList.push({
|
key: item.currTerm,
|
value: item.currTerm + '期'
|
});
|
});
|
}
|
return tmpList;
|
},
|
},
|
activated() {
|
this.chooseTerm = 1;
|
this.repayDetail()
|
}
|
};
|
</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-label {
|
font-size: @font-size-base;
|
}
|
|
.loan-info-box .weui-cell_select .weui-select {
|
padding-right: 2.5rem;
|
direction: rtl;
|
}
|
|
.info_queren {
|
position: relative;
|
height: 3.5rem;
|
padding: 0 1rem;
|
border-bottom: 1px solid @color-divider-regular;
|
|
h4 {
|
font-size: @font-size-base;
|
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.4rem;
|
}
|
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;
|
}
|
}
|
|
.pd_btom {
|
padding-bottom: 0.5rem;
|
.vux-selector.weui-cell_select-after {
|
padding-left: 1rem !important;
|
}
|
select {
|
font-size: @font-size-medium;
|
color: @color-text-primary !important;
|
}
|
}
|
|
.vux-no-group-title {
|
margin-top: 0rem !important;
|
}
|
|
.weui-btn:after {
|
border: none !important;
|
}
|
|
.weui-btn {
|
font-size: @font-size-primary !important;
|
}
|
</style>
|
