<script>
|
import {xinheyuanRepayPlanTrial} from "@/api/modules/user";
|
|
export default {
|
props:{
|
period:{
|
type:Number,
|
default:12
|
},
|
amount:{
|
type:Number,
|
default:6000
|
},
|
repayQuotaRate:{
|
type:Number,
|
default:16
|
}
|
},
|
name: "index",
|
created() {
|
let pro = {
|
customerId: uni.getStorageSync('customerZcyId'),
|
customerBankcardId: uni.getStorageSync('customerBankcardId'),
|
amount:this.amount,
|
period:this.period,
|
}
|
xinheyuanRepayPlanTrial(pro).then(res=>{
|
this.repayPlanInfo = res
|
this.repayPlanList = res.repayPlanList;
|
let unm = 0 ;
|
for(let i = 0 ; i < res.repayPlanList.length ; i++){
|
unm += Number(res.repayPlanList[i].amt)
|
}
|
unm = Math.ceil(unm * 100) / 100; // 向上保留两位小数
|
|
this.title = `<div style="text-align: center;color: #252938;font-weight: bold">${this.period}期共还 <span style="color: #4766FE">${unm}</span> 元，含利息+担保费+权益费<span style="color: #4766FE">${unm}</span>元</div>`;
|
this.loading = false;
|
})
|
},
|
|
data() {
|
return {
|
repayPlanInfo:{
|
totalAmt:'',
|
repayPlanList:[]
|
},
|
title:null,
|
loading:true,
|
|
}
|
},
|
}
|
</script>
|
|
<template>
|
<view>
|
<uv-loading-page v-if="loading" :loading="true" loading-mode="spinner"></uv-loading-page>
|
<view class="head">
|
<rich-text :nodes="title"></rich-text>
|
<view class="tips">（注：以实际放款成功后合同为准）</view>
|
</view>
|
<view class="content" style="height: 800rpx;overflow-y: scroll">
|
<view class="pt40" v-if="repayPlanInfo.repayPlanList.length">
|
<view class="lis" v-for="(item,index) in repayPlanInfo.repayPlanList" :key="index">
|
<view class="mr">
|
<view class="period" >第{{index+1}}期</view>
|
<view class="date">{{item.dateDue.replace(/-/g, "")}}</view>
|
|
</view>
|
<view class="rotundity">
|
<image class="drop" :src="`${$images}/static/img/loan-progress/loan-status-current-icon.png`" ></image>
|
</view>
|
<view class="notes" >
|
<view class="nums" >{{item.amt}}</view>
|
<view class="remarks">本金{{ item.prcpAmt }}+利息{{ item.intAmt }}</view>
|
</view>
|
</view>
|
</view>
|
</view>
|
</view>
|
|
</template>
|
|
<style scoped lang="scss">
|
.head{
|
margin-top: 40rpx;
|
padding: 0 56rpx;
|
padding-bottom: 40rpx;
|
border-bottom: 10rpx solid #F7F7F7;
|
font-size: 32rpx;
|
color: #252938;
|
.title{
|
display: flex;
|
flex-direction: row;
|
text-align: center;
|
color: #252938;
|
font-size: 32rpx;
|
font-weight: bold;
|
.num{
|
color: #4766FE;
|
display: contents;
|
}
|
}
|
.tips{
|
color: #666666;
|
font-size: 28rpx;
|
text-align: center;
|
margin-top: 20rpx;
|
}
|
|
}
|
|
.content{
|
.pt40{
|
padding-top: 40rpx;
|
}
|
.mr{
|
margin-right: 20rpx;
|
}
|
.lis{
|
display: flex;flex-direction: row;padding-left: 60rpx;
|
.period{
|
color: #666666;font-size: 28rpx;text-align: right;
|
}
|
.date{
|
color: #666666;font-size: 28rpx;margin-top: 12rpx;
|
}
|
&:nth-last-child(1){
|
.rotundity{
|
&:after{
|
display: none;
|
}
|
}
|
}
|
}
|
}
|
|
.rotundity{
|
position: relative;
|
.drop{
|
width: 28rpx;height: 28rpx;z-index: 9;position: relative;
|
}
|
&:after{
|
content: '';
|
display: inline-block;
|
width: 2rpx;
|
height: 100%;
|
background: #E2E3E8;
|
position: absolute;
|
left: calc( 50% - 1rpx);
|
|
}
|
|
}
|
.notes{
|
margin-left: 30rpx;margin-bottom: 60rpx;
|
.nums{
|
color: #333333;font-size: 32rpx;font-weight: bold;
|
}
|
.remarks{
|
color: #666666;font-size: 24rpx;margin-top: 14rpx;
|
}
|
}
|
</style>
|
