feat(src): 新增文章、经销商申请、用户地址和礼物添加功能
- 新增文章添加页面,支持文章基本信息、设置、高级设置和图片上传 - 新增经销商申请页面,支持申请信息填写和审核状态显示 - 新增用户地址添加页面,支持地址信息填写和地址识别功能 - 新增礼物添加页面,功能与文章添加类似 - 统一使用 .tsx 文件格式 - 添加 .editorconfig、.eslintrc 和 .gitignore 文件,规范代码风格和项目结构
This commit is contained in:
159
src/components/CouponGuide.tsx
Normal file
159
src/components/CouponGuide.tsx
Normal file
@@ -0,0 +1,159 @@
|
||||
import React, { useState } from 'react'
|
||||
import { View, Text } from '@tarojs/components'
|
||||
import { Button, Popup } from '@nutui/nutui-react-taro'
|
||||
import { Ask, Ticket, Clock, Gift } from '@nutui/icons-react-taro'
|
||||
|
||||
export interface CouponGuideProps {
|
||||
/** 是否显示指南 */
|
||||
visible: boolean
|
||||
/** 关闭回调 */
|
||||
onClose: () => void
|
||||
}
|
||||
|
||||
const CouponGuide: React.FC<CouponGuideProps> = ({
|
||||
visible,
|
||||
onClose
|
||||
}) => {
|
||||
const [currentStep, setCurrentStep] = useState(0)
|
||||
|
||||
const guideSteps = [
|
||||
{
|
||||
title: '如何获取优惠券?',
|
||||
icon: <Gift size="24" className="text-red-500" />,
|
||||
content: [
|
||||
'1. 点击"领取"按钮浏览可领取的优惠券',
|
||||
'2. 关注商家活动和促销信息',
|
||||
'3. 完成指定任务获得优惠券奖励',
|
||||
'4. 邀请好友注册获得推荐奖励'
|
||||
]
|
||||
},
|
||||
{
|
||||
title: '如何使用优惠券?',
|
||||
icon: <Ticket size="24" className="text-green-500" />,
|
||||
content: [
|
||||
'1. 选择心仪商品加入购物车',
|
||||
'2. 在结算页面选择可用优惠券',
|
||||
'3. 确认优惠金额后完成支付',
|
||||
'4. 优惠券使用后不可退回'
|
||||
]
|
||||
},
|
||||
{
|
||||
title: '优惠券使用规则',
|
||||
icon: <Clock size="24" className="text-blue-500" />,
|
||||
content: [
|
||||
'1. 每张优惠券只能使用一次',
|
||||
'2. 优惠券有使用期限,过期作废',
|
||||
'3. 满减券需达到最低消费金额',
|
||||
'4. 部分优惠券仅限指定商品使用'
|
||||
]
|
||||
},
|
||||
{
|
||||
title: '常见问题解答',
|
||||
icon: <Ask size="24" className="text-purple-500" />,
|
||||
content: [
|
||||
'Q: 优惠券可以叠加使用吗?',
|
||||
'A: 一般情况下不支持叠加,具体以活动规则为准',
|
||||
'Q: 优惠券过期了怎么办?',
|
||||
'A: 过期优惠券无法使用,请及时关注有效期',
|
||||
'Q: 退款时优惠券会退回吗?',
|
||||
'A: 已使用的优惠券不会退回,请谨慎使用'
|
||||
]
|
||||
}
|
||||
]
|
||||
|
||||
const handleNext = () => {
|
||||
if (currentStep < guideSteps.length - 1) {
|
||||
setCurrentStep(currentStep + 1)
|
||||
} else {
|
||||
onClose()
|
||||
}
|
||||
}
|
||||
|
||||
const handlePrev = () => {
|
||||
if (currentStep > 0) {
|
||||
setCurrentStep(currentStep - 1)
|
||||
}
|
||||
}
|
||||
|
||||
const handleSkip = () => {
|
||||
onClose()
|
||||
}
|
||||
|
||||
const currentGuide = guideSteps[currentStep]
|
||||
|
||||
return (
|
||||
<Popup
|
||||
visible={visible}
|
||||
position="center"
|
||||
closeable={false}
|
||||
style={{ width: '90%', maxWidth: '400px' }}
|
||||
>
|
||||
<View className="p-6">
|
||||
{/* 头部 */}
|
||||
<View className="text-center mb-6">
|
||||
<View className="flex justify-center mb-3">
|
||||
{currentGuide.icon}
|
||||
</View>
|
||||
<Text className="text-xl font-bold text-gray-900">
|
||||
{currentGuide.title}
|
||||
</Text>
|
||||
</View>
|
||||
|
||||
{/* 内容 */}
|
||||
<View className="mb-6">
|
||||
{currentGuide.content.map((item, index) => (
|
||||
<View key={index} className="mb-3">
|
||||
<Text className="text-gray-700 leading-relaxed">
|
||||
{item}
|
||||
</Text>
|
||||
</View>
|
||||
))}
|
||||
</View>
|
||||
|
||||
{/* 进度指示器 */}
|
||||
<View className="flex justify-center mb-6">
|
||||
{guideSteps.map((_, index) => (
|
||||
<View
|
||||
key={index}
|
||||
className={`w-2 h-2 rounded-full mx-1 ${
|
||||
index === currentStep ? 'bg-red-500' : 'bg-gray-300'
|
||||
}`}
|
||||
/>
|
||||
))}
|
||||
</View>
|
||||
|
||||
{/* 底部按钮 */}
|
||||
<View className="flex justify-between">
|
||||
<View className="flex gap-2">
|
||||
{currentStep > 0 && (
|
||||
<Button
|
||||
size="small"
|
||||
fill="outline"
|
||||
onClick={handlePrev}
|
||||
>
|
||||
上一步
|
||||
</Button>
|
||||
)}
|
||||
<Button
|
||||
size="small"
|
||||
fill="outline"
|
||||
onClick={handleSkip}
|
||||
>
|
||||
跳过
|
||||
</Button>
|
||||
</View>
|
||||
|
||||
<Button
|
||||
size="small"
|
||||
type="primary"
|
||||
onClick={handleNext}
|
||||
>
|
||||
{currentStep === guideSteps.length - 1 ? '完成' : '下一步'}
|
||||
</Button>
|
||||
</View>
|
||||
</View>
|
||||
</Popup>
|
||||
)
|
||||
}
|
||||
|
||||
export default CouponGuide
|
||||
Reference in New Issue
Block a user