richard/mp-pilates
1
0
Fork 0
Code Issues Pull Requests Actions Packages Projects Releases Wiki Activity

perf: 优化订阅刷新逻辑

Browse Source
This commit is contained in:
richarjiang
2026-09-07 14:06:19 +08:00
parent 88cd8419c8
commit f5c7b7eaac
27 changed files with 3248 additions and 1060 deletions
Download Patch File Download Diff File Expand all files Collapse all files

680
packages/app/src/pages/admin/member-detail.vue Normal file
View File

@@ -0,0 +1,680 @@
<template>
<view class="page" :style="{ paddingTop: navBarHeight }">
<CustomNavBar title="会员档案" show-back />
<view v-if="loading && !detail" class="skeleton-wrap">
<view class="skeleton-hero" />
<view class="skeleton-block" />
<view class="skeleton-block" />
</view>
<template v-else-if="detail">
<view class="hero">
<view class="hero-grain" />
<view class="hero-inner">
<view class="hero-avatar">
<image v-if="detail.user.avatarUrl" class="avatar-img" :src="detail.user.avatarUrl" mode="aspectFill" />
<view v-else class="avatar-fallback">
<text class="avatar-letter">{{ (detail.user.nickname || '?').slice(0, 1) }}</text>
</view>
</view>
<view class="hero-copy">
<text class="hero-kicker">STUDIO LEDGER</text>
<text class="hero-name">{{ detail.user.nickname || '未知用户' }}</text>
<text class="hero-phone">{{ detail.user.phone || '未绑定手机' }}</text>
<text class="hero-openid" @tap="copyOpenid">{{ detail.user.openid }}</text>
</view>
</view>
<view class="time-pair">
<view class="time-cell">
<text class="time-label">注册时间</text>
<text class="time-value">{{ formatDateTimeFull(detail.user.createdAt) }}</text>
</view>
<view class="time-rule" />
<view class="time-cell">
<text class="time-label">最近登录</text>
<text class="time-value">{{ detail.user.lastLoginAt ? formatDateTimeFull(detail.user.lastLoginAt) : '暂无登录记录' }}</text>
</view>
</view>
</view>
<view class="section">
<text class="section-label">上课情况</text>
<view class="stats-strip">
<view class="stat">
<text class="stat-num">{{ detail.stats.totalBookings }}</text>
<text class="stat-name">累计预约</text>
</view>
<view class="stat">
<text class="stat-num">{{ detail.stats.completedBookings }}</text>
<text class="stat-name">已完成</text>
</view>
<view class="stat">
<text class="stat-num">{{ detail.stats.cancelledBookings }}</text>
<text class="stat-name">已取消</text>
</view>
</view>
<text class="noshow-hint">未到 {{ detail.stats.noShowBookings }} 次</text>
</view>
<view class="section">
<text class="section-label">会员卡</text>
<view v-if="detail.memberships.length" class="card-list">
<view
v-for="card in detail.memberships"
:key="card.id"
class="mship"
>
<view class="mship-strip" :class="getCardGradientClass(card.cardType.type)" />
<view class="mship-head">
<view class="mship-titles">
<text class="mship-name">{{ card.cardType.name }}</text>
<text class="mship-type">{{ getCardTypeLabel(card.cardType.type) }}</text>
</view>
<view class="mship-status" :class="'mship-status--' + card.status.toLowerCase()">
<text class="mship-status-text">{{ membershipStatusLabel(card.status) }}</text>
</view>
</view>
<view v-if="card.remainingTimes !== null" class="mship-times">
<text class="mship-times-num">{{ card.remainingTimes }}</text>
<text class="mship-times-unit">次剩余</text>
</view>
<view v-if="card.remainingTimes !== null && getMembershipTotalTimes(card)" class="progress">
<view class="progress-bar">
<view class="progress-fill" :style="{ width: getMembershipProgressWidth(card) }" />
</view>
<text class="progress-text">
已用 {{ getMembershipUsedTimes(card) }} / {{ getMembershipTotalTimes(card) }}
</text>
</view>
<view class="mship-dates">
<text>{{ formatDate(card.startDate) }} 起</text>
<text>{{ formatDate(card.expireDate) }} 止</text>
</view>
</view>
</view>
<view v-else class="empty-card">
<text class="empty-card-title">尚未开卡</text>
<text class="empty-card-sub">开通体验卡、次卡或月卡后即可安排课程</text>
<view class="empty-card-btn" @tap="goEdit">
<text class="empty-card-btn-text">去开卡</text>
</view>
</view>
</view>
<view class="section section--last">
<text class="section-label">即将上课</text>
<view v-if="detail.upcomingBookings.length" class="upcoming-list">
<view v-for="item in detail.upcomingBookings" :key="item.id" class="upcoming-row">
<view class="upcoming-time">
<text class="upcoming-date">{{ item.date.slice(5) }}</text>
<text class="upcoming-hour">{{ item.startTime.slice(0, 5) }}–{{ item.endTime.slice(0, 5) }}</text>
</view>
<view class="upcoming-meta">
<text class="upcoming-card">{{ item.cardName }}</text>
<text class="upcoming-status">{{ bookingStatusLabel(item.status) }}</text>
</view>
</view>
</view>
<view v-else class="upcoming-empty">
<text class="upcoming-empty-text">近期没有待上的课</text>
</view>
</view>
</template>
<view class="dock">
<view class="dock-btn dock-btn--ghost" @tap="goEdit">
<text class="dock-btn-text">编辑资料</text>
</view>
<view
class="dock-btn dock-btn--solid"
:class="{ 'dock-btn--disabled': !canArrange }"
@tap="goArrange"
>
<text class="dock-btn-text dock-btn-text--solid">安排课程</text>
</view>
</view>
</view>
</template>
<script setup lang="ts">
import { ref, computed, onMounted } from 'vue'
import { onLoad, onShow } from '@dcloudio/uni-app'
import type { AdminMemberDetail, MembershipWithCardType } from '@mp-pilates/shared'
import { MembershipStatus, BookingStatus } from '@mp-pilates/shared'
import CustomNavBar from '../../components/CustomNavBar.vue'
import { getSystemLayout } from '../../utils/system'
import {
formatDateTimeFull,
getCardTypeLabel,
getCardGradientClass,
getMembershipProgressWidth,
getMembershipUsedTimes,
getMembershipTotalTimes,
} from '../../utils/format'
import { BOOKING_STATUS_LABELS } from '../../utils/booking-helpers'
import { getErrorMessage } from '../../utils/auth'
import { useAdminStore } from '../../stores/admin'
const adminStore = useAdminStore()
const navBarHeight = ref('64px')
const userId = ref('')
const loading = ref(false)
const detail = ref<AdminMemberDetail | null>(null)
const canArrange = computed(() => (detail.value?.memberships ?? []).some(isArrangableMembership))
function isArrangableMembership(membership: MembershipWithCardType): boolean {
if (membership.status !== MembershipStatus.ACTIVE) return false
if (membership.remainingTimes !== null && membership.remainingTimes <= 0) return false
return new Date(membership.expireDate) > new Date()
}
function membershipStatusLabel(status: string): string {
const map: Record<string, string> = {
ACTIVE: '有效',
EXPIRED: '已过期',
USED_UP: '已用完',
}
return map[status] || status
}
function bookingStatusLabel(status: BookingStatus): string {
return BOOKING_STATUS_LABELS[status] || status
}
function formatDate(dateStr: string): string {
return dateStr.slice(0, 10)
}
function copyOpenid() {
const openid = detail.value?.user.openid
if (!openid) return
uni.setClipboardData({
data: openid,
success: () => uni.showToast({ title: '已复制 OpenID', icon: 'success' }),
})
}
async function loadDetail() {
if (!userId.value) return
loading.value = true
try {
detail.value = await adminStore.fetchMemberDetail(userId.value)
} catch (err: unknown) {
uni.showToast({ title: getErrorMessage(err, '加载失败'), icon: 'none' })
} finally {
loading.value = false
}
}
function goEdit() {
if (!userId.value) return
uni.navigateTo({ url: `/pages/admin/member-edit?userId=${userId.value}` })
}
function goArrange() {
if (!canArrange.value) {
uni.showToast({ title: '请先开通有效会员卡', icon: 'none' })
return
}
uni.navigateTo({ url: `/pages/admin/member-arrange?userId=${userId.value}` })
}
onLoad((query) => {
userId.value = String(query?.userId || '')
})
onMounted(() => {
navBarHeight.value = `${getSystemLayout().navBarHeight}px`
})
onShow(() => {
if (userId.value) {
loadDetail()
}
})
</script>
<style lang="scss" scoped>
.page {
min-height: 100vh;
background: $bg-page;
padding-bottom: 180rpx;
}
.skeleton-wrap {
padding: 24rpx;
}
.skeleton-hero,
.skeleton-block {
border-radius: 24rpx;
background: linear-gradient(90deg, #efe8df 25%, #f7f2ea 50%, #efe8df 75%);
background-size: 400% 100%;
animation: shimmer 1.4s infinite;
}
.skeleton-hero { height: 360rpx; margin-bottom: 24rpx; }
.skeleton-block { height: 180rpx; margin-bottom: 20rpx; }
.hero {
margin: 20rpx 24rpx 8rpx;
border-radius: 28rpx;
overflow: hidden;
background: linear-gradient(160deg, #2c241c 0%, #4a4035 58%, #6b5a48 100%);
position: relative;
box-shadow: 0 18rpx 40rpx rgba(44, 36, 28, 0.22);
}
.hero-grain {
position: absolute;
inset: 0;
background-image:
radial-gradient(circle at 18% 20%, rgba(169, 191, 204, 0.18), transparent 36%),
radial-gradient(circle at 90% 80%, rgba(232, 168, 124, 0.16), transparent 32%);
}
.hero-inner {
position: relative;
display: flex;
gap: 24rpx;
padding: 36rpx 32rpx 20rpx;
}
.hero-avatar {
width: 128rpx;
height: 128rpx;
border-radius: 28rpx;
overflow: hidden;
border: 3rpx solid rgba(255, 248, 240, 0.35);
flex-shrink: 0;
}
.avatar-img { width: 100%; height: 100%; }
.avatar-fallback {
width: 100%;
height: 100%;
background: #7ba5be;
display: flex;
align-items: center;
justify-content: center;
}
.avatar-letter {
font-size: 48rpx;
font-weight: 700;
color: #fff8f0;
}
.hero-copy {
flex: 1;
min-width: 0;
display: flex;
flex-direction: column;
gap: 6rpx;
}
.hero-kicker {
font-size: 18rpx;
letter-spacing: 4rpx;
color: rgba(200, 216, 228, 0.72);
}
.hero-name {
font-size: 40rpx;
font-weight: 700;
color: #fff8f0;
font-family: 'Songti SC', 'Noto Serif SC', Georgia, serif;
}
.hero-phone,
.hero-openid {
font-size: 22rpx;
color: rgba(255, 248, 240, 0.68);
}
.hero-openid {
overflow: hidden;
text-overflow: ellipsis;
white-space: nowrap;
}
.time-pair {
position: relative;
margin: 8rpx 20rpx 20rpx;
background: rgba(255, 248, 240, 0.08);
border: 1rpx solid rgba(255, 248, 240, 0.1);
border-radius: 18rpx;
display: flex;
padding: 18rpx 8rpx;
}
.time-cell {
flex: 1;
display: flex;
flex-direction: column;
align-items: center;
gap: 6rpx;
}
.time-rule {
width: 1rpx;
background: rgba(255, 248, 240, 0.16);
}
.time-label {
font-size: 20rpx;
color: rgba(255, 248, 240, 0.5);
letter-spacing: 2rpx;
}
.time-value {
font-size: 22rpx;
color: #fff8f0;
font-family: 'DIN Alternate', 'Helvetica Neue', sans-serif;
}
.section {
padding: 28rpx 24rpx 0;
}
.section--last {
padding-bottom: 24rpx;
}
.section-label {
display: block;
font-size: 22rpx;
letter-spacing: 4rpx;
color: $text-hint;
margin-bottom: 16rpx;
}
.stats-strip {
background: $bg-card;
border-radius: 20rpx;
display: flex;
padding: 28rpx 12rpx;
border: 1rpx solid rgba(180, 160, 130, 0.12);
}
.stat {
flex: 1;
display: flex;
flex-direction: column;
align-items: center;
gap: 8rpx;
}
.stat-num {
font-size: 40rpx;
font-weight: 800;
color: $text-primary;
font-family: 'DIN Alternate', 'Helvetica Neue', sans-serif;
}
.stat-name {
font-size: 22rpx;
color: $text-hint;
}
.noshow-hint {
display: block;
margin-top: 12rpx;
font-size: 22rpx;
color: $text-hint;
}
.card-list {
display: flex;
flex-direction: column;
gap: 16rpx;
}
.mship {
background: $bg-card;
border-radius: 20rpx;
overflow: hidden;
border: 1rpx solid rgba(180, 160, 130, 0.12);
}
.mship-strip {
height: 8rpx;
}
.gradient--times { background: linear-gradient(90deg, #7ba5be, #a9bfcc); }
.gradient--duration { background: linear-gradient(90deg, #7A9E7E, #b7cbb8); }
.gradient--trial { background: linear-gradient(90deg, #C47A7A, #e8b4b4); }
.mship-head {
display: flex;
justify-content: space-between;
align-items: flex-start;
padding: 24rpx 24rpx 8rpx;
}
.mship-titles {
display: flex;
flex-direction: column;
gap: 6rpx;
}
.mship-name {
font-size: 30rpx;
font-weight: 700;
color: $text-primary;
}
.mship-type {
font-size: 22rpx;
color: $text-hint;
}
.mship-status {
padding: 4rpx 12rpx;
border-radius: 8rpx;
background: rgba($success-color, 0.14);
&--expired,
&--used_up { background: rgba($text-hint, 0.14); }
}
.mship-status-text {
font-size: 20rpx;
color: $text-secondary;
}
.mship-times {
padding: 4rpx 24rpx 0;
display: flex;
align-items: baseline;
gap: 8rpx;
}
.mship-times-num {
font-size: 48rpx;
font-weight: 800;
color: $text-primary;
font-family: 'DIN Alternate', 'Helvetica Neue', sans-serif;
}
.mship-times-unit {
font-size: 22rpx;
color: $text-hint;
}
.progress {
padding: 12rpx 24rpx 0;
}
.progress-bar {
height: 8rpx;
border-radius: 8rpx;
background: rgba(180, 160, 130, 0.16);
overflow: hidden;
}
.progress-fill {
height: 100%;
border-radius: 8rpx;
background: $accent-color;
}
.progress-text {
display: block;
margin-top: 8rpx;
font-size: 20rpx;
color: $text-hint;
}
.mship-dates {
padding: 16rpx 24rpx 24rpx;
display: flex;
justify-content: space-between;
font-size: 22rpx;
color: $text-secondary;
}
.empty-card {
background: $bg-card;
border-radius: 20rpx;
padding: 48rpx 32rpx;
display: flex;
flex-direction: column;
align-items: center;
gap: 12rpx;
border: 1rpx dashed rgba(180, 160, 130, 0.28);
}
.empty-card-title {
font-size: 30rpx;
font-weight: 700;
color: $text-primary;
}
.empty-card-sub {
font-size: 24rpx;
color: $text-hint;
}
.empty-card-btn {
margin-top: 12rpx;
padding: 12rpx 32rpx;
border-radius: 999rpx;
background: $brand-color;
}
.empty-card-btn-text {
font-size: 24rpx;
color: $primary-dark;
font-weight: 600;
}
.upcoming-list {
background: $bg-card;
border-radius: 20rpx;
overflow: hidden;
border: 1rpx solid rgba(180, 160, 130, 0.12);
}
.upcoming-row {
display: flex;
justify-content: space-between;
padding: 24rpx;
border-bottom: 1rpx solid rgba(180, 160, 130, 0.1);
&:last-child { border-bottom: none; }
}
.upcoming-time {
display: flex;
flex-direction: column;
gap: 6rpx;
}
.upcoming-date {
font-size: 26rpx;
font-weight: 700;
color: $text-primary;
}
.upcoming-hour {
font-size: 24rpx;
color: $accent-color;
font-family: 'DIN Alternate', 'Helvetica Neue', sans-serif;
}
.upcoming-meta {
display: flex;
flex-direction: column;
align-items: flex-end;
gap: 6rpx;
}
.upcoming-card {
font-size: 24rpx;
color: $text-secondary;
}
.upcoming-status {
font-size: 20rpx;
color: $text-hint;
}
.upcoming-empty {
padding: 32rpx;
background: $bg-card;
border-radius: 20rpx;
}
.upcoming-empty-text {
font-size: 24rpx;
color: $text-hint;
}
.dock {
position: fixed;
left: 0;
right: 0;
bottom: 0;
display: flex;
gap: 16rpx;
padding: 16rpx 24rpx calc(16rpx + env(safe-area-inset-bottom));
background: rgba(250, 248, 245, 0.94);
border-top: 1rpx solid rgba(180, 160, 130, 0.14);
}
.dock-btn {
flex: 1;
height: 88rpx;
border-radius: 18rpx;
display: flex;
align-items: center;
justify-content: center;
}
.dock-btn--ghost {
background: #fff;
border: 2rpx solid $brand-color;
}
.dock-btn--solid {
background: $brand-color;
}
.dock-btn--disabled {
opacity: 0.38;
}
.dock-btn-text {
font-size: 28rpx;
font-weight: 700;
color: $brand-color;
}
.dock-btn-text--solid {
color: #fff8f0;
}
</style>