<template>
|
<div class="loan-info-box">
|
<x-header slot="header"
|
style="width:100%;height:46px;background-color: #ec6758"
|
title="贷款查询"
|
:left-options="{backText: ''}">
|
<router-link to="/bnd/loan/quota" tag="span" class="slotRight_l" slot="right">我的贷款</router-link>
|
</x-header>
|
<group>
|
<tab>
|
<tab-item :selected="currTab===0" @on-item-click="repayList">当前账单</tab-item>
|
<tab-item :selected="currTab===1" @on-item-click="repayList">历史账单</tab-item>
|
</tab>
|
</group>
|
<div>
|
<ul class="list_title">
|
<li v-for="i in repayListArr" :key="i.loanId" @click="goBillDetails(i)">
|
<div class="list_header">
|
<h4>【借款账单<span> {{showFormDate(i.creTime)}}</span>】</h4>
|
<span class="list_ritg">{{i.loanStatusValue}}</span>
|
</div>
|
<div class="list_liebiao">
|
<p>账单总额(元)</p>
|
<div class="list_next">
|
<p>￥<span>{{i.loanAmt|formatMoney}}</span></p>
|
<span class="list_porright">详情<i class="iconfont icon-more-up"></i></span>
|
</div>
|
</div>
|
<div class="list_bom">
|
<div>
|
<p>下期应还(元)</p>
|
<span>{{i.nextRepayAmt|formatMoney}}</span>
|
</div>
|
<div>
|
<p>还款期数</p>
|
<span>{{i.nextTerm||i.totalTerm}}/{{i.totalTerm}}期</span>
|
</div>
|
<div>
|
<p>下次还款日</p>
|
<span>{{showFormDate(i.nextRepayDay)||'无'}}</span>
|
</div>
|
</div>
|
</li>
|
<li v-if="repayListArr.length===0" class="noData">暂无该类型账单</li>
|
</ul>
|
</div>
|
</div>
|
</template>
|
|
<script>
|
import {XHeader, Group, Tab, TabItem} from 'vux';
|
import SystApi from '../../../api/api';
|
import statusCodeManage from '../../../api/statusCodeManage';
|
import formDate from '../../../tool/date';
|
import validate from '../../../tool/validator';
|
|
export default {
|
name: 'loanDetails',
|
components: {XHeader, Group, Tab, TabItem},
|
data() {
|
return {
|
repayListArr: [], // 账单数据列表
|
currTab: 0//当前tab选中的下标
|
};
|
},
|
filters: {
|
// 金额格式化
|
formatMoney(val) {
|
return validate.formatMoney(val || 0)
|
}
|
},
|
methods: {
|
//格式化日期
|
showFormDate(dateTime) {
|
return formDate(dateTime, 'YYYY-MM-DD');
|
},
|
//跳转到账单详情页面
|
goBillDetails(i) {
|
this.$router.push({
|
path: '/bnd/repayMent/billDetails', query: {loanId: i.loanId,}
|
})
|
},
|
// 查看贷款列表：获取账单列表数据；index：列表类型 1-当前账单，2-历史账单
|
repayList(index) {
|
this.currTab = index;
|
SystApi.repayList({prodId: sessionStorage.prodId, listType: index + 1}).then(res => {
|
this.repayListArr = res.body
|
}, err => {
|
statusCodeManage.showTipOfStatusCode(err)
|
})
|
}
|
},
|
activated() {
|
this.repayList(this.currTab)
|
}
|
};
|
</script>
|
|
<style lang="less">
|
@import "../../../style/mixin.less";
|
|
.loan-info-box {
|
padding-bottom: 1rem;
|
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;
|
}
|
}
|
}
|
|
}
|
|
.slotRight_l {
|
color: @color-white;;
|
font-size: @font-size-medium;
|
position: relative;
|
top: -0.1rem;
|
}
|
|
.vux-tab .vux-tab-item.vux-tab-selected {
|
color: @color-gradient-darkBlue-right !important;
|
border-bottom: 2px solid @color-gradient-darkBlue-right !important;
|
}
|
|
.vux-tab .vux-tab-item {
|
font-size: @font-size-base !important;
|
}
|
|
.vux-tab-ink-bar {
|
background-color: @color-gradient-darkBlue-right !important;
|
height: 1px !important;
|
}
|
|
.list_title {
|
margin: 0 1rem;
|
li {
|
list-style: none;
|
margin-top: 1rem;
|
}
|
.noData {
|
text-align: center;
|
font-size: 16px;
|
}
|
.list_header {
|
.color-linear-gradient;
|
font-size: @font-size-base;
|
color: @color-white;
|
position: relative;
|
height: 3.5rem;
|
line-height: 3.5rem;
|
border-top-left-radius: 3px;
|
border-top-right-radius: 3px;
|
h4 {
|
font-weight: normal;
|
}
|
.list_ritg {
|
position: absolute;
|
top: 0;
|
right: 0.5rem;
|
}
|
|
}
|
.list_liebiao {
|
background-color: @color-white;
|
padding: 0.8rem;
|
font-size: @font-size-small;
|
padding-bottom: 0;
|
p {
|
color: @color-text-third;
|
}
|
.list_next {
|
position: relative;
|
border-bottom: 1px dashed @color-divider-regular;
|
p {
|
color: @color-gradient-darkBlue-right;
|
font-size: @font-size-large;
|
padding-bottom: 0.5rem;
|
}
|
.list_porright {
|
display: inline-block;
|
color: @color-text-third;
|
font-size: @font-size-medium;
|
position: absolute;
|
bottom: 1rem;
|
right: 0;
|
}
|
}
|
}
|
.list_bom {
|
background-color: @color-white;
|
overflow: hidden;
|
width: 100%;
|
> div {
|
float: left;
|
width: 33.3%;
|
text-align: center;
|
padding: 0.5rem 0;
|
}
|
> div p {
|
color: @color-text-third;
|
font-size: @font-size-small;
|
}
|
> div span {
|
font-size: @font-size-medium;
|
}
|
}
|
}
|
|
.iconfont {
|
font-size: @font-size-small;
|
padding-left: 0.5rem;
|
}
|
</style>
|
