<script>
|
import navbar from "./components/navbar.vue";
|
import benefit from "@/pages/details/components/benefit.vue";
|
import sfkef from "@/components/sfkef/index.vue";
|
import {checkUserStatus, xinheyuanRepayPlanQuery} from '@/api/modules/user'
|
export default {
|
name: "index",
|
components:{
|
navbar,benefit,sfkef
|
},
|
onShow() {
|
xinheyuanRepayPlanQuery().then(res=>{
|
uni.hideLoading()
|
this.repayPlanInfo = res;
|
this.loading = false
|
})
|
},
|
onLoad() {
|
uni.showLoading({
|
mask: true,
|
})
|
this.statusBarHeight = uni.getStorageSync('statusBarHeight');
|
checkUserStatus().then(res=>{
|
uni.setStorageSync('customerId', res.customerId);
|
})
|
|
this.loading = false
|
|
},
|
data() {
|
return {
|
loading:true,
|
statusBarHeight:0,
|
userStatusInfo:{},
|
repayPlanInfo:{
|
planList:[]
|
}
|
};
|
},
|
methods: {
|
filterClass(status) {
|
switch (status) {
|
case "CLOSE":
|
return "close";
|
case "REPAYING":
|
return "doing";
|
case "OVERDUE":
|
return "faild";
|
case "PENDING":
|
return "wait";
|
case "FAIL":
|
return "faild";
|
default:
|
return "done"; //已还款处理中
|
}
|
},
|
substrStr(vla){
|
return vla?vla.substr(vla.length - 4):'';
|
},
|
calculateOverdueDays(item) {
|
const repayDate = new Date(item.repayDate);
|
const currentDate = new Date();
|
|
const timeDifference = currentDate - repayDate;
|
|
const overdueDays = Math.floor(timeDifference / (1000 * 3600 * 24));
|
|
return overdueDays;
|
},
|
handleExchange(){},
|
showBenefit(){
|
/* this.$refs.benefit.open();*/
|
},
|
toReplace(){
|
uni.navigateTo({
|
url: '/pages/replace/index'
|
})
|
},
|
isSameDay(date1, date2) {
|
const d1 = typeof date1 === "string" ? new Date(date1) : date1;
|
const d2 = typeof date2 === "string" ? new Date(date2) : date2;
|
|
// 比较年份、月份和日期
|
return (
|
d1.getFullYear() === d2.getFullYear() &&
|
d1.getMonth() === d2.getMonth() &&
|
d1.getDate() === d2.getDate()
|
);
|
},
|
checkStuRepay() {
|
if (this.repayPlanInfo.planList.length > 0) {
|
//逾期状态或当日为还款日
|
//逾期状态或当日为还款日且未还款
|
console.log(11);
|
const index = this.repayPlanInfo.planList.findIndex(
|
(item) =>
|
item.status === "OVERDUE" ||
|
item.status === "FAIL" ||
|
(item.status === "PENDING" &&
|
this.isSameDay(item.repayDate, new Date()))
|
);
|
return index !== -1;
|
}
|
return false;
|
},
|
checkStu() {
|
if (!this.repayPlanInfo.planList.length) {
|
return false;
|
}
|
|
const isRepaying = this.repayPlanInfo.planList.some(
|
(item) =>
|
item.status === "REPAYING" ||
|
this.isSameDay(item.repayDate, new Date())
|
);
|
|
// 检查是否为当期还款或放款日
|
const isLoadDateToday = this.isSameDay(this.repayPlanInfo.loadDate, new Date());
|
|
// 仅当不存在 "REPAYING" 且不为当期还款或放款日时返回 true
|
return !isRepaying && !isLoadDateToday;
|
},
|
toConfirm(fla){
|
uni.navigateTo({
|
url: `/pages/details/confirm/index?isClean=${fla?1:0}`
|
})
|
}
|
},
|
}
|
</script>
|
|
<template>
|
<view class="content" v-if="!loading">
|
<navbar bgColor="rgb(40, 101, 242)" title="还款详情"></navbar>
|
<view class="head" >
|
<view class="box">
|
<view class="name row1">借款金额（元）</view>
|
<view class="name row2">{{repayPlanInfo.totalAmt}}</view>
|
<view class="name row3">{{ repayPlanInfo.loadDate?repayPlanInfo.loadDate.replace(/-/g, '/'):''}}借款 ｜ 共{{repayPlanInfo.applyTerm}}期</view>
|
<view class="name row4" @click="showBenefit">兑换权益</view>
|
</view>
|
<view class="tips">
|
<view style="font-size: 28rpx;display: flex;justify-content: center;font-weight: 800">还款账户</view>
|
<view style="font-size: 32rpx;font-weight: 800">客服电话：{{$customerServicePhone}}</view>
|
</view>
|
|
</view>
|
<view class="card-info" >
|
<view class="display-column-center" style="font-size: 28rpx;color: #333333" >还款银行卡</view>
|
<view style="display: flex;justify-content: space-between;flex-direction: row">
|
<view class="display-column-center" style="font-weight: 800;font-size: 28rpx" >{{repayPlanInfo.bankName }}（{{substrStr(repayPlanInfo.bankCardNo)}}）</view>
|
<button class="replace-but" @click="toReplace">更换</button>
|
</view>
|
</view>
|
<view class="ul" :class="checkStuRepay() || checkStu()?'mb150':''">
|
<view class="title">还款计划</view>
|
|
<view class="li-box" v-if="repayPlanInfo.planList.length">
|
<view v-for="(item,index) in repayPlanInfo.planList" :key="index" class="li">
|
<view class="li-row1">
|
<view style="display: flex;flex-direction: row;font-size: 28rpx">
|
{{item.repayTerm}}/{{repayPlanInfo.applyTerm}}期
|
<view v-if="item.status === 'OVERDUE'" style="margin-left: 34rpx;color: #E23030;font-size: 24rpx;background: #FFE6E6;border-radius: 8rpx;padding:4rpx 8rpx;">逾期{{ calculateOverdueDays(item) }}天</view>
|
|
</view>
|
<view style="font-size: 24rpx;color: #666666;">还款日：{{item.repayDate}}</view>
|
</view>
|
<view class="li-row2">
|
<view style="font-size: 40rpx;color: #333333;font-weight: bold;display: flex;flex-direction: row;">
|
<view style="display: flex;justify-content: center">¥</view>
|
<view style="font-size: 56rpx;margin-left: 12rpx;">{{item.repayAmount}}</view>
|
</view>
|
<view style="font-size: 28rpx;display: flex;justify-content: center" :class="filterClass(item.status)">{{item.statusStr || "还款中"}}</view>
|
</view>
|
</view>
|
</view>
|
|
</view>
|
|
|
<view class="buts" v-if="checkStuRepay() || checkStu()">
|
<uv-button shape="circle" style="width: 48%;" type="primary" text="到期还款" @click='toConfirm(false)' v-if="checkStuRepay()"></uv-button>
|
<uv-button shape="circle" style="width: 48%;" type="primary" text="提前结清" @click='toConfirm(true)' v-if="checkStu()"></uv-button>
|
|
</view>
|
<benefit ref="benefit" @confirm="handleExchange" ></benefit>
|
<sfkef></sfkef>
|
</view>
|
</template>
|
|
<style scoped lang="scss">
|
page{
|
|
}
|
.content{
|
background: #F7F7F7;
|
}
|
.mb150{
|
margin-bottom: 150rpx;
|
}
|
.buts{
|
display: flex;
|
flex-direction: row;
|
justify-content: space-around;
|
position: fixed;
|
background: white;
|
width: 100%;
|
bottom: 0rpx;
|
padding: 30rpx;
|
|
}
|
.display-column-center{
|
display: flex;justify-content: center
|
}
|
.card-info{
|
display: flex;
|
justify-content: space-between;
|
flex-direction: row;
|
background: white;
|
padding: 32rpx 20rpx;
|
border-radius: 16rpx;
|
position: relative;
|
top: -50rpx;
|
margin: 0 32rpx;
|
}
|
.head{
|
|
|
background:url(#{$iconHttps}/static/img/details/bg.png) no-repeat;
|
background-size: 100% 100%;
|
padding: 32rpx;
|
padding-bottom: 50rpx;
|
padding-top: calc(var(--status-bar-height) + 54px);
|
.box{
|
text-align: center;
|
background: linear-gradient( 180deg, #F0F7FF 0%, #FFFFFF 100%);
|
border-radius: 16rpx ;
|
padding-top: 40rpx;
|
.name{
|
text-align: center;
|
margin-bottom: 20rpx;
|
|
}
|
.row1{
|
font-size: 28rpx;color: #666666;
|
margin-bottom: 20rpx;
|
}
|
.row2{
|
font-weight: bold;
|
font-size: 80rpx;
|
color: #333333;;
|
}
|
.row3{
|
font-size: 28rpx;
|
color: #333333;;
|
}
|
.row4{
|
font-size: 24rpx;
|
color: #999999;
|
margin-bottom: 28rpx;
|
}
|
}
|
.tips{
|
margin-top: 40rpx;
|
display: flex;
|
flex-direction: row;
|
justify-content: space-between;
|
color: #333333;
|
font-size: 28rpx;
|
font-weight: 800;
|
margin-bottom: 20rpx;
|
}
|
}
|
|
|
.replace-but{
|
width: 80rpx;
|
height: 50rpx;
|
line-height: 50rpx;
|
background: #4766FE;
|
color: white;
|
font-size: 24rpx;
|
padding: 0;
|
border-radius: 90rpx ;
|
}
|
|
|
.ul{
|
padding:0 32rpx;
|
padding-bottom: 30rpx;
|
.title{
|
color: #333333;
|
font-size: 28rpx;
|
font-weight: 800;
|
margin-bottom: 20rpx;
|
}
|
.li-box{
|
background: white;
|
border-radius: 16rpx;
|
padding: 0 20rpx;
|
.li{
|
padding-top: 40rpx;
|
border-bottom: 1rpx solid #EEEEEE;
|
&:last-child{
|
border-bottom: none;
|
}
|
.li-row1{
|
display: flex;
|
justify-content: space-between;
|
flex-direction: row;
|
margin-bottom: 18rpx;
|
}
|
.li-row2{
|
display: flex;
|
justify-content: space-between;
|
flex-direction: row;
|
margin-bottom: 38rpx;
|
}
|
}
|
|
}
|
}
|
|
.wait {
|
color: #fe9947;
|
}
|
|
.doing {
|
color: #4766fe;
|
}
|
|
.done {
|
color: #4766fe !important;
|
}
|
|
.faild {
|
color: #e23030;
|
}
|
.close {
|
color: #666;
|
}
|
</style>
|
