4.9更新

src/views/Bill/Bill.vue

@@ -30,8 +30,17 @@
 
       <!-- 内容区 -->
       <div class="bill-content">
+        <div v-if="!isLoggedIn" class="login-require">
+          <div class="login-require-content">
+            <div class="login-require-text">请先登录后查看消费记录</div>
+            <el-button type="primary" class="login-btn" @click="handleLogin">
+              去登录
+            </el-button>
+          </div>
+        </div>
+
         <!-- 加载中 -->
-        <div v-if="isLoading" class="loading-container">
+        <div v-else-if="isLoading" class="loading-container">
           <div class="loading-spinner">
             <div class="spinner-circle"></div>
           </div>
@@ -114,10 +123,11 @@
 </template>
 
 <script setup lang="ts">
-import { ref, onMounted, computed } from 'vue';
+import { ref, onMounted, computed, watch } from 'vue';
 import { ElMessage } from 'element-plus';
 import { consumptionRecord } from '@/apis/home';
 import { useLoginStore } from '@/store/LoginStore';
+import router from '@/router';
 
 // ==================== 实例和状态 ====================
 const loginStore = useLoginStore();
@@ -149,6 +159,14 @@ const statusFilter = ref('');
 /** 登录状态 */
 const isLoggedIn = computed(() => loginStore.isLoggedIn);
 
+const resetOrderState = () => {
+  allOrderList.value = [];
+  orderList.value = [];
+  total.value = 0;
+  currentPage.value = 1;
+  statusFilter.value = '';
+};
+
 /**
  * 更新当前页显示的数据（前端分页）
  */
@@ -268,13 +286,17 @@ const handleFilterChange = () => {
   updatePaginatedList(); // 重新筛选和分页
 };
 
+const handleLogin = () => {
+  router.push('/login');
+};
+
 // ==================== 数据加载 ====================
 /**
  * 加载订单列表
  */
 const loadOrderList = async () => {
   if (!isLoggedIn.value) {
-    ElMessage.warning('请先登录');
+    resetOrderState();
     return;
   }
 
@@ -302,18 +324,14 @@ const loadOrderList = async () => {
       // 更新当前页显示的数据
       updatePaginatedList();
     } else {
-      allOrderList.value = [];
-      orderList.value = [];
-      total.value = 0;
+      resetOrderState();
       console.log('API返回非ok状态或无数据');
     }
   } catch (error) {
     console.error('=== 获取消费记录失败 ===');
     console.error('错误详情:', error);
     ElMessage.error('获取消费记录失败');
-    allOrderList.value = [];
-    orderList.value = [];
-    total.value = 0;
+    resetOrderState();
   } finally {
     isLoading.value = false;
   }
@@ -325,6 +343,17 @@ onMounted(() => {
     loadOrderList();
   }
 });
+
+watch(
+  () => loginStore.isLoggedIn,
+  (loggedIn) => {
+    if (loggedIn) {
+      loadOrderList();
+    } else {
+      resetOrderState();
+    }
+  }
+);
 </script>
 
 <style scoped lang="less">
@@ -427,6 +456,29 @@ onMounted(() => {
   overflow: hidden;
 }
 
+.login-require {
+  flex: 1;
+  display: flex;
+  align-items: center;
+  justify-content: center;
+}
+
+.login-require-content {
+  display: flex;
+  flex-direction: column;
+  align-items: center;
+  gap: 16px;
+}
+
+.login-require-text {
+  font-size: 18px;
+  color: rgba(255, 255, 255, 0.8);
+}
+
+.login-btn {
+  min-width: 120px;
+}
+
 // 加载中
 .loading-container {
   flex: 1;