09013ab94a
- 新增 4 个 UI 组件: PointsCard/ProductCard/CheckinCalendar/CheckinModal - 商城首页 V2: 积分卡 + 快捷操作 + 分类标签 + 商品网格 - 商品详情 V2: 大图 + 信息卡 + 库存/余额状态 + 底部操作栏 - TabBar 新增商城入口(5 Tab: 首页/健康/商城/助手/我的) - 设计原型 docs/design/mp-05-mall-v2.html + SPEC.md 交付包 - CLAUDE.md 安全规范加固: 新增 §3.7 安全规范 6 条 + Feature DoD 安全清单扩展
51 lines
1.5 KiB
TypeScript
51 lines
1.5 KiB
TypeScript
import React from 'react';
|
|
import { View, Text } from '@tarojs/components';
|
|
import './index.scss';
|
|
|
|
interface PointsCardProps {
|
|
balance: number;
|
|
consecutiveDays: number;
|
|
checkedIn: boolean;
|
|
checkinLoading?: boolean;
|
|
onCheckin?: () => void;
|
|
}
|
|
|
|
const PointsCard: React.FC<PointsCardProps> = ({
|
|
balance,
|
|
consecutiveDays,
|
|
checkedIn,
|
|
checkinLoading = false,
|
|
onCheckin,
|
|
}) => {
|
|
return (
|
|
<View className='points-card'>
|
|
{/* 装饰圆 */}
|
|
<View className='points-card__deco points-card__deco--1' />
|
|
<View className='points-card__deco points-card__deco--2' />
|
|
<View className='points-card__deco points-card__deco--3' />
|
|
|
|
<View className='points-card__body'>
|
|
<View className='points-card__left'>
|
|
<Text className='points-card__label'>我的积分</Text>
|
|
<Text className='points-card__balance'>{balance.toLocaleString()}</Text>
|
|
{consecutiveDays > 0 && (
|
|
<Text className='points-card__streak'>
|
|
已连续签到 {consecutiveDays} 天
|
|
</Text>
|
|
)}
|
|
</View>
|
|
<View
|
|
className={`points-card__checkin ${checkedIn ? 'points-card__checkin--done' : ''}`}
|
|
onClick={() => !checkedIn && !checkinLoading && onCheckin?.()}
|
|
>
|
|
<Text className='points-card__checkin-text'>
|
|
{checkinLoading ? '...' : checkedIn ? '已签到' : '签到'}
|
|
</Text>
|
|
</View>
|
|
</View>
|
|
</View>
|
|
);
|
|
};
|
|
|
|
export default React.memo(PointsCard);
|