From 2e0e29a3d148d572187e6eda985cd176fced1ff3 Mon Sep 17 00:00:00 2001
From: davy <davy@example.com>
Date: Sat, 5 Apr 2025 16:55:18 +0800
Subject: [PATCH] =?UTF-8?q?=E4=BC=98=E5=8C=96=E6=B4=BB=E5=8A=A8=E5=88=97?=
 =?UTF-8?q?=E8=A1=A8=E7=BB=84=E4=BB=B6=E6=A0=B7=E5=BC=8F=E5=92=8C=E5=B8=83?=
 =?UTF-8?q?=E5=B1=80=EF=BC=9A1.=20=E8=B0=83=E6=95=B4=E5=88=97=E8=A1=A8?=
 =?UTF-8?q?=E9=97=B4=E8=B7=9D=202.=20=E4=BC=98=E5=8C=96=E6=BB=9A=E5=8A=A8?=
 =?UTF-8?q?=E4=BD=93=E9=AA=8C=203.=20=E4=BF=AE=E5=A4=8D=E9=A6=96=E4=B8=AA?=
 =?UTF-8?q?=E7=BB=84=E4=BB=B6=E9=81=AE=E7=9B=96=E9=97=AE=E9=A2=98?=
MIME-Version: 1.0
Content-Type: text/plain; charset=UTF-8
Content-Transfer-Encoding: 8bit

---
 pages/activityList/activityList.vue |  82 -------
 pages/index/index.vue               | 319 +++++++++++-----------------
 2 files changed, 124 insertions(+), 277 deletions(-)

diff --git a/pages/activityList/activityList.vue b/pages/activityList/activityList.vue
index d50f213..20d9f48 100644
--- a/pages/activityList/activityList.vue
+++ b/pages/activityList/activityList.vue
@@ -311,86 +311,4 @@
 		margin-top: 104rpx; // 筛选栏高度
 		padding: 24rpx 32rpx;
 	}
-
-	.activity-item {
-		border-radius: 20rpx;
-		background: #FDFDFD;
-		box-sizing: border-box;
-		border: 1px solid #F2F2F2;
-		width: 702rpx;
-		margin-bottom: 32rpx;
-		.left {
-			padding: 24rpx 20rpx;
-			border-radius: 20rpx;
-			background: #FFFFFF;
-			box-sizing: border-box;
-			border: 1px solid #EFEDE9;
-			width: 180rpx;
-			margin-top: -10rpx;
-			margin-bottom: -10rpx;
-		}
-	
-		.right {
-			padding: 20rpx;
-			flex:1;
-			.title {
-				font-family: Source Han Sans;
-				font-size: 28rpx;
-				font-weight: bold;
-				line-height: 30rpx;
-				color: #0B0E26;
-				margin-bottom: 20rpx;
-			}
-	
-			.sub {
-				font-family: Source Han Sans;
-				font-size: 24rpx;
-				font-weight: 500;
-				line-height: 30rpx;
-				color: #0B0E26;
-				margin-bottom: 16rpx;
-	
-			}
-	
-			.scroll-img {
-				width: 500rpx;
-				display: flex;
-				flex-direction: row;
-				white-space: nowrap;
-				height: 144rpx;
-				margin-bottom: 20rpx;
-	
-				.beer-box {
-					width: 100rpx;
-					background: #FFFFFF;
-					margin-right: 20rpx;
-					box-sizing: border-box;
-					display: inline-block;
-	
-					// &:nth-child(1) {
-					// 	margin-left: 32rpx;
-					// }
-	
-					.cover {
-						width: 100rpx;
-						height: 144rpx;
-						border-radius: 10rpx;
-					}
-	
-				}
-			}
-			.zeng {
-				font-family: Source Han Sans;
-				font-size: 20rpx;
-				font-weight: bold;
-				line-height: normal;
-				text-align: center;
-				color: #0B0E26;
-				padding: 8rpx 12rpx;
-				border-radius: 10rpx;
-				background: #FEE034;
-				margin-right: 20rpx;
-			}
-		}
-	}
 </style>
\ No newline at end of file
diff --git a/pages/index/index.vue b/pages/index/index.vue
index 7ee4607..c0d8d9d 100644
--- a/pages/index/index.vue
+++ b/pages/index/index.vue
@@ -58,63 +58,31 @@
 
 
 		<!-- <commonTitle title="热门活动招募"></commonTitle> -->
-		<view style="margin:46rpx 0 16rpx 24rpx;font-size: 40rpx;font-weight:bold;color: #030303;">
-			<text >热门活动招募</text></view>
-		<!-- 专辑列表 -->
-		<!-- <view v-for="(item,i) in featurePageList" :key="i" class="bg-white">
-			<view class="flex justify-between align-center title-box" @click="toFeaturePage(item)">
-				<view class="flex-1 flex flex-col">
-					<text class="title">{{ item.pageName }}</text>
-					<text class="sub">{{ item.subTitle}}</text>
+		<view class="section-title">
+			<text>热门活动招募</text>
+		</view>
+		<!-- 活动列表容器 -->
+		<view class="list-container">
+			<scroll-view 
+				scroll-y="true" 
+				@scrolltolower="changePage"
+				:scroll-anchoring="true"
+				:refresher-enabled="true"
+				@refresherrefresh="onRefresh"
+			>
+				<view class="activity-list" style="margin-top: 16rpx;">
+					<activity-item 
+						v-for="(item, index) in featurePageList" 
+						:key="index"
+						:item="item"
+						@click="toDetail"
+						@review="toReview"
+					/>
 				</view>
-				<image src="@/static/arrow-right.png" style="width: 48rpx;height: 48rpx;"></image>
-			</view>
-			<rowBeer :beers="item.beers" />
-			
-		</view> -->
-		<view class="flex-1 list-container" style="padding:0 24rpx 24rpx">
-			<scroll-view style="height: 100%;" scroll-y="true" @scrolltolower="changePage">
-				<view class="activity-item flex" v-for="(it, index) in featurePageList" :key="index" @click="toDetail(it)">
-					<view class="left flex flex-col justify-between align-center">
-						<image :src="it.brandLogo" style="width: 140rpx;height: 140rpx;">
-						</image>
-						<text >活动状态</text>
-						<view v-if="it.stage == 0">未开始</view>
-						<view v-if="it.stage == 2">已结束</view>
-						<view v-if="it.stage == 3">已结束</view>
-						<view v-if="it.stage == 4">活动停止</view>
-						<view v-if="it.stage == 1" class="margin-bottom-xs" style="color: #9E9E9E;font-size: 24rpx;">招募即将结束</view>
-						<view v-if="it.stage == 1">
-							<text style="font-size: 72rpx; color: #DE3C4B;">{{it.remainingDays}}</text>天
-						</view>
-					</view>
-					<view class="right">
-						<view class="title">{{ it.breweryName }}焦糖</view>
-						<!-- <view class="title">{{ it.activityName }}</view> -->
-						<view class="sub">时间：首次扫码开始累计 <text style="color:#DE3C4B">{{it.duration?it.duration:0}}天内</text></view>
-						<view class="sub">目标：全系列酒款累积扫码 ≥ {{ it.activityTarget?it.activityTarget:0}}桶</view>
-						<scroll-view v-if="it.beers" scroll-x="true" class="scroll-img">
-							<view class="beer-box" v-for="(it, index) in it.beers" :key="index" @click="toReview(it)">
-								<image v-if="it.cover" :src="it.cover" class="cover"></image>
-							</view>
-						</scroll-view>
-						<view class="flex align-center" style="height:40rpx;">
-							<text  class="zeng">赠</text>
-							<text  style="color: #030303;font-size: 28rpx;">焦糖肉桂红柿子*3L*1</text>
-						</view>
-						<!-- <view class="flex align-center">
-							<text v-if="it.activityRewardType == 2 || (it.activityRewardType == 1 && it.activityRewardGoods)" class="zeng">赠</text>
-							<text v-if="it.activityRewardType == 1 && it.activityRewardGoods" style="color: #0B0E26;font-size: 24rpx;">{{it.activityRewardGoods.goodsName}} * {{it.activityRewardCount}}</text>
-							<text v-if="it.activityRewardType == 2" style="color: #0B0E26;font-size: 24rpx;">啤酒币 * {{it.activityRewardCount}}个</text>
-						</view> -->
-					</view>
-				</view>
-				<view class="cu-load" style="height: 88rpx;"></view>
-				<view class="more-btn-box" @click="moreHotActivity">
+				<view v-if="featurePageList.length > 0" class="more-btn-box" @click="moreHotActivity">
 					<view class="more-btn">更多热门活动招募</view>
 				</view>
 			</scroll-view>
-		
 		</view>
 		<!-- <view  class="weixin-box zixuns">
 			<text>入驻助理在线服务，1对1咨询使用指南~</text>
@@ -144,7 +112,8 @@
 
 <script>
 	import {
-		getBannerList
+		getBannerList,
+		getActivities
 	} from '@/api/bar.js'
 	import {
 		listFeaturePage
@@ -152,11 +121,13 @@
 	import commonTitle from '@/components/commonTitle.vue'
 	import loginPopup from '@/components/loginPopup.vue';
 	import rowBeer from '@/components/rowBeer.vue'
+	import ActivityItem from '@/components/ActivityItem.vue'
 	export default {
 		components: {
 			commonTitle,
 			loginPopup,
-			rowBeer
+			rowBeer,
+			ActivityItem
 		},
 		data() {
 			return {
@@ -166,9 +137,14 @@
 				bannerJoin: null, // 认证门店banner
 				showJoinImg: false, // 是否显示认证门店图片
 				userInfo: null,
-				featurePageList: [], // 专辑页列表
+				featurePageList: [], // 活动列表
 				homeBanner: [], //首页banner
 				keyword: '',
+				pageNum: 1,
+				pageSize: 10,
+				total: 0,
+				loading: false,
+				finished: false,
 			};
 		},
 		onLoad() {
@@ -191,12 +167,16 @@
 		},
 		onShow() {
 			this.userInfo = uni.getStorageSync('userInfo')
-			if (this.userInfo == null || this.userInfo.userType == '09') { // 没登录或者没认证门店
+			if (this.userInfo == null || this.userInfo.userType == '09') {
 				this.showJoinImg = true
-			}else {
-					this.showJoinImg = false
-				}
-			this.getFeaturePageListFun() // 专辑页列表
+			} else {
+				this.showJoinImg = false
+			}
+			// 重置分页参数
+			this.pageNum = 1
+			this.finished = false
+			this.featurePageList = []
+			this.getActivityList() // 获取活动列表
 		},
 		// onPullDownRefresh(){
 		// 	this.getFeaturePageListFun() // 专辑页列表
@@ -332,7 +312,48 @@
 			changeSearch() {
 				// 实现搜索逻辑
 				console.log('搜索关键词:', this.keyword);
-			}
+			},
+			// 下拉刷新
+			async onRefresh() {
+				this.pageNum = 1
+				this.finished = false
+				this.featurePageList = []
+				await this.getActivityList()
+				uni.stopPullDownRefresh()
+			},
+			// 获取活动列表
+			async getActivityList() {
+				if (this.loading || this.finished) return
+				this.loading = true
+				try {
+					const res = await getActivities({
+						pageNum: this.pageNum,
+						pageSize: this.pageSize
+					})
+					if (res.code === 200) {
+						const { rows, total } = res
+						if (this.pageNum === 1) {
+							this.featurePageList = rows
+						} else {
+							this.featurePageList = [...this.featurePageList, ...rows]
+						}
+						this.total = total
+						this.finished = this.featurePageList.length >= total
+						this.pageNum++
+					}
+				} catch (error) {
+					console.error('获取活动列表失败:', error)
+				} finally {
+					this.loading = false
+				}
+			},
+
+			// 修改页面加载更多方法
+			async changePage() {
+				if (!this.finished) {
+					await this.getActivityList()
+				}
+			},
 		}
 	}
 </script>
@@ -344,11 +365,10 @@
 
 	.page {
 		background: #F9F9F9;
-		height: 100vh;
-		overflow-y: auto;
+		min-height: 100vh;
+		display: flex;
+		flex-direction: column;
 		font-family: Roboto;
-		// padding-bottom: calc(110rpx + constant(safe-area-inset-bottom));
-		// padding-bottom: calc(110rpx + env(safe-area-inset-bottom));
 	}
 
 	.search-box {
@@ -381,102 +401,48 @@
 			box-shadow: 0rpx 1rpx 3rpx 0rpx rgba(0, 0, 0, 0.1);
 		}
 	}
+	.section-title {
+		margin: 46rpx 24rpx 32rpx 24rpx;
+		font-size: 40rpx;
+		font-weight: bold;
+		color: #030303;
+	}
+
 	.list-container {
-		// margin-top: -300rpx;
-		// padding-top: 5rpx;
+		flex: 1;
+		display: flex;
+		flex-direction: column;
 		
-		overflow-y: auto;
-		// padding-bottom: calc(110rpx + constant(safe-area-inset-bottom));
-		// padding-bottom: calc(110rpx + env(safe-area-inset-bottom));
-	
-		.card {
-			border-radius: 40rpx;
+		scroll-view {
+			flex: 1;
 		}
-	
-		.avatar {
-			width: 160rpx;
-			height: 160rpx;
-			border-radius: 8rpx;
+		
+		.activity-list {
+			padding: 0 24rpx;
 		}
-		// 累积活动
-		.activity-item {
-			border-radius: 20rpx;
-			background: #FDFDFD;
-			box-sizing: border-box;
-			border: 1px solid #F2F2F2;
-			width: 702rpx;
-			margin-top: 5rpx;
-			margin-bottom: 35rpx;
-			.left {
-				padding: 24rpx 16rpx;
-				border-radius: 20rpx;
-				background: #FFFFFF;
-				box-sizing: border-box;
-				border: 1px solid #EFEDE9;
-				width: 180rpx;
-				margin-top: -10rpx;
-				margin-bottom: -10rpx;
-				// height: 428rpx;
+		
+		.more-btn-box {
+			width: 92%;
+			height: 88rpx;
+			margin: 32rpx auto;
+			background: linear-gradient(135deg, #19367A, #2C4C99);
+			border-radius: 12rpx;
+			display: flex;
+			align-items: center;
+			justify-content: center;
+			box-shadow: 0 4rpx 16rpx rgba(25, 54, 122, 0.2);
+			transition: all 0.3s ease;
+			
+			&:active {
+				transform: scale(0.98);
+				box-shadow: 0 2rpx 8rpx rgba(25, 54, 122, 0.1);
 			}
-		
-			.right {
-				padding: 24rpx 0 22rpx 16rpx;
-				flex:1;
-				.title {
-					font-size: 32rpx;
-					font-weight: bold;
-					line-height: 48rpx;
-					color: #0B0E26;
-					margin-bottom: 16rpx;
-					height: 48rpx;
-				}
-		
-				.sub {
-					font-size: 28rpx;
-					font-weight: 500;
-					line-height: 40rpx;
-					color: #0B0E26;
-					margin-bottom: 16rpx;
-					
-				}
-				.scroll-img {
-					width: 500rpx;
-					display: flex;
-					flex-direction: row;
-					white-space: nowrap;
-					height: 144rpx;
-					margin-bottom: 18rpx;
-		
-					.beer-box {
-						width: 100rpx;
-						background: #FFFFFF;
-						margin-right: 20rpx;
-						box-sizing: border-box;
-						display: inline-block;
-		
-						// &:nth-child(1) {
-						// 	margin-left: 32rpx;
-						// }
-		
-						.cover {
-							width: 100rpx;
-							height: 144rpx;
-							border-radius: 10rpx;
-						}
-		
-					}
-				}
-				.zeng {
-					font-size: 20rpx;
-					font-weight: bold;
-					line-height: normal;
-					text-align: center;
-					color: #0B0E26;
-					padding: 8rpx 12rpx;
-					border-radius: 10rpx;
-					background: #FEE034;
-					margin-right: 20rpx;
-				}
+
+			.more-btn {
+				font-size: 28rpx;
+				font-weight: 600;
+				letter-spacing: 2rpx;
+				color: #FFFFFF;
 			}
 		}
 	}
@@ -608,30 +574,6 @@
 			color: #9D9D9D;
 		}
 	}
-	.more-btn-box {
-		width: 92%;
-		height: 88rpx;
-		margin: 32rpx auto;
-		background: linear-gradient(135deg, #19367A, #2C4C99);
-		border-radius: 12rpx;
-		display: flex;
-		align-items: center;
-		justify-content: center;
-		box-shadow: 0 4rpx 16rpx rgba(25, 54, 122, 0.2);
-		transition: all 0.3s ease;
-		
-		&:active {
-			transform: scale(0.98);
-			box-shadow: 0 2rpx 8rpx rgba(25, 54, 122, 0.1);
-		}
-
-		.more-btn {
-			font-size: 28rpx;
-			font-weight: 600;
-			letter-spacing: 2rpx;
-			color: #FFFFFF;
-		}
-	}
 	.zixuns {
 		padding: 0 34rpx 0 20rpx;
 		background: rgba(0, 0, 0, 0.6);
@@ -643,19 +585,6 @@
 	}
 
 	.activity-item {
-		background: #FFFFFF;
-		border-radius: 12rpx;
-		padding: 24rpx;
-		margin-bottom: 24rpx;
-		box-shadow: 0rpx 1rpx 3rpx 0rpx rgba(0, 0, 0, 0.1);
-		
-		.left {
-			width: 140rpx;
-			margin-right: 24rpx;
-		}
-		
-		.right {
-			flex: 1;
-		}
+		display: none;
 	}
 </style>
\ No newline at end of file