feat(金币赠送记录页): 更换展示id

This commit is contained in:
hzj 2025-09-29 14:06:07 +08:00
parent fb92ed599e
commit 815d1cb237

View File

@ -9,24 +9,24 @@
</div> </div>
<div v-else class="records-list"> <div v-else class="records-list">
<div <div v-for="record in records" :key="record.id" class="record-item">
v-for="record in records"
:key="record.id"
class="record-item"
>
<div class="record-info"> <div class="record-info">
<div class="user-avatar"> <div class="user-avatar">
<span>{{ record.userName.charAt(0) }}</span> <span>{{ record.userName.charAt(0) }}</span>
</div> </div>
<div class="record-details"> <div class="record-details">
<h4>{{ record.userName }}</h4> <h4>{{ record.userName }}</h4>
<p>ID: {{ record.userId }}</p> <p>ID: {{ record.account }}</p>
<div class="record-time">{{ record.time }}</div> <div class="record-time">{{ record.time }}</div>
</div> </div>
</div> </div>
<div class="record-amount"> <div class="record-amount">
<span :class="['coins-amount', record.type === 0 ? 'positive' : 'negative']">{{ record.amount }} coins</span> <span :class="['coins-amount', record.type === 0 ? 'positive' : 'negative']"
<span class="transaction-type">{{ getTransactionType(record.type, record.origin) }}</span> >{{ record.amount }} coins</span
>
<span class="transaction-type">{{
getTransactionType(record.type, record.origin)
}}</span>
</div> </div>
</div> </div>
</div> </div>
@ -44,8 +44,8 @@
import { ref, onMounted } from 'vue' import { ref, onMounted } from 'vue'
import MobileHeader from '../components/MobileHeader.vue' import MobileHeader from '../components/MobileHeader.vue'
import { getFreightWaterFlow } from '../api/wallet.js' import { getFreightWaterFlow } from '../api/wallet.js'
import {formatUTCTime} from "@/utils/utcFormat.js"; import { formatUTCTime } from '@/utils/utcFormat.js'
import {getUserId} from "@/utils/userStore.js"; import { getUserId } from '@/utils/userStore.js'
const loading = ref(false) const loading = ref(false)
const records = ref([]) const records = ref([])
@ -84,8 +84,9 @@ const fetchRecords = async () => {
if (response && response.status && response.body) { if (response && response.status && response.body) {
// //
records.value = response.body.map(item => ({ records.value = response.body.map((item) => ({
id: item.id, id: item.id,
account: item.account,
userId: item.acceptUserId, userId: item.acceptUserId,
userName: `User${item.acceptUserId.toString().slice(-6)}...`, // 6 userName: `User${item.acceptUserId.toString().slice(-6)}...`, // 6
amount: getAmountDisplay(item.type, item.quantity), amount: getAmountDisplay(item.type, item.quantity),
@ -95,7 +96,7 @@ const fetchRecords = async () => {
balance: item.balance, balance: item.balance,
origin: item.origin, origin: item.origin,
remark: item.remark, remark: item.remark,
rechargeType: item.rechargeType rechargeType: item.rechargeType,
})) }))
} else { } else {
records.value = [] records.value = []
@ -138,15 +139,19 @@ onMounted(async () => {
width: 32px; width: 32px;
height: 32px; height: 32px;
border: 3px solid #f3f3f3; border: 3px solid #f3f3f3;
border-top: 3px solid #F59E0B; border-top: 3px solid #f59e0b;
border-radius: 50%; border-radius: 50%;
animation: spin 1s linear infinite; animation: spin 1s linear infinite;
margin-bottom: 16px; margin-bottom: 16px;
} }
@keyframes spin { @keyframes spin {
0% { transform: rotate(0deg); } 0% {
100% { transform: rotate(360deg); } transform: rotate(0deg);
}
100% {
transform: rotate(360deg);
}
} }
.loading-state p { .loading-state p {
@ -165,7 +170,7 @@ onMounted(async () => {
background-color: white; background-color: white;
padding: 16px; padding: 16px;
border-radius: 12px; border-radius: 12px;
box-shadow: 0 2px 8px rgba(0,0,0,0.1); box-shadow: 0 2px 8px rgba(0, 0, 0, 0.1);
display: flex; display: flex;
align-items: center; align-items: center;
justify-content: space-between; justify-content: space-between;
@ -181,7 +186,7 @@ onMounted(async () => {
width: 50px; width: 50px;
height: 50px; height: 50px;
border-radius: 25px; border-radius: 25px;
background-color: #9CA3AF; background-color: #9ca3af;
display: flex; display: flex;
align-items: center; align-items: center;
justify-content: center; justify-content: center;
@ -225,11 +230,11 @@ onMounted(async () => {
} }
.coins-amount.positive { .coins-amount.positive {
color: #10B981; /* 绿色表示进货/入账 */ color: #10b981; /* 绿色表示进货/入账 */
} }
.coins-amount.negative { .coins-amount.negative {
color: #EF4444; /* 红色表示出货/出账 */ color: #ef4444; /* 红色表示出货/出账 */
} }
.transaction-type { .transaction-type {