v3.9.0【优化】typescript版本;【优化】App端消息;【优化】弹出层z-index;

smart-app/src/pages/message/message.vue

@@ -1,31 +1,105 @@
 <template>
   <view class="container">
-    <view class="message" v-for="(item, index) in 10">
-      <view class="message-header">
-        <view class="header-left">
-          <image src="/src/static/images/message/message.png" mode=""></image>
-          <view> 系统通知 </view>
+    <mescroll-body @init="mescrollInit" :down="{ auto: false }" @down="onDown" @up="onUp">
+      <mescroll-empty v-if="messageListData.length === 0"></mescroll-empty>
+      <view class="message" v-for="(item, index) in messageListData">
+        <view class="message-header">
+          <view class="header-left">
+            <image src="/src/static/images/message/message.png" mode=""></image>
+            <view>
+              {{ $smartEnumPlugin.getDescByValue('MESSAGE_TYPE_ENUM', item.messageType) }}
+            </view>
+          </view>
+          <view class="header-time"> {{item.createTime}} </view>
         </view>
-        <view class="header-time"> 2023-08-20 20:48:21 </view>
-      </view>
-      <view class="content">
-        <view class="message-title">
-          报销-付款已完成
-          <uni-icons v-if="index % 2 === 1" color="red" class="smart-margin-left10" type="info-filled" :size="14"></uni-icons>
+        <view class="content">
+          <view class="message-title">
+            <uni-icons v-if="!item.readFlag" color="red" class="smart-margin-right10" type="info-filled" :size="14"></uni-icons>
+            {{ item.title }}
+          </view>
+          <view class="message-body"> {{item.content}} </view>
         </view>
-        <view class="message-body"> 您的费用保修单已完成，付款金额300.00元，请注意查收。 </view>
       </view>
-    </view>
+    </mescroll-body>
   </view>
 </template>
 
-<script>
-  export default {
-    data() {
-      return {};
-    },
-    methods: {},
+<script setup>
+  import { reactive, ref } from 'vue';
+  import { onPageScroll, onReachBottom } from '@dcloudio/uni-app';
+  import useMescroll from '@/uni_modules/uni-mescroll/hooks/useMescroll';
+  import { smartSentry } from '@/lib/smart-sentry';
+  import { messageApi } from '@/api/support/message-api';
+
+  // --------------------------- 查询 ---------------------------------
+
+  const defaultForm = {
+    searchWord: '',
+    messageType: null,
+    dataId: null,
+    readFlag: null,
+    endDate: null,
+    startDate: null,
+    pageNum: 1,
+    pageSize: 10,
+    searchCount: true,
+    receiverType: null,
+    receiverId: null,
   };
+
+  // 查询表单
+  const queryForm = reactive({ ...defaultForm });
+  // 通知列表数据
+  const messageListData = ref([]);
+
+  function buildQueryParam(pageNum) {
+    queryForm.pageNum = pageNum;
+    return Object.assign({}, queryForm, { pageNum });
+  }
+
+  async function query(mescroll, isDownFlag, param) {
+    try {
+      let res = await messageApi.queryMessage(param);
+      res.data.list.map(e => e.content = e.content.substr(0,50));
+      if (!isDownFlag) {
+        messageListData.value = messageListData.value.concat(res.data.list);
+      } else {
+        messageListData.value = res.data.list;
+      }
+      mescroll.endSuccess(res.data.list.length, res.data.pages > res.data.pageNum);
+    } catch (e) {
+      smartSentry.captureError(e);
+      //联网失败, 结束加载
+      mescroll.endErr();
+    }
+  }
+
+  const { mescrollInit, getMescroll } = useMescroll(onPageScroll, onReachBottom);
+
+  /**
+   * 搜索
+   */
+  function search() {
+    query(getMescroll(), true, buildQueryParam(1));
+    uni.pageScrollTo({
+      scrollTop: 0,
+    });
+  }
+
+  /**
+   * 下拉刷新
+   */
+  function onDown(mescroll) {
+    queryForm.pageNum = 1;
+    query(mescroll, true, buildQueryParam(1));
+  }
+
+  /**
+   * 上拉加载更多
+   */
+  function onUp(mescroll) {
+    query(mescroll, false, buildQueryParam(mescroll.num));
+  }
 </script>
 
 <style lang="scss" scoped>
@@ -74,9 +148,13 @@
         flex-direction: row;
         justify-content: flex-start;
         align-items: center;
+        white-space: nowrap; /* 确保文本不会换行 */
+        overflow: hidden; /* 隐藏溢出的内容 */
+        text-overflow: ellipsis; /* 在文本溢出处显示省略号 */
       }
       .message-body {
         font-size: 28rpx;
+        max-height: 3.2rem;
         color: #777777;
       }
     }

smart-app/src/pages/mine/components/mine-menu.vue

@@ -7,7 +7,7 @@
             <image class="icon" src="/static/images/mine/mine-account.png" mode=""></image>
           </template>
         </uni-list-item>
-        <uni-list-item title="消息通知" link="switchTab" showBadge badgeText="6" badgeType="error" to="/pages/message/message">
+        <uni-list-item title="消息通知" link="switchTab" showBadge :badgeText="messageCount" badgeType="error" to="/pages/message/message">
           <template #header>
             <image class="icon" src="/static/images/mine/mine-message.png" mode=""></image>
           </template>
@@ -67,8 +67,12 @@
 </template>
 <script setup>
   import { SmartToast } from '@/lib/smart-support';
+  import { useUserStore } from '@/store/modules/system/user';
+  import { computed } from 'vue';
 
   const emits = defineEmits(['changeStyle']);
+  const userStore = useUserStore();
+  const messageCount = computed(() => userStore.$state.unreadMessageCount);
 
   function changeStyle() {
     emits('changeStyle');