diff --git a/src/views/InformationDetailsView.vue b/src/views/InformationDetailsView.vue index 6db2ad7..25f8efb 100644 --- a/src/views/InformationDetailsView.vue +++ b/src/views/InformationDetailsView.vue @@ -24,12 +24,34 @@ class="transaction-item" >
+ +
+ +
+ {{ getAvatarPlaceholder(transaction.userNickname) }} +
+
+ +

{{ transaction.eventDescribe }}

+ +

{{ transaction.createTime }}

+ +
- {{ transaction.amount > 0 ? '+' : '' }}{{ Math.abs(transaction.amount) }} + {{ transaction.amount > 0 ? '+' : '' }}${{ Math.abs(transaction.amount) }}
@@ -100,7 +122,11 @@ const fetchData = async () => { amount: amount, balance: item.balance, event: item.event, - isPositive: isPositive + isPositive: isPositive, + // 添加用户信息字段 + userAvatar: item.details?.userAvatar || null, + userNickname: item.details?.userNickname || null, + account: item.details?.account || null } }) } else { @@ -114,6 +140,17 @@ const fetchData = async () => { } } +// 头像占位符 +const getAvatarPlaceholder = (nickname) => { + if (!nickname) return 'U' + return nickname.charAt(0).toUpperCase() +} + +// 处理图片加载错误 +const handleImageError = (event) => { + console.warn('头像加载失败:', event.target.src) +} + // 页面加载时获取数据 onMounted(() => { fetchData() @@ -147,12 +184,38 @@ onMounted(() => { .transaction-content { display: flex; - justify-content: space-between; align-items: center; + gap: 12px; +} + +/* 用户头像 */ +.user-avatar-container { + flex-shrink: 0; +} + +.user-avatar { + width: 48px; + height: 48px; + border-radius: 50%; + object-fit: cover; +} + +.avatar-placeholder { + width: 48px; + height: 48px; + border-radius: 50%; + background-color: #8B5CF6; + display: flex; + align-items: center; + justify-content: center; + color: white; + font-size: 18px; + font-weight: 600; } .transaction-info { flex: 1; + min-width: 0; /* 为了支持text overflow */ } .transaction-info h3 { @@ -162,6 +225,25 @@ onMounted(() => { color: #333; } +/* 用户信息 */ +.user-info { + display: flex; + flex-direction: column; + gap: 2px; + margin-bottom: 4px; +} + +.user-nickname { + font-size: 14px; + font-weight: 500; + color: #333; +} + +.user-account { + font-size: 12px; + color: #666; +} + .transaction-time { margin: 0; font-size: 14px; @@ -171,8 +253,8 @@ onMounted(() => { .transaction-amount { font-size: 18px; font-weight: 600; - min-width: 40px; text-align: right; + flex-shrink: 0; } .transaction-amount.positive { @@ -270,4 +352,38 @@ onMounted(() => { margin: 0; font-size: 16px; } + +/* 响应式设计 */ +@media (max-width: 480px) { + .transaction-content { + gap: 10px; + } + + .user-avatar, + .avatar-placeholder { + width: 40px; + height: 40px; + font-size: 16px; + } + + .transaction-info h3 { + font-size: 15px; + } + + .user-nickname { + font-size: 13px; + } + + .user-account { + font-size: 11px; + } + + .transaction-time { + font-size: 13px; + } + + .transaction-amount { + font-size: 16px; + } +}