forked from gxwebsoft/mp-10550
feat(admin): 从文章详情页面改为文章管理页面
- 修改页面配置，设置新的导航栏标题和样式 - 重新设计页面布局，增加搜索栏、文章列表和操作按钮 - 添加文章搜索、分页加载和删除功能 - 优化文章列表项的样式和交互 - 新增礼品卡相关API和组件 - 更新优惠券组件，增加到期提醒和筛选功能
This commit is contained in:
259
src/user/coupon/detail.tsx
Normal file
259
src/user/coupon/detail.tsx
Normal file
@@ -0,0 +1,259 @@
|
||||
import {useState, useEffect} from "react";
|
||||
import {useRouter} from '@tarojs/taro'
|
||||
import {Button, ConfigProvider, Tag, Divider} from '@nutui/nutui-react-taro'
|
||||
import {ArrowLeft, Gift, Clock, CartCheck, Share} from '@nutui/icons-react-taro'
|
||||
import Taro from '@tarojs/taro'
|
||||
import {View, Text} from '@tarojs/components'
|
||||
import {ShopCoupon} from "@/api/shop/shopCoupon/model";
|
||||
import {getShopCoupon} from "@/api/shop/shopCoupon";
|
||||
import CouponShare from "@/components/CouponShare";
|
||||
import dayjs from "dayjs";
|
||||
|
||||
const CouponDetail = () => {
|
||||
const router = useRouter()
|
||||
const [coupon, setCoupon] = useState<ShopCoupon | null>(null)
|
||||
const [loading, setLoading] = useState(true)
|
||||
const [showShare, setShowShare] = useState(false)
|
||||
const couponId = router.params.id
|
||||
|
||||
useEffect(() => {
|
||||
if (couponId) {
|
||||
loadCouponDetail()
|
||||
}
|
||||
}, [couponId])
|
||||
|
||||
const loadCouponDetail = async () => {
|
||||
try {
|
||||
setLoading(true)
|
||||
const data = await getShopCoupon(Number(couponId))
|
||||
setCoupon(data)
|
||||
} catch (error) {
|
||||
console.error('获取优惠券详情失败:', error)
|
||||
Taro.showToast({
|
||||
title: '获取优惠券详情失败',
|
||||
icon: 'error'
|
||||
})
|
||||
} finally {
|
||||
setLoading(false)
|
||||
}
|
||||
}
|
||||
|
||||
// 获取优惠券类型文本
|
||||
const getCouponTypeText = (type?: number) => {
|
||||
switch (type) {
|
||||
case 10: return '满减券'
|
||||
case 20: return '折扣券'
|
||||
case 30: return '免费券'
|
||||
default: return '优惠券'
|
||||
}
|
||||
}
|
||||
|
||||
// 获取优惠券金额显示
|
||||
const getCouponAmountDisplay = () => {
|
||||
if (!coupon) return ''
|
||||
|
||||
switch (coupon.type) {
|
||||
case 10: // 满减券
|
||||
return `¥${coupon.reducePrice}`
|
||||
case 20: // 折扣券
|
||||
return `${coupon.discount}折`
|
||||
case 30: // 免费券
|
||||
return '免费'
|
||||
default:
|
||||
return `¥${coupon.reducePrice || 0}`
|
||||
}
|
||||
}
|
||||
|
||||
// 获取使用条件文本
|
||||
const getConditionText = () => {
|
||||
if (!coupon) return ''
|
||||
|
||||
if (coupon.type === 30) return '无门槛使用'
|
||||
if (coupon.minPrice && parseFloat(coupon.minPrice) > 0) {
|
||||
return `满${coupon.minPrice}元可用`
|
||||
}
|
||||
return '无门槛使用'
|
||||
}
|
||||
|
||||
// 获取有效期文本
|
||||
const getValidityText = () => {
|
||||
if (!coupon) return ''
|
||||
|
||||
if (coupon.expireType === 10) {
|
||||
return `领取后${coupon.expireDay}天内有效`
|
||||
} else {
|
||||
return `${dayjs(coupon.startTime).format('YYYY年MM月DD日')} 至 ${dayjs(coupon.endTime).format('YYYY年MM月DD日')}`
|
||||
}
|
||||
}
|
||||
|
||||
// 获取适用范围文本
|
||||
const getApplyRangeText = () => {
|
||||
if (!coupon) return ''
|
||||
|
||||
switch (coupon.applyRange) {
|
||||
case 10: return '全部商品'
|
||||
case 20: return '指定商品'
|
||||
case 30: return '指定分类'
|
||||
default: return '全部商品'
|
||||
}
|
||||
}
|
||||
|
||||
// 获取优惠券状态
|
||||
const getCouponStatus = () => {
|
||||
if (!coupon) return { status: 0, text: '未知', color: 'default' }
|
||||
|
||||
if (coupon.isExpire === 1) {
|
||||
return { status: 2, text: '已过期', color: 'danger' }
|
||||
} else if (coupon.status === 1) {
|
||||
return { status: 1, text: '已使用', color: 'warning' }
|
||||
} else {
|
||||
return { status: 0, text: '可使用', color: 'success' }
|
||||
}
|
||||
}
|
||||
|
||||
// 使用优惠券
|
||||
const handleUseCoupon = () => {
|
||||
if (!coupon) return
|
||||
|
||||
Taro.showModal({
|
||||
title: '使用优惠券',
|
||||
content: `确定要使用"${coupon.name}"吗？`,
|
||||
success: (res) => {
|
||||
if (res.confirm) {
|
||||
// 跳转到商品页面或购物车页面
|
||||
Taro.navigateTo({
|
||||
url: '/pages/index/index'
|
||||
})
|
||||
}
|
||||
}
|
||||
})
|
||||
}
|
||||
|
||||
// 返回上一页
|
||||
const handleBack = () => {
|
||||
Taro.navigateBack()
|
||||
}
|
||||
|
||||
if (loading) {
|
||||
return (
|
||||
<ConfigProvider>
|
||||
<View className="flex justify-center items-center h-screen">
|
||||
<Text>加载中...</Text>
|
||||
</View>
|
||||
</ConfigProvider>
|
||||
)
|
||||
}
|
||||
|
||||
if (!coupon) {
|
||||
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 = getCouponStatus()
|
||||
|
||||
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 className="flex items-center gap-3">
|
||||
<View onClick={() => setShowShare(true)}>
|
||||
<Share size="20" className="text-gray-600" />
|
||||
</View>
|
||||
<Tag type={statusInfo.color as any}>{statusInfo.text}</Tag>
|
||||
</View>
|
||||
</View>
|
||||
|
||||
{/* 优惠券卡片 */}
|
||||
<View className="m-4 p-6 bg-gradient-to-r from-red-400 to-red-500 rounded-2xl text-white">
|
||||
<View className="flex items-center justify-between mb-4">
|
||||
<View>
|
||||
<Text className="text-4xl font-bold">{getCouponAmountDisplay()}</Text>
|
||||
<Text className="text-lg opacity-90 mt-1">{getCouponTypeText(coupon.type)}</Text>
|
||||
</View>
|
||||
<Gift size="40" />
|
||||
</View>
|
||||
|
||||
<Text className="text-xl font-semibold mb-2">{coupon.name}</Text>
|
||||
<Text className="text-base opacity-90">{getConditionText()}</Text>
|
||||
</View>
|
||||
|
||||
{/* 详细信息 */}
|
||||
<View className="bg-white mx-4 rounded-xl p-4">
|
||||
<Text className="text-lg font-semibold mb-4">使用说明</Text>
|
||||
|
||||
<View className="space-y-3">
|
||||
<View className="flex items-center">
|
||||
<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">
|
||||
<CartCheck size="16" className="text-gray-400 mr-3" />
|
||||
<View>
|
||||
<Text className="text-gray-600 text-sm">适用范围</Text>
|
||||
<Text className="text-gray-900">{getApplyRangeText()}</Text>
|
||||
</View>
|
||||
</View>
|
||||
|
||||
{coupon.description && (
|
||||
<>
|
||||
<Divider />
|
||||
<View>
|
||||
<Text className="text-gray-600 text-sm mb-2">使用说明</Text>
|
||||
<Text className="text-gray-900 leading-relaxed">{coupon.description}</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">
|
||||
<Button
|
||||
type="primary"
|
||||
size="large"
|
||||
block
|
||||
onClick={handleUseCoupon}
|
||||
>
|
||||
立即使用
|
||||
</Button>
|
||||
</View>
|
||||
)}
|
||||
|
||||
{/* 分享弹窗 */}
|
||||
{coupon && (
|
||||
<CouponShare
|
||||
visible={showShare}
|
||||
coupon={{
|
||||
id: coupon.id || 0,
|
||||
name: coupon.name || '',
|
||||
type: coupon.type || 10,
|
||||
amount: coupon.type === 10 ? coupon.reducePrice || '0' :
|
||||
coupon.type === 20 ? coupon.discount?.toString() || '0' : '0',
|
||||
minAmount: coupon.minPrice,
|
||||
description: coupon.description
|
||||
}}
|
||||
onClose={() => setShowShare(false)}
|
||||
/>
|
||||
)}
|
||||
</ConfigProvider>
|
||||
);
|
||||
};
|
||||
|
||||
export default CouponDetail;
|
||||
Reference in New Issue
Block a user