glt-taro/src/components/CouponCard.tsx

import React from 'react'
import { View, Text } from '@tarojs/components'
import { Button } from '@nutui/nutui-react-taro'
import './CouponCard.scss'

export interface CouponCardProps {
  /** 优惠券金额 */
  amount: number
  /** 最低消费金额 */
  minAmount?: number
  /** 优惠券类型：1-满减券 2-折扣券 3-免费券 */
  type?: 1 | 2 | 3
  /** 优惠券状态：0-未使用 1-已使用 2-已过期 */
  status?: 0 | 1 | 2
  /** 优惠券标题 */
  title?: string
  /** 有效期开始时间 */
  startTime?: string
  /** 有效期结束时间 */
  endTime?: string
  /** 是否显示领取按钮 */
  showReceiveBtn?: boolean
  /** 是否显示使用按钮 */
  showUseBtn?: boolean
  /** 领取按钮点击事件 */
  onReceive?: () => void
  /** 使用按钮点击事件 */
  onUse?: () => void
  /** 优惠券样式主题：red | orange | blue | purple | green */
  theme?: 'red' | 'orange' | 'blue' | 'purple' | 'green'
}

const CouponCard: React.FC<CouponCardProps> = ({
  amount,
  minAmount,
  type = 1,
  status = 0,
  title,
  startTime,
  endTime,
  showReceiveBtn = false,
  showUseBtn = false,
  onReceive,
  onUse,
  theme = 'red'
}) => {
  // 获取主题颜色类名
  const getThemeClass = () => {
    return `theme-${theme}`
  }
  // 格式化优惠券金额显示
  // @ts-ignore
  const formatAmount = () => {
    switch (type) {
      case 1: // 满减券
        return `¥${amount}`
      case 2: // 折扣券
        return `${amount}折`
      case 3: // 免费券
        return '免费'
      default:
        return `¥${amount}`
    }
  }

  // 获取优惠券状态文本
  const getStatusText = () => {
    switch (status) {
      case 0:
        return '未使用'
      case 1:
        return '已使用'
      case 2:
        return '已过期'
      default:
        return '未使用'
    }
  }

  // 获取使用条件文本
  const getConditionText = () => {
    if (type === 3) return '无门槛'
    if (minAmount && minAmount > 0) {
      return `满${minAmount}可用`
    }
    return '无门槛'
  }

  // 格式化日期
  const formatDate = (dateStr?: string) => {
    if (!dateStr) return ''
    const date = new Date(dateStr)
    return `${date.getMonth() + 1}.${date.getDate()}`
  }

  // 获取有效期文本
  const getValidityText = () => {
    if (startTime && endTime) {
      return `${formatDate(startTime)}-${formatDate(endTime)}`
    }
    return ''
  }

  const themeClass = getThemeClass()

  return (
    <View className={`coupon-card ${status !== 0 ? 'disabled' : ''}`}>
      {/* 左侧金额区域 */}
      <View className={`coupon-left ${themeClass}`}>
        <View className="amount-wrapper">
          <Text className="currency">¥</Text>
          <Text className="amount">{amount}</Text>
        </View>
        <View className="condition">
          {getConditionText()}
        </View>
      </View>

      {/* 中间分割线 */}
      <View className="coupon-divider">
        <View className="divider-line"></View>
        <View className="divider-circle-top"></View>
        <View className="divider-circle-bottom"></View>
      </View>

      {/* 右侧信息区域 */}
      <View className="coupon-right">
        <View className="coupon-info">
          <View className="coupon-title">
            {title || (type === 1 ? '满减券' : type === 2 ? '折扣券' : '免费券')}
          </View>
          <View className="coupon-validity">
            有效期：{getValidityText()}
          </View>
        </View>

        {/* 按钮区域 */}
        <View className="coupon-actions">
          {showReceiveBtn && status === 0 && (
            <Button
              className={`coupon-btn ${themeClass}`}
              size="small"
              onClick={onReceive}
            >
              领取
            </Button>
          )}
          {showUseBtn && status === 0 && (
            <Button
              className={`coupon-btn ${themeClass}`}
              size="small"
              onClick={onUse}
            >
              使用
            </Button>
          )}
          {status !== 0 && (
            <View className="status-text">
              {getStatusText()}
            </View>
          )}
        </View>
      </View>

      {/* 状态遮罩 */}
      {status !== 0 && (
        <View className="status-overlay">
          <Text className="status-badge">
            {getStatusText()}
          </Text>
        </View>
      )}
    </View>
  )
}

export default CouponCard