From 6059a4a665336b0ed8fc29820b8bcc79a69af1d5 Mon Sep 17 00:00:00 2001
From: zpc <zpc1131@gamil.com>
Date: Thu, 3 Apr 2025 02:44:50 +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_details.vue | 188 ++++++++++++++++---------
 1 file changed, 120 insertions(+), 68 deletions(-)

diff --git a/pages/infinite/bonus_house_details.vue b/pages/infinite/bonus_house_details.vue
index 06913c5..92b2b06 100644
--- a/pages/infinite/bonus_house_details.vue
+++ b/pages/infinite/bonus_house_details.vue
@@ -10,8 +10,6 @@
 		<view style="height: 232rpx;">
 
 		</view>
-
-
 		<view class="relative"
 			style="width: 686rpx; height: 152rpx; background-color: #FFFFFF; border-radius: 16rpx; margin: 0 auto;">
 
@@ -48,83 +46,133 @@
 			</view>
 
 			<!-- 赏品预览 -->
-			<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 v-if="currentTab == 0" scroll-y="true" class="" style="width: 100%; height: 900rpx;">
+				<view style="height:30rpx;"></view>
+				<view class="" style="width: 544rpx; height: 500rpx;  margin: 0 auto 0;">
+					<!-- <special-banner :banner-list="bannerList" :swiper-config="swiperConfig"></special-banner> -->
+					<swiper class="swiper-box" :current="currentItemId" :style="{ height: '500rpx' }" :autoplay="false"
+						:indicator-dots="false" :circular="true" :interval="3000">
+						<swiper-item v-for="(item, index) in goodsList" :key="index" :item-id="item.index">
+							<view style="display: flex; justify-content: center; align-items: center; height: 80%;">
+								<view
+									style="background-image: url('https://mh.shhuanmeng.com/flw_bj.png');background-size: 100% 100%; width: 280rpx; height:352rpx; display: flex; justify-content: center; align-items: center;z-index: 2;">
+									<image :src="item.imgurl_detail" style="width: 280rpx; height:352rpx;"></image>
+								</view>
+							</view>
+							<view
+								style="background-image: url('https://mh.shhuanmeng.com/flw_dibu.png');background-size: 100% 100%;width: 100%; height: 122rpx;position: relative;top:-15%;z-index: 1;">
+							</view>
+						</swiper-item>
+					</swiper>
 				</view>
-
-				<view class="grid-container">
-					<view class="grid-item column align-center" v-for="(item, index) in goodsList" :key="index"
-						style="">
-						<image style="width: 112rpx; height: 112rpx;border-radius:25rpx;" :src="item.imgUrl"></image>
+				<scroll-view scroll-y="true" style="width: 100%; height:400rpx;">
+					<view class="grid-container">
+						<view @click=" currentItemId=item.index" class="grid-item column align-center" v-for="(item, index) in goodsList"
+						:key="index" style="">
+						<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>
-
-				</view>
-			</scroll-view>
-
-
-			<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>
-					</view>
-
-
-					<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>
-					</view>
-
-				</view>
-			</scroll-view>
-			<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>
-					</view>
-					<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>
-					</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>
-						<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;">
-
-			<view class="center"
-				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;">距离开奖时间：{{ remainingTime
-			}}</text>
+			</scroll-view>
 
 		</view>
+
+
+		<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>
+				</view>
+
+
+				<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>
+				</view>
+
+			</view>
+		</scroll-view>
+		<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>
+				</view>
+				<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>
+				</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>
+					<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;">
+
+		<view class="center"
+			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;">距离开奖时间：{{ remainingTime
+		}}</text>
+
+	</view>
 	</view>
 </template>
 
 <script>
+
 export default {
+
 	data() {
 		return {
+			currentItemId: 0,
+			bannerList: [{
+				picture: 'https://mh.shhuanmeng.com/topic/20250402/e02ce743c5545f53e905a276f2c36249.png',
+				title: '七夕将至：时光足够久，韧性也能炖出味',
+				description: '一万年太久，就现在，给你爱',
+				path: ''
+			}, {
+				picture: 'https://mh.shhuanmeng.com/topic/20250402/e02ce743c5545f53e905a276f2c36249.png',
+				title: '新菜上架：无边海洋，找到顺眼的那尾鱼',
+				description: '花中樱，鱼乃鲷花中樱，鱼乃鲷',
+				path: ''
+			}, {
+				picture: 'https://mh.shhuanmeng.com/topic/20250402/e02ce743c5545f53e905a276f2c36249.png',
+				title: '在湘西的烟火气里，发现苗族少女的神明',
+				description: '取材自湘西苗族传统的烟熏文化',
+				path: ''
+			}, {
+				picture: 'https://mh.shhuanmeng.com/topic/20250402/e02ce743c5545f53e905a276f2c36249.png',
+				title: '福利降临，陪伴独自行走的丰盛旅程',
+				description: '在自己的小世界里，日日好日，夜夜好清宵',
+				path: ''
+			}],
+			swiperConfig: {
+				indicatorDots: true,
+				indicatorColor: 'rgba(255, 255, 255, .4)',
+				indicatorActiveColor: 'rgba(255, 255, 255, 1)',
+				autoplay: false,
+				interval: 3000,
+				duration: 300,
+				circular: true,
+				previousMargin: '150rpx',
+				nextMargin: '150rpx'
+			},
 			currentTab: 0,
 			bonusData: {
 				title: "新人消费满5元福利屋",
@@ -237,6 +285,7 @@ export default {
 		await this.load(options.goods_id)
 	},
 	methods: {
+
 		async load(goods_id) {
 			const res = await this.req({
 				url: "goods_fuliwu_detail",
@@ -271,7 +320,8 @@ export default {
 							realPrice: item.price,
 							sortIndex: item.sort,
 							type: item.shang_title,
-							typeColor: item.shang_color
+							typeColor: item.shang_color,
+							imgurl_detail: item.imgurl_detail
 						});
 						index++;
 					}
@@ -507,8 +557,10 @@ export default {
 	grid-template-columns: repeat(4, 124rpx);
 	gap: 24rpx;
 	width: 580rpx;
-	margin: 28rpx auto 0;
+	margin: 10rpx auto 0;
 	padding-bottom: 20rpx;
+
+
 }
 
 .grid-item {