56 lines
1.8 KiB
Vue
56 lines
1.8 KiB
Vue
<script setup lang="ts">
|
|
import { ElMessage } from 'element-plus'
|
|
import { onMounted, ref } from 'vue'
|
|
|
|
import { fetchNotifications, markNotificationRead, type NotificationItem } from '@/api/notifications'
|
|
import { formatDateTime } from '@/utils/time'
|
|
|
|
const loading = ref(false)
|
|
const notifications = ref<NotificationItem[]>([])
|
|
|
|
onMounted(loadNotifications)
|
|
|
|
async function loadNotifications() {
|
|
loading.value = true
|
|
try {
|
|
notifications.value = await fetchNotifications()
|
|
} finally {
|
|
loading.value = false
|
|
}
|
|
}
|
|
|
|
async function markRead(id: number) {
|
|
await markNotificationRead(id)
|
|
ElMessage.success('已标记为已读')
|
|
await loadNotifications()
|
|
}
|
|
</script>
|
|
|
|
<template>
|
|
<section class="page">
|
|
<div class="page-header">
|
|
<p class="eyebrow">Notifications</p>
|
|
<h1>站内信</h1>
|
|
<p>接收审核、交接、归还、申诉和仲裁结果通知。</p>
|
|
</div>
|
|
|
|
<el-empty v-if="!loading && notifications.length === 0" description="暂无站内信" />
|
|
<div v-else v-loading="loading" class="notification-list">
|
|
<div v-for="item in notifications" :key="item.id" class="notification-item" :class="{ unread: !item.read_at }">
|
|
<div>
|
|
<span>{{ item.type }}</span>
|
|
<h2>{{ item.title }}</h2>
|
|
<p>{{ item.content }}</p>
|
|
<small>{{ formatDateTime(item.created_at) }}</small>
|
|
</div>
|
|
<div class="notification-actions">
|
|
<RouterLink v-if="item.biz_type === 'order' && item.biz_id" :to="`/orders/${item.biz_id}`">
|
|
<el-button size="small">查看订单</el-button>
|
|
</RouterLink>
|
|
<el-button v-if="!item.read_at" size="small" type="primary" @click="markRead(item.id)">已读</el-button>
|
|
</div>
|
|
</div>
|
|
</div>
|
|
</section>
|
|
</template>
|