forked from gxwebsoft/mp-10550
141 lines
3.6 KiB
TypeScript
141 lines
3.6 KiB
TypeScript
import React from 'react'
|
||
import { View } from '@tarojs/components'
|
||
import GiftCard from './GiftCard'
|
||
|
||
const GiftCardExample: React.FC = () => {
|
||
// 示例数据
|
||
const giftCardData = {
|
||
id: 1,
|
||
name: '星巴克咖啡礼品卡',
|
||
description: '享受醇香咖啡时光，适用于全国星巴克门店',
|
||
code: 'SB2024001234567890',
|
||
goodsImages: [
|
||
'https://example.com/starbucks-card-1.jpg',
|
||
'https://example.com/starbucks-card-2.jpg',
|
||
'https://example.com/starbucks-card-3.jpg'
|
||
],
|
||
faceValue: '100',
|
||
originalPrice: '120',
|
||
type: 20, // 虚拟礼品卡
|
||
useStatus: 0, // 可用
|
||
expireTime: '2024-12-31 23:59:59',
|
||
contactInfo: '400-800-8888',
|
||
goodsInfo: {
|
||
brand: '星巴克',
|
||
specification: '电子礼品卡',
|
||
category: '餐饮美食',
|
||
stock: 999,
|
||
rating: 4.8,
|
||
reviewCount: 1256,
|
||
tags: ['热门', '全国通用', '无需预约', '即买即用'],
|
||
instructions: [
|
||
'出示兑换码至门店收银台即可使用',
|
||
'可用于购买任意饮品和食品',
|
||
'不可兑换现金，不设找零',
|
||
'单次可使用多张礼品卡'
|
||
],
|
||
notices: [
|
||
'礼品卡一经售出，不可退换',
|
||
'请妥善保管兑换码，遗失不补',
|
||
'部分特殊商品可能不适用',
|
||
'具体使用规则以门店公告为准'
|
||
],
|
||
applicableStores: [
|
||
'全国星巴克门店',
|
||
'机场店',
|
||
'高铁站店',
|
||
'商场店'
|
||
]
|
||
},
|
||
promotionInfo: {
|
||
type: 'discount' as const,
|
||
description: '限时优惠：满100减20，买2张送1张咖啡券',
|
||
amount: '20',
|
||
validUntil: '2024-09-30 23:59:59'
|
||
},
|
||
showCode: true,
|
||
showUseBtn: true,
|
||
showDetailBtn: true,
|
||
showGoodsDetail: true,
|
||
theme: 'green' as const
|
||
}
|
||
|
||
const handleUse = () => {
|
||
console.log('使用礼品卡')
|
||
}
|
||
|
||
const handleDetail = () => {
|
||
console.log('查看详情')
|
||
}
|
||
|
||
const handleClick = () => {
|
||
console.log('点击礼品卡')
|
||
}
|
||
|
||
return (
|
||
<View className="gift-card-example">
|
||
<GiftCard
|
||
{...giftCardData}
|
||
onUse={handleUse}
|
||
onDetail={handleDetail}
|
||
onClick={handleClick}
|
||
/>
|
||
|
||
{/* 简化版本示例 */}
|
||
<GiftCard
|
||
id={2}
|
||
name="麦当劳优惠券"
|
||
description="美味汉堡套餐，限时优惠"
|
||
goodsImage="https://example.com/mcd-card.jpg"
|
||
faceValue="50"
|
||
originalPrice="60"
|
||
type={20}
|
||
useStatus={0}
|
||
expireTime="2024-10-31 23:59:59"
|
||
goodsInfo={{
|
||
brand: '麦当劳',
|
||
category: '快餐',
|
||
rating: 4.5,
|
||
reviewCount: 892,
|
||
tags: ['快餐', '全国通用']
|
||
}}
|
||
showCode={false}
|
||
showUseBtn={true}
|
||
showDetailBtn={true}
|
||
showGoodsDetail={false}
|
||
theme="blue"
|
||
onUse={handleUse}
|
||
onDetail={handleDetail}
|
||
onClick={handleClick}
|
||
/>
|
||
|
||
{/* 已使用状态示例 */}
|
||
<GiftCard
|
||
id={3}
|
||
name="海底捞火锅券"
|
||
description="享受正宗川味火锅"
|
||
goodsImage="https://example.com/haidilao-card.jpg"
|
||
faceValue="200"
|
||
type={30}
|
||
useStatus={1}
|
||
takeTime="2024-08-15 19:30:00"
|
||
useLocation="海底捞王府井店"
|
||
goodsInfo={{
|
||
brand: '海底捞',
|
||
category: '火锅',
|
||
rating: 4.9,
|
||
reviewCount: 2341
|
||
}}
|
||
showCode={false}
|
||
showUseBtn={false}
|
||
showDetailBtn={true}
|
||
theme="gold"
|
||
onDetail={handleDetail}
|
||
onClick={handleClick}
|
||
/>
|
||
</View>
|
||
)
|
||
}
|
||
|
||
export default GiftCardExample
|