161 lines
3.7 KiB
Plaintext
161 lines
3.7 KiB
Plaintext
<template>
|
|
<view class="notifications-page">
|
|
<view class="notification-form">
|
|
<textarea class="textarea" :value="notificationMessage" @input="notificationMessage = $event.detail.value" placeholder="输入通知内容..."></textarea>
|
|
<button class="send-button" @click="sendNotification">发送通知</button>
|
|
</view>
|
|
|
|
<view class="history-section">
|
|
<text class="history-title">发送历史</text>
|
|
<scroll-view class="history-list" direction="vertical">
|
|
<view v-if="loading" class="loading-container">加载中...</view>
|
|
<view v-else-if="error" class="error-container">{{ error }}</view>
|
|
<view v-else-if="history.length === 0" class="empty-data">
|
|
<text>暂无历史记录</text>
|
|
</view>
|
|
<view v-else v-for="item in history" :key="item.id" class="history-item">
|
|
<text class="history-message">{{ item.message }}</text>
|
|
<text class="history-date">{{ new Date(item.created_at).toLocaleString() }}</text>
|
|
</view>
|
|
</scroll-view>
|
|
</view>
|
|
</view>
|
|
</template>
|
|
|
|
<script lang="uts">
|
|
import { ref, onMounted } from 'vue'
|
|
import supa from '@/components/supadb/aksupainstance.uts'
|
|
|
|
type NotificationHistory = {
|
|
id: number
|
|
message: string
|
|
created_at: string
|
|
}
|
|
|
|
export default {
|
|
setup() {
|
|
const notificationMessage = ref('')
|
|
const history = ref<NotificationHistory[]>([])
|
|
const loading = ref(false)
|
|
const error = ref<string | null>(null)
|
|
|
|
const fetchHistory = async () => {
|
|
loading.value = true
|
|
error.value = null
|
|
const result = await supa.from('ak_sports_notifications').select('*').order('created_at', { ascending: false }).limit(50).execute()
|
|
|
|
if (result.error) {
|
|
error.value = `加载历史记录失败: ${result.error.message}`
|
|
} else {
|
|
history.value = result.data as NotificationHistory[]
|
|
}
|
|
loading.value = false
|
|
}
|
|
|
|
const sendNotification = async () => {
|
|
if (notificationMessage.value.trim() === '') {
|
|
uni.showToast({ title: '通知内容不能为空', icon: 'none' })
|
|
return
|
|
}
|
|
|
|
// In a real app, this would trigger a push notification service.
|
|
// Here, we just save it to the database as a record.
|
|
const insertResult = await supa.from('ak_sports_notifications').insert({ message: notificationMessage.value }).execute()
|
|
|
|
if (insertResult.error) {
|
|
uni.showToast({ title: `发送失败: ${insertResult.error.message}`, icon: 'none' })
|
|
} else {
|
|
uni.showToast({ title: '通知已记录', icon: 'success' })
|
|
notificationMessage.value = ''
|
|
fetchHistory() // Refresh history
|
|
}
|
|
}
|
|
|
|
onMounted(() => {
|
|
fetchHistory()
|
|
})
|
|
|
|
return {
|
|
notificationMessage,
|
|
history,
|
|
loading,
|
|
error,
|
|
sendNotification
|
|
}
|
|
}
|
|
}
|
|
</script>
|
|
|
|
<style>
|
|
.notifications-page {
|
|
padding: 15px;
|
|
}
|
|
|
|
.notification-form {
|
|
margin-bottom: 25px;
|
|
}
|
|
|
|
.textarea {
|
|
width: 100%;
|
|
height: 100px;
|
|
border: 1px solid #ccc;
|
|
border-radius: 5px;
|
|
padding: 10px;
|
|
margin-bottom: 10px;
|
|
box-sizing: border-box;
|
|
}
|
|
|
|
.send-button {
|
|
background-color: #007aff;
|
|
color: white;
|
|
border: none;
|
|
padding: 12px 15px;
|
|
border-radius: 5px;
|
|
width: 100%;
|
|
}
|
|
|
|
.history-section {
|
|
margin-top: 20px;
|
|
}
|
|
|
|
.history-title {
|
|
font-size: 18px;
|
|
font-weight: bold;
|
|
margin-bottom: 10px;
|
|
display: block;
|
|
}
|
|
|
|
.history-list {
|
|
max-height: 400px;
|
|
border: 1px solid #eee;
|
|
border-radius: 5px;
|
|
}
|
|
|
|
.empty-data, .loading-container, .error-container {
|
|
text-align: center;
|
|
padding: 40px;
|
|
color: #888;
|
|
}
|
|
|
|
.history-item {
|
|
padding: 15px;
|
|
border-bottom: 1px solid #f0f0f0;
|
|
}
|
|
|
|
.history-item:last-child {
|
|
border-bottom: none;
|
|
}
|
|
|
|
.history-message {
|
|
display: block;
|
|
color: #333;
|
|
font-size: 16px;
|
|
}
|
|
|
|
.history-date {
|
|
display: block;
|
|
color: #999;
|
|
font-size: 12px;
|
|
margin-top: 5px;
|
|
}
|
|
</style> |