update

src/pages/messageCenter/index.vue

@@ -1,11 +1,12 @@
 <script setup>
 import XNav from "../../components/XNav.vue";
-import {ref} from "vue";
+import {reactive} from "vue";
 import XInput from "../../components/XInput.vue";
 import XLink from "../../components/XLink.vue";
 import MessageCard from "../../components/MessageCard.vue";
+import useTableQuery from "../../hooks/useTableQuery.js";
+import Api from "../../api/index.js";
 
-const currentTab = ref(0);
 const tabs = [
     {
         name: '任务消息',
@@ -14,6 +15,29 @@ const tabs = [
         name: '平台消息',
     },
 ];
+
+const po = reactive({
+    type: 1,
+    keyword: null,
+});
+const vo = reactive({
+    rows: [],
+    page: 0,
+    total: 0,
+});
+
+const {loading, pagination, initFetchData} = useTableQuery({
+    api: Api.system.getMessageCenter,
+    parameter: po,
+    callback: (data) => {
+        Object.assign(vo, data);
+    }
+});
+
+const changeTab = ({index}) => {
+    po.type = index;
+    initFetchData();
+}
 </script>
 
 <template>
@@ -21,31 +45,43 @@ const tabs = [
     <XNav :show-back="false"></XNav>
 
     <view class="w-full bg-[#fff]">
-        <tui-tabs :tabs="tabs" :currentTab="currentTab" @change="({index}) => currentTab=index" height="90"></tui-tabs>
+        <tui-tabs :tabs="tabs" :currentTab="po.type" @change="changeTab" height="90"></tui-tabs>
 
         <view class="!pt-[24rpx] !pb-[28rpx] !px-[32rpx] !flex gap-[32rpx] items-center">
             <view class="flex-grow">
-                <x-input height="72rpx" placeholder="请输入要查询的内容">
+                <x-input v-model:model-value="po.keyword" height="72rpx" placeholder="请输入要查询的内容">
                     <template #prefix>
                         <tui-icon name="search" size="18" class="!mr-[12rpx]"></tui-icon>
                     </template>
                 </x-input>
             </view>
 
-            <x-link>搜索</x-link>
+            <x-link @click="initFetchData">搜索</x-link>
         </view>
     </view>
 
-    <view class="!px-[20rpx] !py-[16rpx]">
-        <radio>只看未读</radio>
+    <view class="!px-[20rpx] !py-[16rpx] box-border !h-[80rpx] !flex items-center">
+        <checkbox>只看未读</checkbox>
     </view>
 
-    <view class="!flex flex-col !px-[20rpx]">
-        <MessageCard
-            :context-row="currentTab === 0 ? 'ellipsis-1': 'ellipsis-2'"
-            v-for="item in 100">
-        </MessageCard>
-    </view>
+    <scroll-view
+        @refresherpulling="initFetchData()"
+        @scrolltolower="() => {
+            console.log('进来了???')
+            pagination.page++;
+        }"
+        class="h-[calc(100vh-500rpx)]"
+        scroll-y>
+        <view class="!flex flex-col !px-[20rpx]">
+            <MessageCard
+                :context-row="po.type === 0 ? 'ellipsis-1': 'ellipsis-2'"
+                :type="po.type"
+                :data="item"
+                :key="item.id"
+                v-for="item in vo.rows">
+            </MessageCard>
+        </view>
+    </scroll-view>
 </template>
 
 <style scoped>