202 lines
6.6 KiB
TypeScript
202 lines
6.6 KiB
TypeScript
import React, { useState } from 'react'
|
||
import { View, Text } from '@tarojs/components'
|
||
import { Button, Tabs, TabPane } from '@nutui/nutui-react-taro'
|
||
import GiftCard from '@/components/GiftCard'
|
||
import { ShopGift } from '@/api/shop/shopGift/model'
|
||
|
||
const GiftCardDemo: React.FC = () => {
|
||
const [activeTab, setActiveTab] = useState('0')
|
||
|
||
// 模拟不同类型的礼品卡数据
|
||
const mockGifts: 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: '海底捞火锅代金券',
|
||
goodsImage: 'https://img.alicdn.com/imgextra/i3/2206571109/O1CN01DEF456_!!2206571109.jpg',
|
||
description: '享受正宗川味火锅',
|
||
code: 'HDL2024555666777',
|
||
goodsId: 103,
|
||
faceValue: '200',
|
||
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.goodsName || gift.name || '礼品卡',
|
||
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.goodsId && {
|
||
specification: `礼品卡面值：¥${gift.faceValue}`,
|
||
category: getTypeText(gift.type),
|
||
tags: [
|
||
getTypeText(gift.type),
|
||
gift.useStatus === 0 ? '可使用' : gift.useStatus === 1 ? '已使用' : '已过期',
|
||
'全国通用',
|
||
gift.type === 20 ? '即买即用' : '需预约'
|
||
].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: () => handleUse(gift),
|
||
onDetail: () => handleDetail(gift),
|
||
onClick: () => handleClick(gift)
|
||
}
|
||
}
|
||
|
||
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'
|
||
}
|
||
}
|
||
|
||
const handleUse = (gift: ShopGift) => {
|
||
console.log('使用礼品卡:', gift.goodsName)
|
||
}
|
||
|
||
const handleDetail = (gift: ShopGift) => {
|
||
console.log('查看详情:', gift.goodsName)
|
||
}
|
||
|
||
const handleClick = (gift: ShopGift) => {
|
||
console.log('点击礼品卡:', gift.goodsName)
|
||
}
|
||
|
||
// 根据状态筛选礼品卡
|
||
const getFilteredGifts = () => {
|
||
const statusMap = {
|
||
'0': 0, // 可用
|
||
'1': 1, // 已使用
|
||
'2': 2 // 已过期
|
||
}
|
||
const targetStatus = statusMap[activeTab as keyof typeof statusMap]
|
||
return mockGifts.filter(gift => gift.useStatus === targetStatus)
|
||
}
|
||
|
||
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>
|
||
</View>
|
||
|
||
{/* Tab切换 */}
|
||
<View className="bg-white">
|
||
<Tabs value={activeTab} onChange={setActiveTab}>
|
||
<TabPane title="可用" value="0" />
|
||
<TabPane title="已使用" value="1" />
|
||
<TabPane title="已过期" value="2" />
|
||
</Tabs>
|
||
</View>
|
||
|
||
{/* 礼品卡列表 */}
|
||
<View className="p-4">
|
||
{getFilteredGifts().map((gift) => (
|
||
<View key={gift.id} className="mb-4">
|
||
<GiftCard {...transformGiftData(gift)} />
|
||
</View>
|
||
))}
|
||
|
||
{getFilteredGifts().length === 0 && (
|
||
<View className="text-center py-16">
|
||
<Text className="text-gray-500">
|
||
{activeTab === '0' ? '暂无可用礼品卡' :
|
||
activeTab === '1' ? '暂无已使用礼品卡' :
|
||
'暂无已过期礼品卡'}
|
||
</Text>
|
||
</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">• 显示商品图片（goodsImage）</Text>
|
||
<Text className="text-sm text-gray-600">• 丰富的商品信息展示</Text>
|
||
<Text className="text-sm text-gray-600">• 不同状态的视觉效果</Text>
|
||
<Text className="text-sm text-gray-600">• 响应式设计适配</Text>
|
||
</View>
|
||
</View>
|
||
</View>
|
||
)
|
||
}
|
||
|
||
export default GiftCardDemo
|