<script>
|
import {checkUserStatus} from "@/api/modules/user";
|
|
export default {
|
name: "index",
|
data() {
|
return {
|
info:{},
|
|
loanStatuses: [
|
{
|
title: '等待特权中',
|
date: new Date(),
|
desc:'领取特权，为您预留额度和优先放款'
|
},
|
{
|
title: '额度审批通过',
|
date: new Date(),
|
desc: '恭喜您，已成功获得额度，请在30天内进行提现'
|
},
|
{
|
title: '资金方匹配中',
|
date: new Date(),
|
desc: '我们正在为您匹配资金方，请您耐心等候。匹配通过后，我们会第一时间通知',
|
},
|
{
|
title: '额度已提交',
|
date: new Date(),
|
desc: '您的额度申请已提交，我们会第一时间通知您审批结果，请耐心等待',
|
},
|
],
|
}
|
},
|
created() {
|
checkUserStatus().then(res=>{
|
this.info = res
|
})
|
},
|
}
|
</script>
|
|
<template>
|
<view>
|
<view class="head">
|
<view style="color: white;font-size: 30rpx;display: flex;flex-direction: row">
|
预审放款金额： <text style="font-size: 36rpx;font-weight: bold">{{info.firstQuota}}</text> <view style="font-size: 28rpx;display: flex;justify-content: end">元</view>
|
</view>
|
<view style="font-size: 30rpx;display: flex;flex-direction: row;color: white">
|
<image :src="`${$images}/static/img/loan-progress/loan-status-decorate.png`" class="loan-status-icon" style="margin-right: 20rpx;"></image>
|
资金方匹配中
|
</view>
|
</view>
|
<view class="content">
|
<view class="card">
|
<view class="status">
|
<view>
|
<view style="font-size: 28rpx">到账卡</view>
|
<view class="info">
|
<!-- <image style="width: 52rpx;height: 52rpx;" src="https://test-skfq.iben-itech.com/zip/static/img/card/JK.png" ></image>-->
|
<view style="margin-left: 20rpx;line-height: 52rpx">{{info.bankName}}（）</view>
|
</view>
|
</view>
|
<view>
|
<view style="font-size: 28rpx">借款期限</view>
|
<view class="num" style="line-height: 52rpx">12个月</view>
|
</view>
|
</view>
|
<view class="privilege">
|
<view class="privilege-title"> 放款特权待领取 </view>
|
<view class="privilege-intro">审核放款提升速率90%，审核被拒就赔付</view>
|
</view>
|
|
<view class="loan-status-list">
|
<view
|
class="loan-status-item"
|
:class="!index ? 'current' : null"
|
v-for="(item, index) in loanStatuses"
|
:key="item.key"
|
>
|
<view class="loan-status-icon"></view>
|
<view class="loan-status-message">
|
<view class="loan-status-title">
|
{{ item.title }}
|
<view class="loan-status-date" >
|
{{ item.date.getMonth() + 1 }}-{{ item.date.getDate() }}
|
{{ item.date.getHours().toString().padStart(2, '0') }}:{{
|
item.date.getMinutes().toString().padStart(2, '0')
|
}}
|
</view>
|
</view>
|
<view class="loan-status-desc">
|
{{ item.desc }}
|
</view>
|
|
|
</view>
|
</view>
|
</view>
|
</view>
|
</view>
|
</view>
|
</template>
|
|
<style scoped lang="scss">
|
.content{
|
.card{
|
padding:30rpx 32rpx;
|
color: #8B8D96;
|
font-size: 28rpx;
|
.status{
|
display: flex;
|
flex-direction: row;
|
justify-content: space-between;
|
padding-bottom: 30rpx;
|
border-bottom: 1px solid #E7E9ED;;
|
.info, .num{
|
color: #252938;
|
font-size: 30rpx;
|
font-weight: bold;
|
margin-top: 14rpx;
|
display: flex;
|
flex-direction: row;
|
justify-content: space-evenly;
|
}
|
.num{
|
|
}
|
}
|
|
.privilege {
|
background-image: url(#{$iconHttps}/static/img/loan-progress/loan-privilege-bg.png);
|
background-repeat: no-repeat;
|
background-position: center;
|
background-size: cover;
|
padding: 32rpx 30rpx 28rpx;
|
margin-bottom: 40rpx;
|
border-radius: 16rpx;
|
margin-top: 30rpx;
|
.privilege-title {
|
font-size: 30rpx;
|
font-weight: 600;
|
color: #2a428c;
|
line-height: 42rpx;
|
margin-bottom: 8rpx;
|
}
|
.privilege-intro {
|
font-size: 24rpx;
|
color: #2a428c;
|
line-height: 34rpx;
|
}
|
}
|
|
|
.loan-status-list {
|
.loan-status-item {
|
display: flex;
|
position: relative;
|
flex-direction: row;
|
padding-bottom: 60rpx;
|
&:not(:last-child)::before {
|
content: '';
|
width: 2rpx;
|
background: #bdbdbe;
|
opacity: 0.3;
|
position: absolute;
|
top: 0;
|
bottom: -2px;
|
left: 16rpx;
|
}
|
.loan-status-icon {
|
flex: none;
|
width: 34rpx;
|
height: 34rpx;
|
background-image: url(#{$iconHttps}/static/img/loan-progress/loan-status-icon.png);
|
background-position: center;
|
background-size: contain;
|
background-repeat: no-repeat;
|
margin-right: 34rpx;
|
margin-top: 4rpx;
|
position: relative;
|
z-index: 1;
|
}
|
&:last-child .loan-status-icon::before {
|
content: none;
|
}
|
.loan-status-title {
|
font-size: 30rpx;
|
font-weight: 600;
|
color: #8b8d96;
|
line-height: 42rpx;
|
margin-bottom: 8rpx;
|
display: flex;
|
flex-direction: row;
|
}
|
.loan-status-date {
|
font-size: 24rpx;
|
line-height: 34rpx;
|
margin-left: 20rpx;
|
font-weight: 400;
|
}
|
.loan-status-desc {
|
font-size: 24rpx;
|
color: #8b8d96;
|
line-height: 34rpx;
|
margin-bottom: 16rpx;
|
}
|
|
.loan-status-actions2 {
|
display: flex;
|
min-height: 1px;
|
margin-bottom: 40rpx;
|
text-align: center;
|
.mybutton1 {
|
width: 280rpx;
|
height: 64rpx;
|
margin-left: 0;
|
background: linear-gradient(118deg, #fce6bc 0%, #daa864 100%);
|
border-radius: 32rpx;
|
display: flex;
|
align-items: center;
|
justify-content: center;
|
font-size: 28rpx;
|
color: #75361f;
|
line-height: 40rpx;
|
}
|
.mybutton2 {
|
width: 280rpx;
|
height: 64rpx;
|
margin-left: 12rpx;
|
background: #d8d8d8 linear-gradient(104deg, #6d89ff 0%, #2865f2 100%);
|
border-radius: 32rpx;
|
display: flex;
|
align-items: center;
|
justify-content: center;
|
font-size: 28rpx;
|
color: #ffffff;
|
line-height: 40rpx;
|
}
|
}
|
|
.loan-status-actions {
|
min-height: 1px;
|
margin-bottom: 40rpx;
|
text-align: center;
|
.loan-status-action {
|
width: 286rpx;
|
height: 64rpx;
|
margin-left: 0;
|
background: #d8d8d8 linear-gradient(104deg, #6d89ff 0%, #2865f2 100%);
|
border-radius: 32rpx;
|
display: flex;
|
align-items: center;
|
justify-content: center;
|
font-size: 28rpx;
|
color: #ffffff;
|
line-height: 40rpx;
|
}
|
}
|
&.current {
|
.loan-status-icon {
|
background-image: url(#{$iconHttps}/static/img/loan-progress/loan-status-current-icon.png);
|
}
|
.loan-status-title {
|
color: #4766fe;
|
}
|
}
|
}
|
}
|
}
|
|
}
|
.head{
|
background: #2865F2;
|
display: flex;
|
flex-direction: row;
|
padding: 36rpx 40rpx;
|
justify-content:space-between;
|
}
|
.loan-status-icon {
|
width: 34rpx;
|
height: 34rpx;
|
}
|
</style>
|
