ylrzCourseMall_uniapp/pages_index/index/groupBuyList.vue

<template>
	<view class="container">
		<!-- 商品列表 -->
		<view class="goods-list">
			<view class="goods-item" v-for="(item, index) in list" :key="item.id" @tap="showProduct(item)">
				<image class="goods-img" :src="item.productImage" mode="aspectFill"></image>
				
				<view class="goods-info">
					<view class="goods-name ellipsis2">
						<text class="group-tag" v-if="item.groupNum">{{ item.groupNum }}人团</text>
						{{ item.productName }}
					</view>
					
					<view class="countdown-box" v-if="item.activityStatus !== 'ended' && item.activityStatus !== 'sold_out'">
						<text class="status-text" style="margin-left: 0; margin-right: 10rpx;">{{ item.activityStatus === 'not_started' ? '即将开抢' : '团购中' }}</text>
						<text class="time-text">{{ formatTime(item.countdown) }}</text>
					</view>
					
					<view class="goods-bottom">
						<view class="price-info">
							<view class="group-buy-price">￥<text class="num">{{ item.groupPrice }}</text></view>
							<view class="original-price">￥{{ item.originalPrice }}</view>
						</view>
						
						<view class="btn-box">
							<button 
								class="grab-btn" 
								:class="[
									item.activityStatus === 'not_started' ? 'not-started' : '',
									item.activityStatus === 'sold_out' ? 'sold-out' : '',
									item.activityStatus === 'ended' ? 'ended' : ''
								]"
							>
								{{ getBtnText(item.activityStatus) }}
							</button>
						</view>
					</view>
				</view>
			</view>
		</view>
		
		<view class="empty-box" v-if="list.length === 0 && !loading">
			<text>暂无团购活动</text>
		</view>
	</view>
</template>

<script>
import { getActiveGroupBuyList, getGroupBuyServerTime } from '@/api/groupBuy.js';

export default {
	data() {
		return {
			list: [],
			timer: null,
			loading: true,
			serverTimestamp: 0
		};
	},
	onLoad() {
		this.fetchData();
	},
	onUnload() {
		this.clearTimer();
	},
	methods: {
		async fetchData() {
			this.loading = true;
			try {
				const [listRes, timeRes] = await Promise.all([
					getActiveGroupBuyList(),
					getGroupBuyServerTime()
				]);
				
				this.loading = false;

				let currentServerTime = Date.now();
				if (timeRes.code === 0 || timeRes.code === 200) {
					currentServerTime = timeRes.serverTimestamp || timeRes.data?.serverTimestamp || Date.now();
				} else if (listRes.serverTimestamp) {
					currentServerTime = listRes.serverTimestamp;
				}
				
				const serverTimeSec = Math.floor(currentServerTime / 1000);

				if (listRes.code === 0 || listRes.code === 200) {
					this.list = listRes.data || [];
					
					this.list.forEach(item => {
						let targetTime = 0;
						if (item.activityStatus === 'not_started') {
							targetTime = Math.floor(new Date(item.startTime.replace(/-/g, '/')).getTime() / 1000);
						} else if (item.activityStatus === 'ongoing') {
							targetTime = Math.floor(new Date(item.endTime.replace(/-/g, '/')).getTime() / 1000);
						}
						
						if (targetTime > 0) {
							let diff = targetTime - serverTimeSec;
							item.countdown = diff > 0 ? diff : 0;
						}
					});
					
					this.startTimer();
				} else {
					uni.showToast({
						title: listRes.msg || '获取数据失败',
						icon: 'none'
					});
				}
			} catch (error) {
				this.loading = false;
				console.error(error);
			}
		},
		startTimer() {
			this.clearTimer();
			this.timer = setInterval(() => {
				let hasCountdown = false;
				this.list.forEach(item => {
					if (item.countdown > 0) {
						item.countdown--;
						hasCountdown = true;
					} else if (item.countdown === 0 && item.activityStatus === 'not_started') {
						item.activityStatus = 'ongoing';
						let endTimeSec = Math.floor(new Date(item.endTime.replace(/-/g, '/')).getTime() / 1000);
						let nowSec = Math.floor(Date.now() / 1000);
						let diff = endTimeSec - nowSec;
						item.countdown = diff > 0 ? diff : 0;
						if (item.countdown > 0) hasCountdown = true;
					} else if (item.countdown === 0 && item.activityStatus === 'ongoing') {
						item.activityStatus = 'ended';
					}
				});
				if (!hasCountdown) {
					this.clearTimer();
				}
			}, 1000);
		},
		clearTimer() {
			if (this.timer) {
				clearInterval(this.timer);
				this.timer = null;
			}
		},
		formatTime(seconds) {
			if (!seconds || seconds <= 0) return '00:00:00';
			let h = Math.floor(seconds / 3600);
			let m = Math.floor((seconds % 3600) / 60);
			let s = seconds % 60;
			return `${h.toString().padStart(2, '0')}:${m.toString().padStart(2, '0')}:${s.toString().padStart(2, '0')}`;
		},
		getBtnText(status) {
			switch (status) {
				case 'not_started': return '即将开始';
				case 'ongoing': return '立即参团';
				case 'sold_out': return '已售罄';
				case 'ended': return '已结束';
				default: return '团购';
			}
		},
		showProduct(item) {
			uni.navigateTo({
				url: '/pages_index/index/activityProductDetail?type=group&id=' + item.id
			});
		}
	}
};
</script>

<style lang="scss" scoped>
.container {
	min-height: 100vh;
	background-color: #f5f5f5;
	padding: 20rpx;
}

.goods-list {
	.goods-item {
		display: flex;
		background-color: #fff;
		border-radius: 16rpx;
		padding: 20rpx;
		margin-bottom: 20rpx;
		
		.goods-img {
			width: 240rpx;
			height: 240rpx;
			border-radius: 12rpx;
			background-color: #f0f0f0;
			flex-shrink: 0;
		}
		
		.goods-info {
			flex: 1;
			margin-left: 20rpx;
			display: flex;
			flex-direction: column;
			justify-content: space-between;
			
			.goods-name {
				font-size: 28rpx;
				color: #333;
				font-weight: bold;
				line-height: 40rpx;

				.group-tag {
					display: inline-block;
					padding: 0 12rpx;
					height: 34rpx;
					line-height: 34rpx;
					background: linear-gradient(90deg, #ff4a00, #ff6a00);
					color: #fff;
					font-size: 20rpx;
					border-radius: 4rpx;
					margin-right: 12rpx;
					vertical-align: middle;
					font-weight: normal;
				}
			}
			
			.ellipsis2 {
				display: -webkit-box;
				-webkit-box-orient: vertical;
				-webkit-line-clamp: 2;
				overflow: hidden;
			}
			
			.countdown-box {
				display: flex;
				align-items: center;
				margin-top: 10rpx;
				
				.time-text {
					font-size: 24rpx;
					color: #ff4a00;
					background-color: rgba(255, 74, 0, 0.1);
					padding: 2rpx 10rpx;
					border-radius: 6rpx;
					font-weight: bold;
				}
				
				.status-text {
					font-size: 22rpx;
					color: #999;
					margin-left: 10rpx;
				}
			}
			
			.goods-bottom {
				display: flex;
				justify-content: space-between;
				align-items: flex-end;
				margin-top: 10rpx;
				
				.price-info {
					.group-buy-price {
						color: #ff4a00;
						font-size: 24rpx;
						font-weight: bold;
						
						.num {
							font-size: 36rpx;
						}
					}
					
					.original-price {
						color: #999;
						font-size: 22rpx;
						text-decoration: line-through;
						margin-top: 4rpx;
					}
				}
				
				.btn-box {
					.grab-btn {
						margin: 0;
						padding: 0 24rpx;
						height: 56rpx;
						line-height: 56rpx;
						border-radius: 28rpx;
						font-size: 24rpx;
						color: #fff;
						background: linear-gradient(90deg, #4C49E9, #6a67ff);
						border: none;
						
						&::after {
							display: none;
						}
						
						&.not-started {
							background: #cccccc;
						}
						
						&.sold-out {
							background: #cccccc;
						}
						
						&.ended {
							background: #cccccc;
						}
					}
				}
			}
		}
	}
}

.empty-box {
	padding: 100rpx 0;
	text-align: center;
	color: #999;
	font-size: 28rpx;
}
</style>