feat(金币代理页): UI更新

src/views/CoinSellerView.vue

@@ -10,8 +10,27 @@
 
     <!-- 主要内容 -->
     <div v-else-if="dealerAccess" class="content">
+      <!-- 身份 -->
+      <div style="display: flex; justify-content: space-between">
+        <div
+          style="
+            margin: 0 1%;
+            margin-bottom: 12px;
+            font-weight: 600;
+            display: flex;
+            align-items: center;
+            font-size: 1.3em;
+          "
+        >
+          My account
+          <img src="../assets/icon/RA.png" alt="" height="20px" style="margin-left: 10px" />
+        </div>
+        <img @click="goToRecords" src="../assets/icon/records.png" height="20px" alt="" />
+      </div>
+
       <!-- 用户信息卡片 -->
       <div class="user-card">
+        <!-- 个人信息 -->
         <div class="user-info">
           <div class="avatar">
             <img
@@ -21,71 +40,95 @@
               class="avatar-image"
               @error="handleAvatarError"
             />
-            <span v-else class="avatar-text">{{ (userInfo.userNickname || userInfo.name).charAt(0) }}</span>
+            <span v-else class="avatar-text">{{
+              (userInfo.userNickname || userInfo.name).charAt(0)
+            }}</span>
           </div>
           <div class="user-details">
             <h3>{{ userInfo.userNickname || userInfo.name }}</h3>
-            <p>ID: {{ userInfo.id || userInfo.id }}</p>
+            <p>ID: {{ userInfo.id }}</p>
           </div>
           <button class="settings-btn" @click="goToSettings">
-            <span>📈</span>
+            <img src="../assets/icon/edit.png" alt="" width="70%" />
           </button>
         </div>
 
-        <!-- 账户状态标签 -->
-        <div class="account-tags">
-          <span class="tag seller-tag">🪙 Salary</span>
-        </div>
-      </div>
-
-      <!-- 我的金币 -->
-      <div class="coins-section">
-        <h3>My coins:</h3>
-        <div class="coins-display">
-          <span class="coin-icon">🪙</span>
-          <span v-if="loadingBalance" class="coins-loading">Loading...</span>
-          <span v-else class="coins-amount">{{ coinsAmount }}</span>
+        <!-- 我的金币 -->
+        <div>
+          <div style="font-weight: 600">My coins:</div>
+          <div style="margin-top: 12px; width: 100%; display: flex; align-items: center">
+            <img src="../assets/icon/coin.png" alt="" height="20px" style="display: block" />
+            <div style="color: #ffb627; font-weight: 590; margin-left: 5px">
+              {{ coinsAmount }}
+            </div>
+          </div>
         </div>
       </div>
 
       <!-- 用户搜索部分 -->
       <div class="user-section">
-        <h3>User:</h3>
+        <div style="margin-bottom: 12px; font-size: 16px; font-weight: 600; color: #333">User:</div>
+        <!-- 有用户 -->
         <div v-if="selectedUser.id" class="selected-user">
           <div class="user-info">
             <div class="user-avatar">
-              <span>{{ selectedUser.name.charAt(0) }}</span>
+              <img
+                v-if="selectedUser.userAvatar"
+                :src="selectedUser.userAvatar || ''"
+                :alt="selectedUser.userNickname || userInfo.name"
+                class="avatar-image"
+                @error="handleAvatarError"
+              />
+              <span v-else>{{ selectedUser.name.charAt(0) }}</span>
             </div>
             <div class="user-details">
               <div class="user-name">{{ selectedUser.name }}</div>
-              <div class="user-id">ID: {{ selectedUser.id }}</div>
+              <div class="user-id">ID: {{ selectedUser.account }}</div>
             </div>
           </div>
           <button class="change-btn" @click="searchUser">Change</button>
         </div>
-        <div v-else class="search-placeholder" @click="searchUser">
-          <span>Search</span>
+        <!-- 无用户 -->
+        <div v-else style="display: flex; justify-content: center; align-items: center">
+          <div class="search-placeholder" @click="searchUser">
+            <span>Search</span>
+          </div>
         </div>
-      </div>
 
-      <!-- 充值部分 -->
-      <div class="recharge-section">
-        <h3>Recharge:</h3>
-        <div class="recharge-input">
-          <input
-            v-model="rechargeAmount"
-            type="number"
-            placeholder="Please Enter The Amount Of Gold Coins To Transfer"
-            class="amount-input"
-          />
+        <!-- 充值部分 -->
+        <div v-if="selectedUser.id" style="margin-top: 12px">
+          <div style="margin-bottom: 12px; font-size: 16px; font-weight: 600; color: #333">
+            Recharge:
+          </div>
+          <!-- 输入金额 -->
+          <div
+            style="
+              margin-bottom: 16px;
+              background-color: white;
+              padding: 10px 16px;
+              border-radius: 12px;
+              box-shadow: 0 0 4px 0 rgba(0, 0, 0, 0.25);
+            "
+          >
+            <input
+              v-model="rechargeAmount"
+              type="number"
+              placeholder="Please Enter The Amount Of Gold Coins To Transfer"
+              class="amount-input"
+            />
+          </div>
+
+          <!-- 按钮 -->
+          <div style="display: flex; justify-content: center">
+            <button
+              class="recharge-btn"
+              :disabled="!canRecharge || isRecharging"
+              @click="rechargeNow"
+            >
+              {{ isRecharging ? 'Processing...' : 'Recharge now' }}
+            </button>
+          </div>
         </div>
-        <button
-          class="recharge-btn"
-          :disabled="!canRecharge || isRecharging"
-          @click="rechargeNow"
-        >
-          {{ isRecharging ? 'Processing...' : 'Recharge now' }}
-        </button>
       </div>
     </div>
   </div>
@@ -97,8 +140,8 @@ import { useRouter } from 'vue-router'
 import MobileHeader from '../components/MobileHeader.vue'
 import { getSelectedUser } from '../utils/coinSellerStore.js'
 import { checkFreightDealer, getFreightBalance, freightRecharge } from '../api/wallet.js'
-import {showError, showSuccess} from "@/utils/toast.js";
-import {usePageInitializationWithConfig} from "@/utils/pageConfig.js";
+import { showError, showSuccess } from '@/utils/toast.js'
+import { usePageInitializationWithConfig } from '@/utils/pageConfig.js'
 
 const router = useRouter()
 
@@ -113,7 +156,7 @@ const loadingBalance = ref(false)
 // 选中的用户
 const selectedUser = ref({
   id: '',
-  name: ''
+  name: '',
 })
 
 // 校验销售商权限
@@ -176,11 +219,16 @@ const isRecharging = ref(false)
 
 // 是否可以充值
 const canRecharge = computed(() => {
-  return selectedUser.value.id && rechargeAmount.value && parseFloat(rechargeAmount.value) > 0 && !isRecharging.value
+  return (
+    selectedUser.value.id &&
+    rechargeAmount.value &&
+    parseFloat(rechargeAmount.value) > 0 &&
+    !isRecharging.value
+  )
 })
 
 // 跳转到设置
-const goToSettings = () => {
+const goToRecords = () => {
   router.push('/seller-records')
 }
 
@@ -211,7 +259,7 @@ const rechargeNow = async () => {
 
     const rechargeData = {
       acceptUserId: acceptUserId,
-      quantity: amount
+      quantity: amount,
     }
 
     const response = await freightRecharge(rechargeData)
@@ -237,19 +285,21 @@ const rechargeNow = async () => {
   }
 }
 
-const {
-  userInfo
-} = usePageInitializationWithConfig('COIN_SELLER', {
+const { userInfo } = usePageInitializationWithConfig('COIN_SELLER', {
   onDataLoaded: (data) => {
     checkDealerAccess()
     fetchFreightBalance()
     initializeUser()
-  }
+  },
 })
-
 </script>
 
 <style scoped>
+* {
+  color: rgba(0, 0, 0, 0.8);
+  font-family: 'SF Pro Text';
+}
+
 .coin-seller {
   font-family: -apple-system, BlinkMacSystemFont, sans-serif;
 }
@@ -267,15 +317,19 @@ const {
   width: 32px;
   height: 32px;
   border: 3px solid #f3f3f3;
-  border-top: 3px solid #F59E0B;
+  border-top: 3px solid #f59e0b;
   border-radius: 50%;
   animation: spin 1s linear infinite;
   margin-bottom: 12px;
 }
 
 @keyframes spin {
-  0% { transform: rotate(0deg); }
-  100% { transform: rotate(360deg); }
+  0% {
+    transform: rotate(0deg);
+  }
+  100% {
+    transform: rotate(360deg);
+  }
 }
 
 .content {
@@ -290,7 +344,7 @@ const {
   padding: 16px;
   border-radius: 12px;
   margin-bottom: 16px;
-  box-shadow: 0 2px 8px rgba(0,0,0,0.1);
+  box-shadow: 0 2px 8px rgba(0, 0, 0, 0.1);
 }
 
 .user-info {
@@ -303,7 +357,7 @@ const {
   width: 50px;
   height: 50px;
   border-radius: 25px;
-  background-color: #F59E0B;
+  background-color: #f59e0b;
   display: flex;
   align-items: center;
   justify-content: center;
@@ -333,16 +387,15 @@ const {
 }
 
 .user-details h3 {
-  margin: 0 0 4px 0;
+  margin-bottom: 4px;
   font-size: 16px;
-  font-weight: 600;
-  color: #333;
+  font-weight: 700;
 }
 
 .user-details p {
-  margin: 0;
+  color: rgba(0, 0, 0, 0.4);
   font-size: 14px;
-  color: #666;
+  font-weight: 500;
 }
 
 .settings-btn {
@@ -367,8 +420,8 @@ const {
 }
 
 .seller-tag {
-  background-color: #FEF3C7;
-  color: #D97706;
+  background-color: #fef3c7;
+  color: #d97706;
 }
 
 /* 金币部分 */
@@ -377,7 +430,7 @@ const {
   padding: 16px;
   border-radius: 12px;
   margin-bottom: 16px;
-  box-shadow: 0 2px 8px rgba(0,0,0,0.1);
+  box-shadow: 0 2px 8px rgba(0, 0, 0, 0.1);
 }
 
 .coins-section h3 {
@@ -400,7 +453,7 @@ const {
 .coins-amount {
   font-size: 20px;
   font-weight: 600;
-  color: #F59E0B;
+  color: #f59e0b;
 }
 
 .coins-loading {
@@ -415,14 +468,7 @@ const {
   padding: 16px;
   border-radius: 12px;
   margin-bottom: 16px;
-  box-shadow: 0 2px 8px rgba(0,0,0,0.1);
-}
-
-.user-section h3 {
-  margin: 0 0 12px 0;
-  font-size: 16px;
-  font-weight: 600;
-  color: #333;
+  box-shadow: 0 2px 8px rgba(0, 0, 0, 0.1);
 }
 
 .selected-user {
@@ -430,9 +476,8 @@ const {
   align-items: center;
   justify-content: space-between;
   padding: 12px;
-  background-color: #f8f9fa;
-  border-radius: 8px;
-  border: 1px solid #e9ecef;
+  border-radius: 12px;
+  box-shadow: 0 0 4px 0 rgba(0, 0, 0, 0.25);
 }
 
 .selected-user .user-info {
@@ -445,7 +490,7 @@ const {
   width: 40px;
   height: 40px;
   border-radius: 20px;
-  background-color: #8B5CF6;
+  background-color: #8b5cf6;
   display: flex;
   align-items: center;
   justify-content: center;
@@ -461,45 +506,46 @@ const {
 
 .user-name {
   font-size: 14px;
-  font-weight: 600;
-  color: #333;
+  font-weight: 700;
   margin-bottom: 2px;
 }
 
 .user-id {
   font-size: 12px;
-  color: #666;
+  font-weight: 500;
+  color: rgba(0, 0, 0, 0.4);
 }
 
 .change-btn {
-  background-color: #C084FC;
+  border-radius: 12px;
+  background: linear-gradient(
+    152deg,
+    rgba(198, 112, 255, 0.6) 7.01%,
+    rgba(119, 38, 255, 0.6) 92.99%
+  );
   color: white;
   border: none;
   padding: 6px 12px;
-  border-radius: 6px;
   font-size: 12px;
-  font-weight: 600;
+  font-weight: 700;
   cursor: pointer;
 }
 
 .change-btn:active {
-  background-color: #A855F7;
+  background-color: #a855f7;
 }
 
 .search-placeholder {
-  display: flex;
-  align-items: center;
-  justify-content: center;
-  padding: 20px;
-  border: 2px dashed #ddd;
-  border-radius: 8px;
+  padding: 12px 20px;
+  border: 1px solid #ddd;
+  border-radius: 12px;
+  box-shadow: 0 2px 8px rgba(0, 0, 0, 0.1);
   cursor: pointer;
   transition: all 0.2s;
-  background-color: #fafafa;
 }
 
 .search-placeholder:hover {
-  border-color: #F59E0B;
+  border-color: #f59e0b;
   background-color: #fef5e7;
 }
 
@@ -509,44 +555,21 @@ const {
   font-weight: 500;
 }
 
-/* 充值部分 */
-.recharge-section {
-  background-color: white;
-  padding: 16px;
-  border-radius: 12px;
-  box-shadow: 0 2px 8px rgba(0,0,0,0.1);
-}
-
-.recharge-section h3 {
-  margin: 0 0 12px 0;
-  font-size: 16px;
-  font-weight: 600;
-  color: #333;
-}
-
-.recharge-input {
-  position: relative;
-  margin-bottom: 16px;
-}
-
 .amount-input {
   width: 100%;
-  padding: 12px 16px;
-  border: 1px solid #e5e7eb;
-  border-radius: 8px;
+  border: none;
   font-size: 14px;
-  background-color: #f9fafb;
   box-sizing: border-box;
 }
 
 .amount-input:focus {
   outline: none;
-  border-color: #F59E0B;
-  background-color: white;
 }
 
 .amount-input::placeholder {
-  color: #9ca3af;
+  font-size: 12px;
+  color: rgba(0, 0, 0, 0.4);
+  font-weight: 500;
 }
 
 .currency-suffix {
@@ -559,28 +582,42 @@ const {
 }
 
 .recharge-btn {
-  width: 100%;
-  padding: 14px;
-  background-color: #8B5CF6;
+  width: 80%;
+  padding: 12px;
+  border-radius: 32px;
+  background: linear-gradient(135deg, #bb92ff 2.82%, #8b45ff 99.15%);
   color: white;
   border: none;
-  border-radius: 8px;
   font-size: 16px;
   font-weight: 600;
   cursor: pointer;
   transition: all 0.2s;
 }
 
-.recharge-btn:not(:disabled):hover {
-  background-color: #7C3AED;
-}
-
 .recharge-btn:not(:disabled):active {
-  background-color: #6D28D9;
+  background: linear-gradient(135deg, #b080ff 2.82%, #6302ff 99.15%);
 }
 
 .recharge-btn:disabled {
-  background-color: #D1D5DB;
+  background: #d1d5db;
   cursor: not-allowed;
 }
+
+@media screen and (max-width: 360px) {
+  * {
+    font-size: 10px;
+  }
+}
+
+@media screen and (min-width: 360px) {
+  * {
+    font-size: 12px;
+  }
+}
+
+@media screen and (min-width: 768px) {
+  * {
+    font-size: 24px;
+  }
+}
 </style>