77 lines
2.1 KiB
Vue
77 lines
2.1 KiB
Vue
<template>
|
|
<a-card title="我的消息">
|
|
<a-tabs v-model:activeKey="activeKey">
|
|
<a-tab-pane key="all" tab="全部"></a-tab-pane>
|
|
<a-tab-pane key="money" tab="资金消息" force-render></a-tab-pane>
|
|
<a-tab-pane key="secure" tab="安全消息"></a-tab-pane>
|
|
<a-tab-pane key="active" tab="活动消息"></a-tab-pane>
|
|
</a-tabs>
|
|
<a-table :columns="columns" :data-source="billData" :pagination="pagination" @change="handleTableChange"
|
|
:loading="loading" class="bill-table" :scroll="{ x: 1200 }" bordered>
|
|
</a-table>
|
|
</a-card>
|
|
</template>
|
|
<script lang="ts" setup>
|
|
import { ref,onBeforeMount } from 'vue';
|
|
import { getMessageList } from '@/apis/home';
|
|
const activeKey = ref('1');
|
|
const loading = ref(false);
|
|
const billData = ref([])
|
|
const columns = [
|
|
{
|
|
title: '消息类型',
|
|
dataIndex: 'messageType',
|
|
key: 'messageType',
|
|
width: 200,
|
|
},
|
|
{
|
|
title: '消息内容',
|
|
dataIndex: 'messageContent',
|
|
key: 'messageContent',
|
|
width: 400,
|
|
},
|
|
{
|
|
title: '发送时间',
|
|
dataIndex: 'sendTime',
|
|
key: 'sendTime',
|
|
width: 200,
|
|
},
|
|
{
|
|
title: '状态',
|
|
dataIndex: 'status',
|
|
key: 'status',
|
|
width: 100,
|
|
},
|
|
];
|
|
const messageType=ref("")
|
|
const pagination = ref({
|
|
current: 1,
|
|
pageSize: 10,
|
|
total: 0,
|
|
showSizeChanger: true,
|
|
showQuickJumper: true,
|
|
showTotal: (total: number) => `共 ${total} 条记录`
|
|
})
|
|
// 表格变化处理
|
|
const handleTableChange = () => {}
|
|
const getDataList=async()=>{
|
|
loading.value = true
|
|
try {
|
|
// 调用获取消息列表的接口
|
|
const response:any = await getMessageList({
|
|
page_num: pagination.value.current,
|
|
page_size: pagination.value.pageSize,
|
|
Message:messageType.value
|
|
});
|
|
billData.value = response.data; // 假设返回的数据在response.data.messages中
|
|
pagination.value.total = response.total; // 假设总记录数在response.data.total中
|
|
} catch (error) {
|
|
console.error('获取消息列表失败:', error);
|
|
} finally {
|
|
loading.value = false
|
|
}
|
|
}
|
|
onBeforeMount(() => {
|
|
getDataList()
|
|
})
|
|
</script> |