feat(admin): 从文章详情页面改为文章管理页面
- 修改页面配置,设置新的导航栏标题和样式 - 重新设计页面布局,增加搜索栏、文章列表和操作按钮 - 添加文章搜索、分页加载和删除功能 - 优化文章列表项的样式和交互 - 新增礼品卡相关API和组件 - 更新优惠券组件,增加到期提醒和筛选功能
This commit is contained in:
71
src/components/CouponStats.tsx
Normal file
71
src/components/CouponStats.tsx
Normal file
@@ -0,0 +1,71 @@
|
||||
import React from 'react'
|
||||
import { View, Text } from '@tarojs/components'
|
||||
import { Gift, Voucher, Clock } from '@nutui/icons-react-taro'
|
||||
|
||||
export interface CouponStatsProps {
|
||||
/** 可用优惠券数量 */
|
||||
availableCount: number
|
||||
/** 已使用优惠券数量 */
|
||||
usedCount: number
|
||||
/** 已过期优惠券数量 */
|
||||
expiredCount: number
|
||||
/** 点击统计项的回调 */
|
||||
onStatsClick?: (type: 'available' | 'used' | 'expired') => void
|
||||
}
|
||||
|
||||
const CouponStats: React.FC<CouponStatsProps> = ({
|
||||
availableCount,
|
||||
usedCount,
|
||||
expiredCount,
|
||||
onStatsClick
|
||||
}) => {
|
||||
const handleStatsClick = (type: 'available' | 'used' | 'expired') => {
|
||||
onStatsClick?.(type)
|
||||
}
|
||||
|
||||
return (
|
||||
<View className="bg-white mx-4 my-3 rounded-xl p-4">
|
||||
<Text className="text-lg font-semibold mb-4 text-gray-800">优惠券统计</Text>
|
||||
|
||||
<View className="flex justify-between">
|
||||
{/* 可用优惠券 */}
|
||||
<View
|
||||
className="flex-1 text-center py-3 mx-1 bg-red-50 rounded-lg"
|
||||
onClick={() => handleStatsClick('available')}
|
||||
>
|
||||
<View className="flex justify-center mb-2">
|
||||
<Gift size="24" className="text-red-500" />
|
||||
</View>
|
||||
<Text className="text-2xl font-bold text-red-500 block">{availableCount}</Text>
|
||||
<Text className="text-sm text-gray-600 mt-1">可用</Text>
|
||||
</View>
|
||||
|
||||
{/* 已使用优惠券 */}
|
||||
<View
|
||||
className="flex-1 text-center py-3 mx-1 bg-green-50 rounded-lg"
|
||||
onClick={() => handleStatsClick('used')}
|
||||
>
|
||||
<View className="flex justify-center mb-2">
|
||||
<Voucher size="24" className="text-green-500" />
|
||||
</View>
|
||||
<Text className="text-2xl font-bold text-green-500 block">{usedCount}</Text>
|
||||
<Text className="text-sm text-gray-600 mt-1">已使用</Text>
|
||||
</View>
|
||||
|
||||
{/* 已过期优惠券 */}
|
||||
<View
|
||||
className="flex-1 text-center py-3 mx-1 bg-gray-50 rounded-lg"
|
||||
onClick={() => handleStatsClick('expired')}
|
||||
>
|
||||
<View className="flex justify-center mb-2">
|
||||
<Clock size="24" className="text-gray-500" />
|
||||
</View>
|
||||
<Text className="text-2xl font-bold text-gray-500 block">{expiredCount}</Text>
|
||||
<Text className="text-sm text-gray-600 mt-1">已过期</Text>
|
||||
</View>
|
||||
</View>
|
||||
</View>
|
||||
)
|
||||
}
|
||||
|
||||
export default CouponStats
|
||||
Reference in New Issue
Block a user