From 2a7af5e872b65a28a82b1d4d39282f48fc2b2467 Mon Sep 17 00:00:00 2001
From: zpc <zpc1131@gamil.com>
Date: Thu, 3 Apr 2025 01:34:26 +0800
Subject: [PATCH] =?UTF-8?q?=E6=8F=90=E4=BA=A4?=
MIME-Version: 1.0
Content-Type: text/plain; charset=UTF-8
Content-Transfer-Encoding: 8bit

---
 pages/infinite/bonus_house.vue         | 489 ++++++++++++-------
 pages/infinite/bonus_house_details.vue | 625 ++++++++++++++++---------
 2 files changed, 718 insertions(+), 396 deletions(-)

diff --git a/pages/infinite/bonus_house.vue b/pages/infinite/bonus_house.vue
index f0bd510..13172d5 100644
--- a/pages/infinite/bonus_house.vue
+++ b/pages/infinite/bonus_house.vue
@@ -4,10 +4,10 @@
 			<uni-icons type="left" color="#000000"></uni-icons>
 		</view>
 		<view class="title1">福利屋</view>
-		<view class="" style="height: 232rpx;"></view>
+		<view class="header-space"></view>
 		<banner :type-id="8" :height="328"></banner>
 
-		<view class="center" style="width: 100%; margin-top: 30rpx;">
+		<view class="tab-container">
 			<view class="tab">
 				<view class="tab-item1 center" @click="$refs.rulePop.getRule(20, '规则说明')">
 					<text>规则说明</text>
@@ -21,108 +21,79 @@
 			</view>
 		</view>
 
+		<!-- 内容列表区域 -->
+		<view class="benefits-container">
+			<scroll-view scroll-y="true" class="benefits-scroll">
+				<!-- 进行中列表 -->
+				<template v-if="tabCur == 1">
+					<view v-for="(item, index) in ongoingData" :key="index" class="benefit-item relative"
+						@click="$c.to({ url: '/pages/infinite/bonus_house_details?goods_id=' + item.id })">
+						<text class="benefit-title">{{ item.title }}</text>
+						<text class="benefit-tips">{{ item.tips }}</text>
 
-		<!-- 进行中 -->
-		<view v-if="tabCur == 1" class=""
-			style="width: 672rpx; height: 760rpx; margin: 40rpx auto 0; overflow: hidden;">
-			<scroll-view scroll-y="true" style=" height: 760rpx;">
-				<view class="relative" v-for="(item, index) in benefitsData"
-					@click="$c.to({ url: '/pages/infinite/bonus_house_details' })"
-					style="width: 100%; height: 274rpx; background-color: #F8F8F8; margin-bottom: 36rpx; border-radius: 16rpx;">
-
-					<text style="position: absolute; left: 24rpx; top: 28rpx; color: #333333;font-size: 24rpx;">{{
-						item.title }}</text>
-					<text style="position: absolute; left: 24rpx; top: 62rpx; color: #FF862D; font-size: 18rpx;">{{
-						item.tips }}</text>
-
-					<view class="center"
-						style="width: 128rpx; height: 60rpx; background-color: #D8FD24; border-radius: 16rpx; position: absolute; top: 20rpx; right: 24rpx;">
-						<text style="font-size: 20rpx; color: #333333; font-weight: 600;">马上参与</text>
-					</view>
-
-					<scroll-view scroll-x="true"
-						style="height: 80rpx; white-space: nowrap; position: absolute; left: 24rpx; top: 112rpx;">
-						<view v-for="(item1, index) in item.GoodsList" class="relative" :key="index1"
-							style="width: 80rpx; height: 80rpx; display: inline-block; margin-right: 36rpx;">
-
-							<image src="https://mh.shhuanmeng.com/static/web/static/checkin/gem.png"
-								style="width: 100%; height: 100%; position: absolute;"></image>
-							<!-- src="https://mh.shhuanmeng.com/static/web/static/checkin/gem.png":src="$img1('checkin/Fire.png')" -->
-							<view class="center"
-								style="width: 44rpx; height: 20rpx; background-color: rgba(172, 172, 172, 0.60); position: absolute; border-radius: 10rpx; bottom: 4rpx; left: 50%; transform: translateX(-50%);">
-								<text style="font-size: 18rpx; color: #fff;">x{{ item1.num }}</text>
-							</view>
+						<view class="action-btn center">
+							<text>马上参与</text>
 						</view>
-					</scroll-view>
-					<view class=""
-						style="width: 624rpx; height: 2.01rpx; background-color: #F3F3F3; position: absolute; left: 24rpx; bottom: 54rpx;">
+						<scroll-view scroll-x="true" class="goods-scroll">
+							<view v-for="(item1, index1) in item.GoodsList" :key="index1" class="goods-item relative">
+								<image class="goods-img" :src="item1.imgUrl">
+								</image>
+								<view class="goods-num center">
+									<text>x{{ item1.num }}</text>
+								</view>
+							</view>
+						</scroll-view>
+						<view class="divider"></view>
+						<view class="popularity center">
+							<image class="fire-icon" :src="$img1('checkin/Fire.png')"></image>
+							<text class="popularity-text">{{ item.Popularity }}</text>
+						</view>
+
+						<text class="time-text">{{ item.Time }}</text>
 					</view>
-					<view class="center" style="position: absolute; left: 24rpx; bottom: 16rpx;">
-						<image style="width: 18rpx; height: 20rpx;" :src="$img1('checkin/Fire.png')" mode=""></image>
-						<text style="font-size: 16rpx; color: #999999; margin-left: 8rpx;">{{ item.Popularity }}</text>
+				</template>
+
+				<!-- 已结束列表 -->
+				<template v-else>
+					<view v-for="(item, index) in endedData" :key="index" class="benefit-item relative"
+						@click="$c.to({ url: '/pages/infinite/bonus_house_details' })">
+						<text class="benefit-title">{{ item.title }}</text>
+						<text class="benefit-tips">{{ item.tips }}</text>
+
+						<view class="action-btn center ended">
+							<text>已结束</text>
+						</view>
+						<scroll-view scroll-x="true" class="goods-scroll">
+							<view v-for="(item1, index1) in item.GoodsList" :key="index1" class="goods-item relative">
+								<image class="goods-img" :src="item1.imgUrl">
+								</image>
+								<view class="goods-num center">
+									<text>x{{ item1.num }}</text>
+								</view>
+							</view>
+						</scroll-view>
+						<view class="divider"></view>
+						<view class="popularity center">
+							<image class="fire-icon" :src="$img1('checkin/Fire.png')"></image>
+							<text class="popularity-text">{{ item.Popularity }}</text>
+						</view>
+
+						<text class="time-text">{{ item.Time }}</text>
 					</view>
-					<text style="font-size: 16rpx; color: #999999; position: absolute; right: 24rpx; bottom: 18rpx;">{{
-						item.Time }}</text>
-				</view>
+				</template>
 			</scroll-view>
 		</view>
 
-		<!-- 已结束 -->
-		<view v-else class="" style="width: 672rpx; height: 760rpx; margin: 40rpx auto 0; overflow: hidden;">
-			<scroll-view scroll-y="true" style=" height: 760rpx;">
-				<view class="relative" v-for="(item, index) in benefitsData"
-					style="width: 100%; height: 274rpx; background-color: #F8F8F8; margin-bottom: 36rpx; border-radius: 16rpx;">
-
-					<text style="position: absolute; left: 24rpx; top: 28rpx; color: #333333;font-size: 24rpx;">{{
-						item.title }}</text>
-					<text style="position: absolute; left: 24rpx; top: 62rpx; color: #FF862D; font-size: 18rpx;">{{
-						item.tips }}</text>
-
-					<view class="center"
-						style="width: 128rpx; height: 60rpx; background-color: #333333; border-radius: 16rpx; position: absolute; top: 20rpx; right: 24rpx;">
-						<text style="font-size: 20rpx; color: #D8FD24; font-weight: 600;">已结束</text>
-					</view>
-
-					<scroll-view scroll-x="true"
-						style="height: 80rpx; white-space: nowrap; position: absolute; left: 24rpx; top: 112rpx;">
-						<view v-for="(item1, index1) in item.GoodsList" class="relative" :key="index1"
-							style="width: 80rpx; height: 80rpx; display: inline-block; margin-right: 36rpx;">
-
-							<image src="https://mh.shhuanmeng.com/static/web/static/checkin/gem.png"
-								style="width: 100%; height: 100%; position: absolute;"></image>
-							<!-- src="https://mh.shhuanmeng.com/static/web/static/checkin/gem.png":src="$img1('checkin/Fire.png')" -->
-							<view class="center"
-								style="width: 44rpx; height: 20rpx; background-color: rgba(172, 172, 172, 0.60); position: absolute; border-radius: 10rpx; bottom: 4rpx; left: 50%; transform: translateX(-50%);">
-								<text style="font-size: 18rpx; color: #fff;">x{{ item1.num }}</text>
-							</view>
-						</view>
-					</scroll-view>
-					<view class=""
-						style="width: 624rpx; height: 2.01rpx; background-color: #F3F3F3; position: absolute; left: 24rpx; bottom: 54rpx;">
-					</view>
-					<view class="center" style="position: absolute; left: 24rpx; bottom: 16rpx;">
-						<image style="width: 18rpx; height: 20rpx;" :src="$img1('checkin/Fire.png')" mode=""></image>
-						<text style="font-size: 16rpx; color: #999999; margin-left: 8rpx;">{{ item.Popularity }}</text>
-					</view>
-					<text style="font-size: 16rpx; color: #999999; position: absolute; right: 24rpx; bottom: 18rpx;">{{
-						item.Time }}</text>
-				</view>
-			</scroll-view>
-		</view>
-
-
-		<view class="row center" style="margin-top: 20rpx;">
-			<view class="center" style="width: 220rpx; height: 72rpx; background-color: #333333; border-radius: 16rpx;">
-				<text style="font-size: 24rpx; color: #D8FD24;">我的卡券</text>
+		<view class="btn-group row center">
+			<view class="my-coupon center" @click="$c.to({ url: '/pages/infinite/my_coupons' })">
+				<text>我的卡券</text>
 			</view>
-			<view class="center"
-				style="width: 220rpx; height: 72rpx; background-color: #D8FD24; border-radius: 16rpx; margin-left: 38rpx;">
-				<text style="font-size: 24rpx; color: #333333;">赏品记录</text>
+			<view class="reward-record center" @click="$c.to({ url: '/pages/infinite/reward_records' })">
+				<text>赏品记录</text>
 			</view>
 		</view>
 		<rule-pop ref="rulePop"></rule-pop>
 	</view>
-
 </template>
 
 <script>
@@ -130,95 +101,107 @@ export default {
 	data() {
 		return {
 			tabCur: 1,
-			benefitsData: [{
-				title: "新人消费满5元福利屋",
-				tips: "消费返利（所有参与者有机会获得奖励",
-				isOngoing: true, //是否进行中
-				Popularity: 52, //热度
-				Time: "2025-03-10  14:00—2025-03-10  14:00",
-				GoodsList: [
-					{
-						imgUrl: "", //赏品图
-						num: 1, //数量
-					}],
-			}, {
-				title: "新人消费满10元福利屋",
-				tips: "消费返利（所有参与者有机会获得奖励",
-				isOngoing: true, //是否进行中
-				Popularity: 52, //热度
-				Time: "2025-03-10  14:00—2025-03-10  14:00",
-				GoodsList: [{
-					imgUrl: "", //赏品图
-					num: 1, //数量
-				}, {
-					imgUrl: "",
-					num: 1,
-				},]
-			}, {
-				title: "新人消费满15元福利屋",
-				tips: "消费返利（所有参与者有机会获得奖励",
-				isOngoing: true, //是否进行中
-				Popularity: 52, //热度
-				Time: "2025-03-10  14:00—2025-03-10  14:00",
-				GoodsList: [{
-					imgUrl: "", //赏品图
-					num: 1, //数量
-				}, {
-					imgUrl: "",
-					num: 1,
-				},]
-			},],
+			ongoingData: [], // 进行中数据
+			endedData: [], // 已结束数据
+			loading: false
 		}
 	},
+
 	async onLoad() {
-		await this.load();
+		this.loadOngoingData();
 	},
+
 	methods: {
-		async load() {
-			let res = await this.req({
-				url: "goods_fuliwu",
-			})
-			console.log(res)
-			this.benefitsData.splice(0, this.benefitsData.length)
-			res.data.data.forEach(item => {
-				console.log(item);
-				let b = [];
-				item.goodslist.forEach(item1 => {
-					console.log(item1);
-					for (let i = 0; i < item1.stock; i++) {
-						b.push({
-							imgUrl: item1.imgurl,
-							num: 1//item1.price,
-						})
+		// 加载进行中的福利屋数据
+		async loadOngoingData() {
+			if (this.loading) return;
+			this.loading = true;
+
+			try {
+				const res = await this.req({
+					url: "goods_fuliwu", // 进行中接口
+					data: {
+						type: 1
 					}
-				})
-				// 如果当前时间在item.flw_start_time和item.flw_end_time之间，则isOngoing为true，否则为false
-				let isOngoing = new Date() > new Date(item.flw_start_time) && new Date() < new Date(item.flw_end_time)
-				let t =
-				{
+				});
+
+				if (res?.data?.data) {
+					this.ongoingData = this.formatBenefitsData(res.data.data);
+				}
+			} catch (error) {
+				console.error('加载进行中福利屋数据失败:', error);
+			} finally {
+				this.loading = false;
+			}
+		},
+
+		// 加载已结束的福利屋数据
+		async loadEndedData() {
+			if (this.loading) return;
+			this.loading = true;
+
+			try {
+				const res = await this.req({
+					url: "goods_fuliwu", // 已结束接口
+					data: {
+						type: 3
+					}
+				});
+
+				if (res?.data?.data) {
+					this.endedData = this.formatBenefitsData(res.data.data);
+				}
+			} catch (error) {
+				console.error('加载已结束福利屋数据失败:', error);
+			} finally {
+				this.loading = false;
+			}
+		},
+
+		// 格式化福利屋数据
+		formatBenefitsData(data) {
+			return data.map(item => {
+				const goodsList = [];
+
+				if (item.goodslist && item.goodslist.length) {
+					item.goodslist.forEach(goods => {
+						if (goods.stock > 0) {
+							goodsList.push({
+								imgUrl: goods.imgurl,
+								num: goods.stock//item1.price,
+							})
+
+						}
+					});
+				}
+
+				return {
 					id: item.id,
 					choujiang_xianzhi: item.choujiang_xianzhi,
 					title: item.title,
 					tips: item.goods_describe,
-					isOngoing: isOngoing, //是否进行中
-					Popularity: item.join_count, //热度
-					Time: item.flw_start_time + "—" + item.flw_end_time,
-					GoodsList: b
+					Popularity: item.join_count,
+					Time: `${item.flw_start_time} — ${item.flw_end_time}`,
+					GoodsList: goodsList
 				};
-				this.benefitsData.push(t)
-			})
-
+			});
 		},
+
+		// 切换标签
 		tabChange(i) {
-			this.tabCur = i
-			switch (Number(i)) {
-				case 1:
-					// this.getData()
-					break
-				case 2:
-					// this.getData()
-					// this.subTabChange(this.subTabCur)
-					break
+			if (this.tabCur === i) return; // 避免重复加载
+			this.tabCur = i;
+
+			if (i === 1) {
+				// 切换到进行中，加载进行中数据
+				if (this.ongoingData.length === 0) {
+					this.loadOngoingData();
+				}
+			} else {
+				// 切换到已结束，加载已结束数据
+				if (this.endedData.length === 0) {
+					this.loadEndedData();
+				}
 			}
 		},
 	}
@@ -233,6 +216,10 @@ export default {
 	background: #FFFFFF;
 }
 
+.header-space {
+	height: 232rpx;
+}
+
 .navLeft {
 	position: fixed;
 	left: 30rpx;
@@ -258,6 +245,11 @@ export default {
 	z-index: 50;
 }
 
+.tab-container {
+	width: 100%;
+	margin-top: 30rpx;
+}
+
 .tab {
 	display: flex;
 	align-items: center;
@@ -300,7 +292,6 @@ export default {
 				font-size: 24rpx;
 				color: #333333;
 			}
-
 		}
 	}
 
@@ -327,8 +318,166 @@ export default {
 				font-size: 24rpx;
 				color: #333333;
 			}
-
 		}
 	}
 }
+
+.benefits-container {
+	width: 672rpx;
+	height: 760rpx;
+	margin: 40rpx auto 0;
+	overflow: hidden;
+}
+
+.benefits-scroll {
+	height: 760rpx;
+}
+
+.benefit-item {
+	width: 100%;
+	height: 274rpx;
+	background-color: #F8F8F8;
+	margin-bottom: 36rpx;
+	border-radius: 16rpx;
+}
+
+.benefit-title {
+	position: absolute;
+	left: 24rpx;
+	top: 28rpx;
+	color: #333333;
+	font-size: 24rpx;
+}
+
+.benefit-tips {
+	position: absolute;
+	left: 24rpx;
+	top: 62rpx;
+	color: #FF862D;
+	font-size: 18rpx;
+}
+
+.action-btn {
+	width: 128rpx;
+	height: 60rpx;
+	background-color: #D8FD24;
+	border-radius: 16rpx;
+	position: absolute;
+	top: 20rpx;
+	right: 24rpx;
+
+	&.ended {
+		background-color: #333333;
+
+		text {
+			color: #D8FD24;
+		}
+	}
+
+	text {
+		font-size: 20rpx;
+		color: #333333;
+		font-weight: 600;
+	}
+}
+
+.goods-scroll {
+	height: 80rpx;
+	white-space: nowrap;
+	position: absolute;
+	left: 24rpx;
+	top: 112rpx;
+}
+
+.goods-item {
+	width: 80rpx;
+	height: 80rpx;
+	display: inline-block;
+	margin-right: 36rpx;
+}
+
+.goods-img {
+	width: 100%;
+	height: 100%;
+	position: absolute;
+}
+
+.goods-num {
+	width: 44rpx;
+	height: 20rpx;
+	background-color: rgba(172, 172, 172, 0.60);
+	position: absolute;
+	border-radius: 10rpx;
+	bottom: 4rpx;
+	left: 50%;
+	transform: translateX(-50%);
+
+	text {
+		font-size: 18rpx;
+		color: #fff;
+	}
+}
+
+.divider {
+	width: 624rpx;
+	height: 2rpx;
+	background-color: #F3F3F3;
+	position: absolute;
+	left: 24rpx;
+	bottom: 54rpx;
+}
+
+.popularity {
+	position: absolute;
+	left: 24rpx;
+	bottom: 16rpx;
+}
+
+.fire-icon {
+	width: 18rpx;
+	height: 20rpx;
+}
+
+.popularity-text {
+	font-size: 16rpx;
+	color: #999999;
+	margin-left: 8rpx;
+}
+
+.time-text {
+	font-size: 16rpx;
+	color: #999999;
+	position: absolute;
+	right: 24rpx;
+	bottom: 18rpx;
+}
+
+.btn-group {
+	margin-top: 20rpx;
+}
+
+.my-coupon {
+	width: 220rpx;
+	height: 72rpx;
+	background-color: #333333;
+	border-radius: 16rpx;
+
+	text {
+		font-size: 24rpx;
+		color: #D8FD24;
+	}
+}
+
+.reward-record {
+	width: 220rpx;
+	height: 72rpx;
+	background-color: #D8FD24;
+	border-radius: 16rpx;
+	margin-left: 38rpx;
+
+	text {
+		font-size: 24rpx;
+		color: #333333;
+	}
+}
 </style>
\ No newline at end of file
diff --git a/pages/infinite/bonus_house_details.vue b/pages/infinite/bonus_house_details.vue
index 0adceaf..06913c5 100644
--- a/pages/infinite/bonus_house_details.vue
+++ b/pages/infinite/bonus_house_details.vue
@@ -1,6 +1,6 @@
 <template>
 	<view class="content">
-		<view class="navLeft align-center" :style="{top:$sys().statusBarHeight+'px'}" @tap="$c.back(1)">
+		<view class="navLeft align-center" :style="{ top: $sys().statusBarHeight + 'px' }" @tap="$c.back(1)">
 			<uni-icons type="left" color="#000000"></uni-icons>
 			<!-- <view class="">{{$c.detailPageTitle((pageData && pageData.goods) || '')}}</view> -->
 		</view>
@@ -18,19 +18,18 @@
 			<image style="width: 108rpx; height: 108rpx;position: absolute; left: 24rpx; top: 22rpx;"
 				:src="$img1('checkin/logo2.png')"></image>
 
-			<text
-				style="font-size: 24rpx; color: #333333; position: absolute; left: 146rpx; top: 34rpx;">{{bonusDetailsData.Title}}</text>
+			<text style="font-size: 24rpx; color: #333333; position: absolute; left: 146rpx; top: 34rpx;">{{
+				bonusData.title }}</text>
 
-			<text
-				style="font-size: 18rpx; color: #FF862D; position: absolute; left: 146rpx; top: 68rpx;">{{bonusDetailsData.Tips}}</text>
+			<text style="font-size: 18rpx; color: #FF862D; position: absolute; left: 146rpx; top: 68rpx;">{{
+				bonusData.tips }}</text>
 
-			<text
-				style="font-size: 16rpx; color: #999999; position: absolute; left: 146rpx; top: 102rpx;">{{bonusDetailsData.Time}}</text>
+			<text style="font-size: 16rpx; color: #999999; position: absolute; left: 146rpx; top: 102rpx;">{{
+				bonusData.time }}</text>
 
 			<view class="row center" style="position: absolute; left: 470rpx; top: 68rpx;">
 				<image style="width: 18rpx; height: 20rpx;" :src="$img1('checkin/Fire.png')" mode=""></image>
-				<text
-					style="font-size: 16rpx; color: #999999; margin-left: 8rpx;">{{bonusDetailsData.Popularity}}</text>
+				<text style="font-size: 16rpx; color: #999999; margin-left: 8rpx;">{{ bonusData.popularity }}</text>
 			</view>
 
 			<image style="width: 50rpx; height: 50rpx; position: absolute; top: 50rpx; right: 24rpx;"
@@ -43,25 +42,22 @@
 
 			<view class="tab">
 				<view class="tab-item center relative" v-for="(item, i) in tabList" :key="i"
-					:class="tabCur == i?'act':'unact'" @click="tabChange(i)">
-					<text>{{item}}</text>
+					:class="currentTab == i ? 'act' : 'unact'" @click="handleTabChange(i)">
+					<text>{{ item }}</text>
 				</view>
 			</view>
 
 			<!-- 赏品预览 -->
-			<scroll-view v-if="tabCur==0" scroll-y="true" class="" style="width: 100%; height: 900rpx;">
+			<scroll-view v-if="currentTab == 0" scroll-y="true" class="" style="width: 100%; height: 900rpx;">
 				<view style="height: 60rpx;"></view>
 				<view class="" style="width: 544rpx; height: 500rpx; background-color: #999999; margin: 0 auto 0;">
 				</view>
 
 				<view class="grid-container">
-					<view class="grid-item column align-center" v-for="(item,index) in bonusDetailsData.GoodsList"
+					<view class="grid-item column align-center" v-for="(item, index) in goodsList" :key="index"
 						style="">
-
-						<image style="width: 112rpx; height: 112rpx;background-color: #D8D8D8; border-radius: 16rpx;"
-							:src="$img1('checkin/gem2.png')" mode=""></image>
-
-						<text style="color: #999999; font-size: 16rpx; margin-top: 16rpx;">{{item.Price}}</text>
+						<image style="width: 112rpx; height: 112rpx;border-radius:25rpx;" :src="item.imgUrl"></image>
+						<text style="color: #999999; font-size: 16rpx; margin-top: 16rpx;">{{ item.title }}</text>
 
 					</view>
 
@@ -69,63 +65,48 @@
 			</scroll-view>
 
 
-			<scroll-view v-if="tabCur==1" scroll-y="true" style="width: 100%; height: 890rpx; padding: 24rpx;">
-				<view class="row align-center" v-for="(item,index) in bonusDetailsData.PlayerList" :key="index"
+			<scroll-view v-if="currentTab == 1" scroll-y="true" style="width: 100%; height: 890rpx; padding: 24rpx;">
+				<view class="row align-center" v-for="(item, index) in participantList" :key="index"
 					style="height: 76rpx; margin-bottom: 24rpx;">
 
 					<view class="center" style="width: 30rpx;">
-						<text style="color: #999999; font-size: 20rpx;">{{index+1}}</text>
+						<text style="color: #999999; font-size: 20rpx;">{{ index + 1 }}</text>
 					</view>
 
 
-					<image :src="item.Avatar"
+					<image :src="item.avatar"
 						style="width: 76rpx; height: 76rpx; background-color: #D8D8D8; border-radius: 50%; margin-left: 24rpx;"
 						mode=""></image>
 
 					<view class="column" style="margin-left: 16rpx;">
-						<text style="color: #333333; font-size: 20rpx;">{{item.name}}</text>
-						<text style="color: #999999; font-size: 16rpx; margin-top: 12rpx;">{{item.time}}</text>
+						<text style="color: #333333; font-size: 20rpx;">{{ item.name }}</text>
+						<text style="color: #999999; font-size: 16rpx; margin-top: 12rpx;">{{ item.time }}</text>
 					</view>
 
 				</view>
 			</scroll-view>
-
-			<scroll-view v-if="tabCur==2" scroll-y="true" style="width: 100%; height: 890rpx; padding: 24rpx;">
-				<view class="row align-center relative" v-for="(item,index) in bonusDetailsData.PlayerList" :key="index"
+			<scroll-view v-if="currentTab == 2" scroll-y="true" style="width: 100%; height: 890rpx; padding: 24rpx;">
+				<view class="row align-center relative" v-for="(item, index) in awardRecordList" :key="index"
 					style="height: 76rpx; margin-bottom: 24rpx;">
 
 					<view class="center" style="width: 30rpx;">
-						<text style="color: #999999; font-size: 20rpx;">{{index+1}}</text>
+						<text style="color: #999999; font-size: 20rpx;">{{ index + 1 }}</text>
 					</view>
-
-
-					<image :src="item.Avatar"
+					<image :src="item.avatar"
 						style="width: 76rpx; height: 76rpx; background-color: #D8D8D8; border-radius: 50%; margin-left: 24rpx;"
 						mode=""></image>
-
 					<view class="column" style="margin-left: 16rpx;">
-						<text style="color: #333333; font-size: 20rpx;">{{item.name}}</text>
-						<text style="color: #999999; font-size: 16rpx; margin-top: 12rpx;">{{item.time}}</text>
+						<text style="color: #333333; font-size: 20rpx;">{{ item.name }}</text>
+						<text style="color: #999999; font-size: 16rpx; margin-top: 12rpx;">{{ item.time }}</text>
 					</view>
-
-
 					<view class="row center" style="position: absolute; right: 56rpx;">
-						<image v-if="index==0" :src="$img1('checkin/Jackpot.png')" style="width: 46rpx; height: 26rpx;"
-							mode=""></image>
+						<image v-if="index == 0" :src="$img1('checkin/Jackpot.png')"
+							style="width: 46rpx; height: 26rpx;" mode=""></image>
 						<text style="color: #999999; font-size: 20rpx; margin-left: 16rpx;">晶体*1500</text>
 					</view>
-
-
 				</view>
 			</scroll-view>
-
-
-
-
-
 		</view>
-
-
 		<view class="column align-center"
 			style="width: 100%; height: 198rpx; background-color: #fff; margin-top: 8rpx;">
 
@@ -133,213 +114,405 @@
 				style="width: 340rpx; height: 84rpx; background-color: #D8FD24; border-radius: 16rpx; margin-top: 32rpx;">
 				<text style="color: #333333; font-size: 32rpx; font-weight: 600;">马上参与</text>
 			</view>
-			<text
-				style="color: #8A8A8A; font-size: 20rpx; font-weight: 400; margin-top: 12rpx;">距离开奖时间：0天06：29：19</text>
+			<text style="color: #8A8A8A; font-size: 20rpx; font-weight: 400; margin-top: 12rpx;">距离开奖时间：{{ remainingTime
+			}}</text>
 
 		</view>
-
-
-
 	</view>
 </template>
 
 <script>
-	export default {
-		data() {
-			return {
-				tabCur: 0,
-				bonusDetailsData: {
-					Title: "新人消费满5元福利屋",
-					Tips: "消费返利（所有参与者有机会获得奖励",
-					Time: "2025-03-10  14:00",
-					Popularity: 52, //热度
-					GoodsList: [{
-						imgUrl: "",
-						Price: "1000钻石",
-					}, {
-						imgUrl: "",
-						Price: "1000钻石",
-					}, {
-						imgUrl: "",
-						Price: "1000钻石",
-					}, {
-						imgUrl: "",
-						Price: "1000钻石",
-					}, {
-						imgUrl: "",
-						Price: "1000钻石",
-					}, {
-						imgUrl: "",
-						Price: "1000钻石",
-					}, {
-						imgUrl: "",
-						Price: "1000钻石",
-					}, {
-						imgUrl: "",
-						Price: "1000钻石",
-					}, {
-						imgUrl: "",
-						Price: "1000钻石",
-					}, ],
-					PlayerList: [{
-						Avatar: "", //头像
-						name: "微信名",
-						time: "2025-03-10  14:00"
-					}, {
-						Avatar: "",
-						name: "微信名",
-						time: "2025-03-10  14:00"
-					}, {
-						Avatar: "",
-						name: "微信名",
-						time: "2025-03-10  14:00"
-					}, {
-						Avatar: "",
-						name: "微信名",
-						time: "2025-03-10  14:00"
-					}, {
-						Avatar: "",
-						name: "微信名",
-						time: "2025-03-10  14:00"
-					}, {
-						Avatar: "",
-						name: "微信名",
-						time: "2025-03-10  14:00"
-					}, {
-						Avatar: "",
-						name: "微信名",
-						time: "2025-03-10  14:00"
-					}, {
-						Avatar: "",
-						name: "微信名",
-						time: "2025-03-10  14:00"
-					}, {
-						Avatar: "",
-						name: "微信名",
-						time: "2025-03-10  14:00"
-					}, {
-						Avatar: "",
-						name: "微信名",
-						time: "2025-03-10  14:00"
-					}, {
-						Avatar: "",
-						name: "微信名",
-						time: "2025-03-10  14:00"
-					}, ]
-				},
+export default {
+	data() {
+		return {
+			currentTab: 0,
+			bonusData: {
+				title: "新人消费满5元福利屋",
+				tips: "消费返利（所有参与者有机会获得奖励",
+				time: "2025-03-10  14:00",
+				popularity: 52, // 热度
+			},
+			goodsList: [],
+			participantList: [{
+				avatar: "", // 头像
+				name: "微信名",
+				time: "2025-03-10  14:00"
+			}, {
+				avatar: "",
+				name: "微信名",
+				time: "2025-03-10  14:00"
+			}, {
+				avatar: "",
+				name: "微信名",
+				time: "2025-03-10  14:00"
+			}, {
+				avatar: "",
+				name: "微信名",
+				time: "2025-03-10  14:00"
+			}, {
+				avatar: "",
+				name: "微信名",
+				time: "2025-03-10  14:00"
+			}, {
+				avatar: "",
+				name: "微信名",
+				time: "2025-03-10  14:00"
+			}, {
+				avatar: "",
+				name: "微信名",
+				time: "2025-03-10  14:00"
+			}, {
+				avatar: "",
+				name: "微信名",
+				time: "2025-03-10  14:00"
+			}, {
+				avatar: "",
+				name: "微信名",
+				time: "2025-03-10  14:00"
+			}, {
+				avatar: "",
+				name: "微信名",
+				time: "2025-03-10  14:00"
+			}, {
+				avatar: "",
+				name: "微信名",
+				time: "2025-03-10  14:00"
+			}],
+			awardRecordList: [{
+				avatar: "", // 头像
+				name: "微信名",
+				time: "2025-03-10  14:00"
+			}, {
+				avatar: "",
+				name: "微信名",
+				time: "2025-03-10  14:00"
+			}, {
+				avatar: "",
+				name: "微信名",
+				time: "2025-03-10  14:00"
+			}, {
+				avatar: "",
+				name: "微信名",
+				time: "2025-03-10  14:00"
+			}, {
+				avatar: "",
+				name: "微信名",
+				time: "2025-03-10  14:00"
+			}, {
+				avatar: "",
+				name: "微信名",
+				time: "2025-03-10  14:00"
+			}, {
+				avatar: "",
+				name: "微信名",
+				time: "2025-03-10  14:00"
+			}, {
+				avatar: "",
+				name: "微信名",
+				time: "2025-03-10  14:00"
+			}, {
+				avatar: "",
+				name: "微信名",
+				time: "2025-03-10  14:00"
+			}, {
+				avatar: "",
+				name: "微信名",
+				time: "2025-03-10  14:00"
+			}, {
+				avatar: "",
+				name: "微信名",
+				time: "2025-03-10  14:00"
+			}],
+			tabList: [
+				"赏品预览", "参与人数", "赏品记录"
+			],
+			remainingTime: "0天00:00:00",
+			countdownTimer: null,
+			endTime: null,
+			currentServerTime: null
+		}
+	},
+	async onLoad(options) {
+		console.log(options)
+		await this.load(options.goods_id)
+	},
+	methods: {
+		async load(goods_id) {
+			const res = await this.req({
+				url: "goods_fuliwu_detail",
+				data: {
+					goods_id: goods_id
+				}
+			})
+			console.log(res)
 
-				tabList: [
-					"赏品预览", "参与人数", "赏品记录"
-				]
+			if (res.status === 1 && res.data) {
+				const { goods, goodslist, join_count, current_time, status, status_text } = res.data;
 
+				// 更新福利屋基本信息
+				this.bonusData = {
+					title: goods.title,
+					tips: goods.goods_describe,
+					time: goods.open_time,
+					popularity: join_count || 0
+				};
+
+				let index = 0;
+				this.goodsList.splice(0, this.goodsList.length)
+				// 更新赏品列表
+				goodslist.forEach(item => {
+					for (let i = 0; i < item.stock; i++) {
+						this.goodsList.push({
+							index,
+							imgUrl: item.imgurl,
+							title: item.title,
+							id: item.id,
+							stock: item.stock,
+							realPrice: item.price,
+							sortIndex: item.sort,
+							type: item.shang_title,
+							typeColor: item.shang_color
+						});
+						index++;
+					}
+				})
+				// this.goodsList = goodslist.map(item => ({
+				// 	imgUrl: item.imgurl,
+				// 	price: item.title,
+				// 	id: item.id,
+				// 	stock: item.stock,
+				// 	realPrice: item.price,
+				// 	sortIndex: item.sort,
+				// 	type: item.shang_title,
+				// 	typeColor: item.shang_color
+				// }));
+
+				// 计算倒计时
+				this.calculateRemainingTime(goods.open_time, current_time);
+				this.startCountdownTimer(goods.open_time, current_time);
+
+				// 其他状态信息
+				this.activityStatus = status;
+				this.activityStatusText = status_text;
+
+				// 获取参与人数和赏品记录列表
+				if (join_count > 0) {
+					await this.loadParticipants(goods_id);
+					await this.loadAwardRecords(goods_id);
+				}
 			}
 		},
-		methods: {
 
-			tabChange(i) {
-				this.tabCur = i
+		calculateRemainingTime(openTime, currentTime) {
+			// 将时间字符串转为时间对象
+			const endDate = new Date(openTime.replace(/-/g, '/'));
+			const currentDate = new Date(currentTime.replace(/-/g, '/'));
 
-				switch (i) {
-					case 0:
-						this.subTabChange(this.subTabCur)
-						break
-					default:
-						this.listData = []
+			// 保存结束时间和当前服务器时间，用于实时倒计时
+			this.endTime = endDate;
+			this.currentServerTime = currentDate;
 
-						this.mescroll.resetUpScroll()
-						this.mescroll.scrollTo(0, 0)
-						break
+			// 计算时间差
+			let diffTime = endDate.getTime() - currentDate.getTime();
+			if (diffTime <= 0) {
+				this.remainingTime = "0天00:00:00";
+				return;
+			}
+
+			// 转换为天、时、分、秒
+			const days = Math.floor(diffTime / (24 * 60 * 60 * 1000));
+			diffTime = diffTime % (24 * 60 * 60 * 1000);
+			const hours = Math.floor(diffTime / (60 * 60 * 1000));
+			diffTime = diffTime % (60 * 60 * 1000);
+			const minutes = Math.floor(diffTime / (60 * 1000));
+			diffTime = diffTime % (60 * 1000);
+			const seconds = Math.floor(diffTime / 1000);
+
+			// 格式化时间
+			this.remainingTime = `${days}天${hours.toString().padStart(2, '0')}:${minutes.toString().padStart(2, '0')}:${seconds.toString().padStart(2, '0')}`;
+		},
+
+		startCountdownTimer(openTime, currentTime) {
+			// 清除之前可能存在的计时器
+			if (this.countdownTimer) {
+				clearInterval(this.countdownTimer);
+			}
+
+			// 保存结束时间和当前时间的时间差（毫秒）
+			const endDate = new Date(openTime.replace(/-/g, '/'));
+			const currentDate = new Date(currentTime.replace(/-/g, '/'));
+			const serverClientTimeDiff = currentDate.getTime() - new Date().getTime();
+
+			// 设置每秒更新一次倒计时
+			this.countdownTimer = setInterval(() => {
+				// 获取当前客户端时间并加上与服务器的时间差，以获得准确的服务器当前时间
+				const now = new Date();
+				const serverNow = new Date(now.getTime() + serverClientTimeDiff);
+
+				// 计算与结束时间的差值
+				let diffTime = endDate.getTime() - serverNow.getTime();
+
+				// 倒计时结束
+				if (diffTime <= 0) {
+					clearInterval(this.countdownTimer);
+					this.remainingTime = "0天00:00:00";
+					return;
 				}
-			},
 
+				// 计算天、时、分、秒
+				const days = Math.floor(diffTime / (24 * 60 * 60 * 1000));
+				diffTime = diffTime % (24 * 60 * 60 * 1000);
+				const hours = Math.floor(diffTime / (60 * 60 * 1000));
+				diffTime = diffTime % (60 * 60 * 1000);
+				const minutes = Math.floor(diffTime / (60 * 1000));
+				diffTime = diffTime % (60 * 1000);
+				const seconds = Math.floor(diffTime / 1000);
+
+				// 更新倒计时显示
+				this.remainingTime = `${days}天${hours.toString().padStart(2, '0')}:${minutes.toString().padStart(2, '0')}:${seconds.toString().padStart(2, '0')}`;
+			}, 1000);
+		},
+
+		onUnload() {
+			// 组件卸载时清除计时器
+			if (this.countdownTimer) {
+				clearInterval(this.countdownTimer);
+				this.countdownTimer = null;
+			}
+		},
+
+		async loadParticipants(goods_id) {
+			// 这里应该调用获取参与人数列表的接口
+			// 示例代码，实际应替换为真实接口
+			try {
+				const res = await this.req({
+					url: "goods_fuliwu_participants",
+					data: { goods_id }
+				});
+
+				if (res.status === 1 && res.data && res.data.list) {
+					this.participantList = res.data.list.map(item => ({
+						avatar: item.avatar || "",
+						name: item.nickname || "用户",
+						time: item.create_time || ""
+					}));
+				}
+			} catch (error) {
+				console.error("加载参与人数列表失败", error);
+			}
+		},
+
+		async loadAwardRecords(goods_id) {
+			// 这里应该调用获取赏品记录的接口
+			// 示例代码，实际应替换为真实接口
+			try {
+				const res = await this.req({
+					url: "goods_fuliwu_records",
+					data: { goods_id }
+				});
+
+				if (res.status === 1 && res.data && res.data.list) {
+					this.awardRecordList = res.data.list.map(item => ({
+						avatar: item.avatar || "",
+						name: item.nickname || "用户",
+						time: item.win_time || "",
+						award: item.award_name || "晶体*1500"
+					}));
+				}
+			} catch (error) {
+				console.error("加载赏品记录失败", error);
+			}
+		},
+
+		handleTabChange(index) {
+			this.currentTab = index
 		}
 	}
+}
 </script>
 
 <style lang="scss">
-	.content {
-		width: 100vw;
-		min-height: 100vh;
-		box-sizing: border-box;
-		background: #F7F7F7;
+.content {
+	width: 100vw;
+	min-height: 100vh;
+	box-sizing: border-box;
+	background: #F7F7F7;
+}
+
+.navLeft {
+	position: fixed;
+	left: 30rpx;
+	height: 44px;
+	z-index: 100;
+
+	>view {
+		font-weight: 400;
+		font-size: 50rpx;
+		color: #FFFFFF;
 	}
+}
 
-	.navLeft {
-		position: fixed;
-		left: 30rpx;
-		height: 44px;
-		z-index: 100;
+.title1 {
+	width: 100%;
+	top: 108rpx;
+	position: absolute;
+	display: flex;
+	align-items: center;
+	font-size: 34rpx;
+	justify-content: center;
+	color: black;
+	z-index: 50;
+}
 
-		>view {
+.tab {
+	display: flex;
+	justify-content: space-between;
+	align-items: center;
+	padding: 10rpx 60rpx;
+
+
+	.tab-item {
+		width: 155rpx;
+		height: 68rpx;
+		position: relative;
+		margin-right: 25rpx;
+
+		&.act {
 			font-weight: 400;
-			font-size: 50rpx;
-			color: #FFFFFF;
-		}
-	}
+			font-size: 28rpx;
+			color: #333333;
 
-	.title1 {
-		width: 100%;
-		top: 108rpx;
-		position: absolute;
-		display: flex;
-		align-items: center;
-		font-size: 34rpx;
-		justify-content: center;
-		color: black;
-		z-index: 50;
-	}
-
-	.tab {
-		display: flex;
-		justify-content: space-between;
-		align-items: center;
-		padding: 10rpx 60rpx;
-
-
-		.tab-item {
-			width: 155rpx;
-			height: 68rpx;
-			position: relative;
-			margin-right: 25rpx;
-
-			&.act {
-				font-weight: 400;
-				font-size: 28rpx;
-				color: #333333;
-
-				&::after {
-					content: '';
-					position: absolute;
-					bottom: 0;
-					left: 50%;
-					transform: translateX(-50%);
-					width: 48rpx;
-					height: 4rpx;
-					background: #333333;
-				}
-			}
-
-			&.unact {
-				font-weight: 400;
-				font-size: 28rpx;
-				color: #CCCCCC;
+			&::after {
+				content: '';
+				position: absolute;
+				bottom: 0;
+				left: 50%;
+				transform: translateX(-50%);
+				width: 48rpx;
+				height: 4rpx;
+				background: #333333;
 			}
 		}
+
+		&.unact {
+			font-weight: 400;
+			font-size: 28rpx;
+			color: #CCCCCC;
+		}
 	}
+}
 
-	.grid-container {
-		display: grid;
-		grid-template-columns: repeat(4, 134rpx);
-		gap: 24rpx;
-		width: 580rpx;
-		margin: 28rpx auto 0;
-		padding-bottom: 20rpx;
-	}
+.grid-container {
+	display: grid;
+	grid-template-columns: repeat(4, 124rpx);
+	gap: 24rpx;
+	width: 580rpx;
+	margin: 28rpx auto 0;
+	padding-bottom: 20rpx;
+}
 
-	.grid-item {
-		width: 112rpx;
-		height: 150rpx;
-
-
-	}
+.grid-item {
+	width: 142rpx;
+	height: 150rpx;
+}
 </style>
\ No newline at end of file