refactor: 重构多个组件以支持 Vue 3 语法和功能

- 将多个组件转换为 `<script setup>` 语法，提升可读性和性能
- 优化状态管理和事件处理逻辑，简化代码结构
- 更新样式和布局以适应新组件结构
- 添加新功能和修复已知问题，提升用户体验

pages/mine/msgTips/sysMsg/index.vue

@@ -2,17 +2,15 @@
   <view class="container">
     <block v-for="(row, index) in messageList" :key="index">
       <view class="msgItem">
-        <div  class="is_read">
-			<!-- {{row.is_read}} -->
-			<span v-if="row.is_read"></span>
-			<span v-else class="red">·</span>
-
-		</div>
-        <div class="msgMsg">{{$u.timeFormat(row.send_time, 'yyyy-mm-dd')}}</div>
-        <u-card :title="title" :title-size="35" :border="false">
+        <div class="is_read">
+          <span v-if="row.is_read"></span>
+          <span v-else class="red">·</span>
+        </div>
+        <div class="msgMsg">{{ formatSendTime(row.send_time) }}</div>
+        <u-card :title="pageTitle" :title-size="35" :border="false">
           <template #body>
             <view class="u-body-item u-flex u-row-between u-p-b-0">
-              <view class="u-body-item-title u-line-2">{{row.content}}</view>
+              <view class="u-body-item-title u-line-2">{{ row.content }}</view>
             </view>
           </template>
         </u-card>
@@ -22,74 +20,85 @@
   </view>
 </template>
 
-<script>
-import { mapMutations } from "vuex";
-import * as API_Message from "@/api/message.js";
-export default {
-  data() {
-    return {
-      title: "系统消息",
-      subTitle: "未读",
-      finished: false,
-      loadStatus: "more",
-      params: {
-        pageNumber: 0,
-        pageSize: 5
-      },
-      messageList: []
-    };
-  },
-  onLoad() {
-    this.GET_MessageList(true);
-  },
-  onReachBottom() {
-    this.params.pageNumber++;
-    this.GET_MessageList(false);
-  },
-  methods: {
-    ...mapMutations(["logout"]),
-   
-    /** 获取站内消息 */
-    GET_MessageList(reset) {
-      if (reset) {
-        this.params.pageNumber = 1;
-        this.messageList = [];
-      }
-      uni.showLoading({
-        title: "加载中"
-      });
-      API_Message.getMessages(this.params).then(async response => {
-         if (this.$store.state.isShowToast){ uni.hideLoading() };
-        const { data } = response;
-        if (!data || !data.length) {
-          this.messageList.push(...data.data);
-          this.handleReadPageMessages();
-        }
-      });
-    },
-    /** 设置消息已读 **/
-    handleReadPageMessages() {
-      const ids = this.messageList.map(item => item.id).join(",");
-      API_Message.messageMarkAsRead(ids).then(async () => {});
-    }
+<script setup lang="ts">
+import { ref, getCurrentInstance } from 'vue'
+import { onLoad, onReachBottom } from '@dcloudio/uni-app'
+import { useStore } from '@/store'
+import * as API_Message from '@/api/message.js'
+
+const store = useStore()
+const { proxy } = getCurrentInstance()!
+
+const pageTitle = '系统消息'
+const loadStatus = ref('more')
+const queryParams = ref({ pageNumber: 1, pageSize: 5 })
+const messageList = ref<any[]>([])
+
+onLoad(() => {
+  fetchMessageList(true)
+})
+
+onReachBottom(() => {
+  queryParams.value.pageNumber++
+  fetchMessageList(false)
+})
+
+function hideLoadingIfNeeded() {
+  if (store.state.isShowToast) uni.hideLoading()
+}
+
+function formatSendTime(time: number) {
+  return proxy.$u.timeFormat(time, 'yyyy-mm-dd')
+}
+
+function extractRecords(res: any) {
+  if (Array.isArray(res?.result?.records)) return res.result.records
+  if (Array.isArray(res?.result)) return res.result
+  if (Array.isArray(res?.data)) return res.data
+  return []
+}
+
+function fetchMessageList(reset: boolean) {
+  if (reset) {
+    queryParams.value.pageNumber = 1
+    messageList.value = []
+    loadStatus.value = 'more'
   }
-};
+  uni.showLoading({ title: '加载中' })
+  API_Message.getMessages(queryParams.value).then((response) => {
+    hideLoadingIfNeeded()
+    const res = response.data
+    const records = extractRecords(res)
+    if (records.length) {
+      messageList.value.push(...records)
+      markPageMessagesAsRead()
+    } else {
+      loadStatus.value = 'noMore'
+    }
+  })
+}
+
+function markPageMessagesAsRead() {
+  const ids = messageList.value.map((item) => item.id).join(',')
+  if (!ids) return
+  API_Message.messageMarkAsRead(ids)
+}
 </script>
 
-<style scoped lang='scss'>
-.is_read{
-	position: absolute;
-    right: 25px;
-    top: 80rpx;
-    z-index: 999;
+<style scoped lang="scss">
+.is_read {
+  position: absolute;
+  right: 25px;
+  top: 80rpx;
+  z-index: 999;
 }
 .container {
   background: #f9f9f9;
   min-height: 100vh;
 }
-.red{
-	color: coral;
-	font-size: 100rpx;
+.red {
+  color: coral;
+  font-size: 100rpx;
 }
 .msgMsg {
   text-align: center;
@@ -99,4 +108,4 @@ export default {
   padding: 1em 0;
   position: relative;
 }
-</style>
+</style>