feat(金币代理收支明细页): 对接接口
This commit is contained in:
hzj
parent
7893a0dafe
commit
32c6aa1614
@ -8,7 +8,7 @@
|
||||
style="box-shadow: 0 0 10px rgba(0, 0, 0, 0.1); z-index: 999"
|
||||
/>
|
||||
|
||||
<div class="content">
|
||||
<div style="padding: 16px; position: relative; z-index: 2">
|
||||
<!-- 搜索框 -->
|
||||
<div style="display: flex; align-items: center; gap: 8px; margin-bottom: 8px">
|
||||
<div
|
||||
@ -78,45 +78,162 @@
|
||||
></div>
|
||||
</div>
|
||||
|
||||
<!-- 用户列表 -->
|
||||
<div v-if="loading" class="loading-state">
|
||||
<!-- 用户列表(加载中...) -->
|
||||
<div
|
||||
v-if="loading"
|
||||
style="
|
||||
display: flex;
|
||||
flex-direction: column;
|
||||
align-items: center;
|
||||
justify-content: center;
|
||||
padding: 60px 20px;
|
||||
color: #666;
|
||||
"
|
||||
>
|
||||
<!-- 加载动画 -->
|
||||
<div class="loading-spinner"></div>
|
||||
<p>{{ t('loading') }}...</p>
|
||||
|
||||
<!-- 提示文本 -->
|
||||
<p style="margin: 0; font-size: 14px">{{ t('loading') }}...</p>
|
||||
</div>
|
||||
|
||||
<div v-else class="records-list">
|
||||
<div v-for="record in records" :key="record.id" class="record-item">
|
||||
<div class="record-info">
|
||||
<div class="user-avatar">
|
||||
<span>{{ record.userName.charAt(0) }}</span>
|
||||
<!-- 用户列表(加载完...) -->
|
||||
<div v-else style="display: flex; flex-direction: column; gap: 12px">
|
||||
<!-- 用户项 -->
|
||||
<div
|
||||
v-for="record in records"
|
||||
:key="record.id"
|
||||
style="
|
||||
background-color: white;
|
||||
padding: 16px;
|
||||
|
||||
border-radius: 12px;
|
||||
box-shadow: 0 2px 8px rgba(0, 0, 0, 0.1);
|
||||
|
||||
display: flex;
|
||||
align-items: center;
|
||||
justify-content: space-between;
|
||||
gap: 4px;
|
||||
"
|
||||
>
|
||||
<!-- 个人资料 -->
|
||||
<div
|
||||
style="
|
||||
flex: 1;
|
||||
min-width: 0;
|
||||
align-self: stretch;
|
||||
|
||||
display: flex;
|
||||
align-items: center;
|
||||
"
|
||||
>
|
||||
<!-- 头像 -->
|
||||
<div
|
||||
style="
|
||||
width: 3.5em;
|
||||
align-self: stretch;
|
||||
display: flex;
|
||||
align-items: center;
|
||||
justify-content: center;
|
||||
"
|
||||
>
|
||||
<img
|
||||
:src="
|
||||
(record.type
|
||||
? record.acceptUserAccount.userAvatar
|
||||
: record.userAccount.userAvatar) || ''
|
||||
"
|
||||
alt=""
|
||||
style="
|
||||
display: block;
|
||||
width: 100%;
|
||||
aspect-ratio: 1/1;
|
||||
border-radius: 50%;
|
||||
object-fit: cover;
|
||||
"
|
||||
@error="handleAvatarImageError"
|
||||
/>
|
||||
</div>
|
||||
<div class="record-details">
|
||||
<div style="display: flex; align-items: center">
|
||||
<h4>User</h4>
|
||||
<h4>{{ record.userName }}</h4>
|
||||
<h4>...</h4>
|
||||
|
||||
<div
|
||||
style="
|
||||
flex: 1;
|
||||
min-width: 0;
|
||||
align-self: stretch;
|
||||
|
||||
display: flex;
|
||||
flex-direction: column;
|
||||
justify-content: space-around;
|
||||
gap: 4px;
|
||||
"
|
||||
>
|
||||
<!-- 名称 -->
|
||||
<div
|
||||
style="
|
||||
font-size: 0.9em;
|
||||
font-weight: 600;
|
||||
color: #333;
|
||||
|
||||
overflow: hidden;
|
||||
text-overflow: ellipsis;
|
||||
white-space: nowrap;
|
||||
"
|
||||
>
|
||||
{{
|
||||
record.type
|
||||
? record.acceptUserAccount.userNickName
|
||||
: record.userAccount.userNickName
|
||||
}}
|
||||
</div>
|
||||
|
||||
<p>
|
||||
<span style="display: flex; align-items: center">
|
||||
<span>ID</span>
|
||||
<span style="margin: 0 2px">:</span>
|
||||
<span>{{ record.account }}</span>
|
||||
</span>
|
||||
</p>
|
||||
<!-- ID -->
|
||||
<div style="font-size: 0.8em; font-weight: 590; color: rgba(0, 0, 0, 0.4)">
|
||||
ID:{{ record.type ? record.acceptUserAccount.account : record.userAccount.account }}
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
<div class="record-amount">
|
||||
<div class="coins-amount">{{ record.amount }} {{ t('coins') }}</div>
|
||||
<div class="record-time">{{ record.time }}</div>
|
||||
|
||||
<!-- 收支和时间 -->
|
||||
<div
|
||||
style="
|
||||
width: auto;
|
||||
min-width: 0;
|
||||
align-self: stretch;
|
||||
|
||||
display: flex;
|
||||
flex-direction: column;
|
||||
align-items: flex-end;
|
||||
gap: 4px;
|
||||
"
|
||||
>
|
||||
<div style="font-size: 0.9em; color: rgba(0, 0, 0, 0.4); font-weight: 510">
|
||||
{{ record.amount }} {{ t('coins') }}
|
||||
</div>
|
||||
<div style="font-size: 0.8em; font-weight: 510; color: rgba(0, 0, 0, 0.4)">
|
||||
{{ record.time }}
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
|
||||
<div v-if="!loading && records.length === 0" class="empty-state">
|
||||
<div class="empty-icon">📋</div>
|
||||
<p>{{ t('no_transaction_records') }}</p>
|
||||
<span>{{ t('no_selling_records_yet') }}</span>
|
||||
<!-- 用户列表(加载完且列表为空) -->
|
||||
<div
|
||||
v-if="!loading && records.length === 0"
|
||||
style="
|
||||
display: flex;
|
||||
flex-direction: column;
|
||||
align-items: center;
|
||||
justify-content: center;
|
||||
padding: 60px 20px;
|
||||
color: #666;
|
||||
text-align: center;
|
||||
"
|
||||
>
|
||||
<div style="font-size: 48px; margin-bottom: 16px">📋</div>
|
||||
<p style="margin: 0 0 8px 0; font-size: 16px; font-weight: 500">
|
||||
{{ t('no_transaction_records') }}
|
||||
</p>
|
||||
<span style="font-size: 14px; color: #9ca3af">{{ t('no_selling_records_yet') }}</span>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
@ -130,6 +247,7 @@ import { getFreightWaterFlow } from '@/api/wallet.js'
|
||||
import { formatUTCCustom } from '@/utils/utcFormat.js'
|
||||
import { getUserId } from '@/utils/userStore.js'
|
||||
import { setDocumentDirection } from '@/locales/i18n'
|
||||
import { handleAvatarImageError } from '@/utils/imageHandler.js'
|
||||
|
||||
const { t, locale } = useI18n()
|
||||
|
||||
@ -204,18 +322,10 @@ const fetchRecords = async () => {
|
||||
if (response && response.status && response.body) {
|
||||
// 处理返回的数据
|
||||
records.value = response.body.map((item) => ({
|
||||
id: item.id,
|
||||
account: item.account,
|
||||
userId: item.acceptUserId,
|
||||
userName: `${item.acceptUserId.toString().slice(-6)}`, // 显示最后6位
|
||||
amount: getAmountDisplay(item.type, item.quantity),
|
||||
time: formatUTCCustom(item.createTime),
|
||||
type: item.type,
|
||||
quantity: item.quantity,
|
||||
balance: item.balance,
|
||||
origin: item.origin,
|
||||
remark: item.remark,
|
||||
rechargeType: item.rechargeType,
|
||||
...item,
|
||||
|
||||
amount: getAmountDisplay(item.type, item.quantity), //添加±号
|
||||
time: formatUTCCustom(item.createTime), //格式化时间
|
||||
}))
|
||||
} else {
|
||||
records.value = []
|
||||
@ -278,22 +388,6 @@ onMounted(async () => {
|
||||
display: none;
|
||||
}
|
||||
|
||||
.content {
|
||||
padding: 16px;
|
||||
position: relative;
|
||||
z-index: 2;
|
||||
}
|
||||
|
||||
/* 加载状态 */
|
||||
.loading-state {
|
||||
display: flex;
|
||||
flex-direction: column;
|
||||
align-items: center;
|
||||
justify-content: center;
|
||||
padding: 60px 20px;
|
||||
color: #666;
|
||||
}
|
||||
|
||||
.loading-spinner {
|
||||
width: 32px;
|
||||
height: 32px;
|
||||
@ -313,117 +407,12 @@ onMounted(async () => {
|
||||
}
|
||||
}
|
||||
|
||||
.loading-state p {
|
||||
margin: 0;
|
||||
font-size: 14px;
|
||||
}
|
||||
|
||||
/* 记录列表 */
|
||||
.records-list {
|
||||
display: flex;
|
||||
flex-direction: column;
|
||||
gap: 12px;
|
||||
}
|
||||
|
||||
.record-item {
|
||||
background-color: white;
|
||||
padding: 16px;
|
||||
border-radius: 12px;
|
||||
box-shadow: 0 2px 8px rgba(0, 0, 0, 0.1);
|
||||
display: flex;
|
||||
align-items: center;
|
||||
justify-content: space-between;
|
||||
}
|
||||
|
||||
.record-info {
|
||||
display: flex;
|
||||
align-items: center;
|
||||
flex: 1;
|
||||
}
|
||||
|
||||
.user-avatar {
|
||||
width: 50px;
|
||||
height: 50px;
|
||||
border-radius: 25px;
|
||||
background-color: #9ca3af;
|
||||
display: flex;
|
||||
align-items: center;
|
||||
justify-content: center;
|
||||
color: white;
|
||||
font-size: 18px;
|
||||
font-weight: 600;
|
||||
margin-right: 12px;
|
||||
}
|
||||
|
||||
.record-details {
|
||||
flex: 1;
|
||||
}
|
||||
|
||||
.record-details h4 {
|
||||
margin-bottom: 4px;
|
||||
font-size: 0.9em;
|
||||
font-weight: 600;
|
||||
color: #333;
|
||||
}
|
||||
|
||||
.record-details p {
|
||||
font-size: 0.8em;
|
||||
font-weight: 590;
|
||||
color: rgba(0, 0, 0, 0.4);
|
||||
}
|
||||
|
||||
.record-time {
|
||||
font-size: 0.8em;
|
||||
font-weight: 510;
|
||||
color: rgba(0, 0, 0, 0.4);
|
||||
}
|
||||
|
||||
.record-amount {
|
||||
display: flex;
|
||||
flex-direction: column;
|
||||
align-items: flex-end;
|
||||
gap: 4px;
|
||||
}
|
||||
|
||||
.coins-amount {
|
||||
font-size: 0.9em;
|
||||
color: rgba(0, 0, 0, 0.4);
|
||||
font-weight: 510;
|
||||
}
|
||||
|
||||
.transaction-type {
|
||||
font-size: 12px;
|
||||
color: #9ca3af;
|
||||
margin-top: 2px;
|
||||
}
|
||||
|
||||
/* 空状态 */
|
||||
.empty-state {
|
||||
display: flex;
|
||||
flex-direction: column;
|
||||
align-items: center;
|
||||
justify-content: center;
|
||||
padding: 60px 20px;
|
||||
color: #666;
|
||||
text-align: center;
|
||||
}
|
||||
|
||||
.empty-icon {
|
||||
font-size: 48px;
|
||||
margin-bottom: 16px;
|
||||
}
|
||||
|
||||
.empty-state p {
|
||||
margin: 0 0 8px 0;
|
||||
font-size: 16px;
|
||||
font-weight: 500;
|
||||
}
|
||||
|
||||
.empty-state span {
|
||||
font-size: 14px;
|
||||
color: #9ca3af;
|
||||
}
|
||||
|
||||
input::placeholder {
|
||||
font-weight: bold;
|
||||
color: rgba(0, 0, 0, 0.4);
|
||||
@ -463,17 +452,4 @@ input::placeholder {
|
||||
[dir='rtl'] .search-icon {
|
||||
transform: scaleX(-1);
|
||||
}
|
||||
|
||||
[dir='rtl'] .user-avatar {
|
||||
margin-right: 0;
|
||||
margin-left: 12px;
|
||||
}
|
||||
|
||||
[dir='rtl'] .record-info {
|
||||
text-align: right;
|
||||
}
|
||||
|
||||
[dir='rtl'] .record-amount {
|
||||
align-items: flex-start;
|
||||
}
|
||||
</style>
|
||||
|
||||
Loading…
x
Reference in New Issue
Block a user