forked from gxwebsoft/mp-10550
332 lines
9.3 KiB
TypeScript
332 lines
9.3 KiB
TypeScript
import {useState, useEffect} from "react";
|
||
import {useRouter} from '@tarojs/taro'
|
||
import {Button, ConfigProvider, Tag, Divider, Image} from '@nutui/nutui-react-taro'
|
||
import {ArrowLeft, Gift, Clock, Location, Phone, Share, Copy} from '@nutui/icons-react-taro'
|
||
import Taro from '@tarojs/taro'
|
||
import {View, Text} from '@tarojs/components'
|
||
import {ShopGift} from "@/api/shop/shopGift/model";
|
||
import {getShopGift} from "@/api/shop/shopGift";
|
||
import GiftCardShare from "@/components/GiftCardShare";
|
||
import dayjs from "dayjs";
|
||
|
||
const GiftCardDetail = () => {
|
||
const router = useRouter()
|
||
const [gift, setGift] = useState<ShopGift | null>(null)
|
||
const [loading, setLoading] = useState(true)
|
||
const [showShare, setShowShare] = useState(false)
|
||
const giftId = router.params.id
|
||
|
||
useEffect(() => {
|
||
if (giftId) {
|
||
loadGiftDetail()
|
||
}
|
||
}, [giftId])
|
||
|
||
const loadGiftDetail = async () => {
|
||
try {
|
||
setLoading(true)
|
||
const data = await getShopGift(Number(giftId))
|
||
setGift(data)
|
||
} catch (error) {
|
||
console.error('获取礼品卡详情失败:', error)
|
||
Taro.showToast({
|
||
title: '获取礼品卡详情失败',
|
||
icon: 'error'
|
||
})
|
||
} finally {
|
||
setLoading(false)
|
||
}
|
||
}
|
||
|
||
// 获取礼品卡类型文本
|
||
const getGiftTypeText = (type?: number) => {
|
||
switch (type) {
|
||
case 10: return '实物礼品卡'
|
||
case 20: return '虚拟礼品卡'
|
||
case 30: return '服务礼品卡'
|
||
default: return '礼品卡'
|
||
}
|
||
}
|
||
|
||
// 获取礼品卡面值显示
|
||
const getGiftValueDisplay = () => {
|
||
if (!gift || !gift.faceValue) return ''
|
||
return `¥${gift.faceValue}`
|
||
}
|
||
|
||
// 获取使用条件文本
|
||
const getUsageText = () => {
|
||
if (!gift) return ''
|
||
|
||
if (gift.instructions) {
|
||
return gift.instructions
|
||
}
|
||
|
||
switch (gift.type) {
|
||
case 10: return '请到指定门店使用此礼品卡'
|
||
case 20: return '可在线上平台直接使用'
|
||
case 30: return '请联系客服预约服务时间'
|
||
default: return '请按照使用说明进行操作'
|
||
}
|
||
}
|
||
|
||
// 获取有效期文本
|
||
const getValidityText = () => {
|
||
if (!gift) return ''
|
||
|
||
if (gift.validDays) {
|
||
return `有效期${gift.validDays}天`
|
||
} else if (gift.expireTime) {
|
||
return `有效期至 ${dayjs(gift.expireTime).format('YYYY年MM月DD日')}`
|
||
} else {
|
||
return '长期有效'
|
||
}
|
||
}
|
||
|
||
// 获取礼品卡状态
|
||
const getGiftStatus = () => {
|
||
if (!gift) return { status: 0, text: '未知', color: 'default' }
|
||
|
||
switch (gift.useStatus) {
|
||
case 0:
|
||
return { status: 0, text: '可使用', color: 'success' }
|
||
case 1:
|
||
return { status: 1, text: '已使用', color: 'warning' }
|
||
case 2:
|
||
return { status: 2, text: '已过期', color: 'danger' }
|
||
default:
|
||
return { status: 0, text: '未知', color: 'default' }
|
||
}
|
||
}
|
||
|
||
// 使用礼品卡
|
||
const handleUseGift = () => {
|
||
if (!gift) return
|
||
|
||
Taro.showModal({
|
||
title: '使用礼品卡',
|
||
content: `确定要使用"${gift.name}"吗？`,
|
||
success: (res) => {
|
||
if (res.confirm) {
|
||
// 跳转到礼品卡使用页面
|
||
Taro.navigateTo({
|
||
url: `/user/gift/use?id=${gift.id}`
|
||
})
|
||
}
|
||
}
|
||
})
|
||
}
|
||
|
||
// 复制兑换码
|
||
const handleCopyCode = () => {
|
||
if (!gift?.code) return
|
||
|
||
Taro.setClipboardData({
|
||
data: gift.code,
|
||
success: () => {
|
||
Taro.showToast({
|
||
title: '兑换码已复制',
|
||
icon: 'success'
|
||
})
|
||
},
|
||
fail: () => {
|
||
Taro.showToast({
|
||
title: '复制失败',
|
||
icon: 'error'
|
||
})
|
||
}
|
||
})
|
||
}
|
||
|
||
// 返回上一页
|
||
const handleBack = () => {
|
||
Taro.navigateBack()
|
||
}
|
||
|
||
if (loading) {
|
||
return (
|
||
<ConfigProvider>
|
||
<View className="flex justify-center items-center h-screen">
|
||
<Text>加载中...</Text>
|
||
</View>
|
||
</ConfigProvider>
|
||
)
|
||
}
|
||
|
||
if (!gift) {
|
||
return (
|
||
<ConfigProvider>
|
||
<View className="flex flex-col justify-center items-center h-screen">
|
||
<Text className="text-gray-500 mb-4">礼品卡不存在</Text>
|
||
<Button onClick={handleBack}>返回</Button>
|
||
</View>
|
||
</ConfigProvider>
|
||
)
|
||
}
|
||
|
||
const statusInfo = getGiftStatus()
|
||
|
||
return (
|
||
<ConfigProvider>
|
||
{/* 礼品卡卡片 */}
|
||
<View className="m-4 p-6 rounded-2xl text-white" style={{backgroundColor: '#fbbf24'}}>
|
||
<View className="flex items-center justify-between mb-4">
|
||
<View className="flex-1">
|
||
<Text className="text-4xl font-bold">{getGiftValueDisplay()}</Text>
|
||
<Text className="text-lg opacity-90 mt-1">{getGiftTypeText(gift.type)}</Text>
|
||
</View>
|
||
{gift.goodsImage ? (
|
||
<Image
|
||
src={gift.goodsImage}
|
||
className="w-16 h-16 rounded-lg"
|
||
mode="aspectFill"
|
||
/>
|
||
) : (
|
||
<Gift size="40" />
|
||
)}
|
||
</View>
|
||
|
||
<Text className="text-xl font-semibold mb-2">{gift.name}</Text>
|
||
<Text className="text-base opacity-90">{gift.description || getUsageText()}</Text>
|
||
|
||
{/* 兑换码 */}
|
||
{gift.code && (
|
||
<View className="mt-4 p-3 bg-white bg-opacity-20 rounded-lg">
|
||
<View className="flex items-center justify-between">
|
||
<View>
|
||
<Text className="text-sm opacity-80">兑换码</Text>
|
||
<Text className="text-lg font-mono font-bold">{gift.code}</Text>
|
||
</View>
|
||
<Button
|
||
size="small"
|
||
fill="outline"
|
||
icon={<Copy />}
|
||
onClick={handleCopyCode}
|
||
className="border-white text-white"
|
||
>
|
||
复制
|
||
</Button>
|
||
</View>
|
||
</View>
|
||
)}
|
||
</View>
|
||
|
||
{/* 详细信息 */}
|
||
<View className="bg-white mx-4 rounded-xl p-4">
|
||
<Text className="text-lg font-semibold mb-4">使用说明</Text>
|
||
|
||
<View>
|
||
<View className="flex items-center mb-3">
|
||
<Clock size="16" className="text-gray-400 mr-3" />
|
||
<View>
|
||
<Text className="text-gray-600 text-sm">有效期</Text>
|
||
<Text className="text-gray-900">{getValidityText()}</Text>
|
||
</View>
|
||
</View>
|
||
|
||
<Divider />
|
||
|
||
<View className="flex items-center mb-3">
|
||
<Gift size="16" className="text-gray-400 mr-3" />
|
||
<View>
|
||
<Text className="text-gray-600 text-sm">礼品卡类型</Text>
|
||
<Text className="text-gray-900">{getGiftTypeText(gift.type)}</Text>
|
||
</View>
|
||
</View>
|
||
|
||
{gift.useLocation && (
|
||
<>
|
||
<Divider />
|
||
<View className="flex items-center">
|
||
<Location size="16" className="text-gray-400 mr-3" />
|
||
<View>
|
||
<Text className="text-gray-600 text-sm">使用地址</Text>
|
||
<Text className="text-gray-900">{gift.useLocation}</Text>
|
||
</View>
|
||
</View>
|
||
</>
|
||
)}
|
||
|
||
{gift.contactInfo && (
|
||
<>
|
||
<Divider />
|
||
<View className="flex items-center">
|
||
<Phone size="16" className="text-gray-400 mr-3" />
|
||
<View>
|
||
<Text className="text-gray-600 text-sm">客服联系</Text>
|
||
<Text className="text-gray-900">{gift.contactInfo}</Text>
|
||
</View>
|
||
</View>
|
||
</>
|
||
)}
|
||
|
||
{gift.instructions && (
|
||
<>
|
||
<Divider />
|
||
<View>
|
||
<Text className="text-gray-600 text-sm mb-2">使用说明</Text>
|
||
<Text className="text-gray-900 leading-relaxed">{gift.instructions}</Text>
|
||
</View>
|
||
</>
|
||
)}
|
||
|
||
{gift.useTime && (
|
||
<>
|
||
<Divider />
|
||
<View>
|
||
<Text className="text-gray-600 text-sm mb-2">使用记录</Text>
|
||
<Text className="text-gray-900">使用时间：{dayjs(gift.useTime).format('YYYY-MM-DD HH:mm')}</Text>
|
||
</View>
|
||
</>
|
||
)}
|
||
</View>
|
||
</View>
|
||
|
||
{/* 底部操作按钮 */}
|
||
{statusInfo.status === 0 && (
|
||
<View className="fixed bottom-0 left-0 right-0 p-4 bg-white border-t border-gray-100">
|
||
<View className="flex gap-3">
|
||
{gift.code && (
|
||
<Button
|
||
fill="outline"
|
||
size="large"
|
||
className="flex-1"
|
||
icon={<Copy />}
|
||
onClick={handleCopyCode}
|
||
>
|
||
复制兑换码
|
||
</Button>
|
||
)}
|
||
<Button
|
||
type="primary"
|
||
size="large"
|
||
className="flex-1"
|
||
onClick={handleUseGift}
|
||
>
|
||
立即使用
|
||
</Button>
|
||
</View>
|
||
</View>
|
||
)}
|
||
|
||
{/* 分享弹窗 */}
|
||
{gift && (
|
||
<GiftCardShare
|
||
visible={showShare}
|
||
giftCard={{
|
||
id: gift.id || 0,
|
||
name: gift.name || '',
|
||
type: gift.type || 10,
|
||
faceValue: gift.faceValue || '0',
|
||
code: gift.code,
|
||
description: gift.description
|
||
}}
|
||
onClose={() => setShowShare(false)}
|
||
/>
|
||
)}
|
||
</ConfigProvider>
|
||
);
|
||
};
|
||
|
||
export default GiftCardDetail;
|