You can not select more than 25 topics
Topics must start with a letter or number, can include dashes ('-') and can be up to 35 characters long.
87 lines
3.1 KiB
87 lines
3.1 KiB
import React from 'react'
|
|
import { View, Text } from '@tarojs/components'
|
|
import { Gift, Voucher, Clock, Star } from '@nutui/icons-react-taro'
|
|
|
|
export interface GiftCardStatsProps {
|
|
/** 可用礼品卡数量 */
|
|
availableCount: number
|
|
/** 已使用礼品卡数量 */
|
|
usedCount: number
|
|
/** 已过期礼品卡数量 */
|
|
expiredCount: number
|
|
/** 礼品卡总价值 */
|
|
totalValue?: number
|
|
/** 点击统计项的回调 */
|
|
onStatsClick?: (type: 'available' | 'used' | 'expired' | 'total') => void
|
|
}
|
|
|
|
const GiftCardStats: React.FC<GiftCardStatsProps> = ({
|
|
availableCount,
|
|
usedCount,
|
|
expiredCount,
|
|
totalValue,
|
|
onStatsClick
|
|
}) => {
|
|
const handleStatsClick = (type: 'available' | 'used' | 'expired' | 'total') => {
|
|
onStatsClick?.(type)
|
|
}
|
|
|
|
return (
|
|
<View className="bg-white mx-4 my-3 rounded-xl p-3 shadow-sm">
|
|
{/* 紧凑的统计卡片 - 2x2 网格 */}
|
|
<View className="grid grid-cols-2 gap-2">
|
|
{/* 可用礼品卡 */}
|
|
<View
|
|
className="flex items-center justify-between p-3 bg-yellow-50 rounded-lg border border-yellow-200"
|
|
onClick={() => handleStatsClick('available')}
|
|
>
|
|
<View className="flex items-center">
|
|
<Gift size="20" className="text-yellow-600 mr-2" />
|
|
<Text className="text-sm text-gray-600">可用</Text>
|
|
</View>
|
|
<Text className="text-lg font-bold text-yellow-600">{availableCount}</Text>
|
|
</View>
|
|
|
|
{/* 已使用礼品卡 */}
|
|
<View
|
|
className="flex items-center justify-between p-3 bg-green-50 rounded-lg border border-green-200"
|
|
onClick={() => handleStatsClick('used')}
|
|
>
|
|
<View className="flex items-center">
|
|
<Voucher size="20" className="text-green-600 mr-2" />
|
|
<Text className="text-sm text-gray-600">已使用</Text>
|
|
</View>
|
|
<Text className="text-lg font-bold text-green-600">{usedCount}</Text>
|
|
</View>
|
|
|
|
{/* 已过期礼品卡 */}
|
|
<View
|
|
className="flex items-center justify-between p-3 bg-gray-50 rounded-lg border border-gray-200"
|
|
onClick={() => handleStatsClick('expired')}
|
|
>
|
|
<View className="flex items-center">
|
|
<Clock size="20" className="text-gray-500 mr-2" />
|
|
<Text className="text-sm text-gray-600">已过期</Text>
|
|
</View>
|
|
<Text className="text-lg font-bold text-gray-500">{expiredCount}</Text>
|
|
</View>
|
|
|
|
{/* 总价值 */}
|
|
{totalValue !== undefined && (
|
|
<View
|
|
className="flex items-center justify-between p-3 bg-purple-50 rounded-lg border border-purple-200"
|
|
onClick={() => handleStatsClick('total')}
|
|
>
|
|
<View className="flex items-center">
|
|
<Star size="20" className="text-purple-600 mr-2" />
|
|
<Text className="text-sm text-gray-600">总价值</Text>
|
|
</View>
|
|
<Text className="text-lg font-bold text-purple-600">¥{totalValue}</Text>
|
|
</View>
|
|
)}
|
|
</View>
|
|
</View>
|
|
)
|
|
}
|
|
|
|
export default GiftCardStats
|