后端功能增强：全局异常处理、API控制器、JSP视图和单元测试
- 添加 GlobalExceptionHandler 全局异常处理 - 添加 ApiController REST API 控制器 - 更新 WebConfig 跨域配置和 ProductRepository 查询方法 - 新增 monitor/product-detail/profile JSP 视图页面 - 添加 FlashSaleServiceTest 秒杀服务单元测试 - 更新 application.yml 配置
This commit is contained in:
179
flash-sale-frontend/src/components/business/FlashSaleCard.vue
Normal file
179
flash-sale-frontend/src/components/business/FlashSaleCard.vue
Normal file
@@ -0,0 +1,179 @@
|
||||
<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>
|
||||
Reference in New Issue
Block a user