huangzhenbao/medical-mall
1
0
Fork 0
Code Issues Pull Requests Actions Packages Projects Releases Wiki Activity

feat(admin): complete integration of auth, delivery, and system infrastructure modules

Browse Source
This commit is contained in:
comlibmb
2026-02-18 23:30:39 +08:00
parent 7b27694690
commit 5d00e3d74e
37 changed files with 2830 additions and 1075 deletions
Download Patch File Download Diff File Expand all files Collapse all files

220
pages/mall/admin/statistic/index.uvue
View File

@@ -1,81 +1,177 @@
<template>
<view class="page-container">
<view class="page-header">
<text class="page-title">数据概览</text>
<text class="page-subtitle">Component: StatisticIndex</text>
</view>
<view class="page-content">
<view class="placeholder-card">
<text class="placeholder-title">页面占位</text>
<text class="placeholder-desc">该功能模块正在开发中</text>
<text class="placeholder-info">当前采用 CRMEB 路由体系 1:1 映射</text>
<view class="admin-statistic">
<!-- 核心指标卡片：累计数据 -->
<view class="stats-grid">
<view class="stat-card border-shadow" v-for="(item, key) in totalStats" :key="key">
<view class="stat-icon-box" :class="item.color">
<text class="stat-ic">{{ item.icon }}</text>
</view>
<view class="stat-info">
<text class="stat-val">{{ item.value }}</text>
<text class="stat-label">{{ item.label }}</text>
</view>
</view>
</view>
<!-- 今日实时数据 -->
<view class="section-title mt-24">
<text class="title-txt">今日实时</text>
<text class="sub-txt">更新时间：{{ currentTime }}</text>
</view>
<view class="stats-grid-mini">
<view class="stat-mini-card border-shadow" v-for="(item, key) in todayStats" :key="key">
<text class="sm-label">{{ item.label }}</text>
<text class="sm-val">{{ item.value }}</text>
</view>
</view>
<!-- 待办任务提醒 -->
<view class="section-title mt-24">
<text class="title-txt">待办提醒</text>
</view>
<view class="pending-grid">
<view class="pending-card border-shadow" v-for="(item, key) in pendingStats" :key="key">
<view class="p-left">
<text class="p-label">{{ item.label }}</text>
<text class="p-count">{{ item.value }}</text>
</view>
<view class="p-right">
<text class="p-link" @click="handlePending(key)">去处理 ></text>
</view>
</view>
</view>
<!-- 图表占位 -->
<view class="chart-section mt-24 border-shadow">
<view class="chart-header">
<text class="chart-title">销售趋势概览</text>
</view>
<view class="chart-body">
<text class="chart-placeholder-txt">趋势图表正在对接中...</text>
</view>
</view>
<view v-if="isLoading" class="global-loading">
<text class="loading-txt">数据聚合中...</text>
</view>
</view>
</template>
<script setup lang="uts">
import { ref } from 'vue'
import { ref, onMounted } from 'vue'
import supa from '@/components/supadb/aksupainstance.uts'
// TODO: 实现 数据概览 的具体功能
const loading = ref<boolean>(false)
const isLoading = ref(false)
const currentTime = ref('')
const totalStats = ref({
sales: { label: '总销售额', value: '0.00', icon: '💰', color: 'blue' },
orders: { label: '总订单数', value: '0', icon: '📦', color: 'orange' },
users: { label: '总用户数', value: '0', icon: '👥', color: 'green' },
products: { label: '总商品数', value: '0', icon: '🛒', color: 'pink' }
})
const todayStats = ref({
sales: { label: '今日成交额', value: '0.00' },
orders: { label: '今日订单数', value: '0' },
new_users: { label: '今日新增用户', value: '0' }
})
const pendingStats = ref({
delivery: { label: '待发货订单', value: '0' },
stock: { label: '库存预警商品', value: '0' },
extract: { label: '待审核提现', value: '0' }
})
onMounted(() => {
updateTime()
loadStats()
})
function updateTime() {
const now = new Date()
currentTime.value = `${now.getHours()}:${now.getMinutes().toString().padStart(2, '0')}`
}
async function loadStats() {
isLoading.value = true
try {
const { data, error } = await supa.rpc('rpc_admin_get_overall_stats', {} as any)
if (error == null && data != null) {
const res = data as UTSJSONObject
const totals = res.get('totals') as UTSJSONObject
const today = res.get('today') as UTSJSONObject
const pending = res.get('pending') as UTSJSONObject
totalStats.value.sales.value = (totals.getNumber('total_sales') ?? 0).toFixed(2)
totalStats.value.orders.value = (totals.getInt('total_orders') ?? 0).toString()
totalStats.value.users.value = (totals.getInt('total_users') ?? 0).toString()
totalStats.value.products.value = (totals.getInt('total_products') ?? 0).toString()
todayStats.value.sales.value = (today.getNumber('today_sales') ?? 0).toFixed(2)
todayStats.value.orders.value = (today.getInt('today_orders') ?? 0).toString()
todayStats.value.new_users.value = (today.getInt('today_new_users') ?? 0).toString()
pendingStats.value.delivery.value = (pending.getInt('pending_delivery') ?? 0).toString()
pendingStats.value.stock.value = (pending.getInt('stock_warning') ?? 0).toString()
pendingStats.value.extract.value = (pending.getInt('pending_extract') ?? 0).toString()
}
} catch (e) {
console.error('Failed to fetch stats', e)
} finally {
isLoading.value = false
}
}
function handlePending(type: string) {
uni.showToast({ title: '正在跳转: ' + type, icon: 'none' })
}
</script>
<style scoped lang="scss">
.page-container {
padding: 20px;
min-height: 100vh;
background: #f5f5f5;
}
.admin-statistic { padding: 24px; background-color: #f0f2f5; min-height: 100vh; }
.border-shadow { background-color: #fff; border-radius: 4px; box-shadow: 0 2px 12px 0 rgba(0, 0, 0, 0.05); }
.page-header {
margin-bottom: 20px;
}
.mt-24 { margin-top: 24px; }
.page-title {
display: block;
font-size: 24px;
font-weight: 600;
color: #333;
margin-bottom: 8px;
}
/* 核心指标卡片 */
.stats-grid { display: flex; flex-direction: row; gap: 20px; }
.stat-card { flex: 1; display: flex; flex-direction: row; align-items: center; padding: 24px; }
.stat-icon-box { width: 56px; height: 56px; border-radius: 28px; display: flex; align-items: center; justify-content: center; margin-right: 16px; }
.stat-icon-box.blue { background-color: #e6f7ff; color: #1890ff; }
.stat-icon-box.orange { background-color: #fff7e6; color: #ffa940; }
.stat-icon-box.green { background-color: #f6ffed; color: #52c41a; }
.stat-icon-box.pink { background-color: #fff0f6; color: #eb2f96; }
.stat-ic { font-size: 24px; }
.stat-info { display: flex; flex-direction: column; }
.stat-val { font-size: 24px; font-weight: bold; color: #303133; }
.stat-label { font-size: 13px; color: #909399; margin-top: 4px; }
.page-subtitle {
display: block;
font-size: 14px;
color: #999;
}
/* 标题 */
.section-title { display: flex; flex-direction: row; align-items: center; justify-content: space-between; margin-bottom: 16px; }
.title-txt { font-size: 16px; font-weight: bold; color: #333; position: relative; padding-left: 12px; }
.title-txt::before { content: ''; position: absolute; left: 0; top: 2px; width: 4px; height: 16px; background-color: #1890ff; border-radius: 2px; }
.sub-txt { font-size: 12px; color: #999; }
.page-content {
background: #fff;
border-radius: 4px;
padding: 24px;
}
/* 今日实时 */
.stats-grid-mini { display: flex; flex-direction: row; gap: 16px; }
.stat-mini-card { flex: 1; padding: 20px; display: flex; flex-direction: column; }
.sm-label { font-size: 13px; color: #666; margin-bottom: 8px; }
.sm-val { font-size: 20px; font-weight: bold; color: #1890ff; }
.placeholder-card {
text-align: center;
padding: 60px 20px;
}
/* 待办提醒 */
.pending-grid { display: flex; flex-direction: row; gap: 16px; }
.pending-card { flex: 1; padding: 20px; display: flex; flex-direction: row; justify-content: space-between; align-items: center; }
.p-label { font-size: 13px; color: #666; display: block; margin-bottom: 4px; }
.p-count { font-size: 22px; font-weight: bold; color: #f5222d; }
.p-link { font-size: 12px; color: #1890ff; cursor: pointer; }
.placeholder-title {
display: block;
font-size: 18px;
font-weight: 600;
color: #666;
margin-bottom: 12px;
}
/* 图表占位 */
.chart-section { padding: 24px; height: 350px; display: flex; flex-direction: column; }
.chart-title { font-size: 15px; font-weight: bold; color: #333; }
.chart-body { flex: 1; display: flex; align-items: center; justify-content: center; }
.chart-placeholder-txt { font-size: 14px; color: #ccc; }
.placeholder-desc {
display: block;
font-size: 14px;
color: #999;
margin-bottom: 8px;
}
.placeholder-info {
display: block;
font-size: 12px;
color: #1890ff;
}
.global-loading { position: fixed; top: 0; left: 0; right: 0; bottom: 0; background-color: rgba(255,255,255,0.6); z-index: 100; display: flex; align-items: center; justify-content: center; }
.loading-txt { font-size: 14px; color: #1890ff; }
</style>