From 32c6aa1614b1cced9072499a94e0db37208d4dce Mon Sep 17 00:00:00 2001
From: hzj <1304805162@qq.com>
Date: Tue, 9 Dec 2025 11:58:40 +0800
Subject: [PATCH] =?UTF-8?q?feat(=E9=87=91=E5=B8=81=E4=BB=A3=E7=90=86?=
 =?UTF-8?q?=E6=94=B6=E6=94=AF=E6=98=8E=E7=BB=86=E9=A1=B5):=20=E5=AF=B9?=
 =?UTF-8?q?=E6=8E=A5=E6=8E=A5=E5=8F=A3?=
MIME-Version: 1.0
Content-Type: text/plain; charset=UTF-8
Content-Transfer-Encoding: 8bit

---
 .../RechargeAgency/SellerRecordsView.vue      | 324 ++++++++----------
 1 file changed, 150 insertions(+), 174 deletions(-)

diff --git a/src/views/RechargeAgency/SellerRecordsView.vue b/src/views/RechargeAgency/SellerRecordsView.vue
index 0c4d8f3..e2494b8 100644
--- a/src/views/RechargeAgency/SellerRecordsView.vue
+++ b/src/views/RechargeAgency/SellerRecordsView.vue
@@ -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>