feat(信息通知页): UI更新

src/views/MessageView.vue

@@ -9,32 +9,20 @@
       </div>
 
       <div v-else class="message-list">
-        <div
+        <div v-for="message in messages" :key="message.id" class="message-item">
-          v-for="message in messages"
-          :key="message.id"
-          class="message-item"
-        >
           <div class="user-info">
             <div class="user-avatar">
               <img v-if="message.avatar" :src="message.avatar" :alt="message.name" />
-              <span v-else>{{ message.name?.charAt(0) || 'U' }}</span>
+              <div v-else>{{ message.name?.charAt(0) || 'U' }}</div>
             </div>
             <div class="user-details">
               <h4>{{ message.name || 'Unknown User' }}</h4>
               <p>ID: {{ message.account || message.userId }}</p>
-              <p v-if="message.countryName" class="country-info">
-                {{ message.countryName }} ({{ message.countryCode }})
-              </p>
-              <p class="apply-time">{{ formatUTCTime(message.createTime) }}</p>
             </div>
           </div>
           <div class="action-buttons">
-            <button class="agree-btn" @click="handleAgree(message)">
+            <button class="agree-btn" @click="handleAgree(message)">Agree</button>
-              Agree
+            <button class="refuse-btn" @click="handleRefuse(message)">Refuse</button>
-            </button>
-            <button class="refuse-btn" @click="handleRefuse(message)">
-              Refuse
-            </button>
           </div>
         </div>
       </div>
@@ -53,9 +41,9 @@ import { useRouter } from 'vue-router'
 import MobileHeader from '../components/MobileHeader.vue'
 import { getApplyRecord } from '../api/teamBill.js'
 import { processUserApply } from '../api/wallet.js'
-import {getTeamId} from "@/utils/userStore.js";
+import { getTeamId } from '@/utils/userStore.js'
-import {showError, showSuccess, showWarning} from "@/utils/toast.js";
+import { showError, showSuccess, showWarning } from '@/utils/toast.js'
-import { formatUTCTime } from '@/utils/utcFormat.js';
+import { formatUTCTime } from '@/utils/utcFormat.js'
 
 const router = useRouter()
 const loading = ref(false)
@@ -67,8 +55,8 @@ const mockMessages = [
     id: '1234567890',
     name: 'User1',
     avatar: '',
-    type: 'team_join_request'
+    type: 'team_join_request',
-  }
+  },
 ]
 
 // 获取消息列表
@@ -79,7 +67,7 @@ const fetchMessages = async () => {
 
     if (response.status && response.body) {
       // 根据新的接口结构映射数据
-      messages.value = response.body.map(item => ({
+      messages.value = response.body.map((item) => ({
         id: item.id,
         reason: item.reason,
         teamId: item.teamId,
@@ -93,7 +81,7 @@ const fetchMessages = async () => {
         userSex: item.createUserProfile.userSex,
         age: item.createUserProfile.age,
         countryName: item.createUserProfile.countryName,
-        countryCode: item.createUserProfile.countryCode
+        countryCode: item.createUserProfile.countryCode,
       }))
     }
   } catch (error) {
@@ -108,13 +96,13 @@ const handleAgree = async (message) => {
   try {
     const response = await processUserApply({
       id: message.id,
-      status: 'AGREE'
+      status: 'AGREE',
     })
 
     if (response.status) {
       showSuccess(`Approved ${message.name}'s application`)
       // 从列表中移除
-      const index = messages.value.findIndex(m => m.id === message.id)
+      const index = messages.value.findIndex((m) => m.id === message.id)
       if (index > -1) {
         messages.value.splice(index, 1)
       }
@@ -132,13 +120,13 @@ const handleRefuse = async (message) => {
   try {
     const response = await processUserApply({
       id: message.id,
-      status: 'REJECT'
+      status: 'REJECT',
     })
 
     if (response.status) {
       showWarning(`Rejected ${message.name}'s application`)
       // 从列表中移除
-      const index = messages.value.findIndex(m => m.id === message.id)
+      const index = messages.value.findIndex((m) => m.id === message.id)
       if (index > -1) {
         messages.value.splice(index, 1)
       }
@@ -157,6 +145,11 @@ onMounted(() => {
 </script>
 
 <style scoped>
+* {
+  color: rgba(0, 0, 0, 0.8);
+  font-family: 'SF Pro Text';
+}
+
 .message {
   font-family: -apple-system, BlinkMacSystemFont, sans-serif;
 }
@@ -181,15 +174,19 @@ onMounted(() => {
   width: 32px;
   height: 32px;
   border: 3px solid #f3f3f3;
-  border-top: 3px solid #8B5CF6;
+  border-top: 3px solid #8b5cf6;
   border-radius: 50%;
   animation: spin 1s linear infinite;
   margin-bottom: 16px;
 }
 
 @keyframes spin {
-  0% { transform: rotate(0deg); }
+  0% {
-  100% { transform: rotate(360deg); }
+    transform: rotate(0deg);
+  }
+  100% {
+    transform: rotate(360deg);
+  }
 }
 
 /* 消息列表 */
@@ -201,9 +198,9 @@ onMounted(() => {
 
 .message-item {
   background-color: white;
-  padding: 16px;
+  padding: 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;
   align-items: center;
   justify-content: space-between;
@@ -219,7 +216,7 @@ onMounted(() => {
   width: 40px;
   height: 40px;
   border-radius: 20px;
-  background-color: #8B5CF6;
+  background-color: rgba(0, 0, 0, 0.1);
   display: flex;
   align-items: center;
   justify-content: center;
@@ -237,21 +234,20 @@ onMounted(() => {
 }
 
 .user-details h4 {
-  margin: 0 0 4px 0;
+  margin-bottom: 4px;
   font-size: 16px;
-  font-weight: 600;
+  font-weight: 700;
-  color: #333;
 }
 
 .user-details p {
-  margin: 0 0 2px 0;
   font-size: 14px;
-  color: #666;
+  font-weight: 500;
+  color: rgba(0, 0, 0, 0.4);
 }
 
 .country-info {
   font-size: 12px !important;
-  color: #8B5CF6 !important;
+  color: #8b5cf6 !important;
 }
 
 .apply-time {
@@ -264,32 +260,28 @@ onMounted(() => {
   gap: 8px;
 }
 
-.agree-btn, .refuse-btn {
+.agree-btn,
-  padding: 8px 16px;
+.refuse-btn {
+  padding: 4px 16px;
   border: none;
   border-radius: 20px;
-  font-size: 14px;
+  font-size: 12px;
   font-weight: 600;
-  cursor: pointer;
-  transition: all 0.2s;
 }
 
 .agree-btn {
-  background-color: #C084FC;
+  background: linear-gradient(
+    152deg,
+    rgba(198, 112, 255, 0.6) 7.01%,
+    rgba(119, 38, 255, 0.6) 92.99%
+  );
   color: white;
 }
 
-.agree-btn:active {
-  background-color: #A855F7;
-}
-
 .refuse-btn {
-  background-color: #E5E7EB;
+  background-color: transparent;
-  color: #6B7280;
+  border: 1px solid #bb92ff;
-}
+  color: #bb92ff;
-
-.refuse-btn:active {
-  background-color: #D1D5DB;
 }
 
 /* 空状态 */