From 349c48e168b9f2580334422228acde7d1b21bede Mon Sep 17 00:00:00 2001
From: 李凌 <344137771@qq.com>
Date: Fri, 05 Jun 2026 11:19:15 +0800
Subject: [PATCH] 1
---
src/views/cryptos/loan/loanHistory.vue | 256 ++++++++++++++++++++++++++++++++------------------
1 files changed, 163 insertions(+), 93 deletions(-)
diff --git a/src/views/cryptos/loan/loanHistory.vue b/src/views/cryptos/loan/loanHistory.vue
index 847c174..5dd4aa3 100644
--- a/src/views/cryptos/loan/loanHistory.vue
+++ b/src/views/cryptos/loan/loanHistory.vue
@@ -18,22 +18,25 @@
<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">{{ $t('借贷人') }}: 张三</div>-->
- <div class="mb-30">
+ <div class="mb-30 row-line">
<span>{{ $t('借款金额') }}: </span>
- <span :class="item.status === 5 ? 'text-red' : 'text-green'">{{ item.status === 5 ? '-' : '+' + item.quota
- }} {{
- item.symbol }}</span>
+ <span :class="orderState(item) === 5 ? 'text-red' : 'text-green'">
+ {{ orderState(item) === 5 ? '-' : '+' + item.quota }} {{ item.symbol }}
+ </span>
</div>
- <div class="mb-30">{{ $t('备注') }}: {{ item.reason }}</div>
- <div v-if="item.state === 2">{{ $t('剩余天数') }}: {{ item.remainQuota }}</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 mb-20" @click="$router.push('customerService')" v-if="item.state === 2">{{ $t('申请还款') }}
+ <div class="loanBtn loanBtn--status mb-20" :style="{ background: loanBgText(orderState(item)) }">
+ {{ loanText(orderState(item)) }}
</div>
- <div class="loanBtn mb-20" :style="{ background: loanBgText(item.state) }" v-else>{{ loanText(item.state) }}
- </div>
- <div class="loanBtn" style="background: #00a7ee;" @click="getLoanDetail(item.id)">{{ $t('详情') }}</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>
@@ -46,88 +49,47 @@
</div>
</div>
- <van-popup v-model:show="isDetail" class="w-full rounded-2xl" style="width: 94%">
- <div class="px-32 bg-white py-40">
- <div class="text-center font-36 font-700 py-20">
- {{ $t('订单详情') }}
- </div>
- <div class="loanList">
- <div class="flex justify-between py-30 border-b-grey">
- <div>
- <span class="grayText">{{ $t('期望借款金额') }}</span>
- </div>
- <div class="flex align-center">
- <!-- <input class="font-600 textColor border-none text-right mr-14 mainBackground" v-model="loanAmount" disabled="disabled" @input="inputAmunt" />-->
- <span class="mr-14 font-600 ">{{ loanData.quota || 0 }}</span>
- <span class="font-600 ">USDT</span>
- </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="flex justify-between py-30 border-b-grey">
- <div>
- <span class="grayText">{{ $t('还款周期') }}</span>
- </div>
- <div class="flex align-center text-right">
- <div class="font-600 ">
- <span>{{ loanData.term }} {{ $t('Day') }}</span>
- </div>
- </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="flex justify-between py-30 border-b-grey">
- <div>
- <span class="grayText">{{ $t('日利率') }}</span>
- </div>
- <div class="flex align-center">
- <span class="font-600">{{ loanData.dailyRate * 1 * 100 || 0 }}%</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="flex justify-between py-30 border-b-grey">
- <div>
- <span class="grayText">{{ $t('还款方式') }}</span>
- </div>
- <div class="flex align-center">
- <span class="font-600 text-right">{{ $t('到期一次还款') }}</span>
- </div>
+ <div class="loan-detail-row">
+ <span class="loan-detail-label">{{ $t('还款方式') }}</span>
+ <span class="loan-detail-value">{{ $t('到期一次还款') }}</span>
</div>
- <div class="flex justify-between py-30 border-b-grey">
- <div>
- <span class="grayText">{{ $t('利息') }}</span>
- </div>
- <div class="flex align-center">
- <span class="font-600">{{ loanData.totalInterest || 0 }} USDT</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="flex justify-between py-30 border-b-grey">
- <div>
- <span class="grayText">{{ $t('放款机构') }}</span>
- </div>
- <div class="flex align-center">
- <span class="font-600">{{ loanData.lendingName }}</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="flex justify-between py-30 border-b-grey">
- <div>
- <span class="grayText">{{ $t('状态') }}</span>
- </div>
- <div class="flex align-center">
- <span class="font-600" :style="{ color: loanBgText(loanData.state) }">{{ loanText(loanData.state)
- }}</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="flex justify-between py-30 border-b-grey" v-if="loanData.state === 2">
- <div>
- <span class="grayText">{{ $t('剩余天数') }}</span>
- </div>
- <div class="flex align-center">
- <span class="font-600">{{ loanData.remainQuota }}</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="flex justify-between py-30">
- <div>
- <span class="grayText">{{ $t('订单时间') }}</span>
- </div>
- <div class="flex align-center">
- <span class="font-600">{{ dataTimeEx(loanData.createTime) }}</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>
@@ -137,19 +99,42 @@
</template>
<script>
-import AssetsHead from "@/components/Transform/assets-head/index.vue";;
+import AssetsHead from "@/components/Transform/assets-head/index.vue";
import { _loanOrderList, _loanOrderDetail } from "@/service/fund.api"
import { Popup } from "vant";
-import { dataTimeEx } from '@/utils/utis'
+import { dataTime } from '@/utils/utis'
+import { customerServiceUrl } from '@/config'
export default {
name: "loanHistory",
mounted() {
this.getLoanOrderList()
},
methods: {
- //订单详情
- getLoanDetail(orderNo) {
- _loanOrderDetail(orderNo).then(res => {
+ 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
})
@@ -174,7 +159,7 @@
if (item.id === 0) {
this.loanOrderList = this.loanAllOrderList
} else {
- this.loanOrderList = this.loanAllOrderList.filter(data => data.state === item.id)
+ this.loanOrderList = this.loanAllOrderList.filter(data => this.orderState(data) === item.id)
}
}
},
@@ -197,7 +182,6 @@
loanAllOrderList: [],
isDetail: false, //详情弹窗
loanData: {},
- dataTimeEx,//时间戳格式化
}
},
components: {
@@ -249,6 +233,7 @@
-webkit-backface-visibility: hidden;
backface-visibility: hidden;
border: 1px solid transparent;
+ font-size: 28px;
&.ani {
transform: translate3d(0, 0, 0);
@@ -276,10 +261,95 @@
}
}
+ .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: 14px 30px;
+ 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>
\ No newline at end of file
--
Gitblit v1.9.3