feat(admin): 从文章详情页面改为文章管理页面
- 修改页面配置，设置新的导航栏标题和样式 - 重新设计页面布局，增加搜索栏、文章列表和操作按钮 - 添加文章搜索、分页加载和删除功能 - 优化文章列表项的样式和交互 - 新增礼品卡相关API和组件 - 更新优惠券组件，增加到期提醒和筛选功能
This commit is contained in:
266
src/user/gift/redeem.tsx
Normal file
266
src/user/gift/redeem.tsx
Normal file
@@ -0,0 +1,266 @@
|
||||
import {useState, useEffect} from "react";
|
||||
import {useRouter} from '@tarojs/taro'
|
||||
import {Button, ConfigProvider, Input, Divider} from '@nutui/nutui-react-taro'
|
||||
import {ArrowLeft, QrCode, Gift, Voucher} from '@nutui/icons-react-taro'
|
||||
import Taro from '@tarojs/taro'
|
||||
import {View, Text} from '@tarojs/components'
|
||||
import {ShopGift} from "@/api/shop/shopGift/model";
|
||||
import {validateGiftCode, redeemGift} from "@/api/shop/shopGift";
|
||||
import GiftCard from "@/components/GiftCard";
|
||||
|
||||
const GiftCardRedeem = () => {
|
||||
const router = useRouter()
|
||||
const [code, setCode] = useState('')
|
||||
const [loading, setLoading] = useState(false)
|
||||
const [validating, setValidating] = useState(false)
|
||||
const [validGift, setValidGift] = useState<ShopGift | null>(null)
|
||||
const [redeemSuccess, setRedeemSuccess] = useState(false)
|
||||
|
||||
// 从路由参数获取扫码结果
|
||||
useEffect(() => {
|
||||
if (router.params.code) {
|
||||
const scannedCode = decodeURIComponent(router.params.code)
|
||||
setCode(scannedCode)
|
||||
handleValidateCode(scannedCode)
|
||||
}
|
||||
}, [router.params.code])
|
||||
|
||||
// 验证兑换码
|
||||
const handleValidateCode = async (inputCode?: string) => {
|
||||
const codeToValidate = inputCode || code
|
||||
if (!codeToValidate.trim()) {
|
||||
Taro.showToast({
|
||||
title: '请输入兑换码',
|
||||
icon: 'none'
|
||||
})
|
||||
return
|
||||
}
|
||||
|
||||
setValidating(true)
|
||||
try {
|
||||
const gift = await validateGiftCode(codeToValidate.trim())
|
||||
setValidGift(gift)
|
||||
Taro.showToast({
|
||||
title: '验证成功',
|
||||
icon: 'success'
|
||||
})
|
||||
} catch (error) {
|
||||
console.error('验证兑换码失败:', error)
|
||||
setValidGift(null)
|
||||
Taro.showToast({
|
||||
title: '兑换码无效或已使用',
|
||||
icon: 'error'
|
||||
})
|
||||
} finally {
|
||||
setValidating(false)
|
||||
}
|
||||
}
|
||||
|
||||
// 兑换礼品卡
|
||||
const handleRedeem = async () => {
|
||||
if (!validGift || !code.trim()) return
|
||||
|
||||
setLoading(true)
|
||||
try {
|
||||
await redeemGift({
|
||||
code: code.trim()
|
||||
})
|
||||
|
||||
setRedeemSuccess(true)
|
||||
Taro.showToast({
|
||||
title: '兑换成功',
|
||||
icon: 'success'
|
||||
})
|
||||
} catch (error) {
|
||||
console.error('兑换礼品卡失败:', error)
|
||||
Taro.showToast({
|
||||
title: '兑换失败',
|
||||
icon: 'error'
|
||||
})
|
||||
} finally {
|
||||
setLoading(false)
|
||||
}
|
||||
}
|
||||
|
||||
// 扫码兑换
|
||||
const handleScanCode = () => {
|
||||
Taro.scanCode({
|
||||
success: (res) => {
|
||||
const scannedCode = res.result
|
||||
if (scannedCode) {
|
||||
setCode(scannedCode)
|
||||
handleValidateCode(scannedCode)
|
||||
}
|
||||
},
|
||||
fail: () => {
|
||||
Taro.showToast({
|
||||
title: '扫码失败',
|
||||
icon: 'error'
|
||||
})
|
||||
}
|
||||
})
|
||||
}
|
||||
|
||||
// 返回上一页
|
||||
const handleBack = () => {
|
||||
Taro.navigateBack()
|
||||
}
|
||||
|
||||
// 查看我的礼品卡
|
||||
const handleViewMyGifts = () => {
|
||||
Taro.navigateTo({
|
||||
url: '/user/gift/index'
|
||||
})
|
||||
}
|
||||
|
||||
// 转换礼品卡数据
|
||||
const transformGiftData = (gift: ShopGift) => {
|
||||
return {
|
||||
id: gift.id || 0,
|
||||
name: gift.name || '礼品卡',
|
||||
description: gift.description,
|
||||
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,
|
||||
showCode: false, // 兑换页面不显示兑换码
|
||||
showUseBtn: false, // 兑换页面不显示使用按钮
|
||||
showDetailBtn: false, // 兑换页面不显示详情按钮
|
||||
theme: 'gold' as const
|
||||
}
|
||||
}
|
||||
|
||||
return (
|
||||
<ConfigProvider>
|
||||
{/* 自定义导航栏 */}
|
||||
<View className="flex items-center justify-between p-4 bg-white border-b border-gray-100">
|
||||
<View className="flex items-center" onClick={handleBack}>
|
||||
<ArrowLeft size="20" />
|
||||
<Text className="ml-2 text-lg">兑换礼品卡</Text>
|
||||
</View>
|
||||
</View>
|
||||
|
||||
{!redeemSuccess ? (
|
||||
<>
|
||||
{/* 兑换说明 */}
|
||||
<View className="bg-blue-50 mx-4 mt-4 p-4 rounded-xl border border-blue-200">
|
||||
<View className="flex items-center mb-2">
|
||||
<Gift size="20" className="text-blue-600 mr-2" />
|
||||
<Text className="font-semibold text-blue-800">兑换说明</Text>
|
||||
</View>
|
||||
<Text className="text-blue-700 text-sm leading-relaxed">
|
||||
请输入或扫描礼品卡兑换码，验证成功后即可兑换到您的账户中。每个兑换码只能使用一次。
|
||||
</Text>
|
||||
</View>
|
||||
|
||||
{/* 兑换码输入 */}
|
||||
<View className="bg-white mx-4 mt-4 p-4 rounded-xl">
|
||||
<Text className="font-semibold mb-3 text-gray-800">输入兑换码</Text>
|
||||
|
||||
<View className="mb-4">
|
||||
<Input
|
||||
placeholder="请输入礼品卡兑换码"
|
||||
value={code}
|
||||
onChange={setCode}
|
||||
clearable
|
||||
className="border border-gray-200 rounded-lg"
|
||||
/>
|
||||
</View>
|
||||
|
||||
<View className="flex gap-3">
|
||||
<Button
|
||||
fill="outline"
|
||||
size="large"
|
||||
className="flex-1"
|
||||
icon={<QrCode />}
|
||||
onClick={handleScanCode}
|
||||
>
|
||||
扫码输入
|
||||
</Button>
|
||||
<Button
|
||||
type="primary"
|
||||
size="large"
|
||||
className="flex-1"
|
||||
loading={validating}
|
||||
onClick={() => handleValidateCode()}
|
||||
>
|
||||
验证兑换码
|
||||
</Button>
|
||||
</View>
|
||||
</View>
|
||||
|
||||
{/* 验证结果 */}
|
||||
{validGift && (
|
||||
<>
|
||||
<Divider className="my-4">验证成功</Divider>
|
||||
|
||||
<View className="mx-4">
|
||||
<GiftCard {...transformGiftData(validGift)} />
|
||||
</View>
|
||||
|
||||
<View className="mx-4 mt-4">
|
||||
<Button
|
||||
type="primary"
|
||||
size="large"
|
||||
block
|
||||
loading={loading}
|
||||
onClick={handleRedeem}
|
||||
>
|
||||
确认兑换
|
||||
</Button>
|
||||
</View>
|
||||
</>
|
||||
)}
|
||||
</>
|
||||
) : (
|
||||
/* 兑换成功页面 */
|
||||
<View className="flex flex-col items-center justify-center px-4" style={{height: '600px'}}>
|
||||
<View className="text-center">
|
||||
<View className="w-20 h-20 bg-green-100 rounded-full flex items-center justify-center mx-auto mb-4">
|
||||
<Voucher size="40" className="text-green-600" />
|
||||
</View>
|
||||
|
||||
<Text className="text-2xl font-bold text-gray-900 mb-2">兑换成功！</Text>
|
||||
<Text className="text-gray-600 mb-6">礼品卡已添加到您的账户中</Text>
|
||||
|
||||
{validGift && (
|
||||
<View className="mb-6">
|
||||
<GiftCard {...transformGiftData(validGift)} />
|
||||
</View>
|
||||
)}
|
||||
|
||||
<View className="flex flex-col gap-3 w-full max-w-xs">
|
||||
<Button
|
||||
type="primary"
|
||||
size="large"
|
||||
block
|
||||
onClick={handleViewMyGifts}
|
||||
>
|
||||
查看我的礼品卡
|
||||
</Button>
|
||||
<Button
|
||||
fill="outline"
|
||||
size="large"
|
||||
block
|
||||
onClick={() => {
|
||||
setCode('')
|
||||
setValidGift(null)
|
||||
setRedeemSuccess(false)
|
||||
}}
|
||||
>
|
||||
继续兑换
|
||||
</Button>
|
||||
</View>
|
||||
</View>
|
||||
</View>
|
||||
)}
|
||||
</ConfigProvider>
|
||||
);
|
||||
};
|
||||
|
||||
export default GiftCardRedeem;
|
||||
Reference in New Issue
Block a user