Initial commit of akmon project
This commit is contained in:
143
pages/admins/sports/index.uvue
Normal file
143
pages/admins/sports/index.uvue
Normal file
@@ -0,0 +1,143 @@
|
||||
<template>
|
||||
<view class="sports-admin-page">
|
||||
<admin-layout>
|
||||
<view class="container">
|
||||
<view class="page-header">
|
||||
<text class="page-title">运动管理</text>
|
||||
</view>
|
||||
|
||||
<!-- Tabs -->
|
||||
<view class="swiper-tabs">
|
||||
<scroll-view direction="horizontal" :show-scrollbar="false">
|
||||
<view class="flex-row">
|
||||
<text v-for="(tab, idx) in tabList" :key="tab.key" class="swiper-tabs-item"
|
||||
:class="swiperIndex == idx ? 'swiper-tabs-item-active' : ''" @click="onTabClick(idx)">
|
||||
{{ tab.name }}
|
||||
</text>
|
||||
</view>
|
||||
</scroll-view>
|
||||
<view class="swiper-tabs-indicator" :style="indicatorStyle ?? {}"></view>
|
||||
</view>
|
||||
|
||||
<!-- Swiper Content -->
|
||||
<swiper class="swiper-view" :current="swiperIndex" @change="onSwiperChange">
|
||||
<swiper-item class="swiper-item">
|
||||
<sports-stats />
|
||||
</swiper-item>
|
||||
<swiper-item class="swiper-item">
|
||||
<sports-notifications />
|
||||
</swiper-item>
|
||||
</swiper>
|
||||
</view>
|
||||
</admin-layout>
|
||||
</view>
|
||||
</template>
|
||||
|
||||
<script lang="uts">
|
||||
import { ref, computed } from 'vue'
|
||||
import SportsStats from './stats.uvue'
|
||||
import SportsNotifications from './notifications.uvue'
|
||||
|
||||
export default {
|
||||
components: {
|
||||
SportsStats,
|
||||
SportsNotifications
|
||||
},
|
||||
setup() {
|
||||
const swiperIndex = ref(0)
|
||||
const tabList = [
|
||||
{ key: 'stats', name: '运动统计' },
|
||||
{ key: 'notifications', name: '通知管理' }
|
||||
]
|
||||
|
||||
const indicatorStyle = computed(() => {
|
||||
const tabWidth = 100 / tabList.length
|
||||
const left = swiperIndex.value * tabWidth
|
||||
return {
|
||||
width: `${tabWidth}%`,
|
||||
left: `${left}%`
|
||||
}
|
||||
})
|
||||
|
||||
const onTabClick = (index: number) => {
|
||||
swiperIndex.value = index
|
||||
}
|
||||
|
||||
const onSwiperChange = (e: any) => {
|
||||
swiperIndex.value = e.detail.current
|
||||
}
|
||||
|
||||
return {
|
||||
swiperIndex,
|
||||
tabList,
|
||||
indicatorStyle,
|
||||
onTabClick,
|
||||
onSwiperChange
|
||||
}
|
||||
}
|
||||
}
|
||||
</script>
|
||||
|
||||
<style>
|
||||
.sports-admin-page {
|
||||
background-color: #f5f5f5;
|
||||
min-height: 100vh;
|
||||
}
|
||||
|
||||
.container {
|
||||
padding: 20px;
|
||||
background-color: #ffffff;
|
||||
border-radius: 8px;
|
||||
box-shadow: 0 2px 8px rgba(0, 0, 0, 0.1);
|
||||
margin: 16px;
|
||||
}
|
||||
|
||||
.page-header {
|
||||
display: flex;
|
||||
justify-content: space-between;
|
||||
align-items: center;
|
||||
margin-bottom: 20px;
|
||||
}
|
||||
|
||||
.page-title {
|
||||
font-size: 24px;
|
||||
font-weight: bold;
|
||||
color: #333;
|
||||
}
|
||||
|
||||
.swiper-tabs {
|
||||
position: relative;
|
||||
background-color: #FFF;
|
||||
border-bottom: 1px solid #ddd;
|
||||
margin-bottom: 16px;
|
||||
}
|
||||
|
||||
.swiper-tabs-item {
|
||||
padding: 10px 20px;
|
||||
font-size: 16px;
|
||||
color: #555;
|
||||
cursor: pointer;
|
||||
text-align: center;
|
||||
}
|
||||
|
||||
.swiper-tabs-item-active {
|
||||
color: #007aff;
|
||||
font-weight: bold;
|
||||
}
|
||||
|
||||
.swiper-tabs-indicator {
|
||||
position: absolute;
|
||||
bottom: 0;
|
||||
height: 3px;
|
||||
background-color: #007aff;
|
||||
transition: left 0.2s ease-in-out;
|
||||
}
|
||||
|
||||
.swiper-view {
|
||||
height: 600px; /* Adjust based on content */
|
||||
}
|
||||
|
||||
.swiper-item {
|
||||
overflow-y: auto;
|
||||
}
|
||||
</style>
|
||||
161
pages/admins/sports/notifications.uvue
Normal file
161
pages/admins/sports/notifications.uvue
Normal file
@@ -0,0 +1,161 @@
|
||||
<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>
|
||||
155
pages/admins/sports/stats.uvue
Normal file
155
pages/admins/sports/stats.uvue
Normal file
@@ -0,0 +1,155 @@
|
||||
<template>
|
||||
<view class="sports-stats-page">
|
||||
<view class="stats-controls">
|
||||
<picker mode="date" :value="selectedDate" @change="onDateChange">
|
||||
<view class="picker">
|
||||
当前选择: {{ selectedDate }}
|
||||
</view>
|
||||
</picker>
|
||||
<button @click="fetchStats">查询</button>
|
||||
</view>
|
||||
|
||||
<view v-if="loading" class="loading-container">加载中...</view>
|
||||
<view v-else-if="error" class="error-container">{{ error }}</view>
|
||||
<view v-else class="stats-container">
|
||||
<view class="stat-card">
|
||||
<text class="stat-title">总步数</text>
|
||||
<text class="stat-value">{{ summary.total_steps ?? 0 }}</text>
|
||||
</view>
|
||||
<view class="stat-card">
|
||||
<text class="stat-title">总距离 (米)</text>
|
||||
<text class="stat-value">{{ summary.total_distance?.toFixed(2) ?? 0 }}</text>
|
||||
</view>
|
||||
<view class="stat-card">
|
||||
<text class="stat-title">平均心率</text>
|
||||
<text class="stat-value">{{ summary.avg_heart_rate?.toFixed(1) ?? 0 }}</text>
|
||||
</view>
|
||||
<view class="stat-card">
|
||||
<text class="stat-title">活跃用户</text>
|
||||
<text class="stat-value">{{ summary.active_users ?? 0 }}</text>
|
||||
</view>
|
||||
</view>
|
||||
|
||||
<!-- Add charts here later -->
|
||||
<view class="chart-container">
|
||||
<text>图表区域</text>
|
||||
</view>
|
||||
</view>
|
||||
</template>
|
||||
|
||||
<script lang="uts">
|
||||
import { ref, reactive, onMounted } from 'vue'
|
||||
import supa from '@/components/supadb/aksupainstance.uts'
|
||||
|
||||
type SportsSummary = {
|
||||
total_steps: number
|
||||
total_distance: number
|
||||
avg_heart_rate: number
|
||||
active_users: number
|
||||
}
|
||||
|
||||
export default {
|
||||
setup() {
|
||||
const selectedDate = ref(new Date().toISOString().slice(0, 10))
|
||||
const loading = ref(false)
|
||||
const error = ref<string | null>(null)
|
||||
const summary = reactive < SportsSummary > ({
|
||||
total_steps: 0,
|
||||
total_distance: 0,
|
||||
avg_heart_rate: 0,
|
||||
active_users: 0
|
||||
})
|
||||
|
||||
const onDateChange = (e: any) => {
|
||||
selectedDate.value = e.detail.value
|
||||
}
|
||||
|
||||
const fetchStats = async () => {
|
||||
loading.value = true
|
||||
error.value = null
|
||||
|
||||
const date = selectedDate.value
|
||||
const result = await supa.rpc('get_daily_sports_stats', { query_date: date })
|
||||
|
||||
if (result.error) {
|
||||
error.value = `获取统计数据失败: ${result.error.message}`
|
||||
console.error(result.error)
|
||||
} else if (result.data) {
|
||||
const stats = result.data[0]
|
||||
summary.total_steps = stats.total_steps
|
||||
summary.total_distance = stats.total_distance
|
||||
summary.avg_heart_rate = stats.avg_heart_rate
|
||||
summary.active_users = stats.active_users
|
||||
}
|
||||
|
||||
loading.value = false
|
||||
}
|
||||
|
||||
onMounted(() => {
|
||||
fetchStats()
|
||||
})
|
||||
|
||||
return {
|
||||
selectedDate,
|
||||
loading,
|
||||
error,
|
||||
summary,
|
||||
onDateChange,
|
||||
fetchStats
|
||||
}
|
||||
}
|
||||
}
|
||||
</script>
|
||||
|
||||
<style>
|
||||
.sports-stats-page {
|
||||
padding: 15px;
|
||||
}
|
||||
|
||||
.stats-controls {
|
||||
display: flex;
|
||||
gap: 15px;
|
||||
margin-bottom: 20px;
|
||||
align-items: center;
|
||||
}
|
||||
|
||||
.stats-controls .picker {
|
||||
border: 1px solid #ccc;
|
||||
padding: 8px 12px;
|
||||
border-radius: 5px;
|
||||
}
|
||||
|
||||
.stats-container {
|
||||
display: grid;
|
||||
grid-template-columns: repeat(auto-fit, minmax(150px, 1fr));
|
||||
gap: 15px;
|
||||
}
|
||||
|
||||
.stat-card {
|
||||
background-color: #fff;
|
||||
padding: 20px;
|
||||
border-radius: 8px;
|
||||
box-shadow: 0 2px 4px rgba(0,0,0,0.05);
|
||||
text-align: center;
|
||||
}
|
||||
|
||||
.stat-title {
|
||||
font-size: 14px;
|
||||
color: #666;
|
||||
display: block;
|
||||
margin-bottom: 10px;
|
||||
}
|
||||
|
||||
.stat-value {
|
||||
font-size: 24px;
|
||||
font-weight: bold;
|
||||
color: #333;
|
||||
}
|
||||
|
||||
.chart-container {
|
||||
margin-top: 30px;
|
||||
padding: 20px;
|
||||
background-color: #fff;
|
||||
border-radius: 8px;
|
||||
}
|
||||
</style>
|
||||
Reference in New Issue
Block a user