feat(admin): 从文章详情页面改为文章管理页面
- 修改页面配置，设置新的导航栏标题和样式 - 重新设计页面布局，增加搜索栏、文章列表和操作按钮 - 添加文章搜索、分页加载和删除功能 - 优化文章列表项的样式和交互 - 新增礼品卡相关API和组件 - 更新优惠券组件，增加到期提醒和筛选功能
This commit is contained in:
227
src/components/GiftCardShare.tsx
Normal file
227
src/components/GiftCardShare.tsx
Normal file
@@ -0,0 +1,227 @@
|
||||
import React from 'react'
|
||||
import { View, Text } from '@tarojs/components'
|
||||
import { Button, Popup } from '@nutui/nutui-react-taro'
|
||||
import { Share, Wechat, QQ, Weibo, Link, Close, Gift } from '@nutui/icons-react-taro'
|
||||
import Taro from '@tarojs/taro'
|
||||
|
||||
export interface GiftCardShareProps {
|
||||
/** 是否显示分享弹窗 */
|
||||
visible: boolean
|
||||
/** 礼品卡信息 */
|
||||
giftCard: {
|
||||
id: number
|
||||
name: string
|
||||
type: number
|
||||
faceValue: string
|
||||
code?: string
|
||||
description?: string
|
||||
}
|
||||
/** 关闭回调 */
|
||||
onClose: () => void
|
||||
}
|
||||
|
||||
const GiftCardShare: React.FC<GiftCardShareProps> = ({
|
||||
visible,
|
||||
giftCard,
|
||||
onClose
|
||||
}) => {
|
||||
// 获取礼品卡类型文本
|
||||
const getTypeText = () => {
|
||||
switch (giftCard.type) {
|
||||
case 10: return '实物礼品卡'
|
||||
case 20: return '虚拟礼品卡'
|
||||
case 30: return '服务礼品卡'
|
||||
default: return '礼品卡'
|
||||
}
|
||||
}
|
||||
|
||||
// 生成分享文案
|
||||
const generateShareText = () => {
|
||||
const typeText = getTypeText()
|
||||
const valueText = `¥${giftCard.faceValue}`
|
||||
|
||||
return `🎁 ${giftCard.name}\n💰 面值 ${valueText}\n🏷️ ${typeText}\n${giftCard.description ? `📝 ${giftCard.description}\n` : ''}快来领取这份礼品卡吧！`
|
||||
}
|
||||
|
||||
// 生成分享链接
|
||||
const generateShareUrl = () => {
|
||||
// 这里应该是实际的分享链接，包含礼品卡ID等参数
|
||||
return `https://your-domain.com/gift/share?id=${giftCard.id}`
|
||||
}
|
||||
|
||||
// 微信分享
|
||||
const handleWechatShare = () => {
|
||||
Taro.showShareMenu({
|
||||
withShareTicket: true,
|
||||
success: () => {
|
||||
Taro.showToast({
|
||||
title: '分享成功',
|
||||
icon: 'success'
|
||||
})
|
||||
onClose()
|
||||
},
|
||||
fail: () => {
|
||||
Taro.showToast({
|
||||
title: '分享失败',
|
||||
icon: 'error'
|
||||
})
|
||||
}
|
||||
})
|
||||
}
|
||||
|
||||
// 复制链接
|
||||
const handleCopyLink = () => {
|
||||
const shareUrl = generateShareUrl()
|
||||
const shareText = generateShareText()
|
||||
const fullText = `${shareText}\n\n${shareUrl}`
|
||||
|
||||
Taro.setClipboardData({
|
||||
data: fullText,
|
||||
success: () => {
|
||||
Taro.showToast({
|
||||
title: '已复制到剪贴板',
|
||||
icon: 'success'
|
||||
})
|
||||
onClose()
|
||||
},
|
||||
fail: () => {
|
||||
Taro.showToast({
|
||||
title: '复制失败',
|
||||
icon: 'error'
|
||||
})
|
||||
}
|
||||
})
|
||||
}
|
||||
|
||||
// 复制兑换码
|
||||
const handleCopyCode = () => {
|
||||
if (!giftCard.code) {
|
||||
Taro.showToast({
|
||||
title: '暂无兑换码',
|
||||
icon: 'none'
|
||||
})
|
||||
return
|
||||
}
|
||||
|
||||
Taro.setClipboardData({
|
||||
data: giftCard.code,
|
||||
success: () => {
|
||||
Taro.showToast({
|
||||
title: '兑换码已复制',
|
||||
icon: 'success'
|
||||
})
|
||||
onClose()
|
||||
},
|
||||
fail: () => {
|
||||
Taro.showToast({
|
||||
title: '复制失败',
|
||||
icon: 'error'
|
||||
})
|
||||
}
|
||||
})
|
||||
}
|
||||
|
||||
// 保存图片分享
|
||||
const handleSaveImage = async () => {
|
||||
try {
|
||||
// 这里可以生成礼品卡图片并保存到相册
|
||||
// 实际实现需要canvas绘制礼品卡图片
|
||||
Taro.showToast({
|
||||
title: '功能开发中',
|
||||
icon: 'none'
|
||||
})
|
||||
} catch (error) {
|
||||
Taro.showToast({
|
||||
title: '保存失败',
|
||||
icon: 'error'
|
||||
})
|
||||
}
|
||||
}
|
||||
|
||||
const shareOptions = [
|
||||
{
|
||||
icon: <Wechat size="32" className="text-green-500" />,
|
||||
label: '微信好友',
|
||||
onClick: handleWechatShare
|
||||
},
|
||||
{
|
||||
icon: <Link size="32" className="text-blue-500" />,
|
||||
label: '复制链接',
|
||||
onClick: handleCopyLink
|
||||
},
|
||||
{
|
||||
icon: <Gift size="32" className="text-purple-500" />,
|
||||
label: '复制兑换码',
|
||||
onClick: handleCopyCode,
|
||||
disabled: !giftCard.code
|
||||
},
|
||||
{
|
||||
icon: <Share size="32" className="text-orange-500" />,
|
||||
label: '保存图片',
|
||||
onClick: handleSaveImage
|
||||
}
|
||||
]
|
||||
|
||||
return (
|
||||
<Popup
|
||||
visible={visible}
|
||||
position="bottom"
|
||||
style={{ height: 'auto' }}
|
||||
round
|
||||
>
|
||||
<View className="p-6">
|
||||
{/* 头部 */}
|
||||
<View className="flex items-center justify-between mb-6">
|
||||
<Text className="text-lg font-semibold">分享礼品卡</Text>
|
||||
<View onClick={onClose}>
|
||||
<Close size="20" className="text-gray-500" />
|
||||
</View>
|
||||
</View>
|
||||
|
||||
{/* 礼品卡预览 */}
|
||||
<View className="rounded-xl p-4 mb-6 text-white" style={{backgroundColor: '#fbbf24'}}>
|
||||
<Text className="text-xl font-bold mb-2">{giftCard.name}</Text>
|
||||
<View className="flex items-center justify-between">
|
||||
<View>
|
||||
<Text className="text-2xl font-bold">¥{giftCard.faceValue}</Text>
|
||||
<Text className="text-sm opacity-90">{getTypeText()}</Text>
|
||||
</View>
|
||||
<Gift size="24" />
|
||||
</View>
|
||||
{giftCard.code && (
|
||||
<View className="mt-3 p-2 bg-white bg-opacity-20 rounded">
|
||||
<Text className="text-xs opacity-80">兑换码</Text>
|
||||
<Text className="font-mono font-bold">{giftCard.code}</Text>
|
||||
</View>
|
||||
)}
|
||||
</View>
|
||||
|
||||
{/* 分享选项 */}
|
||||
<View className="flex justify-between mb-4" style={{gap: '16px'}}>
|
||||
{shareOptions.map((option, index) => (
|
||||
<View
|
||||
key={index}
|
||||
className={`flex-1 flex flex-col items-center py-4 bg-gray-50 rounded-lg ${
|
||||
option.disabled ? 'opacity-50' : ''
|
||||
}`}
|
||||
onClick={option.disabled ? undefined : option.onClick}
|
||||
>
|
||||
<View className="mb-2">{option.icon}</View>
|
||||
<Text className="text-sm text-gray-700">{option.label}</Text>
|
||||
</View>
|
||||
))}
|
||||
</View>
|
||||
|
||||
{/* 分享文案预览 */}
|
||||
<View className="bg-gray-50 rounded-lg p-3">
|
||||
<Text className="text-xs text-gray-500 mb-2">分享文案预览：</Text>
|
||||
<Text className="text-sm text-gray-700 leading-relaxed">
|
||||
{generateShareText()}
|
||||
</Text>
|
||||
</View>
|
||||
</View>
|
||||
</Popup>
|
||||
)
|
||||
}
|
||||
|
||||
export default GiftCardShare
|
||||
Reference in New Issue
Block a user