97 lines
2.5 KiB
Vue
97 lines
2.5 KiB
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";
|
|
|
|
const tabs = [
|
|
{
|
|
name: '任务消息',
|
|
},
|
|
{
|
|
name: '平台消息',
|
|
},
|
|
];
|
|
|
|
const po = reactive({
|
|
type: 1,
|
|
is_read: 99,
|
|
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>
|
|
<!--消息中心-->
|
|
<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="() => {
|
|
console.log('进来了???')
|
|
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>
|