forked from gxwebsoft/mp-10550
赵忠林
ecfbdc0286
- 修改礼品卡颜色主题,使用渐变色提升视觉效果 - 添加礼品卡核销功能,包括生成和验证核销码 -优化礼品卡组件,增加状态显示和使用说明 - 新增礼品卡颜色测试页面,用于验证颜色
220 lines
8.3 KiB
TypeScript
220 lines
8.3 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 StatusTest: React.FC = () => {
|
||
// 测试不同状态的礼品卡
|
||
const testGifts: ShopGift[] = [
|
||
{
|
||
id: 1,
|
||
name: '未使用礼品卡',
|
||
goodsName: '杜尔伯特草原奶香牛上脑（2kg，分4小包）',
|
||
goodsImage: 'https://img.alicdn.com/imgextra/i1/2206571109/O1CN01QZxQJJ1Uw8QZxQJJ_!!2206571109.jpg',
|
||
description: '未使用状态的礼品卡',
|
||
code: 'UNUSED1234567890',
|
||
goodsId: 101,
|
||
faceValue: '200',
|
||
type: 10,
|
||
status: 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: 'USED001234567890',
|
||
goodsId: 102,
|
||
faceValue: '100',
|
||
type: 20,
|
||
status: 1, // 已使用
|
||
useTime: '2024-08-15 14:30:00',
|
||
useLocation: '星巴克王府井店',
|
||
instructions: '适用于虚拟商品兑换',
|
||
contactInfo: '400-800-8888'
|
||
},
|
||
{
|
||
id: 3,
|
||
name: '失效礼品卡',
|
||
goodsName: '海底捞4人套餐券',
|
||
goodsImage: 'https://img.alicdn.com/imgextra/i3/2206571109/O1CN01DEF456_!!2206571109.jpg',
|
||
description: '失效状态的礼品卡',
|
||
code: 'INVALID1234567890',
|
||
goodsId: 103,
|
||
faceValue: '300',
|
||
type: 30,
|
||
status: 2, // 失效
|
||
expireTime: '2024-07-31 23:59:59',
|
||
instructions: '适用于服务类商品兑换',
|
||
contactInfo: '400-800-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,
|
||
status: gift.status, // 使用 status 字段
|
||
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),
|
||
getStatusText(gift.status),
|
||
'测试卡片'
|
||
].filter(Boolean),
|
||
instructions: [
|
||
'这是状态测试卡片',
|
||
'请检查状态显示是否正确',
|
||
'不可兑换现金'
|
||
],
|
||
notices: [
|
||
'这是测试数据',
|
||
'请勿实际使用',
|
||
'仅用于状态测试'
|
||
]
|
||
})
|
||
},
|
||
showCode: gift.status === 0, // 只有未使用状态显示兑换码
|
||
showUseBtn: gift.status === 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 getStatusText = (status?: number): string => {
|
||
switch (status) {
|
||
case 0: return '未使用'
|
||
case 1: return '已使用'
|
||
case 2: 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 'purple'
|
||
}
|
||
}
|
||
|
||
const getExpectedBehavior = (status?: number): string => {
|
||
switch (status) {
|
||
case 0: return '显示兑换码和使用按钮'
|
||
case 1: return '显示使用时间，无兑换码和使用按钮'
|
||
case 2: return '显示失效状态，无兑换码和使用按钮'
|
||
default: return '未知行为'
|
||
}
|
||
}
|
||
|
||
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">
|
||
验证 status 字段替代 useStatus 字段
|
||
</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">• status=0 (未使用) → 显示"未使用"标签</Text>
|
||
<Text className="text-sm text-gray-600">• status=1 (已使用) → 显示"已使用"标签</Text>
|
||
<Text className="text-sm text-gray-600">• status=2 (失效) → 显示"失效"标签</Text>
|
||
</View>
|
||
</View>
|
||
|
||
{/* 修改说明 */}
|
||
<View className="bg-blue-50 mx-4 mt-4 p-4 rounded-lg">
|
||
<Text className="font-bold mb-2 text-blue-800">字段修改说明：</Text>
|
||
<View className="space-y-1">
|
||
<Text className="text-sm text-blue-700">✅ useStatus 字段已废弃</Text>
|
||
<Text className="text-sm text-blue-700">✅ 使用 status 字段替代</Text>
|
||
<Text className="text-sm text-blue-700">✅ 状态文本更新：可用→未使用，已过期→失效</Text>
|
||
<Text className="text-sm text-blue-700">✅ Tab标签文本同步更新</Text>
|
||
</View>
|
||
</View>
|
||
|
||
{/* 礼品卡列表 */}
|
||
<View className="p-4">
|
||
{testGifts.map((gift, index) => (
|
||
<View key={gift.id} className="mb-4">
|
||
<View className="bg-green-50 px-3 py-2 rounded-t-lg">
|
||
<Text className="text-sm font-medium text-green-800">
|
||
测试 {index + 1}: status={gift.status} → {getStatusText(gift.status)}
|
||
</Text>
|
||
<Text className="text-xs text-green-600">
|
||
预期行为: {getExpectedBehavior(gift.status)}
|
||
</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">□ status=0 的卡片显示"未使用"标签</Text>
|
||
<Text className="text-sm text-gray-600">□ status=0 的卡片显示兑换码和使用按钮</Text>
|
||
<Text className="text-sm text-gray-600">□ status=1 的卡片显示"已使用"标签</Text>
|
||
<Text className="text-sm text-gray-600">□ status=1 的卡片显示使用时间</Text>
|
||
<Text className="text-sm text-gray-600">□ status=1 的卡片不显示兑换码和使用按钮</Text>
|
||
<Text className="text-sm text-gray-600">□ status=2 的卡片显示"失效"标签</Text>
|
||
<Text className="text-sm text-gray-600">□ status=2 的卡片有状态遮罩</Text>
|
||
<Text className="text-sm text-gray-600">□ 所有非0状态的卡片都有disabled样式</Text>
|
||
</View>
|
||
</View>
|
||
|
||
{/* API 参数说明 */}
|
||
<View className="bg-yellow-50 mx-4 mb-4 p-4 rounded-lg">
|
||
<Text className="font-bold mb-2 text-yellow-800">API 参数更新：</Text>
|
||
<View className="space-y-1">
|
||
<Text className="text-sm text-yellow-700">• 筛选参数：useStatus → status</Text>
|
||
<Text className="text-sm text-yellow-700">• 返回字段：useStatus → status</Text>
|
||
<Text className="text-sm text-yellow-700">• 状态值：0未使用 1已使用 2失效</Text>
|
||
</View>
|
||
</View>
|
||
</View>
|
||
)
|
||
}
|
||
|
||
export default StatusTest
|