fix(mp): T40 UI 审查全量修复 + 设计体系一致性优化
Phase 0 基础设施:
- statusTag.ts: getStatusInlineStyle() 移除内联 borderRadius/padding/fontSize，仅返回 {background, color}
- 新增 SEVERITY_COLORS + getSeverityStyle() + getSeverityLabel() 统一告警严重程度样式
- variables.scss: 新增 9 个语义颜色别名 ($success/$danger/$warning/$info 等)
- mixins.scss: 新增 status-inline mixin 统一状态标签样式
- 7 个消费者页面添加 @include status-inline CSS 补偿
Phase 1 HIGH 修复 (4 页面):
- P46 随访管理: 移除 getTypeStyle() 硬编码 fontSize，替换文字 Loading 为组件
- P45 咨询详情医护: 添加 Loading/ErrorState 三态模板 + error ref
- P02 健康数据: 添加 loading ref + Loading 组件 + 错误 toast 提示
- P48 告警中心: 替换本地 SEVERITY_COLORS/SEVERITY_LABELS 为 statusTag.ts 导出
Phase 2 全局一致性:
- 2.1 触控补全: 17 页面为可点击元素添加 min-height: $touch-min
- 2.2 字号替换: 19 文件 31 处硬编码 px → Design Token CSS 变量
- 2.3 颜色替换: 18 文件 ~50 处硬编码十六进制 → SCSS 语义变量
- 2.4 elder-mode.scss: 新增 9 个选择器到触控放大清单
Phase 3 LOW 修复:
- 3.1 统一 Loading: 21 页面旧式文字加载 → <Loading> 组件
- 3.2 useElderClass: 8 页面补全长者模式 class 绑定
- 3.3 零散修复: 按钮 44px→48px，诊断记录添加 scroll-view 无限加载
同时新增 UniApp (Vue 3 + Vite) 小程序完整代码库 (146 文件)
This commit is contained in:
iven
142
apps/miniprogram-uniapp/src/pages-sub/pkg-mall/detail/index.vue
Normal file
142
apps/miniprogram-uniapp/src/pages-sub/pkg-mall/detail/index.vue
Normal file
@@ -0,0 +1,142 @@
|
||||
<template>
|
||||
<view :class="['detail-page', elderClass]">
|
||||
<view class="balance-card">
|
||||
<text class="balance-label">当前积分</text>
|
||||
<text class="balance-value">{{ balance.toLocaleString() }}</text>
|
||||
<view class="balance-stats">
|
||||
<view class="stat-item">
|
||||
<text class="stat-value stat-earn">{{ (pointsStore.account?.total_earned ?? 0).toLocaleString() }}</text>
|
||||
<text class="stat-label">累计获得</text>
|
||||
</view>
|
||||
<view class="stat-divider" />
|
||||
<view class="stat-item">
|
||||
<text class="stat-value stat-spend">{{ (pointsStore.account?.total_spent ?? 0).toLocaleString() }}</text>
|
||||
<text class="stat-label">累计消费</text>
|
||||
</view>
|
||||
<view class="stat-divider" />
|
||||
<view class="stat-item">
|
||||
<text class="stat-value stat-expired">{{ (pointsStore.account?.total_expired ?? 0).toLocaleString() }}</text>
|
||||
<text class="stat-label">已过期</text>
|
||||
</view>
|
||||
</view>
|
||||
</view>
|
||||
|
||||
<view class="type-tabs">
|
||||
<view v-for="tab in TYPE_TABS" :key="tab.key"
|
||||
:class="['type-tab', activeTab === tab.key ? 'active' : '']"
|
||||
@tap="handleTabChange(tab.key)">
|
||||
<text class="type-tab-text">{{ tab.label }}</text>
|
||||
</view>
|
||||
</view>
|
||||
|
||||
<view v-if="transactions.length === 0 && !loading" class="empty-wrap">
|
||||
<EmptyState icon="" title="暂无积分记录" hint="签到或兑换后将显示记录" />
|
||||
</view>
|
||||
|
||||
<scroll-view v-else scroll-y class="tx-scroll" @scrolltolower="loadMore">
|
||||
<view class="transaction-item" v-for="tx in transactions" :key="tx.id">
|
||||
<view :class="['tx-badge', `tx-badge-${getTypeClass(tx.type)}`]">
|
||||
<text class="tx-badge-text">{{ getTypeLabel(tx.type) }}</text>
|
||||
</view>
|
||||
<view class="tx-info">
|
||||
<text class="tx-desc">{{ tx.description || (tx.type === 'earn' ? '积分收入' : tx.type === 'spend' ? '积分消费' : '积分过期') }}</text>
|
||||
<text class="tx-date">{{ formatDate(tx.created_at) }}</text>
|
||||
</view>
|
||||
<view class="tx-amount-col">
|
||||
<text :class="['tx-amount', `tx-amount-${tx.type === 'earn' ? 'positive' : 'negative'}`]">{{ formatAmount(tx) }}</text>
|
||||
<text class="tx-remaining">余额 {{ tx.balance_after.toLocaleString() }}</text>
|
||||
</view>
|
||||
</view>
|
||||
<Loading v-if="loading" text="加载中..." />
|
||||
<view v-if="!loading && transactions.length >= total && total > 0" class="no-more"><text class="no-more-text">没有更多了</text></view>
|
||||
</scroll-view>
|
||||
</view>
|
||||
</template>
|
||||
|
||||
<script setup lang="ts">
|
||||
import { ref, computed } from 'vue'
|
||||
import { onShow, onPullDownRefresh } from '@dcloudio/uni-app'
|
||||
import { listMyTransactions, type PointsTransaction } from '@/services/points'
|
||||
import { usePointsStore } from '@/stores/points'
|
||||
import EmptyState from '@/components/EmptyState.vue'
|
||||
import Loading from '@/components/Loading.vue'
|
||||
import { useElderClass } from '@/composables/useElderClass'
|
||||
|
||||
const TYPE_TABS = [{ key: '', label: '全部' }, { key: 'earn', label: '收入' }, { key: 'spend', label: '支出' }]
|
||||
|
||||
const { elderClass } = useElderClass()
|
||||
const pointsStore = usePointsStore()
|
||||
const transactions = ref<PointsTransaction[]>([])
|
||||
const activeTab = ref('')
|
||||
const page = ref(1)
|
||||
const total = ref(0)
|
||||
const loading = ref(false)
|
||||
let loadingGuard = false
|
||||
|
||||
const balance = computed(() => pointsStore.account?.balance ?? 0)
|
||||
const getTypeLabel = (type: string) => type === 'earn' ? '收' : type === 'spend' ? '支' : '过'
|
||||
const getTypeClass = (type: string) => type === 'earn' ? 'earn' : type === 'spend' ? 'spend' : 'expired'
|
||||
const formatAmount = (tx: PointsTransaction) => tx.type === 'earn' ? `+${tx.amount.toLocaleString()}` : `-${tx.amount.toLocaleString()}`
|
||||
const formatDate = (dateStr: string) => {
|
||||
if (!dateStr) return ''
|
||||
const d = new Date(dateStr)
|
||||
return `${d.getFullYear()}-${String(d.getMonth() + 1).padStart(2, '0')}-${String(d.getDate()).padStart(2, '0')} ${String(d.getHours()).padStart(2, '0')}:${String(d.getMinutes()).padStart(2, '0')}`
|
||||
}
|
||||
|
||||
const fetchTransactions = async (pageNum: number, type: string, isRefresh = false) => {
|
||||
if (loadingGuard) return
|
||||
loadingGuard = true; loading.value = true
|
||||
try {
|
||||
const res = await listMyTransactions({ page: pageNum, page_size: 10 })
|
||||
let list = res.data || []
|
||||
if (type) list = list.filter(t => t.type === type)
|
||||
transactions.value = isRefresh ? list : [...transactions.value, ...list]
|
||||
total.value = res.total; page.value = pageNum
|
||||
} catch { uni.showToast({ title: '加载失败', icon: 'none' }) }
|
||||
finally { loadingGuard = false; loading.value = false }
|
||||
}
|
||||
|
||||
const handleTabChange = (key: string) => { activeTab.value = key; fetchTransactions(1, key, true) }
|
||||
const loadMore = () => { if (!loading.value && transactions.value.length < total.value) fetchTransactions(page.value + 1, activeTab.value) }
|
||||
|
||||
onShow(() => { uni.setNavigationBarTitle({ title: '积分明细' }); Promise.all([pointsStore.refresh(), fetchTransactions(1, activeTab.value, true)]) })
|
||||
onPullDownRefresh(() => { Promise.all([pointsStore.refresh(), fetchTransactions(1, activeTab.value, true)]).finally(() => uni.stopPullDownRefresh()) })
|
||||
</script>
|
||||
|
||||
<style lang="scss" scoped>
|
||||
.detail-page { min-height: 100vh; background: $bg; }
|
||||
.balance-card { background: linear-gradient(135deg, $pri, darken($pri, 10%)); padding: 24px; margin: 0; }
|
||||
.balance-label { font-size: var(--tk-font-cap); color: rgba(255,255,255,0.8); display: block; }
|
||||
.balance-value { font-size: var(--tk-font-num); font-weight: 700; color: $white; display: block; margin: 8px 0 20px; }
|
||||
.balance-stats { display: flex; align-items: center; }
|
||||
.stat-item { flex: 1; text-align: center; }
|
||||
.stat-value { font-size: var(--tk-font-body); font-weight: 500; display: block; }
|
||||
.stat-earn { color: rgba(255,255,255,0.95); }
|
||||
.stat-spend { color: rgba(255,255,255,0.95); }
|
||||
.stat-expired { color: rgba(255,255,255,0.95); }
|
||||
.stat-label { font-size: var(--tk-font-cap); color: rgba(255,255,255,0.6); display: block; margin-top: 4px; }
|
||||
.stat-divider { width: 1px; height: 24px; background: rgba(255,255,255,0.2); }
|
||||
.type-tabs { display: flex; padding: 12px 24px; gap: 8px; background: $card; }
|
||||
.type-tab { padding: 6px 16px; min-height: $touch-min; display: flex; align-items: center; border-radius: 20px; background: rgba(0,0,0,0.04); }
|
||||
.type-tab.active { background: $pri; }
|
||||
.type-tab-text { font-size: var(--tk-font-cap); color: $tx2; }
|
||||
.type-tab.active .type-tab-text { color: $white; }
|
||||
.tx-scroll { height: calc(100vh - 200px); padding: 16px 24px; }
|
||||
.transaction-item { @include card; display: flex; align-items: center; gap: 12px; margin-bottom: 8px; }
|
||||
.tx-badge { width: 36px; height: 36px; border-radius: 50%; @include flex-center; flex-shrink: 0; }
|
||||
.tx-badge-earn { background: rgba(82,196,26,0.1); }
|
||||
.tx-badge-spend { background: rgba(250,84,28,0.1); }
|
||||
.tx-badge-expired { background: rgba(0,0,0,0.05); }
|
||||
.tx-badge-text { font-size: var(--tk-font-micro); font-weight: 500; }
|
||||
.tx-info { flex: 1; min-width: 0; }
|
||||
.tx-desc { font-size: var(--tk-font-body); color: $tx; display: block; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
|
||||
.tx-date { font-size: var(--tk-font-cap); color: $tx3; display: block; margin-top: 2px; }
|
||||
.tx-amount-col { text-align: right; flex-shrink: 0; }
|
||||
.tx-amount { font-size: var(--tk-font-body); font-weight: 500; display: block; }
|
||||
.tx-amount-positive { color: $acc; }
|
||||
.tx-amount-negative { color: $wrn; }
|
||||
.tx-remaining { font-size: var(--tk-font-micro); color: $tx3; display: block; margin-top: 2px; }
|
||||
.empty-wrap { padding-top: 60px; }
|
||||
.no-more { @include flex-center; padding: 20px; }
|
||||
.no-more-text { font-size: var(--tk-font-cap); color: $tx3; }
|
||||
</style>
|
||||
@@ -0,0 +1,166 @@
|
||||
<template>
|
||||
<view :class="['exchange-page', elderClass]">
|
||||
<template v-if="loading">
|
||||
<Loading text="加载中..." />
|
||||
</template>
|
||||
<template v-else-if="product">
|
||||
<view class="product-card">
|
||||
<view :class="['product-icon-wrap', iconCls]">
|
||||
<text class="product-icon-char">{{ initial }}</text>
|
||||
</view>
|
||||
<view class="product-meta">
|
||||
<text class="product-name">{{ product.name }}</text>
|
||||
<text class="product-type-tag">{{ typeLabel }}</text>
|
||||
</view>
|
||||
</view>
|
||||
|
||||
<view class="detail-section">
|
||||
<text class="detail-section-title">兑换明细</text>
|
||||
<view class="detail-card">
|
||||
<view class="detail-row">
|
||||
<text class="detail-label">所需积分</text>
|
||||
<text class="detail-value detail-cost">{{ cost.toLocaleString() }}</text>
|
||||
</view>
|
||||
<view class="detail-row">
|
||||
<text class="detail-label">当前余额</text>
|
||||
<text :class="['detail-value', insufficient ? 'detail-insufficient' : 'detail-sufficient']">{{ balance.toLocaleString() }}</text>
|
||||
</view>
|
||||
<view v-if="insufficient" class="detail-row">
|
||||
<text class="detail-label">差额</text>
|
||||
<text class="detail-value detail-insufficient">-{{ (cost - balance).toLocaleString() }}</text>
|
||||
</view>
|
||||
<view class="detail-row last">
|
||||
<text class="detail-label">库存</text>
|
||||
<text class="detail-value">{{ product.stock > 0 ? `剩余 ${product.stock} 件` : '已兑完' }}</text>
|
||||
</view>
|
||||
</view>
|
||||
</view>
|
||||
|
||||
<view class="notice-section">
|
||||
<text class="notice-title">温馨提示</text>
|
||||
<text class="notice-text">兑换成功后将生成核销码，请凭核销码到前台核销领取。</text>
|
||||
<text class="notice-text">积分一经兑换不可退回。</text>
|
||||
</view>
|
||||
|
||||
<view class="exchange-footer">
|
||||
<view class="footer-cost">
|
||||
<text class="footer-cost-label">合计</text>
|
||||
<text class="footer-cost-num">{{ cost.toLocaleString() }}</text>
|
||||
<text class="footer-cost-unit">积分</text>
|
||||
</view>
|
||||
<view :class="['confirm-btn', insufficient || product.stock <= 0 || submitting ? 'disabled' : '']" @tap="handleConfirm">
|
||||
<text class="confirm-btn-text">
|
||||
{{ submitting ? '兑换中...' : insufficient ? '积分不足' : product.stock <= 0 ? '已兑完' : '确认兑换' }}
|
||||
</text>
|
||||
</view>
|
||||
</view>
|
||||
</template>
|
||||
</view>
|
||||
</template>
|
||||
|
||||
<script setup lang="ts">
|
||||
import { ref, computed } from 'vue'
|
||||
import { onShow } from '@dcloudio/uni-app'
|
||||
import { listProducts, exchangeProduct, type PointsProduct } from '@/services/points'
|
||||
import { usePointsStore } from '@/stores/points'
|
||||
import { useElderClass } from '@/composables/useElderClass'
|
||||
import Loading from '@/components/Loading.vue'
|
||||
|
||||
const TYPE_INITIAL: Record<string, string> = { physical: '物', service: '券', privilege: '权' }
|
||||
const TYPE_LABEL: Record<string, string> = { physical: '实物商品', service: '服务券', privilege: '权益卡' }
|
||||
const TYPE_CLASS: Record<string, string> = { physical: 'product-icon-wrap--physical', service: 'product-icon-wrap--service', privilege: 'product-icon-wrap--privilege' }
|
||||
|
||||
const { elderClass } = useElderClass()
|
||||
const pointsStore = usePointsStore()
|
||||
const product = ref<PointsProduct | null>(null)
|
||||
const loading = ref(true)
|
||||
const submitting = ref(false)
|
||||
let productId = ''
|
||||
|
||||
const balance = computed(() => pointsStore.account?.balance ?? 0)
|
||||
const cost = computed(() => product.value?.points_cost ?? 0)
|
||||
const insufficient = computed(() => balance.value < cost.value)
|
||||
const productType = computed(() => product.value?.product_type || 'physical')
|
||||
const initial = computed(() => TYPE_INITIAL[productType.value] || '礼')
|
||||
const typeLabel = computed(() => TYPE_LABEL[productType.value] || '商品')
|
||||
const iconCls = computed(() => TYPE_CLASS[productType.value] || 'product-icon-wrap--service')
|
||||
|
||||
const loadData = async () => {
|
||||
const instance = getCurrentPages()
|
||||
const page = instance[instance.length - 1] as any
|
||||
productId = page?.$page?.options?.product_id || page?.options?.product_id || ''
|
||||
if (!productId) {
|
||||
uni.showToast({ title: '参数错误', icon: 'none' })
|
||||
setTimeout(() => uni.navigateBack(), 1500)
|
||||
return
|
||||
}
|
||||
loading.value = true
|
||||
try {
|
||||
const [productRes] = await Promise.all([listProducts({ page: 1, page_size: 100 }), pointsStore.refresh()])
|
||||
const found = productRes.data.find(p => p.id === productId)
|
||||
if (!found) { uni.showToast({ title: '商品不存在', icon: 'none' }); setTimeout(() => uni.navigateBack(), 1500); return }
|
||||
product.value = found
|
||||
} catch {
|
||||
uni.showToast({ title: '加载失败', icon: 'none' })
|
||||
setTimeout(() => uni.navigateBack(), 1500)
|
||||
} finally {
|
||||
loading.value = false
|
||||
}
|
||||
}
|
||||
|
||||
const handleConfirm = async () => {
|
||||
if (!product.value || submitting.value || insufficient.value || product.value.stock <= 0) return
|
||||
const modalRes = await uni.showModal({ title: '确认兑换', content: `确定花费 ${cost.value} 积分兑换「${product.value.name}」吗？` })
|
||||
if (!modalRes.confirm) return
|
||||
submitting.value = true
|
||||
try {
|
||||
const order = await exchangeProduct(product.value.id)
|
||||
uni.showToast({ title: '兑换成功', icon: 'success', duration: 2000 })
|
||||
setTimeout(() => {
|
||||
uni.showModal({ title: '兑换成功', content: `核销码: ${order.qr_code}\n请凭此码到前台核销`, showCancel: false, confirmText: '查看订单', success: () => uni.navigateTo({ url: '/pages-sub/pkg-mall/orders/index' }) })
|
||||
}, 2000)
|
||||
} catch (err) {
|
||||
const msg = err instanceof Error ? err.message : '兑换失败'
|
||||
if (msg.includes('余额不足') || msg.includes('insufficient')) uni.showToast({ title: '积分不足', icon: 'none' })
|
||||
else uni.showToast({ title: msg, icon: 'none' })
|
||||
} finally {
|
||||
submitting.value = false
|
||||
}
|
||||
}
|
||||
|
||||
onShow(() => { uni.setNavigationBarTitle({ title: '确认兑换' }); loadData() })
|
||||
</script>
|
||||
|
||||
<style lang="scss" scoped>
|
||||
.exchange-page { min-height: 100vh; background: $bg; padding: 24px; }
|
||||
.product-card { @include card; display: flex; align-items: center; gap: 16px; margin-bottom: 16px; }
|
||||
.product-icon-wrap { width: 48px; height: 48px; border-radius: 12px; @include flex-center; }
|
||||
.product-icon-wrap--physical { background: rgba(250,173,20,0.15); }
|
||||
.product-icon-wrap--service { background: rgba($pri, 0.1); }
|
||||
.product-icon-wrap--privilege { background: rgba(114,46,209,0.15); }
|
||||
.product-icon-char { font-size: var(--tk-font-cap); font-weight: 600; }
|
||||
.product-meta { flex: 1; }
|
||||
.product-name { font-size: var(--tk-font-body); font-weight: 500; color: $tx; display: block; }
|
||||
.product-type-tag { font-size: var(--tk-font-cap); color: $tx3; margin-top: 4px; display: block; }
|
||||
.detail-section { @include card; margin-bottom: 16px; }
|
||||
.detail-section-title { font-size: var(--tk-font-body); font-weight: 500; color: $tx; margin-bottom: 12px; display: block; }
|
||||
.detail-card { }
|
||||
.detail-row { display: flex; justify-content: space-between; padding: 10px 0; border-bottom: 1px solid rgba(0,0,0,0.04); }
|
||||
.detail-row.last { border-bottom: none; }
|
||||
.detail-label { font-size: var(--tk-font-cap); color: $tx3; }
|
||||
.detail-value { font-size: var(--tk-font-body); color: $tx; }
|
||||
.detail-cost { color: $wrn; font-weight: 500; }
|
||||
.detail-sufficient { color: $acc; }
|
||||
.detail-insufficient { color: $wrn; }
|
||||
.notice-section { @include card; margin-bottom: 16px; }
|
||||
.notice-title { font-size: var(--tk-font-cap); font-weight: 500; color: $tx2; margin-bottom: 8px; display: block; }
|
||||
.notice-text { font-size: var(--tk-font-cap); color: $tx3; line-height: 1.6; display: block; }
|
||||
.exchange-footer { position: fixed; bottom: 0; left: 0; right: 0; display: flex; align-items: center; padding: 12px 24px; background: $card; box-shadow: $shadow-sm; gap: 16px; }
|
||||
.footer-cost { flex: 1; display: flex; align-items: baseline; gap: 4px; }
|
||||
.footer-cost-label { font-size: var(--tk-font-cap); color: $tx3; }
|
||||
.footer-cost-num { font-size: var(--tk-font-body); font-weight: 600; color: $wrn; }
|
||||
.footer-cost-unit { font-size: var(--tk-font-cap); color: $tx3; }
|
||||
.confirm-btn { height: $touch-min; padding: 0 32px; background: $pri; border-radius: $r; @include flex-center; }
|
||||
.confirm-btn.disabled { opacity: 0.5; }
|
||||
.confirm-btn-text { color: $white; font-size: var(--tk-font-body); font-weight: 500; }
|
||||
</style>
|
||||
130
apps/miniprogram-uniapp/src/pages-sub/pkg-mall/orders/index.vue
Normal file
130
apps/miniprogram-uniapp/src/pages-sub/pkg-mall/orders/index.vue
Normal file
@@ -0,0 +1,130 @@
|
||||
<template>
|
||||
<view :class="['orders-page', elderClass]">
|
||||
<view class="status-tabs">
|
||||
<view v-for="tab in STATUS_TABS" :key="tab.key"
|
||||
:class="['status-tab', activeTab === tab.key ? 'active' : '']"
|
||||
@tap="handleTabChange(tab.key)">
|
||||
<text class="status-tab-text">{{ tab.label }}</text>
|
||||
</view>
|
||||
</view>
|
||||
|
||||
<view v-if="orders.length === 0 && !loading" class="empty-wrap">
|
||||
<EmptyState icon="" title="暂无订单" hint="去商城兑换心仪商品吧" />
|
||||
</view>
|
||||
|
||||
<scroll-view v-else scroll-y class="orders-scroll" @scrolltolower="loadMore">
|
||||
<view class="order-card" v-for="order in orders" :key="order.id">
|
||||
<view class="order-header">
|
||||
<text class="order-product">商品 {{ order.product_id.slice(0, 8) }}</text>
|
||||
<view :class="['order-status-tag', getStatusConfig(order.status).cls]">
|
||||
<text class="order-status-text">{{ getStatusConfig(order.status).label }}</text>
|
||||
</view>
|
||||
</view>
|
||||
<view class="order-body">
|
||||
<view class="order-row">
|
||||
<text class="order-row-label">消耗积分</text>
|
||||
<text class="order-row-value order-cost">{{ order.points_cost.toLocaleString() }}</text>
|
||||
</view>
|
||||
<view class="order-row">
|
||||
<text class="order-row-label">兑换时间</text>
|
||||
<text class="order-row-value">{{ formatDate(order.created_at) }}</text>
|
||||
</view>
|
||||
<view v-if="order.status === 'pending'" class="order-qrcode" @tap="handleShowQrCode(order.qr_code)">
|
||||
<text class="qrcode-label">核销码</text>
|
||||
<text class="qrcode-value">{{ order.qr_code }}</text>
|
||||
<text class="qrcode-tap">查看</text>
|
||||
</view>
|
||||
</view>
|
||||
</view>
|
||||
<Loading v-if="loading" text="加载中..." />
|
||||
<view v-if="!loading && orders.length >= total && total > 0" class="no-more"><text class="no-more-text">没有更多了</text></view>
|
||||
</scroll-view>
|
||||
</view>
|
||||
</template>
|
||||
|
||||
<script setup lang="ts">
|
||||
import { ref } from 'vue'
|
||||
import { onShow, onPullDownRefresh } from '@dcloudio/uni-app'
|
||||
import { listMyOrders, type PointsOrder } from '@/services/points'
|
||||
import EmptyState from '@/components/EmptyState.vue'
|
||||
import Loading from '@/components/Loading.vue'
|
||||
import { useElderClass } from '@/composables/useElderClass'
|
||||
|
||||
const STATUS_TABS = [
|
||||
{ key: '', label: '全部' }, { key: 'pending', label: '待核销' },
|
||||
{ key: 'verified', label: '已核销' }, { key: 'expired', label: '已过期' },
|
||||
]
|
||||
const STATUS_CONFIG: Record<string, { label: string; cls: string }> = {
|
||||
pending: { label: '待核销', cls: 'order-status-tag--pending' },
|
||||
verified: { label: '已核销', cls: 'order-status-tag--verified' },
|
||||
cancelled: { label: '已取消', cls: 'order-status-tag--cancelled' },
|
||||
expired: { label: '已过期', cls: 'order-status-tag--expired' },
|
||||
}
|
||||
|
||||
const { elderClass } = useElderClass()
|
||||
const orders = ref<PointsOrder[]>([])
|
||||
const activeTab = ref('')
|
||||
const page = ref(1)
|
||||
const total = ref(0)
|
||||
const loading = ref(false)
|
||||
let loadingGuard = false
|
||||
|
||||
const getStatusConfig = (status: string) => STATUS_CONFIG[status] || { label: status, cls: 'order-status-tag--expired' }
|
||||
|
||||
const formatDate = (dateStr: string) => {
|
||||
if (!dateStr) return ''
|
||||
const d = new Date(dateStr)
|
||||
return `${d.getFullYear()}-${String(d.getMonth() + 1).padStart(2, '0')}-${String(d.getDate()).padStart(2, '0')} ${String(d.getHours()).padStart(2, '0')}:${String(d.getMinutes()).padStart(2, '0')}`
|
||||
}
|
||||
|
||||
const fetchOrders = async (pageNum: number, status: string, isRefresh = false) => {
|
||||
if (loadingGuard) return
|
||||
loadingGuard = true; loading.value = true
|
||||
try {
|
||||
const res = await listMyOrders({ page: pageNum, page_size: 10 })
|
||||
let list = res.data || []
|
||||
if (status) list = list.filter(o => o.status === status)
|
||||
orders.value = isRefresh ? list : [...orders.value, ...list]
|
||||
total.value = res.total; page.value = pageNum
|
||||
} catch { uni.showToast({ title: '加载失败', icon: 'none' }) }
|
||||
finally { loadingGuard = false; loading.value = false }
|
||||
}
|
||||
|
||||
const handleTabChange = (key: string) => { activeTab.value = key; fetchOrders(1, key, true) }
|
||||
const loadMore = () => { if (!loading.value && orders.value.length < total.value) fetchOrders(page.value + 1, activeTab.value) }
|
||||
const handleShowQrCode = (qrCode: string) => uni.showModal({ title: '核销码', content: qrCode, showCancel: false, confirmText: '知道了' })
|
||||
|
||||
onShow(() => { uni.setNavigationBarTitle({ title: '我的订单' }); fetchOrders(1, activeTab.value, true) })
|
||||
onPullDownRefresh(() => { fetchOrders(1, activeTab.value, true).finally(() => uni.stopPullDownRefresh()) })
|
||||
</script>
|
||||
|
||||
<style lang="scss" scoped>
|
||||
.orders-page { min-height: 100vh; background: $bg; }
|
||||
.status-tabs { display: flex; padding: 12px 24px; gap: 8px; background: $card; }
|
||||
.status-tab { padding: 6px 16px; min-height: $touch-min; display: flex; align-items: center; border-radius: 20px; background: rgba(0,0,0,0.04); }
|
||||
.status-tab.active { background: $pri; }
|
||||
.status-tab-text { font-size: var(--tk-font-cap); color: $tx2; }
|
||||
.status-tab.active .status-tab-text { color: $white; }
|
||||
.orders-scroll { height: calc(100vh - 52px); padding: 16px 24px; }
|
||||
.order-card { @include card; margin-bottom: 12px; }
|
||||
.order-header { display: flex; justify-content: space-between; align-items: center; margin-bottom: 12px; }
|
||||
.order-product { font-size: var(--tk-font-body); color: $tx; font-weight: 500; }
|
||||
.order-status-tag { padding: 2px 10px; border-radius: 4px; }
|
||||
.order-status-tag--pending { background: rgba($pri, 0.1); }
|
||||
.order-status-tag--verified { background: rgba(82,196,26,0.1); }
|
||||
.order-status-tag--cancelled { background: rgba(0,0,0,0.05); }
|
||||
.order-status-tag--expired { background: rgba(0,0,0,0.05); }
|
||||
.order-status-text { font-size: var(--tk-font-micro); color: $tx2; }
|
||||
.order-body { }
|
||||
.order-row { display: flex; justify-content: space-between; padding: 6px 0; }
|
||||
.order-row-label { font-size: var(--tk-font-cap); color: $tx3; }
|
||||
.order-row-value { font-size: var(--tk-font-cap); color: $tx; }
|
||||
.order-cost { color: $wrn; font-weight: 500; }
|
||||
.order-qrcode { display: flex; align-items: center; gap: 8px; margin-top: 8px; padding: 8px 12px; background: rgba($pri, 0.05); border-radius: $r; }
|
||||
.qrcode-label { font-size: var(--tk-font-cap); color: $tx2; }
|
||||
.qrcode-value { flex: 1; font-size: var(--tk-font-cap); color: $pri; font-weight: 500; }
|
||||
.qrcode-tap { font-size: var(--tk-font-cap); color: $pri; }
|
||||
.empty-wrap { padding-top: 120px; }
|
||||
.no-more { @include flex-center; padding: 20px; }
|
||||
.no-more-text { font-size: var(--tk-font-cap); color: $tx3; }
|
||||
</style>
|
||||
Reference in New Issue
Block a user