<template>
|
<div id="cryptos">
|
<div class="loanHistory">
|
<assets-head :title="$t('借贷记录')" />
|
<!-- Tab区域-->
|
<div class="tabMenu flex justify-start items-center">
|
<div class="tabList">
|
<div class="tab" :class="item.id === activeTabIndex ? 'activeTab' : ''" v-for="item in tabMenuList"
|
:key="item.id" @click="changeTab(item)">
|
<span>{{ item.menuName }}</span>
|
</div>
|
</div>
|
</div>
|
<!-- container -->
|
<div class="container px-32">
|
<!-- 列表区域-->
|
<div v-if="loanOrderList && loanOrderList.length > 0">
|
<div class="historyData flex justify-between py-40 border-b-grey textColor" v-for="item in loanOrderList"
|
:key="item.id">
|
<div class="left">
|
<div class="mb-30 row-line">
|
<span>{{ $t('借款金额') }}: </span>
|
<span :class="orderState(item) === 5 ? 'text-red' : 'text-green'">
|
{{ orderState(item) === 5 ? '-' : '+' + item.quota }} {{ item.symbol }}
|
</span>
|
</div>
|
<div class="mb-30 row-line" v-if="item.reason">{{ $t('备注') }}: {{ item.reason }}</div>
|
<div class="row-line" v-if="orderState(item) === 2">{{ $t('剩余天数') }}: {{ item.remainQuota }}</div>
|
</div>
|
<div class="right text-center text-white">
|
<div class="loanBtn loanBtn--status mb-20" :style="{ background: loanBgText(orderState(item)) }">
|
{{ loanText(orderState(item)) }}
|
</div>
|
<div
|
class="loanBtn mb-20"
|
v-if="orderState(item) === 2"
|
@click="goRepay"
|
>{{ $t('还款') }}</div>
|
<div class="loanBtn loanBtn--detail" @click="getLoanDetail(item)">{{ $t('详情') }}</div>
|
</div>
|
</div>
|
</div>
|
<!-- 无数据-->
|
<div class="flex items-center flex-col" style="margin-top: 198px" v-else>
|
<div class="noDataImg mb-24 ">
|
<img src="@/assets/image/loan/noData.png" alt="nodData" />
|
</div>
|
<p class="textColor1">{{ $t('暂无数据') }}</p>
|
</div>
|
</div>
|
|
<van-popup v-model:show="isDetail" class="loan-detail-popup" round>
|
<div class="loan-detail-body">
|
<div class="loan-detail-title">{{ $t('订单详情') }}</div>
|
<div class="loan-detail-list">
|
<div class="loan-detail-row">
|
<span class="loan-detail-label">{{ $t('期望借款金额') }}</span>
|
<span class="loan-detail-value">{{ loanData.quota || 0 }} USDT</span>
|
</div>
|
<div class="loan-detail-row">
|
<span class="loan-detail-label">{{ $t('还款周期') }}</span>
|
<span class="loan-detail-value">{{ loanData.term }} {{ $t('Day') }}</span>
|
</div>
|
<div class="loan-detail-row">
|
<span class="loan-detail-label">{{ $t('日利率') }}</span>
|
<span class="loan-detail-value">{{ loanData.dailyRate * 1 * 100 || 0 }}%</span>
|
</div>
|
<div class="loan-detail-row">
|
<span class="loan-detail-label">{{ $t('还款方式') }}</span>
|
<span class="loan-detail-value">{{ $t('到期一次还款') }}</span>
|
</div>
|
<div class="loan-detail-row">
|
<span class="loan-detail-label">{{ $t('利息') }}</span>
|
<span class="loan-detail-value">{{ loanData.totalInterest || 0 }} USDT</span>
|
</div>
|
<div class="loan-detail-row">
|
<span class="loan-detail-label">{{ $t('放款机构') }}</span>
|
<span class="loan-detail-value">{{ loanData.lendingName }}</span>
|
</div>
|
<div class="loan-detail-row">
|
<span class="loan-detail-label">{{ $t('状态') }}</span>
|
<span class="loan-detail-value" :style="{ color: loanBgText(Number(loanData.state)) }">
|
{{ loanText(Number(loanData.state)) }}
|
</span>
|
</div>
|
<div class="loan-detail-row" v-if="Number(loanData.state) === 2">
|
<span class="loan-detail-label">{{ $t('剩余天数') }}</span>
|
<span class="loan-detail-value">{{ loanData.remainQuota }}</span>
|
</div>
|
<div class="loan-detail-row loan-detail-row--last">
|
<span class="loan-detail-label">{{ $t('订单时间') }}</span>
|
<span class="loan-detail-value">{{ formatOrderTime(loanData.createTime) }}</span>
|
</div>
|
</div>
|
</div>
|
</van-popup>
|
</div>
|
</div>
|
</template>
|
|
<script>
|
import AssetsHead from "@/components/Transform/assets-head/index.vue";
|
import { _loanOrderList, _loanOrderDetail } from "@/service/fund.api"
|
import { Popup } from "vant";
|
import { dataTime } from '@/utils/utis'
|
import { customerServiceUrl } from '@/config'
|
export default {
|
name: "loanHistory",
|
mounted() {
|
this.getLoanOrderList()
|
},
|
methods: {
|
orderState(item) {
|
return Number(item.state ?? item.status)
|
},
|
formatOrderTime(ts) {
|
if (ts == null || ts === '') return '--'
|
if (typeof ts === 'string' && /\d{4}-\d{2}-\d{2}/.test(ts)) {
|
return ts.length > 16 ? ts : ts.trim()
|
}
|
const n = Number(ts)
|
if (!Number.isFinite(n) || n <= 0) return '--'
|
return dataTime(n, true)
|
},
|
goRepay() {
|
if (customerServiceUrl()) {
|
window.location.href = customerServiceUrl()
|
} else {
|
this.$router.push('/customerService')
|
}
|
},
|
//订单详情（按 orderNo 或 uuid 查询）
|
getLoanDetail(item) {
|
_loanOrderDetail({
|
orderNo: item.orderNo,
|
id: item.uuid || item.id,
|
}).then(res => {
|
this.loanData = res
|
this.isDetail = true
|
})
|
},
|
getLoanOrderList() {
|
_loanOrderList().then(res => {
|
this.loanOrderList = res.sort((a, b) => b.createTime - a.createTime)
|
this.loanAllOrderList = this.loanOrderList
|
})
|
},
|
loanBgText(val) {
|
const bg = { '0': '#BBA635', '1': '#bba635', '2': '#00a7ee', '3': '#E35461', '4': '#b0b4bc', }
|
// console.log('this.btnBg',bg[val])
|
return bg[val]
|
},
|
loanText(val) {
|
const loanStatus = { '1': this.$t('审批中'), '3': this.$t('审批失败'), '2': this.$t('还款中'), '4': this.$t('已逾期'), '5': this.$t('已还款'), }
|
return loanStatus[val] || this.$t('审批中')
|
},
|
changeTab(item) {
|
this.activeTabIndex = item.id
|
if (item.id === 0) {
|
this.loanOrderList = this.loanAllOrderList
|
} else {
|
this.loanOrderList = this.loanAllOrderList.filter(data => this.orderState(data) === item.id)
|
}
|
}
|
},
|
computed: {
|
},
|
data() {
|
return {
|
activeTabIndex: 0,
|
isData: true,
|
loanStatus: 0,
|
btnBg: '',
|
tabMenuList: [
|
{ id: 0, menuName: this.$t('全部') },
|
{ id: 1, menuName: this.$t('审批中') },
|
{ id: 3, menuName: this.$t('审批失败') },
|
{ id: 2, menuName: this.$t('还款中') },
|
{ id: 5, menuName: this.$t('已还款') },
|
],
|
loanOrderList: [],
|
loanAllOrderList: [],
|
isDetail: false, //详情弹窗
|
loanData: {},
|
}
|
},
|
components: {
|
AssetsHead,
|
[Popup.name]: Popup
|
}
|
}
|
</script>
|
|
<style scoped lang="scss">
|
@import "@/assets/init.scss";
|
|
#cryptos {
|
.loanHistory {
|
width: 100%;
|
box-sizing: border-box;
|
}
|
|
//隐藏滚动条
|
.tabMenu::-webkit-scrollbar {
|
display: none
|
}
|
|
.tabMenu {
|
border-top: 1px solid $border_color;
|
border-bottom: 1px solid $border_color;
|
padding: 30px;
|
overflow: auto hidden;
|
touch-action: auto;
|
scrollbar-width: none;
|
-ms-overflow-style: none;
|
box-sizing: border-box;
|
|
.tabList {
|
white-space: nowrap;
|
padding-right: 30px;
|
touch-action: auto;
|
|
.tab {
|
display: inline-block;
|
color: #999999;
|
height: 60px;
|
line-height: 60px;
|
text-align: center;
|
transition: .5s;
|
margin-right: 52px;
|
border-radius: 34px;
|
touch-action: auto;
|
-webkit-backface-visibility: hidden;
|
backface-visibility: hidden;
|
border: 1px solid transparent;
|
font-size: 28px;
|
|
&.ani {
|
transform: translate3d(0, 0, 0);
|
}
|
}
|
}
|
|
.activeTab {
|
border-radius: 32px;
|
padding: 0 36px;
|
-webkit-backface-visibility: hidden !important;
|
backface-visibility: hidden !important;
|
border: 1px solid $active_line !important;
|
color: $color_main !important;
|
}
|
}
|
|
.noDataImg {
|
width: 165px;
|
height: 160px;
|
|
img {
|
width: 100%;
|
height: 100%;
|
}
|
}
|
|
.historyData {
|
font-size: 28px;
|
align-items: flex-start;
|
|
.row-line {
|
font-size: 28px;
|
line-height: 1.4;
|
}
|
}
|
|
.right {
|
flex-shrink: 0;
|
min-width: 220px;
|
}
|
|
.loanBtn {
|
padding: 16px 32px;
|
background: #004aee;
|
border-radius: 10px;
|
font-size: 28px;
|
font-weight: 600;
|
line-height: 1.35;
|
white-space: nowrap;
|
}
|
|
.loanBtn--status {
|
min-width: 180px;
|
font-size: 30px;
|
font-weight: 700;
|
padding: 18px 32px;
|
}
|
|
.loanBtn--detail {
|
background: #00a7ee;
|
}
|
}
|
|
/* 弹窗挂到 body，需独立字号（不依赖 #cryptos 工具类） */
|
:deep(.loan-detail-popup) {
|
width: 94%;
|
max-width: 680px;
|
}
|
|
.loan-detail-body {
|
padding: 40px 32px 48px;
|
background: #fff;
|
border-radius: 24px;
|
color: #1a1a1a;
|
}
|
|
.loan-detail-title {
|
text-align: center;
|
font-size: 36px;
|
font-weight: 700;
|
line-height: 1.3;
|
margin-bottom: 32px;
|
}
|
|
.loan-detail-list {
|
display: flex;
|
flex-direction: column;
|
}
|
|
.loan-detail-row {
|
display: flex;
|
justify-content: space-between;
|
align-items: center;
|
gap: 24px;
|
padding: 28px 0;
|
border-bottom: 1px solid rgba(134, 142, 155, 0.2);
|
font-size: 28px;
|
line-height: 1.4;
|
}
|
|
.loan-detail-row--last {
|
border-bottom: none;
|
padding-bottom: 0;
|
}
|
|
.loan-detail-label {
|
flex-shrink: 0;
|
color: #868e9b;
|
font-size: 28px;
|
}
|
|
.loan-detail-value {
|
text-align: right;
|
font-size: 28px;
|
font-weight: 600;
|
word-break: break-all;
|
}
|
</style>
|
