349 lines
9.2 KiB
Vue
349 lines
9.2 KiB
Vue
<template>
|
||
<view class="page" :style="{ paddingTop: navBarHeight }">
|
||
<CustomNavBar title="管理中心" show-back />
|
||
|
||
<!-- Stats summary card -->
|
||
<view class="stats-card-wrap">
|
||
<view class="stats-card">
|
||
<view v-if="statsLoading" class="stats-loading">
|
||
<view v-for="i in 3" :key="i" class="stat-skeleton" />
|
||
</view>
|
||
<template v-else>
|
||
<view class="stat-block">
|
||
<text class="stat-num">{{ stats.todayBookings }}</text>
|
||
<text class="stat-sub">今日预约</text>
|
||
</view>
|
||
<view class="stat-sep" />
|
||
<view class="stat-block">
|
||
<text class="stat-num">{{ stats.totalOrders }}</text>
|
||
<text class="stat-sub">总订单</text>
|
||
</view>
|
||
<view class="stat-sep" />
|
||
<view class="stat-block">
|
||
<text class="stat-num">{{ stats.totalBookings }}</text>
|
||
<text class="stat-sub">总预约</text>
|
||
</view>
|
||
</template>
|
||
</view>
|
||
</view>
|
||
|
||
<!-- Section header: 课程管理 -->
|
||
<view class="section-header">
|
||
<text class="section-title">课程管理</text>
|
||
</view>
|
||
|
||
<!-- List: schedule -->
|
||
<view class="list">
|
||
<view class="list-item" @tap="navigate('/pages/admin/schedule')">
|
||
<view class="item-left">
|
||
<view class="item-icon-wrap icon--schedule">
|
||
<text class="item-icon-text">◇</text>
|
||
</view>
|
||
<view class="item-text-group">
|
||
<text class="item-title">排课管理</text>
|
||
<text class="item-desc">管理每周课程时段</text>
|
||
</view>
|
||
</view>
|
||
<view class="item-arrow">
|
||
<text class="arrow-text">›</text>
|
||
</view>
|
||
</view>
|
||
|
||
<view class="list-item" @tap="navigate('/pages/admin/week-template')">
|
||
<view class="item-left">
|
||
<view class="item-icon-wrap icon--template">
|
||
<text class="item-icon-text">◈</text>
|
||
</view>
|
||
<view class="item-text-group">
|
||
<text class="item-title">排课模板</text>
|
||
<text class="item-desc">设置每周课程模板</text>
|
||
</view>
|
||
</view>
|
||
<view class="item-arrow">
|
||
<text class="arrow-text">›</text>
|
||
</view>
|
||
</view>
|
||
</view>
|
||
|
||
<!-- Section header: 会员与订单 -->
|
||
<view class="section-header">
|
||
<text class="section-title">会员与订单</text>
|
||
</view>
|
||
|
||
<!-- List: members & orders -->
|
||
<view class="list">
|
||
<view class="list-item" @tap="navigate('/pages/admin/members')">
|
||
<view class="item-left">
|
||
<view class="item-icon-wrap icon--members">
|
||
<text class="item-icon-text">◎</text>
|
||
</view>
|
||
<view class="item-text-group">
|
||
<text class="item-title">会员管理</text>
|
||
<text class="item-desc">查看所有会员信息</text>
|
||
</view>
|
||
</view>
|
||
<view class="item-arrow">
|
||
<text class="arrow-text">›</text>
|
||
</view>
|
||
</view>
|
||
|
||
<view class="list-item" @tap="navigate('/pages/admin/orders')">
|
||
<view class="item-left">
|
||
<view class="item-icon-wrap icon--orders">
|
||
<text class="item-icon-text">▣</text>
|
||
</view>
|
||
<view class="item-text-group">
|
||
<text class="item-title">订单管理</text>
|
||
<text class="item-desc">查看所有订单记录</text>
|
||
</view>
|
||
</view>
|
||
<view class="item-arrow">
|
||
<text class="arrow-text">›</text>
|
||
</view>
|
||
</view>
|
||
|
||
<view class="list-item" @tap="navigate('/pages/admin/card-types')">
|
||
<view class="item-left">
|
||
<view class="item-icon-wrap icon--card">
|
||
<text class="item-icon-text">▤</text>
|
||
</view>
|
||
<view class="item-text-group">
|
||
<text class="item-title">卡种管理</text>
|
||
<text class="item-desc">设置会员卡类型</text>
|
||
</view>
|
||
</view>
|
||
<view class="item-arrow">
|
||
<text class="arrow-text">›</text>
|
||
</view>
|
||
</view>
|
||
</view>
|
||
|
||
<!-- Section header: 系统 -->
|
||
<view class="section-header">
|
||
<text class="section-title">系统</text>
|
||
</view>
|
||
|
||
<!-- List: settings -->
|
||
<view class="list">
|
||
<view class="list-item" @tap="navigate('/pages/admin/studio')">
|
||
<view class="item-left">
|
||
<view class="item-icon-wrap icon--studio">
|
||
<text class="item-icon-text">◉</text>
|
||
</view>
|
||
<view class="item-text-group">
|
||
<text class="item-title">工作室设置</text>
|
||
<text class="item-desc">工作室信息与配置</text>
|
||
</view>
|
||
</view>
|
||
<view class="item-arrow">
|
||
<text class="arrow-text">›</text>
|
||
</view>
|
||
</view>
|
||
</view>
|
||
|
||
<view style="height: 40rpx" />
|
||
</view>
|
||
</template>
|
||
|
||
<script setup lang="ts">
|
||
import { ref, onMounted } from 'vue'
|
||
import CustomNavBar from '../../components/CustomNavBar.vue'
|
||
import { getSystemLayout } from '../../utils/system'
|
||
import { useAdminStore } from '../../stores/admin'
|
||
import type { AdminStats } from '../../stores/admin'
|
||
|
||
const navBarHeight = ref('64px')
|
||
|
||
const adminStore = useAdminStore()
|
||
|
||
const statsLoading = ref(false)
|
||
const stats = ref<AdminStats>({ todayBookings: 0, totalOrders: 0, totalBookings: 0 })
|
||
|
||
function navigate(path: string) {
|
||
uni.navigateTo({ url: path })
|
||
}
|
||
|
||
async function loadStats() {
|
||
statsLoading.value = true
|
||
try {
|
||
stats.value = await adminStore.fetchDashboardStats()
|
||
} catch {
|
||
// fail silently — stats are non-critical
|
||
} finally {
|
||
statsLoading.value = false
|
||
}
|
||
}
|
||
|
||
onMounted(() => {
|
||
navBarHeight.value = `${getSystemLayout().navBarHeight}px`
|
||
loadStats()
|
||
})
|
||
</script>
|
||
|
||
<style lang="scss" scoped>
|
||
/* ── Page ───────────────────────────────────── */
|
||
.page {
|
||
min-height: 100vh;
|
||
padding-bottom: 40rpx;
|
||
}
|
||
|
||
/* ── Stats card ─────────────────────────────── */
|
||
.stats-card-wrap {
|
||
padding: 24rpx 24rpx 8rpx;
|
||
}
|
||
|
||
.stats-card {
|
||
background: #FFFFFF;
|
||
border-radius: 20rpx;
|
||
padding: 32rpx 24rpx;
|
||
display: flex;
|
||
align-items: center;
|
||
box-shadow: 0 4rpx 20rpx rgba(180, 160, 130, 0.10);
|
||
border: 1rpx solid rgba(180, 160, 130, 0.12);
|
||
}
|
||
|
||
.stats-loading {
|
||
width: 100%;
|
||
display: flex;
|
||
align-items: center;
|
||
justify-content: space-around;
|
||
}
|
||
|
||
.stat-skeleton {
|
||
width: 100rpx;
|
||
height: 64rpx;
|
||
border-radius: 12rpx;
|
||
background: linear-gradient(90deg, $primary-border 25%, $primary-light 50%, $primary-border 75%);
|
||
background-size: 400% 100%;
|
||
animation: shimmer 1.6s ease infinite;
|
||
}
|
||
|
||
.stat-block {
|
||
flex: 1;
|
||
display: flex;
|
||
flex-direction: column;
|
||
align-items: center;
|
||
gap: 8rpx;
|
||
}
|
||
|
||
.stat-num {
|
||
font-size: 44rpx;
|
||
font-weight: 700;
|
||
color: #4A4035;
|
||
line-height: 1;
|
||
font-family: 'DIN Alternate', 'Helvetica Neue', Arial, sans-serif;
|
||
}
|
||
|
||
.stat-sub {
|
||
font-size: 22rpx;
|
||
color: #A09080;
|
||
letter-spacing: 0.5rpx;
|
||
}
|
||
|
||
.stat-sep {
|
||
width: 1rpx;
|
||
height: 56rpx;
|
||
background: rgba(180, 160, 130, 0.2);
|
||
}
|
||
|
||
/* ── Section header ─────────────────────────── */
|
||
.section-header {
|
||
padding: 32rpx 24rpx 12rpx;
|
||
}
|
||
|
||
.section-title {
|
||
font-size: 22rpx;
|
||
font-weight: 600;
|
||
color: #A09080;
|
||
letter-spacing: 2rpx;
|
||
text-transform: uppercase;
|
||
}
|
||
|
||
/* ── List ───────────────────────────────────── */
|
||
.list {
|
||
background: #FFFFFF;
|
||
margin: 0 24rpx;
|
||
border-radius: 20rpx;
|
||
overflow: hidden;
|
||
box-shadow: 0 4rpx 20rpx rgba(180, 160, 130, 0.08);
|
||
border: 1rpx solid rgba(180, 160, 130, 0.1);
|
||
}
|
||
|
||
.list-item {
|
||
display: flex;
|
||
align-items: center;
|
||
justify-content: space-between;
|
||
padding: 28rpx 24rpx;
|
||
border-bottom: 1rpx solid rgba(180, 160, 130, 0.1);
|
||
transition: background 0.15s ease;
|
||
|
||
&:last-child {
|
||
border-bottom: none;
|
||
}
|
||
|
||
&:active {
|
||
background: rgba(180, 160, 130, 0.05);
|
||
}
|
||
}
|
||
|
||
.item-left {
|
||
display: flex;
|
||
align-items: center;
|
||
gap: 20rpx;
|
||
}
|
||
|
||
.item-icon-wrap {
|
||
width: 72rpx;
|
||
height: 72rpx;
|
||
border-radius: 18rpx;
|
||
display: flex;
|
||
align-items: center;
|
||
justify-content: center;
|
||
flex-shrink: 0;
|
||
}
|
||
|
||
.item-icon-text {
|
||
font-size: 32rpx;
|
||
color: #FFFFFF;
|
||
line-height: 1;
|
||
}
|
||
|
||
/* Icon variants — warm muted tones */
|
||
.icon--schedule { background: linear-gradient(135deg, #8B9E7E, #7A8E6E); }
|
||
.icon--template { background: linear-gradient(135deg, #A090C0, #9080B0); }
|
||
.icon--members { background: linear-gradient(135deg, $primary-color, $primary-dark); }
|
||
.icon--orders { background: linear-gradient(135deg, #7E9EC4, #6E8EB4); }
|
||
.icon--card { background: linear-gradient(135deg, #C48E7E, #B47E6E); }
|
||
.icon--studio { background: linear-gradient(135deg, #9E9E7E, #8E8E6E); }
|
||
|
||
.item-text-group {
|
||
display: flex;
|
||
flex-direction: column;
|
||
gap: 4rpx;
|
||
}
|
||
|
||
.item-title {
|
||
font-size: 30rpx;
|
||
font-weight: 600;
|
||
color: #4A4035;
|
||
letter-spacing: 0.5rpx;
|
||
}
|
||
|
||
.item-desc {
|
||
font-size: 24rpx;
|
||
color: #A09080;
|
||
}
|
||
|
||
.item-arrow {
|
||
flex-shrink: 0;
|
||
padding-left: 16rpx;
|
||
}
|
||
|
||
.arrow-text {
|
||
font-size: 40rpx;
|
||
color: rgba(180, 160, 130, 0.5);
|
||
font-weight: 300;
|
||
line-height: 1;
|
||
}
|
||
</style>
|