<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/repayMent/loanDetails" tag="span" class="slotRight_l" slot="right">贷款查询</router-link>
|
</x-header>
|
<div class="title_quota">
|
<ul>
|
<li><p>可用额度(元)</p></li>
|
<li><p>{{loanInfo.creditLimitAvailable|formatMoney}}</p></li>
|
</ul>
|
<div class="bolang"><img src="../../../assets/imgs/collect_result_bg.png" alt=""></div>
|
</div>
|
<div class="quota_L">
|
<div>
|
<p>额度有效期</p>
|
<span>{{showFormDate(loanInfo.expirationDate)}}</span>
|
<b></b>
|
</div>
|
<div>
|
<p>总额度(元)</p>
|
<span>{{loanInfo.creditLimitTotal|formatMoney}}</span>
|
</div>
|
</div>
|
<div style="height: 40px"></div>
|
<box gap="0 15px">
|
<x-button type="primary" link="/bnd/loan/loanInfo">去借钱</x-button>
|
<router-link to="/bnd/loan/modifyPasswrod" tag="div" class="password_xiugai">修改交易密码</router-link>
|
</box>
|
<div class="nuber_l">客户热线：<span>{{loanInfo.customerHotline}}</span></div>
|
<div style="height: 20px"></div>
|
<alert v-model="showMsg" title="包你贷" :content="msg" button-text="去看看"
|
@on-hide="$router.push('/bnd/repayMent/loanDetails')"></alert>
|
</div>
|
</template>
|
|
<script>
|
import {XHeader, XButton, Box, Alert} from 'vux';
|
import validate from '../../../tool/validator';
|
import SysApi from '../../../api/api';
|
import statusCodeManage from '../../../api/statusCodeManage';
|
import formDate from '../../../tool/date';
|
|
export default {
|
name: 'quota',
|
components: {XHeader, XButton, Box, Alert},
|
data() {
|
return {
|
loanInfo: {},//贷款信息数据
|
msg: '',//通知提示信息文字
|
//是否显示通知信息
|
showMsg: false
|
};
|
},
|
filters: {
|
// 金额格式化
|
formatMoney(val) {
|
return validate.formatMoney(val)
|
}
|
},
|
methods: {
|
//格式化日期
|
showFormDate(dateTime) {
|
return formDate(dateTime, 'YYYY-MM-DD');
|
},
|
// 初始化我的贷款页面接口：获取【我的贷款】信息：如可用额度、总额度等等
|
initMyLoan() {
|
SysApi.initMyLoan({prodId: sessionStorage.prodId}).then(
|
res => {
|
this.loanInfo = res.body;
|
sessionStorage.loanInfo = JSON.stringify(res.body)
|
}, err => {
|
statusCodeManage.showTipOfStatusCode(err)
|
})
|
},
|
//获取通知信息
|
getRepayNotice() {
|
SysApi.repayNotice({prodId: sessionStorage.prodId}).then(
|
res => {
|
if (res.body) {
|
this.msg = res.body.noticeMsg;
|
this.showMsg = true
|
}
|
// else {
|
// this.msg = '您有一笔借款，将在三天后还款。'
|
// this.showMsg = true
|
// }
|
}, err => {
|
statusCodeManage.showTipOfStatusCode(err)
|
}
|
)
|
}
|
},
|
activated() {
|
if (this.$route.query.prodId) sessionStorage.prodId = this.$route.query.prodId;
|
this.initMyLoan();
|
this.getRepayNotice();
|
}
|
};
|
</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;
|
}
|
}
|
.slotRight_l {
|
color: #fff;
|
font-size: @font-size-medium;
|
position: relative;
|
top: -0.1rem;
|
}
|
}
|
|
}
|
|
.loan-info-box .weui-btn_primary {
|
.color-linear-gradient(@color-primary-light, @color-primary, 90deg);
|
}
|
|
.title_quota {
|
width: 100%;
|
height: 18rem;
|
position: relative;
|
.color-linear-gradient;
|
.bolang {
|
position: absolute;
|
bottom: -6px;
|
width: 100%;
|
img {
|
width: 100%;
|
}
|
}
|
ul {
|
position: absolute;
|
left: 50%;
|
top: 40%;
|
transform: translate(-50%, -50%);
|
}
|
li {
|
text-align: center;
|
list-style: none;
|
color: @color-white;
|
padding: 0.25rem 0;
|
}
|
li:first-child {
|
font-size: @font-size-medium;
|
}
|
li:last-child {
|
font-size: 45Px;
|
}
|
}
|
|
.quota_L {
|
position: relative;
|
background: @color-white;
|
overflow: hidden;
|
> div {
|
width: 50%;
|
float: left;
|
text-align: center;
|
padding: 1rem 0;
|
position: relative;
|
}
|
p {
|
color: @color-text-third;
|
font-size: @font-size-small;
|
}
|
span {
|
font-size: @font-size-base;
|
display: inline-block;
|
}
|
b {
|
width: 1px;
|
height: 4rem;
|
position: absolute;
|
top: 1rem;
|
right: 0;
|
background: @color-divider-regular;
|
}
|
|
}
|
|
.password_xiugai {
|
text-align: center;
|
font-size: @font-size-medium;
|
padding: 1rem 0;
|
color: @color-primary;
|
}
|
|
.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;
|
}
|
|
}
|
|
.weui-btn:after {
|
border: none !important;
|
}
|
|
.weui-btn {
|
font-size: @font-size-primary !important;
|
}
|
</style>
|
