template-10560/src/components/CouponGuide.tsx

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