developer/template-10584
1
0
Fork 0
forked from gxwebsoft/mp-10550
Code Pull Requests Activity

refactor(shop): 重构优惠券和礼品卡相关功能

Browse Source 
- 优化了优惠券和礼品卡的搜索功能
- 重新设计了统计卡片的样式和布局- 改进了优惠券和礼品卡的领取和兑换流程
- 统一了图标样式和大小
- 调整了部分组件的显示逻辑
This commit is contained in:
赵忠林
2025-08-13 11:17:00 +08:00
parent 5d4dc4518f
commit 89cadc3886
11 changed files with 74 additions and 68 deletions
Download Patch File Download Diff File Expand all files Collapse all files

2
src/components/CouponCard.tsx
View File

@@ -129,6 +129,8 @@ const CouponCard: React.FC<CouponCardProps> = ({
return ''
}
console.log(getValidityText)
const themeClass = getThemeClass()
return (

4
src/components/CouponStats.tsx
View File

@@ -25,9 +25,9 @@ const CouponStats: React.FC<CouponStatsProps> = ({
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>
<Text className="font-semibold text-gray-800">优惠券统计</Text>
<View className="flex justify-between">
<View className="flex justify-between mt-2">
{/* 可用优惠券 */}
<View
className="flex-1 text-center py-3 mx-1 bg-red-50 rounded-lg"

43
src/components/GiftCardStats.tsx
View File

@@ -1,6 +1,6 @@
import React from 'react'
import { View, Text } from '@tarojs/components'
import { Gift, Voucher, Clock } from '@nutui/icons-react-taro'
import { Gift, Voucher, Clock, Star } from '@nutui/icons-react-taro'
export interface GiftCardStatsProps {
/** 可用礼品卡数量 */
@@ -16,26 +16,27 @@ export interface GiftCardStatsProps {
}
const GiftCardStats: React.FC<GiftCardStatsProps> = ({
availableCount,
usedCount,
expiredCount,
onStatsClick
}) => {
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">
<View className="bg-white mx-4 my-3 rounded-xl p-3 shadow-sm hidden">
{/* 紧凑的统计卡片 - 2x2 网格 */}
<View className="grid grid-cols-3 gap-2">
<View className="grid grid-cols-2 gap-2">
{/* 可用礼品卡 */}
<View
className="flex items-center justify-between p-2 bg-yellow-50 rounded-lg border border-yellow-200"
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="16" className="text-yellow-600 mr-1" />
<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>
@@ -43,11 +44,11 @@ const GiftCardStats: React.FC<GiftCardStatsProps> = ({
{/* 已使用礼品卡 */}
<View
className="flex items-center justify-between p-2 bg-green-50 rounded-lg border border-green-200"
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="16" className="text-green-600 mr-1" />
<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>
@@ -55,15 +56,29 @@ const GiftCardStats: React.FC<GiftCardStatsProps> = ({
{/* 已过期礼品卡 */}
<View
className="flex items-center justify-between p-2 bg-gray-50 rounded-lg border border-gray-200"
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="16" className="text-gray-500 mr-1" />
<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>
)