no message

src/App.vue

@@ -101,11 +101,13 @@ body {
   --gray-9: 90, 90, 90;//#5a5a5a
   --gray-8: 19, 53, 55;//#133537
   --gray-7: 96, 105, 97;//#606961
+  --gray-6: 163, 164, 160;//#A3A4A0
 
   --color-neutral-10: rgba(var(--gray-10));//#0c150d
   --color-neutral-9: rgba(var(--gray-9));//#5a5a5a
   --color-neutral-8: rgba(var(--gray-8));//#133537
   --color-neutral-7: rgba(var(--gray-7));//#606961
+  --color-neutral-6: rgba(var(--gray-6));//#A3A4A0
 }
 
 :root {

src/i18n/locales/zh-CN.ts

@@ -149,6 +149,7 @@ export default {
     guestName: '客人',
     roomType: '房型',
     to: '至',
+    systemMessage: '系统消息',
   },
   // HTTP 错误状态码
   httpError: {

src/views/personalCenter/index.vue

@@ -7,6 +7,7 @@
             @menu-click="menuClick"/>
             <div class="h-full flex-1 ml-[24px]">
                 <myOrder v-if="activeMenu === 'myOrder'"/>
+                <systemMessage v-if="activeMenu === 'systemMessage'"/>
             </div>
         </div>
     </div>
@@ -17,6 +18,7 @@ import { useRoute } from 'vue-router'
 import { useI18n } from 'vue-i18n'
 import LeftView from './components/LeftView.vue'
 import myOrder from './myOrder.vue'
+import systemMessage from './systemMessage.vue'
 
 const { t } = useI18n()
 const route = useRoute()

src/views/personalCenter/myOrder.vue

 <template>
-    <div class="w-[977px] h-full flex flex-col">
+    <div class="w-[977px] h-full flex flex-col flex-shrink-0 overflow-hidden">
         <div class="myOrderData rounded-[14px] flex justify-between pt-[22px] pb-[19px] pl-[16px] relative">
             <div class="flex items-center p-[20px]">
                 <div class="bg-[#F3F3F2] rounded-full w-[52px] h-[52px] flex justify-center items-center mr-[16px]">
@@ -57,52 +57,52 @@
         </div>
         </div>
         <a-divider class="!m-[0]"/>
-        <div class="flex-1 flex flex-col overflow-hidden"
-        :class="[dataList.length==0&&!loding?'items-center justify-center':'']">
-            <div v-if="!noMoreData&&dataList.length==0"
-            class="w-full flex-1 mt-[22px]"
-            ref="scrollContainer"
-            @scroll="handleDivScroll">
-                <div class="myOrderList rounded-[8px] border">
-                    <div class="myOrderList-header flex justify-between items-center text-xs py-[13px] pl-[25px] pr-[22px]">
-                        <div>
-                            <span class="font-light">{{ t('personal.orderNumber') }}：</span>
-                            <span class="myOrder-number">1128143664585527</span>
-                            <span class="ml-[45px] SourceHanSansCN">{{ t('personal.reserveDate') }}：2025-11-10</span>
-                        </div>
-                        <img class="w-[14px] h-[16px]" src="../../assets/images/personal/right_n.png" alt="" />
-                    </div>
-                    <div class="pl-[25px] pr-[24px] pt-[13px] pb-[19px]">
-                        <div class="flex justify-between">
-                            <span class="truncate text-lg font-medium flex-1 flex-shrink-0">上海古北禧玥酒店</span>
-                            <span class="myOrder-sta flex-shrink-0">{{ t('personal.orderStatus.FINISH') }}</span>
-                        </div>
-                        <div class="flex justify-between items-center mt-[0px]">
-                            <div class="flex-1 flex-shrink-0 flex items-center">
-                                <img class="w-[12px] h-[14px] mr-[6px]" src="../../assets/images/personal/right_n.png" alt="" />
-                                <span class="text-sm SourceHanSansCN">红宝石路188号B幢</span>
+        <div class="flex-1 flex flex-col flex-shrink-0"
+        :class="[!(dataList.length==0&&!loding)?'items-center justify-center':'']">
+            <a-scrollbar class="max-h-[615px] overflow-auto"
+            @scroll="handleDivScroll"
+            ref="scrollContainer">
+                <div v-if="dataList.length==0" class="myOrderList flex flex-col rounded-[8px] border mb-[20px] mt-[22px]"
+                    v-for="item in 10">
+                        <div class="myOrderList-header flex justify-between items-center text-xs py-[13px] pl-[25px] pr-[22px]">
+                            <div>
+                                <span class="font-light">{{ t('personal.orderNumber') }}：</span>
+                                <span class="myOrder-number">1128143664585527</span>
+                                <span class="ml-[45px] SourceHanSansCN">{{ t('personal.reserveDate') }}：2025-11-10</span>
                             </div>
-                            <span class="text-lg font-medium flex-shrink-0">¥1756.28</span>
-                        </div>
-                        <div class="text-sm font-light">
-                            <span class="myOrder-text-l">{{ t('personal.checkInDate') }}：</span>
-                            <span class="SourceHanSansCN">2025-11-10 {{ t('personal.to') }} 2025-11-11</span>
+                            <img class="w-[14px] h-[16px]" src="../../assets/images/personal/right_n.png" alt="" />
                         </div>
-                        <div class="text-sm font-light">
-                            <span class="myOrder-text-l">{{ t('personal.guestName') }}：</span>
-                            <span class="SourceHanSansCN">李飞州</span>
-                        </div>
-                        <div class="text-sm font-light">
-                            <span class="myOrder-text-l">{{ t('personal.roomType') }}：</span>
-                            <span class="SourceHanSansCN">松雅大床房</span>
+                        <div class="pl-[25px] pr-[24px] pt-[13px] pb-[19px]">
+                            <div class="flex justify-between">
+                                <span class="truncate text-lg font-medium flex-1 flex-shrink-0">上海古北禧玥酒店</span>
+                                <span class="myOrder-sta flex-shrink-0">{{ t('personal.orderStatus.FINISH') }}</span>
+                            </div>
+                            <div class="flex justify-between items-center mt-[0px]">
+                                <div class="flex-1 flex-shrink-0 flex items-center">
+                                    <img class="w-[12px] h-[14px] mr-[6px]" src="../../assets/images/personal/right_n.png" alt="" />
+                                    <span class="text-sm SourceHanSansCN">红宝石路188号B幢</span>
+                                </div>
+                                <span class="text-lg font-medium flex-shrink-0">¥1756.28</span>
+                            </div>
+                            <div class="text-sm font-light">
+                                <span class="myOrder-text-l">{{ t('personal.checkInDate') }}：</span>
+                                <span class="SourceHanSansCN">2025-11-10 {{ t('personal.to') }} 2025-11-11</span>
+                            </div>
+                            <div class="text-sm font-light">
+                                <span class="myOrder-text-l">{{ t('personal.guestName') }}：</span>
+                                <span class="SourceHanSansCN">李飞州</span>
+                            </div>
+                            <div class="text-sm font-light">
+                                <span class="myOrder-text-l">{{ t('personal.roomType') }}：</span>
+                                <span class="SourceHanSansCN">松雅大床房</span>
+                            </div>
                         </div>
-                    </div>
                 </div>
-            </div>
-            <div v-else-if="dataList.length==0&&!loding" class="flex flex-col items-center justify-center">
-                <img class="w-[250px] h-[213px]" src="../../assets/images/personal/wsj.png" alt="" />
-                <span class="text-base SourceHanSansCN mt-[15px]">{{ t('personal.noOrder') }}</span>
-            </div>
+                 <div v-else-if="dataList.length==0&&!loding" class="flex flex-col items-center justify-center">
+                    <img class="w-[250px] h-[213px]" src="../../assets/images/personal/wsj.png" alt="" />
+                    <span class="text-base SourceHanSansCN mt-[15px]">{{ t('personal.noOrder') }}</span>
+                </div>
+            </a-scrollbar>
         </div>
     </div>
 </template>
@@ -113,7 +113,6 @@ import { useUserStore } from '@/stores/user'
 import { useSystemConfigStore } from '@/stores/index'
 // 引入订单状态枚举
 import OrderStatusEnum from '@/utils/orderStautsEnum'
-console.log(OrderStatusEnum,'-----')
 
 const { t } = useI18n()
 const userStore = useUserStore()
@@ -151,7 +150,7 @@ const dataList = ref<any>([])
 const loding = ref(false)
 const noMoreData = ref(false)
 const scrollContainer = ref<any>(null)
-const scrollThreshold = 50 // 阈值，距离底部多少距离时触发加载
+const scrollThreshold = 0 // 阈值，距离底部多少距离时触发加载
 
 const changeStatus = (key: number) => {
     currentStatus.value = key
@@ -161,9 +160,9 @@ const loadData = async () => {
 }
 
 // 处理 div 滚动事件（核心修改）
-const handleDivScroll = () => {
+const handleDivScroll = (e: any) => {
     if (loding.value || noMoreData.value) return;
-    const container = scrollContainer.value;
+    const container = e.target;
     if (!container) return;
     // 计算滚动位置（兼容不同浏览器）
     const scrollTop = container.scrollTop;
@@ -213,4 +212,7 @@ const handleDivScroll = () => {
 .myOrder-text-l{
     color: var(--color-neutral-7);
 }
+:deep(.arco-scrollbar-track-direction-vertical){
+    display: none;
+}
 </style>
\ No newline at end of file

src/views/personalCenter/systemMessage.vue

+<template>
+    <div class="w-[977px] h-full flex flex-col flex-shrink-0 overflow-hidden">
+        <div class="flex text-base relative">
+            <div 
+            class="myOrder-status px-[13px] py-[22px] cursor-pointer relative active font-medium"
+            >{{ t('personal.systemMessage') }}
+                <div class="myOrder-status-border absolute left-0 bottom-0 w-full flex justify-center">
+                    <div></div>
+                </div>
+            </div>
+        </div>
+        <a-divider class="!m-[0]"/>
+        <div class="flex-1 flex flex-col flex-shrink-0"
+        :class="[!(dataList.length==0&&!loding)?'items-center justify-center':'']">
+            <a-scrollbar class="max-h-[745px] overflow-auto"
+            @scroll="handleDivScroll"
+            ref="scrollContainer">
+                <div v-if="dataList.length==0" class="myOrderList flex flex-col rounded-[8px] border mb-[20px] mt-[22px]"
+                    v-for="item in 10">
+                        <div class="pl-[25px] pr-[24px] pt-[13px] pb-[19px]">
+                            <div class="flex items-center justify-between mb-[10px]">
+                                <div class="text-base font-medium flex items-center">
+                                    <div class="w-[6px] h-[6px] rounded-full bg-[#FF9707]"></div>
+                                    <div class="ml-[7px] flex-shrink-0 truncate">订单违约扣费申诉</div>
+                                </div>
+                                <span class="SourceHanSansCN myOrder-time text-xs flex-shrink-0">2025-11-10 {{ t('personal.to') }} 2025-11-11</span>
+                            </div>
+                            <div class="text-sm font-light mb-[5px]">
+                                <span class="">尊敬的平台 / 商家客服团队：</span>
+                            </div>
+                            <div class="text-sm font-light">
+                                <span class="SourceHanSansCN">您好！我是用户 [您的用户名]，现针对订单 [订单编号] 的违约扣费事宜提交申诉，具体情况如下</span>
+                            </div>
+                        </div>
+                </div>
+                 <div v-else-if="dataList.length==0&&!loding" class="flex flex-col items-center justify-center">
+                    <img class="w-[250px] h-[213px]" src="../../assets/images/personal/wsj.png" alt="" />
+                    <span class="text-base SourceHanSansCN mt-[15px]">{{ t('personal.noOrder') }}</span>
+                </div>
+            </a-scrollbar>
+        </div>
+    </div>
+</template>
+<script setup lang="ts">
+import { ref } from 'vue'
+import { useI18n } from 'vue-i18n'
+import { useUserStore } from '@/stores/user'
+import { useSystemConfigStore } from '@/stores/index'
+// 引入订单状态枚举
+import OrderStatusEnum from '@/utils/orderStautsEnum'
+
+const { t } = useI18n()
+const userStore = useUserStore()
+const systemConfigStore = useSystemConfigStore()
+const orderList = ref<any>([])
+const currentStatus = ref(0)
+ 
+orderList.value.push({
+    value: 0,
+    lable: t('personal.orderStatus.ALL'),
+})
+orderList.value.push({
+    value: OrderStatusEnum.UN_PAY.value,
+    lable: OrderStatusEnum.UN_PAY.desc,
+})
+orderList.value.push({
+    value: OrderStatusEnum.PAYED.value,
+    lable: OrderStatusEnum.PAYED.desc,
+})
+orderList.value.push({
+    value: OrderStatusEnum.FINISH.value,
+    lable: OrderStatusEnum.FINISH.desc,
+})
+orderList.value.push({
+    value: OrderStatusEnum.CANCEL.value,
+    lable: OrderStatusEnum.CANCEL.desc,
+})
+
+const queryParams = ref<any>({
+    pageIndex: 1,
+    pageSize: 10,
+    orderStatus: currentStatus.value,
+})
+const dataList = ref<any>([])
+const loding = ref(false)
+const noMoreData = ref(false)
+const scrollContainer = ref<any>(null)
+const scrollThreshold = 0 // 阈值，距离底部多少距离时触发加载
+
+const changeStatus = (key: number) => {
+    currentStatus.value = key
+}
+const loadData = async () => {
+    
+}
+
+// 处理 div 滚动事件（核心修改）
+const handleDivScroll = (e: any) => {
+    if (loding.value || noMoreData.value) return;
+    const container = e.target;
+    if (!container) return;
+    // 计算滚动位置（兼容不同浏览器）
+    const scrollTop = container.scrollTop;
+    const clientHeight = container.clientHeight;
+    const scrollHeight = container.scrollHeight;
+    // 触底条件：滚动距离 + 可见高度 ≥ 总高度 - 阈值
+    if (scrollTop + clientHeight >= scrollHeight - scrollThreshold) {
+        noMoreData.value = false
+        queryParams.value.pageIndex ++
+        loadData(); // 加载下一页
+    }
+}
+
+</script>
+<style scoped lang="scss">
+.myOrderData{
+    background: #FBFBFA;
+}
+.myOrder-text-l{
+    color: var(--color-neutral-7);
+}
+:deep(.arco-scrollbar-track-direction-vertical){
+    display: none;
+}
+.myOrder-time{
+    color: var(--color-neutral-6);
+}
+</style>
\ No newline at end of file