192 lines
6.9 KiB
TypeScript
192 lines
6.9 KiB
TypeScript
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
|