feat: 更新登录页面样式和兑换记录显示逻辑

- 替换登录和验证码页面的logo图片
- 调整登录页面头部padding和验证码页面样式
- 在请求拦截器中添加特定状态码处理逻辑
- 修改金币兑换记录显示格式和时间格式化方式
- 从localStorage获取并更新金币余额

src/utils/request.js

@@ -1,5 +1,5 @@
 import axios from 'axios'
-import { Toast } from 'vant'
+import { Toast, Dialog } from 'vant'
 import { API_BASE_URL } from './config'
 
 // 创建axios实例
@@ -42,7 +42,18 @@ service.interceptors.response.use(
     console.log(response)
     const res = response.data
     // 根据后端约定的状态码判断请求是否成功
-    if (res.code !== 200) {
+    if (res.code == 109) {
+      Toast.fail("登录令牌失效");
+      console.log("登录失效", res.message);
+      // 可以在这里添加跳转到登录页的逻辑
+      // window.location.href = '/login'
+    } else if (res.code == 1100) {
+      Dialog.alert({ message: res.message });
+      console.log("弹窗提示", res.message);
+    } else if (res.code == 1000) {
+      Toast.fail(res.message);
+      console.log("普通提示", res.message);
+    } else if (res.code !== 200) {
       //Toast.fail(res.message || '请求失败')
      // return Promise.reject(new Error(res.message || '请求失败'))
      return res

src/views/CoinExchange.vue

@@ -137,7 +137,7 @@ export default {
   name: 'CoinExchangePage',
   data() {
     return {
-      coinBalance: 12345, // 金币余额，实际应从API获取
+      coinBalance: 0, // 金币余额，从localStorage获取
       userId: '',
       userInfo: null,
       exchangeAmount: '',
@@ -145,6 +145,11 @@ export default {
       exchangeRate: 10 // 1金币 = 10钻石
     }
   },
+  created() {
+    // 从localStorage获取金币余额
+    const integral = localStorage.getItem('integral')
+    this.coinBalance = parseInt(integral) || 0
+  },
   computed: {
     // 计算兑换后获得的钻石数量
     getDiamondAmount() {
@@ -262,7 +267,7 @@ export default {
         })
         
         // 调用兑换API
-        await integralExchangeGoldCoinToOther(
+        const response = await integralExchangeGoldCoinToOther(
           this.userId,
           parseInt(this.exchangeAmount)
         )
@@ -270,8 +275,14 @@ export default {
         this.$toast.clear()
         this.$toast.success('兑换成功')
         
-        // 更新余额
-        this.coinBalance -= parseInt(this.exchangeAmount)
+        // 更新余额 - 从API返回值获取最新的integral并更新localStorage
+        if (response && response.data && typeof response.data.integral !== 'undefined') {
+          this.coinBalance = response.data.integral
+          localStorage.setItem('integral', response.data.integral.toString())
+        } else {
+          // 如果API没有返回integral，则使用原来的减法逻辑
+          this.coinBalance -= parseInt(this.exchangeAmount)
+        }
         
         // 重置表单
         this.resetForm()

src/views/CoinExchangeRecord.vue

@@ -14,52 +14,43 @@
     <!-- 记录列表 -->
     <div class="record-container">
       <div v-if="recordList.length > 0" class="record-list">
-        <div 
-          v-for="(record, index) in recordList" 
-          :key="index"
-          class="record-item"
-        >
+        <div v-for="(record, index) in recordList" :key="index" class="record-item">
           <div class="record-content">
             <div class="record-header">
-              <div class="record-id">兑换编号: {{ record.id }}</div>
+              <!-- <div class="record-id">兑换编号: {{ record.id }}</div>
               <div class="record-status" :class="record.status">
                 {{ getStatusText(record.status) }}
-              </div>
+              </div> -->
             </div>
-            
+
             <div class="record-info">
               <div class="record-user">
-                <div class="user-avatar">
-                  <img v-if="record.targetUser.avatar" :src="record.targetUser.avatar" class="avatar" />
-                  <div v-else class="avatar-placeholder">
-                    <van-icon name="user-o" size="20" />
-                  </div>
-                </div>
                 <div class="user-details">
-                  <div class="user-name">{{ record.targetUser.nickname }}</div>
-                  <div class="user-id">ID: {{ record.targetUser.id }}</div>
+                  <!-- <div class="user-name">{{ record.targetUser.nickname }}</div> -->
+                  <div class="user-id">兑换钻石（ID: {{ record.relationId }}）</div>
+                  <div class="record-time">{{ formatTime(record.createTime) }}</div>
                 </div>
               </div>
-              
+
               <div class="exchange-details">
                 <div class="exchange-item">
                   <span class="label">兑换金币:</span>
-                  <span class="value coin">-{{ record.coinAmount }}</span>
+                  <span class="value coin">-{{ record.amount }}</span>
                 </div>
                 <div class="exchange-item">
                   <span class="label">获得钻石:</span>
-                  <span class="value diamond">+{{ record.diamondAmount }}</span>
+                  <span class="value diamond">+{{ record.amount * 10 }}</span>
                 </div>
               </div>
             </div>
-            
-            <div class="record-footer">
+
+            <!-- <div class="record-footer">
               <div class="record-time">{{ formatTime(record.createTime) }}</div>
-            </div>
+            </div> -->
           </div>
         </div>
       </div>
-      
+
       <!-- 空状态 -->
       <div v-else class="empty-state">
         <div class="empty-icon">
@@ -72,13 +63,7 @@
 
     <!-- 加载更多 -->
     <div v-if="hasMore && recordList.length > 0" class="load-more">
-      <van-button 
-        type="default" 
-        size="small" 
-        :loading="loading"
-        @click="loadMore"
-        class="load-more-btn"
-      >
+      <van-button type="default" size="small" :loading="loading" @click="loadMore" class="load-more-btn">
         {{ loading ? '加载中...' : '加载更多' }}
       </van-button>
     </div>
@@ -107,32 +92,32 @@ export default {
     goBack() {
       this.$router.go(-1)
     },
-    
+
     // 加载兑换记录
     async loadRecords(isLoadMore = false) {
       if (this.loading) return
-      
+
       this.loading = true
-      
+
       try {
         const res = await getIntegralExchangeGoldCoinStreamList(this.page)
-        
+        console.log('兑换记录', res)
         if (isLoadMore) {
           this.recordList.push(...res.data.list)
         } else {
           this.recordList = res.data.list
         }
-        
+        console.log('兑换记录', this.recordList)
         this.hasMore = res.data.hasMore
-        
+
         if (isLoadMore && res.data.list.length > 0) {
           // 页码在loadMore方法中已经递增
         }
-        
+
       } catch (error) {
         this.$toast.fail('加载失败，请重试')
         console.error('加载兑换记录失败:', error)
-        
+
         // 加载失败时恢复页码
         if (isLoadMore && this.page > 1) {
           this.page--
@@ -141,13 +126,13 @@ export default {
         this.loading = false
       }
     },
-    
+
     // 加载更多
     async loadMore() {
       this.page++
       await this.loadRecords(true)
     },
-    
+
     // 获取状态文本
     getStatusText(status) {
       const statusMap = {
@@ -157,28 +142,20 @@ export default {
       }
       return statusMap[status] || '未知状态'
     },
-    
+
     // 格式化时间
     formatTime(timestamp) {
       const date = new Date(timestamp)
-      const now = new Date()
-      const diff = now - date
-      
-      // 一天内显示时分
-      if (diff < 24 * 60 * 60 * 1000) {
-        return date.toLocaleTimeString('zh-CN', {
-          hour: '2-digit',
-          minute: '2-digit'
-        })
-      }
-      
-      // 超过一天显示月日
-      return date.toLocaleDateString('zh-CN', {
-        month: '2-digit',
-        day: '2-digit',
-        hour: '2-digit',
-        minute: '2-digit'
-      })
+
+      // 格式化为 yyyy-mm-dd hh:mm:ss
+      const year = date.getFullYear()
+      const month = String(date.getMonth() + 1).padStart(2, '0')
+      const day = String(date.getDate()).padStart(2, '0')
+      const hours = String(date.getHours()).padStart(2, '0')
+      const minutes = String(date.getMinutes()).padStart(2, '0')
+      const seconds = String(date.getSeconds()).padStart(2, '0')
+
+      return `${year}-${month}-${day} ${hours}:${minutes}:${seconds}`
     }
   }
 }
@@ -282,7 +259,7 @@ export default {
 
 /* 记录信息 */
 .record-info {
-  margin-bottom: 12px;
+  /* margin-bottom: 12px; */
 }
 
 .record-user {
@@ -315,6 +292,8 @@ export default {
 
 .user-details {
   flex: 1;
+  display: flex;
+  justify-content: space-between;
 }
 
 .user-name {
@@ -421,17 +400,17 @@ export default {
   .record-content {
     padding: 12px;
   }
-  
+
   .record-header {
     flex-direction: column;
     align-items: flex-start;
     gap: 8px;
   }
-  
+
   .exchange-details {
     padding: 10px;
   }
-  
+
   .exchange-item {
     font-size: 13px;
   }

src/views/Login.vue

@@ -5,7 +5,7 @@
       <div class="header-content">
         <div class="logo-wrapper">
           <div class="logo-container">
-            <img src="@/assets/images/logo.png" alt="告白语音" class="logo-image" />
+            <img src="@/assets/images/logo-l.png" alt="告白语音" class="logo-image" />
           </div>
         </div>
       </div>
@@ -163,7 +163,7 @@ export default {
 
 /* 页面头部 */
 .page-header {
-  padding: 20px 16px;
+  padding: 40px 16px 10px;
   text-align: center;
 }
 

src/views/VerifyCode.vue

@@ -8,7 +8,7 @@
         </div>
         <div class="logo-wrapper">
           <div class="logo-container">
-            <img src="@/assets/images/logo.png" alt="告白语音" class="logo-image" />
+            <!-- <img src="@/assets/images/logo.png" alt="告白语音" class="logo-image" /> -->
           </div>
         </div>
         <div class="header-placeholder"></div>
@@ -17,6 +17,9 @@
 
     <!-- 验证码输入 -->
     <div class="verify-container">
+      <div class="logo">
+        <img src="@/assets/images/logo-l.png" alt="告白语音" class="logo-image" />
+      </div>
       <div class="verify-card">
         <div class="verify-title">输入验证码</div>
 
@@ -280,7 +283,7 @@ export default {
 
 /* 页面头部 */
 .page-header {
-  padding: 20px 16px;
+  padding: 10px 16px;
 }
 
 .header-content {
@@ -325,7 +328,28 @@ export default {
 
 /* 验证码容器 */
 .verify-container {
-  padding: 40px 10px;
+  padding: 0px 10px 0;
+}
+
+/* Logo样式 */
+.logo {
+  display: flex;
+  justify-content: center;
+  align-items: center;
+  margin-bottom: 20px;
+  padding: 10px 0 10px;
+}
+
+.logo .logo-image {
+  width: 100px;
+  /* height: 60px; */
+  object-fit: contain;
+
+  transition: transform 0.3s ease;
+}
+
+.logo .logo-image:hover {
+  transform: scale(1.05);
 }
 
 .verify-card {
@@ -446,11 +470,22 @@ export default {
 /* 响应式设计 */
 @media (max-width: 375px) {
   .verify-container {
-    padding: 30px 16px;
+    padding: 20px 12px;
+  }
+
+  .logo {
+    margin-bottom: 24px;
+    padding: 16px 0;
+  }
+
+  .logo .logo-image {
+    width: 100px;
+    height: 50px;
   }
 
   .verify-card {
-    padding: 24px 20px;
+    padding: 24px 16px;
+    border-radius: 12px;
   }
 
   .verify-title {
@@ -459,13 +494,18 @@ export default {
   }
 
   .code-inputs {
-    gap: 8px;
+    gap: 6px;
   }
 
   .code-input {
-    width: 40px;
-    height: 52px;
-    font-size: 20px;
+    width: 38px;
+    height: 48px;
+    font-size: 18px;
+  }
+
+  .confirm-btn {
+    height: 44px;
+    font-size: 15px;
   }
 }
 </style>