gxwebsoft/glt-taro
1
0
Fork 0
Code Issues Pull Requests Actions Packages Projects Releases Wiki Activity

feat(components): 新增 GiftCard礼品卡组件

Browse Source 
- 新增 GiftCard 组件，支持多种类型礼品卡的展示和交互
- 组件包含商品信息、价格、折扣、使用指南等丰富功能- 优化图像展示，支持单
This commit is contained in:
赵忠林
2025-08-17 00:06:03 +08:00
parent 1b24a611a8
commit ecb5d9059a
22 changed files with 2788 additions and 191 deletions
Download Patch File Download Diff File Expand all files Collapse all files

191
src/user/gift/goodsname-test.tsx Normal file
View File

@@ -0,0 +1,191 @@
import React from 'react'
import { View, Text } from '@tarojs/components'
import GiftCard from '@/components/GiftCard'
import { ShopGift } from '@/api/shop/shopGift/model'
const GoodsNameTest: React.FC = () => {
// 测试数据：包含 goodsName 字段的礼品卡
const testGifts: ShopGift[] = [
{
id: 1,
name: '星巴克礼品卡',
goodsName: '星巴克经典拿铁咖啡券', // 后端新增的商品名称字段
goodsImage: 'https://img.alicdn.com/imgextra/i1/2206571109/O1CN01QZxQJJ1Uw8QZxQJJ_!!2206571109.jpg',
description: '享受醇香咖啡时光',
code: 'SB2024001234567890',
goodsId: 101,
faceValue: '100',
type: 20,
useStatus: 0,
expireTime: '2024-12-31 23:59:59',
instructions: '适用于全国星巴克门店',
contactInfo: '400-800-8888'
},
{
id: 2,
name: '麦当劳优惠券',
goodsName: '麦当劳巨无霸套餐券', // 商品名称
goodsImage: 'https://img.alicdn.com/imgextra/i2/2206571109/O1CN01ABC123_!!2206571109.jpg',
description: '美味汉堡套餐',
code: 'MCD2024987654321',
goodsId: 102,
faceValue: '50',
type: 20,
useStatus: 0,
expireTime: '2024-10-31 23:59:59',
instructions: '适用于全国麦当劳门店',
contactInfo: '400-517-517'
},
{
id: 3,
name: '通用礼品卡',
// 没有 goodsName，应该显示 name
goodsImage: 'https://img.alicdn.com/imgextra/i3/2206571109/O1CN01DEF456_!!2206571109.jpg',
description: '通用型礼品卡',
code: 'GEN2024555666777',
faceValue: '200',
type: 10,
useStatus: 0,
expireTime: '2024-11-30 23:59:59',
instructions: '可在指定商户使用',
contactInfo: '400-123-456'
},
{
id: 4,
name: '海底捞火锅券',
goodsName: '海底捞4人套餐券', // 已使用状态的商品
goodsImage: 'https://img.alicdn.com/imgextra/i4/2206571109/O1CN01GHI789_!!2206571109.jpg',
description: '享受正宗川味火锅',
code: 'HDL2024888999000',
goodsId: 103,
faceValue: '300',
type: 30,
useStatus: 1, // 已使用
useTime: '2024-08-15 19:30:00',
useLocation: '海底捞王府井店',
instructions: '需提前预约',
contactInfo: '400-869-8888'
}
]
// 转换数据格式
const transformGiftData = (gift: ShopGift) => {
return {
id: gift.id || 0,
name: gift.name || '礼品卡',
goodsName: gift.goodsName, // 传递商品名称
description: gift.description || gift.instructions,
code: gift.code,
goodsImage: gift.goodsImage,
faceValue: gift.faceValue,
type: gift.type,
useStatus: gift.useStatus,
expireTime: gift.expireTime,
useTime: gift.useTime,
useLocation: gift.useLocation,
contactInfo: gift.contactInfo,
goodsInfo: {
...((gift.goodsName || gift.goodsId) && {
specification: `礼品卡面值：¥${gift.faceValue}`,
category: getTypeText(gift.type),
tags: [
getTypeText(gift.type),
gift.useStatus === 0 ? '可使用' : gift.useStatus === 1 ? '已使用' : '已过期',
...(gift.goodsName ? ['商品礼品卡'] : [])
].filter(Boolean),
instructions: gift.instructions ? [gift.instructions] : [
'请在有效期内使用',
'出示兑换码即可使用',
'不可兑换现金'
],
notices: [
'礼品卡一经使用不可退换',
'请妥善保管兑换码',
'如有疑问请联系客服'
]
})
},
showCode: gift.useStatus === 0,
showUseBtn: gift.useStatus === 0,
showDetailBtn: true,
showGoodsDetail: true,
theme: getThemeByType(gift.type),
onUse: () => console.log('使用:', gift.goodsName || gift.name),
onDetail: () => console.log('详情:', gift.goodsName || gift.name),
onClick: () => console.log('点击:', gift.goodsName || gift.name)
}
}
const getTypeText = (type?: number): string => {
switch (type) {
case 10: return '实物礼品卡'
case 20: return '虚拟礼品卡'
case 30: return '服务礼品卡'
default: return '礼品卡'
}
}
const getThemeByType = (type?: number): 'gold' | 'silver' | 'bronze' | 'blue' | 'green' | 'purple' => {
switch (type) {
case 10: return 'gold'
case 20: return 'blue'
case 30: return 'green'
default: return 'silver'
}
}
return (
<View className="bg-gray-50 min-h-screen">
{/* 页面标题 */}
<View className="bg-white px-4 py-3 border-b border-gray-100">
<Text className="text-lg font-bold text-center">
商品名称字段测试
</Text>
<Text className="text-sm text-gray-600 text-center mt-1">
测试 goodsName 字段的显示效果
</Text>
</View>
{/* 测试说明 */}
<View className="bg-white mx-4 mt-4 p-4 rounded-lg">
<Text className="font-bold mb-2">测试说明：</Text>
<View className="space-y-1">
<Text className="text-sm text-gray-600">• 第1张：有 goodsName，显示"星巴克经典拿铁咖啡券"</Text>
<Text className="text-sm text-gray-600">• 第2张：有 goodsName，显示"麦当劳巨无霸套餐券"</Text>
<Text className="text-sm text-gray-600">• 第3张：无 goodsName，显示"通用礼品卡"</Text>
<Text className="text-sm text-gray-600">• 第4张：已使用状态，显示"海底捞4人套餐券"</Text>
</View>
</View>
{/* 礼品卡列表 */}
<View className="p-4">
{testGifts.map((gift, index) => (
<View key={gift.id} className="mb-4">
<View className="bg-blue-50 px-3 py-2 rounded-t-lg">
<Text className="text-sm font-medium text-blue-800">
测试 {index + 1}: {gift.goodsName ? `goodsName="${gift.goodsName}"` : '无 goodsName'}
</Text>
<Text className="text-xs text-blue-600">
name="{gift.name}"
</Text>
</View>
<GiftCard {...transformGiftData(gift)} />
</View>
))}
</View>
{/* 结果说明 */}
<View className="bg-white mx-4 mb-4 p-4 rounded-lg">
<Text className="font-bold mb-2">预期结果：</Text>
<View className="space-y-1">
<Text className="text-sm text-gray-600">✅ 有 goodsName 时，卡片标题显示商品名称</Text>
<Text className="text-sm text-gray-600">✅ 无 goodsName 时，卡片标题显示礼品卡名称</Text>
<Text className="text-sm text-gray-600">✅ 商品信息区域显示相关标签和说明</Text>
<Text className="text-sm text-gray-600">✅ 不同状态的视觉效果正确</Text>
</View>
</View>
</View>
)
}
export default GoodsNameTest