287 lines
7.6 KiB
Vue
287 lines
7.6 KiB
Vue
<template>
|
||
<div class="flashsale-page">
|
||
<div class="container mx-auto px-4 py-8">
|
||
<!-- 页面标题 -->
|
||
<div class="mb-8">
|
||
<h1 class="text-3xl font-bold mb-2 flex items-center">
|
||
<el-icon class="page-icon mr-2">
|
||
<Lightning/>
|
||
</el-icon>
|
||
限时活动
|
||
</h1>
|
||
<p class="text-gray-600">限时抢购，先到先得</p>
|
||
</div>
|
||
|
||
<!-- 筛选栏 -->
|
||
<div class="bg-white rounded-lg shadow-sm p-4 mb-6">
|
||
<div class="flex flex-wrap gap-4 items-center">
|
||
<!-- 状态筛选 -->
|
||
<el-radio-group v-model="filters.status" @change="loadFlashSales">
|
||
<el-radio-button label="">全部</el-radio-button>
|
||
<el-radio-button label="UPCOMING">即将开始</el-radio-button>
|
||
<el-radio-button label="ACTIVE">进行中</el-radio-button>
|
||
<el-radio-button label="ENDED">已结束</el-radio-button>
|
||
</el-radio-group>
|
||
|
||
<!-- 排序 -->
|
||
<el-select
|
||
v-model="filters.sort"
|
||
placeholder="排序方式"
|
||
style="width: 150px"
|
||
@change="loadFlashSales"
|
||
>
|
||
<el-option label="开始时间" value="startTime"/>
|
||
<el-option label="结束时间" value="endTime"/>
|
||
<el-option label="价格从低到高" value="flashPrice"/>
|
||
<el-option label="折扣力度" value="discount"/>
|
||
</el-select>
|
||
|
||
<!-- 搜索 -->
|
||
<el-input
|
||
v-model="filters.keyword"
|
||
clearable
|
||
placeholder="搜索商品名称"
|
||
style="width: 200px"
|
||
@keyup.enter="loadFlashSales"
|
||
>
|
||
<template #suffix>
|
||
<el-icon class="cursor-pointer" @click="loadFlashSales">
|
||
<Search/>
|
||
</el-icon>
|
||
</template>
|
||
</el-input>
|
||
|
||
<!-- 刷新按钮 -->
|
||
<el-button @click="handleRefresh">
|
||
<el-icon class="mr-1">
|
||
<Refresh/>
|
||
</el-icon>
|
||
刷新
|
||
</el-button>
|
||
</div>
|
||
</div>
|
||
|
||
<!-- 统计信息 -->
|
||
<div class="grid grid-cols-1 md:grid-cols-4 gap-4 mb-6">
|
||
<div class="stat-card tone-1">
|
||
<div class="stat-value">{{ statistics.upcoming }}</div>
|
||
<div class="stat-label">即将开始</div>
|
||
<el-icon :size="30" class="stat-icon">
|
||
<Clock/>
|
||
</el-icon>
|
||
</div>
|
||
<div class="stat-card tone-2">
|
||
<div class="stat-value">{{ statistics.active }}</div>
|
||
<div class="stat-label">正在进行</div>
|
||
<el-icon :size="30" class="stat-icon">
|
||
<Lightning/>
|
||
</el-icon>
|
||
</div>
|
||
<div class="stat-card tone-3">
|
||
<div class="stat-value">{{ statistics.participated }}</div>
|
||
<div class="stat-label">我的参与</div>
|
||
<el-icon :size="30" class="stat-icon">
|
||
<Trophy/>
|
||
</el-icon>
|
||
</div>
|
||
<div class="stat-card tone-4">
|
||
<div class="stat-value">{{ statistics.success }}</div>
|
||
<div class="stat-label">抢购成功</div>
|
||
<el-icon :size="30" class="stat-icon">
|
||
<SuccessFilled/>
|
||
</el-icon>
|
||
</div>
|
||
</div>
|
||
|
||
<!-- 限时活动列表 -->
|
||
<div v-if="loading" class="text-center py-12">
|
||
<el-icon :size="40" class="animate-spin">
|
||
<Loading/>
|
||
</el-icon>
|
||
<p class="mt-2 text-gray-500">加载中...</p>
|
||
</div>
|
||
|
||
<div v-else-if="flashSales.length === 0" class="text-center py-12">
|
||
<el-empty description="暂无限时活动"/>
|
||
</div>
|
||
|
||
<div v-else>
|
||
<div class="grid grid-cols-1 md:grid-cols-2 lg:grid-cols-3 xl:grid-cols-4 gap-6">
|
||
<FlashSaleCard
|
||
v-for="item in flashSales"
|
||
:key="item.id"
|
||
:data="item"
|
||
@participate="handleParticipate"
|
||
@refresh="loadFlashSales"
|
||
/>
|
||
</div>
|
||
|
||
<!-- 分页 -->
|
||
<div class="mt-8 flex justify-center">
|
||
<el-pagination
|
||
v-model:current-page="pagination.page"
|
||
v-model:page-size="pagination.size"
|
||
:page-sizes="[12, 24, 36, 48]"
|
||
:total="pagination.total"
|
||
layout="total, sizes, prev, pager, next, jumper"
|
||
@size-change="loadFlashSales"
|
||
@current-change="loadFlashSales"
|
||
/>
|
||
</div>
|
||
</div>
|
||
</div>
|
||
</div>
|
||
</template>
|
||
|
||
<script lang="ts" setup>
|
||
import {ref, reactive, onMounted} from 'vue'
|
||
import {useRouter} from 'vue-router'
|
||
import {ElMessage, ElMessageBox} from 'element-plus'
|
||
import FlashSaleCard from '@/components/business/FlashSaleCard.vue'
|
||
import {flashsaleApi} from '@/api/modules/flashsale'
|
||
import {useUserStore} from '@/stores/user'
|
||
import type {FlashSale} from '@/types/api'
|
||
|
||
const router = useRouter()
|
||
const userStore = useUserStore()
|
||
|
||
// 数据状态
|
||
const loading = ref(false)
|
||
const flashSales = ref<FlashSale[]>([])
|
||
|
||
// 筛选条件
|
||
const filters = reactive({
|
||
status: '',
|
||
sort: 'startTime',
|
||
keyword: ''
|
||
})
|
||
|
||
// 分页
|
||
const pagination = reactive({
|
||
page: 1,
|
||
size: 12,
|
||
total: 0
|
||
})
|
||
|
||
// 统计信息
|
||
const statistics = reactive({
|
||
upcoming: 0,
|
||
active: 0,
|
||
participated: 0,
|
||
success: 0
|
||
})
|
||
|
||
// 加载限时活动
|
||
const loadFlashSales = async () => {
|
||
loading.value = true
|
||
try {
|
||
const res = await flashsaleApi.getList({
|
||
...filters,
|
||
page: pagination.page - 1,
|
||
size: pagination.size
|
||
})
|
||
|
||
if (res.success) {
|
||
flashSales.value = res.data.content
|
||
pagination.total = res.data.totalElements
|
||
}
|
||
} catch (error) {
|
||
console.error('加载限时活动失败:', error)
|
||
} finally {
|
||
loading.value = false
|
||
}
|
||
}
|
||
|
||
// 加载统计信息（从后端获取真实数据）
|
||
const loadStatistics = async () => {
|
||
try {
|
||
const res = await flashsaleApi.getStatistics()
|
||
if (res.success) {
|
||
statistics.upcoming = res.data.upcoming ?? 0
|
||
statistics.active = res.data.active ?? 0
|
||
statistics.participated = res.data.participated ?? 0
|
||
statistics.success = res.data.success ?? 0
|
||
}
|
||
} catch (error) {
|
||
console.error('加载统计信息失败:', error)
|
||
}
|
||
}
|
||
|
||
// 参与限时
|
||
const handleParticipate = async (flashSaleId: number) => {
|
||
if (!userStore.isLoggedIn) {
|
||
ElMessage.warning('请先登录')
|
||
router.push('/login')
|
||
return
|
||
}
|
||
|
||
// 先检查资格
|
||
try {
|
||
const res = await flashsaleApi.checkEligibility(flashSaleId)
|
||
if (res.success && res.data.eligible) {
|
||
// 确认对话框
|
||
await ElMessageBox.confirm(
|
||
'确定要参与这个限时活动吗？',
|
||
'提示',
|
||
{
|
||
confirmButtonText: '立即抢购',
|
||
cancelButtonText: '取消',
|
||
type: 'warning',
|
||
}
|
||
)
|
||
|
||
// 跳转到详情页参与
|
||
router.push(`/flashsale/${flashSaleId}`)
|
||
} else {
|
||
ElMessage.warning(res.data.reason || '您暂时无法参与此活动')
|
||
}
|
||
} catch (error) {
|
||
// 用户取消或错误
|
||
}
|
||
}
|
||
|
||
// 刷新
|
||
const handleRefresh = () => {
|
||
loadFlashSales()
|
||
loadStatistics()
|
||
ElMessage.success('已刷新')
|
||
}
|
||
|
||
onMounted(() => {
|
||
loadFlashSales()
|
||
loadStatistics()
|
||
})
|
||
</script>
|
||
|
||
<style lang="scss" scoped>
|
||
.flashsale-page {
|
||
min-height: calc(100vh - 60px);
|
||
background: transparent;
|
||
}
|
||
|
||
.page-icon {
|
||
color: #44443f;
|
||
}
|
||
|
||
.stat-card {
|
||
@apply relative overflow-hidden rounded-lg p-4;
|
||
background: #fffaf2;
|
||
color: #171715;
|
||
border: 1px solid #d8cebf;
|
||
box-shadow: 0 10px 24px rgba(23, 22, 20, 0.04);
|
||
|
||
.stat-value {
|
||
@apply text-2xl font-bold;
|
||
}
|
||
|
||
.stat-label {
|
||
@apply text-sm mt-1;
|
||
}
|
||
|
||
.stat-icon {
|
||
@apply absolute right-4 bottom-4;
|
||
opacity: 0.2;
|
||
}
|
||
}
|
||
</style>
|