FlashSaleSystem/flash-sale-frontend/src/components/business/FlashSaleCard.vue

<template>
  <div class="flash-sale-card card-shadow">
    <div class="relative">
      <!-- 商品图片 -->
      <img 
        :src="data.productImageUrl || '/default-product.png'" 
        :alt="data.productName"
        class="w-full h-48 object-cover"
        @error="handleImageError"
      >
      
      <!-- 状态标签 -->
      <div class="absolute top-2 left-2">
        <el-tag :type="statusType" effect="dark" size="small">
          <el-icon class="mr-1"><Lightning /></el-icon>
          {{ statusText }}
        </el-tag>
      </div>
      
      <!-- 折扣标签 -->
      <div class="absolute top-2 right-2">
        <span class="discount-badge">
          {{ discountPercent }}% OFF
        </span>
      </div>
    </div>
    
    <div class="p-4">
      <!-- 商品名称 -->
      <h3 class="font-semibold text-lg mb-2 truncate">{{ data.productName }}</h3>
      
      <!-- 价格 -->
      <div class="flex items-end mb-3">
        <span class="text-2xl font-bold text-red-500">¥{{ data.flashPrice }}</span>
        <span class="ml-2 text-sm text-gray-400 line-through">¥{{ data.originalPrice }}</span>
      </div>
      
      <!-- 库存进度 -->
      <div class="mb-3">
        <div class="flex justify-between text-sm text-gray-600 mb-1">
          <span>剩余: {{ data.remainingStock }}件</span>
          <span>{{ stockPercent }}%</span>
        </div>
        <el-progress 
          :percentage="stockPercent" 
          :stroke-width="6"
          :show-text="false"
          :color="progressColor"
        />
      </div>
      
      <!-- 倒计时 -->
      <div class="text-center mb-3">
        <CountDown 
          v-if="data.status === 'ACTIVE'" 
          :end-time="endTime"
          @finish="$emit('refresh')"
        />
        <span v-else-if="data.status === 'UPCOMING'" class="text-sm text-gray-500">
          即将开始
        </span>
        <span v-else class="text-sm text-gray-400">
          已结束
        </span>
      </div>
      
      <!-- 操作按钮 -->
      <el-button 
        type="danger" 
        class="w-full"
        :disabled="!canParticipate"
        :loading="loading"
        @click="handleParticipate"
      >
        <el-icon class="mr-1"><Lightning /></el-icon>
        {{ buttonText }}
      </el-button>
    </div>
  </div>
</template>

<script setup lang="ts">
import { ref, computed } from 'vue'
import type { FlashSale } from '@/types/api'
import CountDown from './CountDown.vue'

const props = defineProps<{
  data: FlashSale
}>()

const emit = defineEmits<{
  participate: [id: number]
  refresh: []
}>()

const loading = ref(false)

// 计算属性
const statusType = computed(() => {
  switch (props.data.status) {
    case 'UPCOMING': return 'warning'
    case 'ACTIVE': return 'danger'
    case 'ENDED': return 'info'
    default: return 'info'
  }
})

const statusText = computed(() => {
  switch (props.data.status) {
    case 'UPCOMING': return '即将开始'
    case 'ACTIVE': return '秒杀中'
    case 'ENDED': return '已结束'
    default: return '未知'
  }
})

const discountPercent = computed(() => {
  return Math.round((1 - props.data.flashPrice / props.data.originalPrice) * 100)
})

const stockPercent = computed(() => {
  if (props.data.flashStock === 0) return 0
  return Math.round(props.data.remainingStock / props.data.flashStock * 100)
})

const progressColor = computed(() => {
  if (stockPercent.value > 50) return '#67c23a'
  if (stockPercent.value > 20) return '#e6a23c'
  return '#f56c6c'
})

const endTime = computed(() => {
  return new Date(props.data.endTime).getTime()
})

const canParticipate = computed(() => {
  return props.data.status === 'ACTIVE' && props.data.remainingStock > 0
})

const buttonText = computed(() => {
  if (props.data.status === 'UPCOMING') return '即将开始'
  if (props.data.status === 'ENDED') return '已结束'
  if (props.data.remainingStock === 0) return '已售罄'
  return '立即抢购'
})

// 处理图片加载错误
const handleImageError = (e: Event) => {
  const target = e.target as HTMLImageElement
  target.src = '/default-product.png'
}

// 参与秒杀
const handleParticipate = async () => {
  if (!canParticipate.value) return
  
  loading.value = true
  emit('participate', props.data.id)
  
  setTimeout(() => {
    loading.value = false
  }, 1000)
}
</script>

<style scoped lang="scss">
.flash-sale-card {
  @apply bg-white rounded-lg overflow-hidden;
  transition: all 0.3s;
  
  &:hover {
    transform: translateY(-4px);
  }
}

.discount-badge {
  @apply px-2 py-1 bg-orange-500 text-white text-xs font-bold rounded;
}
</style>