xl-mobile/src/pages/messageCenter/index.vue

<script setup>
import XNav from "../../components/XNav.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";
import {useSystemStore} from "../../pinia/SystemStore/index.js";

const SystemStore = useSystemStore();
const tabs = [
    {
        name: '任务消息',
        num: SystemStore.messageCount.one,
    },
    {
        name: '平台消息',
        num: SystemStore.messageCount.two,
    },
];

const po = reactive({
    type: 0,
    is_read: 99,
    keyword: null,
});
const vo = reactive({
    rows: [],
    page: 0,
    total: 0,
});

const {loading, pagination, initFetchData} = useTableQuery({
    api: Api.system.getMessageCenter,
    uuid: true,
    parameter: po,
    callback: (data) => {
        Object.assign(vo, data);
    }
});

const changeTab = ({index}) => {
    po.type = index;
    initFetchData();
}
</script>

<template>
    <!--消息中心-->
    <XNav :show-back="false"></XNav>

    <view class="w-full bg-[#fff]">
        <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 v-model:model-value="po.keyword" height="72rpx"
                         :placeholder="`请输入要查询的${po.type===0?'任务编号':'标题'}`">
                    <template #prefix>
                        <tui-icon name="search" size="18" class="!mr-[12rpx]"></tui-icon>
                    </template>
                </x-input>
            </view>

            <x-link @click="initFetchData">搜索</x-link>
        </view>
    </view>

    <view class="!px-[20rpx] !py-[16rpx] box-border !h-[80rpx] !flex items-center">
        <checkbox @click="() => {
            po.is_read = po.is_read === 0 ? 99 : 0;
            initFetchData();
        }">只看未读
        </checkbox>
    </view>

    <scroll-view
        @refresherpulling="initFetchData()"
        @scrolltolower="() => {
            pagination.page++;
        }"
        class="h-[calc(100vh-500rpx)]"
        scroll-y>
        <view class="!flex flex-col !px-[20rpx]">
            <MessageCard
                @success="initFetchData"
                :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>

</style>