合并代码

src/views/MainPage.vue

@@ -1,7 +1,7 @@
 <template>
   <div class="container">
     <div class="spacer"></div>
-    
+
     <div class="main-content">
       <!-- 轮播图 -->
       <div class="carousel">
@@ -14,29 +14,29 @@
           :loop="true"
         >
           <swiper-slide v-for="(item, index) in carouselItems" :key="index">
-            <img :src="item.image" :alt="item.title" class="carousel-img">
+            <img :src="item.image" :alt="item.title" class="carousel-img" />
             <div class="carousel-title">{{ item.title }}</div>
           </swiper-slide>
         </swiper>
       </div>
-      
+
       <!-- 头部导航 -->
       <div class="header">
-        <router-link 
-          v-for="(item, index) in headerItems" 
-          :key="index" 
-          :to="item.path" 
+        <router-link
+          v-for="(item, index) in headerItems"
+          :key="index"
+          :to="item.path"
           class="header-item"
           custom
           v-slot="{ navigate }"
         >
           <div @click="navigate" class="header-item-content">
-            <img :src="item.image" :alt="item.text" class="header-image">
+            <img :src="item.image" :alt="item.text" class="header-image" />
             <div class="header-text">{{ item.text }}</div>
           </div>
         </router-link>
       </div>
-      
+
       <!-- 修改后的操作区域 - 三个部分等宽 -->
       <div class="action-area">
         <div class="action-grid">
@@ -58,12 +58,16 @@
           </div>
         </div>
       </div>
-      
+
       <!-- 热门资讯 -->
       <div class="hot-news">
         <div class="news-title">热门资讯</div>
         <div class="news-list">
-          <div class="news-item" v-for="(item, index) in newsItems" :key="index">
+          <div
+            class="news-item"
+            v-for="(item, index) in newsItems"
+            :key="index"
+          >
             <span class="news-dot">•</span> {{ item }}
           </div>
         </div>
@@ -73,71 +77,85 @@
 </template>
 
 <script>
-import { Swiper, SwiperSlide } from 'swiper/vue'
-import { Autoplay, Pagination } from 'swiper'
-import { ref, onMounted, onUnmounted } from 'vue'
-import { ElMessage } from 'element-plus'
-import { transferAPI } from '../utils/api'
-import 'swiper/css'
-import 'swiper/css/autoplay'
-import 'swiper/css/pagination'
+import { Swiper, SwiperSlide } from 'swiper/vue';
+import { Autoplay, Pagination } from 'swiper';
+import { ref, onMounted, onUnmounted } from 'vue';
+import { ElMessage } from 'element-plus';
+import { transferAPI } from '../utils/api';
+import 'swiper/css';
+import 'swiper/css/autoplay';
+import 'swiper/css/pagination';
 
 export default {
   components: {
     Swiper,
-    SwiperSlide
+    SwiperSlide,
   },
   setup() {
     // 响应式数据
-    const userPoints = ref(0)
+    const userPoints = ref(0);
     const carouselItems = ref([
       { image: '/imgs/top/1.jpg', title: '限时优惠活动' },
       { image: '/imgs/top/2.jpg', title: '新用户专享' },
-      { image: '/imgs/top/3.jpg', title: '积分兑换' }
-    ])
+      { image: '/imgs/top/3.jpg', title: '积分兑换' },
+    ]);
     const headerItems = ref([
-      { image: "/imgs/mainpage/交易记录.png", text: "交易记录", path: "/transfers" },
-      { image: "/imgs/mainpage/订单查询.png", text: "订单查询", path: "/points-history" },
-      { image: "/imgs/mainpage/客服中心.png", text: "客服中心", path: "/support" },
-      { image: "/imgs/mainpage/系统公告.png", text: "系统公告", path: "/announcements" }
-    ])
+      {
+        image: '/imgs/mainpage/交易记录.png',
+        text: '交易记录',
+        path: '/transfers',
+      },
+      {
+        image: '/imgs/mainpage/订单查询.png',
+        text: '订单查询',
+        path: '/points-history',
+      },
+      {
+        image: '/imgs/mainpage/客服中心.png',
+        text: '客服中心',
+        path: '/support',
+      },
+      {
+        image: '/imgs/mainpage/系统公告.png',
+        text: '系统公告',
+        path: '/announcements',
+      },
+    ]);
     const newsItems = ref([
-      "最新活动：双十一特惠",
-      "商城新品上架",
-      "积分兑换规则更新",
-      "VIP会员特权升级"
-    ])
+      '最新活动：双十一特惠',
+      '商城新品上架',
+      '积分兑换规则更新',
+      'VIP会员特权升级',
+    ]);
 
     // 获取用户积分
     const getUserPoints = async () => {
       try {
         // 使用封装好的API获取用户账户信息
-        const response = await transferAPI.getUserAccount()
-        
+        const {data} = await transferAPI.getUserAccount();
+         console.log(data);
+         
         // 根据实际API响应结构调整，以下是几种可能的取值方式
-        userPoints.value = response.data.balance ||        // 方式1：如果返回balance字段
-                          response.data.points ||         // 方式2：如果返回points字段
-                          response.data.currentPoints ||  // 方式3：如果返回currentPoints字段
-                          0                              // 默认值
+        userPoints.value = data.data.points || 0;
       } catch (error) {
-        console.error('获取积分信息失败', error)
-        userPoints.value = 0
-        ElMessage.error('获取积分信息失败，请稍后重试')
+        console.error('获取积分信息失败', error);
+        userPoints.value = 0;
+        ElMessage.error('获取积分信息失败，请稍后重试');
       }
-    }
+    };
 
     // 定时刷新积分
-    let refreshInterval
-    
+    let refreshInterval;
+
     onMounted(() => {
-      getUserPoints()
+      getUserPoints();
       // 每5分钟刷新一次积分（可根据需求调整时间）
-      refreshInterval = setInterval(getUserPoints, 5 * 60 * 1000)
-    })
+      refreshInterval = setInterval(getUserPoints, 5 * 60 * 1000);
+    });
 
     onUnmounted(() => {
-      clearInterval(refreshInterval)
-    })
+      clearInterval(refreshInterval);
+    });
 
     return {
       modules: [Autoplay, Pagination],
@@ -145,14 +163,13 @@ export default {
       carouselItems,
       headerItems,
       newsItems,
-      getUserPoints // 如果需要外部调用可以暴露
-    }
-  }
-}
+      getUserPoints, // 如果需要外部调用可以暴露
+    };
+  },
+};
 </script>
 
 <style scoped>
-
 /* 基础样式 */
 :root {
   --primary-color: #4361ee;
@@ -395,4 +412,4 @@ export default {
 :deep(.swiper-pagination-bullet-active) {
   background: var(--primary-color) !important;
 }
-</style>
+</style>