From a58ff141172748597c59ed1a093d6bedb3266dea Mon Sep 17 00:00:00 2001
From: davy <davy@example.com>
Date: Mon, 31 Mar 2025 14:29:15 +0800
Subject: [PATCH] feat: optimize activity list page

---
 pages/activityList/activityList.vue | 511 +++++++++++++++-------------
 1 file changed, 282 insertions(+), 229 deletions(-)

diff --git a/pages/activityList/activityList.vue b/pages/activityList/activityList.vue
index b1c1704..9f89bbd 100644
--- a/pages/activityList/activityList.vue
+++ b/pages/activityList/activityList.vue
@@ -1,62 +1,76 @@
 <template>
-	<view class="page-content flex-col">
-		<view class="bg-zd" style="height: 526rpx;border-radius: 0 0 100rpx 100rpx;margin-bottom: 20rpx;"
-			:style="{'padding-top': statusBaeHeight + 60 + 'px'}">
-			<view class="padding-lr flex justify-between">
-				<template>
-					<view class="text-sm tag" :class="{'active-tag': curTag == 0}" @click="changeTag(0)">ALL</view>
-					<view class="text-sm tag" :class="{'active-tag': curTag == 1}" @click="changeTag(1)">关注品牌</view>
-				</template>
-				<template>
-					<view class="text-sm tag" :class="{'active-tag': queryForm.orderBy == 'popularity'}" @click="changeOrder('popularity')">人气排名</view>
-					<view class="text-sm tag" :class="{'active-tag': queryForm.orderBy == 'create_time'}" @click="changeOrder('create_time')">最新发布</view>
-				</template>
-			</view>
-		</view>
-		<view class="flex-1 padding list-container">
-			<scroll-view style="height: 100%;" scroll-y="true" @scrolltolower="changePage">
-				<view class="activity-item flex" v-for="(it, index) in activeList" :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}}天内</text></view>
-						<view class="sub">目标：全系列酒款累积扫码 ≥ {{ it.activityTarget}}桶</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">
-							<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 class="page">
+		<view class="page-content flex-col">
+			<!-- 筛选导航 -->
+			<view class="filter-tabs">
+				<view class="tabs-content">
+					<view 
+                        class="tab-item" 
+                        :class="{'active-tag': queryForm.orderBy == 'create_time'}" 
+                        @click="changeOrder('create_time')"
+                    >最新发布</view>
+					<view 
+                        class="tab-item" 
+                        :class="{'active-tag': queryForm.orderBy == 'popularity'}" 
+                        @click="changeOrder('popularity')"
+                    >人气排名</view>
+					<view class="brand-filter" :class="{ active: isFilterActive }" @click="showBrandFilter">
+						<text>筛选品牌</text>
+						<image :src="'/static/icons/filter.svg'" mode="aspectFit" class="filter-icon"></image>
 					</view>
 				</view>
-				<view class="cu-load" :class="loading?'loading': activeList.length == total ? 'over' :'more'"></view>
-			</scroll-view>
+			</view>
+
+			<!-- 列表内容区域 -->
+			<view class="list-container">
+				<scroll-view 
+                    style="height: 100%;" 
+                    scroll-y="true" 
+                    @scrolltolower="changePage"
+                    refresher-enabled="true"
+                    :refresher-triggered="isRefreshing"
+                    @refresherrefresh="onRefresh"
+                >
+					<view class="activity-item flex" v-for="(it, index) in activeList" :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="sub">时间：首次扫码开始累计 <text style="color:#DE3C4B">{{it.duration}}天内</text></view>
+							<view class="sub">目标：全系列酒款累积扫码 ≥ {{ it.activityTarget}}桶</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">
+								<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" :class="loading?'loading': activeList.length == total ? 'over' :'more'"></view>
+				</scroll-view>
+			</view>
+			<loginPopup ref="loginRef"></loginPopup>
 		</view>
-		<loginPopup ref="loginRef"></loginPopup>
 	</view>
 </template>
 
 <script>
 	import {
-		getActivities,
-		getFavoriteActivities
+		getActivities
 	} from '@/api/bar.js'
 	import loginPopup from '@/components/loginPopup.vue';
 	export default {
@@ -65,63 +79,41 @@
 		},
 		data() {
 			return {
-				statusBaeHeight: 40,
-				curTag: 0,
 				activeList: [], // 活动列表
 				loading: false,
+				isRefreshing: false, // 添加下拉刷新状态
 				queryForm: {
 					pageNum: 1,
 					pageSize: 5,
-					orderBy:''
+					orderBy: 'create_time' // 默认最新发布
 				},
 				total: 0,
+				isFilterActive: false  // 筛选按钮激活状态
 			};
 		},
 		onLoad() {
-			uni.setTabBarStyle({
-				backgroundColor: '#ffffff'
-			})
-			this.statusBaeHeight = uni.getWindowInfo.statusBarHeight
+			// 页面加载时获取活动列表，默认最新发布
 			this.getActivitiesFun()
 		},
 		methods: {
-			changeTag(key) {
-				this.curTag = key
-				if(key == 0) {
-					this.queryForm.pageNum = 1
-					this.activeList = []
-					this.getActivitiesFun()
-				}else if(key == 1) {
-					this.activeList = []
-					this.queryForm.pageNum = 1
-					this.getFavoriteActivitiesFun()
-				} 
-			},
 			// 切换排序
 			changeOrder(key) {
-				this.queryForm.orderBy = key
-				if(this.curTag == 0) {
-					this.queryForm.pageNum = 1
-					this.activeList = []
-					this.getActivitiesFun()
-				} else if(this.curTag == 1) {
-					this.activeList = []
-					this.queryForm.pageNum = 1
-					this.getFavoriteActivitiesFun()
-				}
-				
+				if (this.queryForm.orderBy === key) return;
+				this.queryForm.orderBy = key;
+				this.queryForm.pageNum = 1;
+				this.activeList = [];
+				this.getActivitiesFun();
 			},
+			
+			// 分页加载
 			changePage() {
 				if (this.activeList.length < this.total) {
-					if (this.curTag == 1) {
-						this.queryForm.pageNum++
-						this.getFavoriteActivitiesFun()
-					}else {
-						this.queryForm.pageNum++
-						this.getActivitiesFun()
-					}
+					this.queryForm.pageNum++;
+					this.getActivitiesFun();
 				}
 			},
+			
+			// 跳转详情
 			toDetail(item) {
 				if (!uni.getStorageSync('token')) {
 					this.$refs.loginRef.open()
@@ -131,44 +123,31 @@
 					url: "/pagesActivity/activityDetail?id=" + item.id
 				})
 			},
-			// 我关注的品牌方
-			getFavoriteActivitiesFun() {
-				this.loading = true
-				getFavoriteActivities(this.queryForm).then(res=>{
-					this.total = res.total
-					if(res.rows && res.rows.length > 0) {
-						let arr = res.rows.map(it => {
-							it.remainingDays = this.getRemainingDays(it.endDate)
-							return it
-						})
-						arr.forEach(it => {
-							this.activeList.push(it)
-						})
-					}
-					this.loading = false
-				}).catch(err => {
-					this.loading = false
-				})
-			},
+			
 			// 获取活动列表
 			getActivitiesFun() {
-				this.loading = true
+				this.loading = true;
 				getActivities(this.queryForm).then(res => {
-					this.total = res.total
+					this.total = res.total;
 					if(res.rows && res.rows.length > 0) {
 						let arr = res.rows.map(it => {
-							it.remainingDays = this.getRemainingDays(it.endDate)
-							return it
-						})
-						arr.forEach(it => {
-							this.activeList.push(it)
-						})
+							it.remainingDays = this.getRemainingDays(it.endDate);
+							return it;
+						});
+						// 如果是第一页，直接替换数据
+						if (this.queryForm.pageNum === 1) {
+							this.activeList = arr;
+						} else {
+							// 如果是加载更多，则追加数据
+							this.activeList = [...this.activeList, ...arr];
+						}
 					}
-					this.loading = false
+					this.loading = false;
 				}).catch(err => {
-					this.loading = false
-				})
+					this.loading = false;
+				});
 			},
+			
 			// 计算剩余天数
 			getRemainingDays(date) {
 				const targetDate = new Date(date);
@@ -177,131 +156,205 @@
 				const remainingDays = Math.ceil(timeDiff / (1000 * 3600 * 24));
 				return remainingDays;
 			},
+			
+			// 显示品牌筛选
+			showBrandFilter() {
+				this.isFilterActive = !this.isFilterActive;
+				// 其他筛选逻辑
+			},
+			
+			// 添加下拉刷新方法
+			onRefresh() {
+				this.isRefreshing = true;
+				// 重置分页参数
+				this.queryForm.pageNum = 1;
+				this.activeList = [];
+				
+				// 重新获取数据
+				getActivities(this.queryForm).then(res => {
+					this.total = res.total;
+					if(res.rows && res.rows.length > 0) {
+						let arr = res.rows.map(it => {
+							it.remainingDays = this.getRemainingDays(it.endDate);
+							return it;
+						});
+						this.activeList = arr;
+					}
+					this.isRefreshing = false;
+				}).catch(err => {
+					this.isRefreshing = false;
+				});
+			}
 		}
 	}
 </script>
 
 <style lang="scss" scoped>
-	.page-content {
-		height: 100vh;
+	.page {
+		min-height: 100vh;
+		background: #F9F9F9;
+	}
 
-		.activeTab {
-			font-size: 64rpx;
-			border-bottom: 2px solid #303048;
-		}
+	.filter-tabs {
+		position: fixed;
+		top: 0;
+		left: 0;
+		right: 0;
+		z-index: 99;
+		background: #FFFFFF;
+		// border-bottom: 1rpx solid #F5F5F5
 
-		.tag {
-			background-color: transparent;
-			border-radius: 12rpx;
-			padding: 12rpx 30rpx;
-			border: 1px solid #fff;
-			margin-right: 24rpx;
-		}
+		.tabs-content {
+			display: flex;
+			align-items: center;
+			padding: 20rpx 32rpx;
+			height: 112rpx;
+			width: 100%;
+			
+			.tab-item {
+				width: 144rpx;
+				height: 64rpx;
+				line-height: 64rpx;
+				border-radius: 12rpx;
+				background: #F9F9F9;
+				margin-right: 16rpx;
+				font-size: 24rpx;
+				font-weight: 500;
+				text-align: center;
 
-		.active-tag {
-			background-color: #FEE034;
-			font-weight: bold;
-			border: 1px solid #FEE034;
-
-		}
-
-		.list-container {
-			margin-top: -300rpx;
-			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;
-			}
-
-			.avatar {
-				width: 160rpx;
-				height: 160rpx;
-				border-radius: 8rpx;
-			}
-			// 累积活动
-			.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;
+				&.active-tag {
+					// 选中状态的样式
+					color: #FFF;
+					background: #D42E78;
 				}
-			
-				.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;
+			}
+
+			.brand-filter {
+				margin-left: auto;
+				display: flex;
+				align-items: center;
+				justify-content: center;
+				height: 64rpx;
+				min-width: 144rpx;  // 最小宽度
+				padding: 0 24rpx;   // 左右内边距
+				border-radius: 12rpx;
+				background: #FFFFFF;
+				border: 1rpx solid #D42E78;
+				transition: all 0.3s;  // 添加过渡效果
+
+				text {
+					color: #D42E78;
+					font-size: 24rpx;
+					font-weight: 500;
+					margin-right: 8rpx;  // 文字和图标的间距
+				}
+
+				.filter-icon {
+					width: 32rpx;
+					height: 32rpx;
+				}
+
+				// 激活状态
+				&.active {
+					background: #D42E78;
+					border-color: #D42E78;
+
+					text {
+						color: #FFFFFF;
 					}
-			
-					.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;
+
+					.filter-icon {
+						filter: brightness(0) invert(1);  // 将图标改为白色
 					}
 				}
 			}
 		}
 	}
+
+	.list-container {
+		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