xinlong-shop-taro/src_bak/components/business/CouponCard/index.tsx

import React from 'react'
import { View, Text } from '@tarojs/components'
import type { ShopUserCoupon } from '@/api/shop/shopUserCoupon/model'
import { getCouponTypeText, formatCouponValue, isExpiringSoon } from '@/hooks/useCoupon'

interface CouponCardProps {
  coupon: ShopUserCoupon
  disabled?: boolean
  onClick?: () => void
  showDelete?: boolean
  onDelete?: () => void
}

const CouponCard: React.FC<CouponCardProps> = ({
  coupon,
  disabled = false,
  onClick,
  showDelete = false,
  onDelete,
}) => {
  const isUsed = coupon.status === 1
  const isExpired = coupon.status === 2 || coupon.isExpire === 1
  const expiringSoon = isExpiringSoon(coupon)

  const getValidTime = () => {
    if (coupon.startTime && coupon.endTime) {
      return `${coupon.startTime.slice(0, 10)} - ${coupon.endTime.slice(0, 10)}`
    }
    return '永久有效'
  }

  const getRangeText = () => {
    switch (coupon.applyRange) {
      case 10: return '全场通用'
      case 20: return '指定商品'
      case 30: return '指定分类'
      default: return '全场通用'
    }
  }

  return (
    <View
      className={`bg-white rounded-lg mb-3 overflow-hidden ${disabled ? 'opacity-60' : ''}`}
      onClick={disabled ? undefined : onClick}
    >
      <View className='flex'>
        {/* 左侧金额区域 */}
        <View className={`w-24 py-4 flex flex-col items-center justify-center ${isUsed || isExpired ? 'bg-gray-200' : (
          coupon.type === 40 ? 'bg-gradient-to-br from-blue-500 to-blue-600' :
          coupon.type === 50 ? 'bg-gradient-to-br from-cyan-500 to-teal-500' :
          'bg-gradient-to-br from-red-500 to-orange-500'
        )}`}>
          <Text className='text-white text-lg font-bold'>{formatCouponValue(coupon)}</Text>
          {(() => {
            if (coupon.type === 50) {
              // 场地使用券
              const parts: string[] = []
              if (coupon.useDuration && coupon.useDuration > 0) parts.push(`${coupon.useDuration}分钟`)
              return parts.length > 0 ? (
                <Text className='text-white text-xs mt-1'>{parts.join(' | ')}</Text>
              ) : null
            }
            if (coupon.type === 40 || !coupon.minPrice || Number(coupon.minPrice) <= 0) return null
            return <Text className='text-white text-xs mt-1'>满{coupon.minPrice}可用</Text>
          })()}
        </View>

        {/* 右侧信息区域 */}
        <View className='flex-1 p-3'>
          <View className='flex justify-between items-start'>
            <View className='flex-1'>
              <View className='flex items-center gap-2'>
                <Text className='text-sm font-medium text-gray-800'>{coupon.name || getCouponTypeText(coupon.type)}</Text>
                {expiringSoon && !isUsed && !isExpired && (
                  <Text className='text-xs text-orange-500 bg-orange-50 px-1 py-0 rounded'>即将过期</Text>
                )}
              </View>
              <Text className='text-xs text-gray-400 mt-1'>{getRangeText()}</Text>
              <Text className='text-xs text-gray-400 mt-1'>{getValidTime()}</Text>
              {coupon.description && (
                <Text className='text-xs text-gray-500 mt-1 line-clamp-1'>{coupon.description}</Text>
              )}
            </View>

            {/* 状态标签 */}
            <View className='ml-2'>
              {isUsed && (
                <Text className='text-xs text-gray-400 bg-gray-100 px-2 py-1 rounded'>已使用</Text>
              )}
              {isExpired && (
                <Text className='text-xs text-gray-400 bg-gray-100 px-2 py-1 rounded'>已过期</Text>
              )}
              {!isUsed && !isExpired && (
                <View className='w-4 h-4 rounded-full border border-gray-300' />
              )}
            </View>
          </View>

          {/* 删除按钮 */}
          {showDelete && (isUsed || isExpired) && (
            <View className='flex justify-end mt-2 pt-2 border-t border-gray-100'>
              <Text className='text-xs text-red-500' onClick={(e) => { e.stopPropagation(); onDelete?.() }}>
                删除
              </Text>
            </View>
          )}
        </View>
      </View>
    </View>
  )
}

export default CouponCard