feat(miniprogram): TabBar 重构 + 积分商城页面 (Chunk 5)
TabBar: 首页|健康|预约|资讯|我的 → 首页|上报|咨询|商城|我的 新增页面: - 商城(mall): 积分余额卡片 + 签到 + 商品网格(分类型筛选/分页) - 咨询(consultation): 占位页(即将上线) 新增服务: - services/points.ts: 积分账户/签到/商品列表 API API: getAccount, dailyCheckin, getCheckinStatus, listProducts
This commit is contained in:
iven
236
apps/miniprogram/src/pages/mall/index.tsx
Normal file
236
apps/miniprogram/src/pages/mall/index.tsx
Normal file
@@ -0,0 +1,236 @@
|
||||
import React, { useState, useCallback, useRef } from 'react';
|
||||
import { View, Text } from '@tarojs/components';
|
||||
import Taro, { useDidShow, useReachBottom, usePullDownRefresh } from '@tarojs/taro';
|
||||
import {
|
||||
getAccount,
|
||||
dailyCheckin,
|
||||
getCheckinStatus,
|
||||
listProducts,
|
||||
} from '../../services/points';
|
||||
import type { PointsAccount, PointsProduct, CheckinStatus } from '../../services/points';
|
||||
import EmptyState from '../../components/EmptyState';
|
||||
import Loading from '../../components/Loading';
|
||||
import './index.scss';
|
||||
|
||||
const PRODUCT_TYPE_TABS = [
|
||||
{ key: '', label: '全部' },
|
||||
{ key: 'physical', label: '实物' },
|
||||
{ key: 'service', label: '服务券' },
|
||||
{ key: 'privilege', label: '权益' },
|
||||
];
|
||||
|
||||
const TYPE_COLORS: Record<string, string> = {
|
||||
physical: '#0891B2',
|
||||
service: '#059669',
|
||||
privilege: '#D97706',
|
||||
};
|
||||
|
||||
export default function Mall() {
|
||||
const [account, setAccount] = useState<PointsAccount | null>(null);
|
||||
const [checkinStatus, setCheckinStatus] = useState<CheckinStatus | null>(null);
|
||||
const [products, setProducts] = useState<PointsProduct[]>([]);
|
||||
const [productType, setProductType] = useState('');
|
||||
const [page, setPage] = useState(1);
|
||||
const [total, setTotal] = useState(0);
|
||||
const [loading, setLoading] = useState(false);
|
||||
const [checkinLoading, setCheckinLoading] = useState(false);
|
||||
const loadingRef = useRef(false);
|
||||
|
||||
const fetchAccountAndCheckin = useCallback(async () => {
|
||||
try {
|
||||
const [acct, status] = await Promise.all([
|
||||
getAccount(),
|
||||
getCheckinStatus(),
|
||||
]);
|
||||
setAccount(acct);
|
||||
setCheckinStatus(status);
|
||||
} catch {
|
||||
// 账户可能尚未创建，静默处理
|
||||
}
|
||||
}, []);
|
||||
|
||||
const fetchProducts = useCallback(
|
||||
async (pageNum: number, type: string, isRefresh = false) => {
|
||||
if (loadingRef.current) return;
|
||||
loadingRef.current = true;
|
||||
setLoading(true);
|
||||
try {
|
||||
const res = await listProducts({
|
||||
page: pageNum,
|
||||
page_size: 10,
|
||||
product_type: type || undefined,
|
||||
});
|
||||
const list = res.data || [];
|
||||
if (isRefresh) {
|
||||
setProducts(list);
|
||||
} else {
|
||||
setProducts((prev) => [...prev, ...list]);
|
||||
}
|
||||
setTotal(res.total);
|
||||
setPage(pageNum);
|
||||
} catch {
|
||||
Taro.showToast({ title: '加载失败', icon: 'none' });
|
||||
} finally {
|
||||
loadingRef.current = false;
|
||||
setLoading(false);
|
||||
}
|
||||
},
|
||||
[],
|
||||
);
|
||||
|
||||
const loadAll = useCallback(
|
||||
async (type?: string) => {
|
||||
const t = type !== undefined ? type : productType;
|
||||
await Promise.all([fetchAccountAndCheckin(), fetchProducts(1, t, true)]);
|
||||
},
|
||||
[fetchAccountAndCheckin, fetchProducts, productType],
|
||||
);
|
||||
|
||||
useDidShow(() => {
|
||||
Taro.setNavigationBarTitle({ title: '积分商城' });
|
||||
loadAll();
|
||||
});
|
||||
|
||||
usePullDownRefresh(() => {
|
||||
loadAll().finally(() => {
|
||||
Taro.stopPullDownRefresh();
|
||||
});
|
||||
});
|
||||
|
||||
useReachBottom(() => {
|
||||
if (!loading && products.length < total) {
|
||||
fetchProducts(page + 1, productType);
|
||||
}
|
||||
});
|
||||
|
||||
const handleCheckin = async () => {
|
||||
if (checkinLoading || checkinStatus?.checked_in_today) return;
|
||||
setCheckinLoading(true);
|
||||
try {
|
||||
const result = await dailyCheckin();
|
||||
setCheckinStatus(result);
|
||||
// 刷新积分余额
|
||||
const acct = await getAccount();
|
||||
setAccount(acct);
|
||||
Taro.showToast({
|
||||
title: '签到成功',
|
||||
icon: 'success',
|
||||
duration: 2000,
|
||||
});
|
||||
} catch (err) {
|
||||
Taro.showToast({
|
||||
title: err instanceof Error ? err.message : '签到失败',
|
||||
icon: 'none',
|
||||
});
|
||||
} finally {
|
||||
setCheckinLoading(false);
|
||||
}
|
||||
};
|
||||
|
||||
const handleTabChange = (key: string) => {
|
||||
setProductType(key);
|
||||
fetchProducts(1, key, true);
|
||||
};
|
||||
|
||||
const balance = account?.balance ?? 0;
|
||||
|
||||
return (
|
||||
<View className='mall-page'>
|
||||
{/* 积分余额卡片 */}
|
||||
<View className='mall-header'>
|
||||
<View className='points-card'>
|
||||
<View className='points-card-top'>
|
||||
<Text className='points-label'>当前积分</Text>
|
||||
<View
|
||||
className={`checkin-btn ${
|
||||
checkinStatus?.checked_in_today ? 'checked' : ''
|
||||
}`}
|
||||
onClick={handleCheckin}
|
||||
>
|
||||
<Text className='checkin-btn-text'>
|
||||
{checkinLoading
|
||||
? '...'
|
||||
: checkinStatus?.checked_in_today
|
||||
? '已签到'
|
||||
: '签到'}
|
||||
</Text>
|
||||
</View>
|
||||
</View>
|
||||
<Text className='points-balance'>{balance.toLocaleString()}</Text>
|
||||
{checkinStatus && checkinStatus.consecutive_days > 0 && (
|
||||
<Text className='points-streak'>
|
||||
已连续签到 {checkinStatus.consecutive_days} 天
|
||||
</Text>
|
||||
)}
|
||||
</View>
|
||||
</View>
|
||||
|
||||
{/* 商品类型切换 */}
|
||||
<View className='type-tabs'>
|
||||
{PRODUCT_TYPE_TABS.map((tab) => (
|
||||
<View
|
||||
key={tab.key}
|
||||
className={`type-tab ${productType === tab.key ? 'active' : ''}`}
|
||||
onClick={() => handleTabChange(tab.key)}
|
||||
>
|
||||
<Text
|
||||
className={`type-tab-text ${
|
||||
productType === tab.key ? 'active' : ''
|
||||
}`}
|
||||
>
|
||||
{tab.label}
|
||||
</Text>
|
||||
</View>
|
||||
))}
|
||||
</View>
|
||||
|
||||
{/* 商品列表 */}
|
||||
{products.length === 0 && !loading ? (
|
||||
<EmptyState
|
||||
icon='🎁'
|
||||
text='暂无商品'
|
||||
hint='更多好物即将上架'
|
||||
/>
|
||||
) : (
|
||||
<View className='product-grid'>
|
||||
{products.map((item) => (
|
||||
<View className='product-card' key={item.id}>
|
||||
<View
|
||||
className='product-image'
|
||||
style={{ backgroundColor: TYPE_COLORS[item.product_type] || '#94A3B8' }}
|
||||
>
|
||||
<Text className='product-image-icon'>
|
||||
{item.product_type === 'physical'
|
||||
? '📦'
|
||||
: item.product_type === 'service'
|
||||
? '🎫'
|
||||
: '👑'}
|
||||
</Text>
|
||||
</View>
|
||||
<View className='product-info'>
|
||||
<Text className='product-name'>{item.name}</Text>
|
||||
<View className='product-bottom'>
|
||||
<View className='product-points'>
|
||||
<Text className='product-points-icon'>🪙</Text>
|
||||
<Text className='product-points-value'>
|
||||
{item.points_cost}
|
||||
</Text>
|
||||
</View>
|
||||
{item.stock <= 0 ? (
|
||||
<Text className='product-stock out'>已兑完</Text>
|
||||
) : item.stock <= 10 ? (
|
||||
<Text className='product-stock low'>仅剩{item.stock}件</Text>
|
||||
) : null}
|
||||
</View>
|
||||
</View>
|
||||
</View>
|
||||
))}
|
||||
{loading && <Loading />}
|
||||
{!loading && products.length >= total && total > 0 && (
|
||||
<Loading text='没有更多了' />
|
||||
)}
|
||||
</View>
|
||||
)}
|
||||
</View>
|
||||
);
|
||||
}
|
||||
Reference in New Issue
Block a user