zdtap-uniapp-main/pages/activityList/activityList.vue

<template>
	<view class="page">
		<!-- 筛选导航 -->
		<view class="filter-tabs">
			<view class="tabs-content">
				<view 
					class="tab-item" 
					:class="{'active-tag': queryForm.orderType == 'latest'}" 
					@click="changeOrder('latest')"
				>最新发布</view>
				<view 
					class="tab-item" 
					:class="{'active-tag': queryForm.orderType == 'popularity'}" 
					@click="changeOrder('popularity')"
				>人气排名</view>
				<view class="brand-filter" :class="{ active: selectedBrand !== null }" @click="showBrandFilter">
					<text>筛选品牌</text>
					<image :src="'/static/icons/filter.svg'" mode="aspectFit" class="filter-icon"></image>
				</view>
			</view>
		</view>

		<!-- 列表内容区域 -->
		<view class="list-container">
			<scroll-view 
				scroll-y="true" 
				@scrolltolower="changePage"
				refresher-enabled="true"
				:refresher-triggered="isRefreshing"
				@refresherrefresh="onRefresh"
				class="scroll-view"
			>
				<view class="activity-wrapper">
					<activity-item 
						v-for="(item, index) in activeList" 
						:key="index"
						:item="item"
						@click="toDetail"
						@review="toReview"
					/>
				</view>
				<view class="cu-load" :class="loading?'loading': activeList.length == total ? 'over' :'more'"></view>
			</scroll-view>
		</view>

		<!-- 弹窗组件 -->
		<login-popup ref="loginRef"></login-popup>
		<brand-filter ref="brandFilterRef" @confirm="onBrandFilterConfirm"></brand-filter>
	</view>
</template>

<script>
	import {
		getActivities
	} from '@/api/bar.js'
	import loginPopup from '@/components/loginPopup.vue'
	import brandFilter from '@/components/brandFilter.vue'
	import ActivityItem from '@/components/ActivityItem.vue'
	
	export default {
		components: {
			loginPopup,
			brandFilter,
			ActivityItem
		},
		data() {
			return {
				activeList: [], // 活动列表
				loading: false,
				isRefreshing: false,
				queryForm: {
					pageNum: 1,
					pageSize: 5,
					orderType: 'latest',
				},
				total: 0,
				isFilterActive: false,
				selectedBrand: null, // 选中的品牌ID
			};
		},
		onLoad() {
			// 获取活动列表
			this.getActivitiesFun();
		},
		methods: {
			// 获取活动列表
			getActivitiesFun() {
				this.loading = true;
				
				const params = {
					pageNum: this.queryForm.pageNum,
					pageSize: this.queryForm.pageSize,
					orderType: this.queryForm.orderType,
					breweryId: this.selectedBrand
				};
				
				getActivities(params).then(res => {
					console.log('获取到的数据：', 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;
						});
						
						// 更新显示列表
						if (this.queryForm.pageNum === 1) {
							this.activeList = arr;
						} else {
							this.activeList = [...this.activeList, ...arr];
						}
					} else {
						if (this.queryForm.pageNum === 1) {
							this.activeList = [];
						}
					}
					this.loading = false;
				}).catch(err => {
					console.error('获取活动列表失败：', err);
					this.loading = false;
				});
			},
			
			// 计算剩余天数
			getRemainingDays(date) {
				const targetDate = new Date(date);
				const currentDate = new Date();
				const timeDiff = targetDate.getTime() - currentDate.getTime();
				const remainingDays = Math.ceil(timeDiff / (1000 * 3600 * 24));
				return remainingDays;
			},
			
			// 切换排序
			changeOrder(type) {
				// 如果点击当前激活的排序方式，不做处理
				if (this.queryForm.orderType === type) return;
				
				// 切换排序方式
				this.queryForm.orderType = type;
				
				// 重置分页
				this.queryForm.pageNum = 1;
				this.activeList = [];
				
				// 重新获取数据
				this.getActivitiesFun();
			},
			
			// 分页加载
			changePage() {
				if (this.activeList.length < this.total) {
					this.queryForm.pageNum++;
					this.getActivitiesFun();
				}
			},
			
			// 跳转详情
			toDetail(item) {
				uni.navigateTo({
					url: "/pagesActivity/activityDetail?id=" + item.id
				});
			},
			
			// 跳转酒评
			toReview(it) {
				const token = uni.getStorageSync('token')
				if (!token) {
					this.$refs.loginRef.show()
					return
				}
				uni.navigateTo({
					url: "/pages/index/review?beerId=" + it.id
				});
			},
			
			// 显示品牌筛选
			showBrandFilter() {
				// 如果还没有数据，先获取数据
				if (!this.activeList || this.activeList.length === 0) {
					this.queryForm.pageNum = 1;
					this.getActivitiesFun().then(() => {
						this.$refs.brandFilterRef.extractBrandsFromList(this.activeList);
						this.$refs.brandFilterRef.open();
					});
				} else {
					this.$refs.brandFilterRef.extractBrandsFromList(this.activeList);
					this.$refs.brandFilterRef.open();
				}
			},
			
			// 品牌筛选确认
			onBrandFilterConfirm(result) {
				this.selectedBrand = result.id;
				this.queryForm.pageNum = 1;
				this.activeList = [];
				this.getActivitiesFun();
			},
			
			// 添加下拉刷新方法
			onRefresh() {
				this.isRefreshing = true;
				// 重置分页参数
				this.queryForm.pageNum = 1;
				this.activeList = [];
				
				// 重新获取数据
				this.getActivitiesFun();
			}
		}
	}
</script>

<style lang="scss" scoped>
.page {
	min-height: 100vh;
	background: #F9F9F9;
	display: flex;
	flex-direction: column;
}

.filter-tabs {
	background: #FFFFFF;
	padding: 0;
	position: sticky;
	top: 0;
	z-index: 99;

	.tabs-content {
		display: flex;
		align-items: center;
		padding: 20rpx 24rpx;
		height: 88rpx;
		
		.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 {
				color: #FFF;
				background: #D42E78;
			}
		}

		.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;

			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;
				}

				.filter-icon {
					filter: brightness(0) invert(1);
				}
			}
		}
	}
}

.list-container {
	flex: 1;
	display: flex;
	flex-direction: column;
	
	.scroll-view {
		flex: 1;
	}
	
	.activity-wrapper {
		padding: 24rpx;
	}
	
	.cu-load {
		text-align: center;
		padding: 24rpx;
		color: #999999;
		font-size: 24rpx;
		
		&.loading::after {
			content: "加载中...";
		}
		
		&.over::after {
			content: "没有更多了";
		}
		
		&.more::after {
			content: "上拉加载更多";
		}
	}
}
</style>