zdtap-uniapp-main/pages/index/styleBeer.vue

<template>
	<view class="page">
		<!-- 筛选导航 -->
		<view class="filter-tabs">
			<view class="tabs-content">
				<view 
					class="tab-item" 
					:class="{'active-tag': queryForm.orderByColumn == 'beer_reviews_count'}" 
					@click="changeTab(0)"
				>人气蹿升</view>
				<view 
					class="tab-item" 
					:class="{'active-tag': queryForm.orderByColumn == 'create_time'}" 
					@click="changeTab(2)"
				>上市时间</view>
				<view 
					class="tab-item" 
					:class="{'active-tag': queryForm.orderByColumn == 'beer_overall_rating'}" 
					@click="changeTab(3)"
				>评分</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="pageChange"
				refresher-enabled="true"
				:refresher-triggered="isRefreshing"
				@refresherrefresh="onRefresh"
				class="scroll-view"
			>
				<view class="beer-wrapper">
					<beer-card 
						v-for="it in beers" 
						:key="it.id" 
						:item="it" 
						@click="toBeer"
					></beer-card>
				</view>
				<view class="cu-load" :class="loading?'loading': beers.length == total ? 'over' :'more'"></view>
			</scroll-view>
		</view>

		<!-- 品牌筛选弹窗 -->
		<brand-filter ref="brandFilterRef" @confirm="onBrandFilterConfirm"></brand-filter>
	</view>
</template>

<script>
	import {
		getBeerByStyle,
	} from "@/api/platform.js"
	import brandFilter from '@/components/brandFilter.vue'
	import BeerCard from '@/components/BeerCard.vue'
	
	export default {
		components: {
			brandFilter,
			BeerCard
		},
		data() {
			return {
				beerStyles: '',
				beers: [],
				total: 0,
				loading: false,
				isRefreshing: false,
				selectedBrand: null,
				queryForm: {
					pageNum: 1,
					pageSize: 10,
					orderByColumn: 'beer_reviews_count',
					breweryId: '',
					style: ''
				}
			};
		},
		onLoad({
			beerStyles
		}) {
			this.beerStyles = beerStyles
			this.queryForm.style = beerStyles
			// 设置导航栏标题和样式
			uni.setNavigationBarTitle({
				title: beerStyles || '啤酒风格'
			})
			// 设置导航栏背景色为品牌主色调
			uni.setNavigationBarColor({
				frontColor: '#ffffff', // 标题颜色为白色
				backgroundColor: '#19367A' // 背景色为品牌主色调
			})
			this.searchByStyle()
		},
		methods: {
			changeTab(index) {
				this.queryForm.pageNum = 1
				this.beers = []
				
				switch (index){
					case 0:
						this.queryForm.orderByColumn = 'beer_reviews_count'
						break;
					case 2:
						this.queryForm.orderByColumn = 'create_time'
						break;
					case 3:
						this.queryForm.orderByColumn = 'beer_overall_rating'
						break;
					default:
						break;
				}
				this.searchByStyle()
			},
			searchByStyle() {
				this.loading = true
				getBeerByStyle(this.queryForm).then(res => {
					console.log(res)
					this.total = res.total
					if (this.queryForm.pageNum === 1) {
						this.beers = res.rows
					} else {
						this.beers = [...this.beers, ...res.rows]
					}
					this.loading = false
					this.isRefreshing = false
				}).catch(err => {
					console.error('获取啤酒列表失败：', err)
					this.loading = false
					this.isRefreshing = false
				})
			},
			toBeer(item) {
				uni.navigateTo({
					url: '/pages/index/review?beerId=' + item.id
				})
			},
			pageChange() {
				if (this.beers.length < this.total && !this.loading) {
					this.queryForm.pageNum++
					this.searchByStyle()
				}
			},
			// 显示品牌筛选
			showBrandFilter() {
				// 如果还没有数据，先获取数据
				if (!this.beers || this.beers.length === 0) {
					this.queryForm.pageNum = 1;
					this.searchByStyle().then(() => {
						this.$refs.brandFilterRef.extractBrandsFromList(this.beers);
						this.$refs.brandFilterRef.open();
					});
				} else {
					this.$refs.brandFilterRef.extractBrandsFromList(this.beers);
					this.$refs.brandFilterRef.open();
				}
			},
			
			// 品牌筛选确认
			onBrandFilterConfirm(result) {
				this.selectedBrand = result.id;
				this.queryForm.breweryId = result.id;
				this.queryForm.pageNum = 1;
				this.beers = [];
				this.searchByStyle();
			},
			
			// 下拉刷新
			onRefresh() {
				this.isRefreshing = true;
				// 重置分页参数
				this.queryForm.pageNum = 1;
				this.beers = [];
				
				// 重新获取数据
				this.searchByStyle();
			}
		}
	}
</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;
	box-shadow: 0rpx 1rpx 3rpx 0rpx rgba(0, 0, 0, 0.1);

	.tabs-content {
		display: flex;
		align-items: center;
		padding: 24rpx;
		height: 88rpx;
		margin-bottom: 12rpx;
		margin-top: 12rpx;
		
		.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;
	}
	
	.beer-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>