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

<template>
	<view class="page">
		<!-- 筛选导航 -->
		<view class="filter-section">
			<view class="filter-tabs">
				<view 
					v-for="(tab, index) in dropdownMenuList"
					:key="tab.prop"
					class="tab-item"
					:class="{ active: activeTab === tab.prop }"
					@click="$refs.filterDropdown.toggleMenu(index)"
				>
					<text class="tab-text">{{ tab.title }}</text>
					<image 
						class="tab-icon"
						:class="{ up: activeTab === tab.prop }"
						:src="activeTab === tab.prop ? '/static/icons/arrow-active.png' : '/static/icons/arrow.png'"
					/>
				</view>
			</view>
			
			<Sieving
				ref="filterDropdown"
				:dropdownMenu="dropdownMenuList"
				themeColor="#D42E78"
				@confirm="handleFilterConfirm"
				@close="handleFilterClose"
				@open="handleFilterOpen"
			/>
		</view>

		<!-- 统计信息 -->
		<view class="stats-bar">
			<text class="stats-text">共 {{totalBeers}} 款在售酒款</text>
		</view>

		<!-- 内容区域 -->
		<view class="content-container">
			<scroll-view 
				scroll-y 
				class="beer-list"
				@scrolltolower="loadMore"
				refresher-enabled
				:refresher-triggered="isRefreshing"
				@refresherrefresh="onRefresh"
			>
				<view 
					class="beer-card"
					v-for="beer in beerList"
					:key="beer.id"
					@click="navigateToBeerDetail(beer)"
				>
					<view class="beer-info">
						<image 
							:src="beer.cover" 
							class="beer-image"
							mode="aspectFit"
						/>
						<view class="beer-details">
							<text class="beer-name text-ellipsis">{{beer.beerName}}</text>
							<text class="beer-style text-ellipsis">{{beer.beerStyles}}</text>
							<text class="brand-name text-ellipsis">{{beer.brandName}}</text>
						</view>
						<image 
							src="/static/icons/arrow-right.png" 
							class="arrow-icon"
						/>
					</view>
				</view>
				
				<!-- 加载状态 -->
				<template v-if="beerList.length === 0 && !loading">
					<view class="empty-state">
						<image src="/static/images/empty.png" class="empty-image" />
						<text class="empty-text">暂无相关酒款</text>
					</view>
				</template>

				<view class="loading-status" v-else>
					<view v-if="loading" class="loading-wrapper">
						<image src="/static/images/loading.gif" class="loading-icon" />
						<text class="loading-text">加载中...</text>
					</view>
					<text v-else-if="!hasMore" class="no-more">没有更多了</text>
				</view>
			</scroll-view>
		</view>

		<!-- 风格筛选弹窗 -->
		<uni-popup 
			ref="stylePopup" 
			type="right" 
			background-color="#fff"
		>
			<view class="style-popup">
				<scroll-view 
					scroll-y 
					class="style-list"
				>
					<view 
						v-for="style in popularStyleList" 
						:key="style.id"
						class="style-item"
						:class="{'active': selectedStyle === style.beerStyles}"
						@click="selectStyle(style)"
					>
						<text class="style-name">{{ style.beerStyles }}</text>
					</view>
				</scroll-view>
				<view 
					class="clear-button"
					@click="clearFilter"
				>
					清除筛选
				</view>
			</view>
		</uni-popup>
	</view>
</template>

<script>
	import {
		getLastSixMonth,
		getNewBeerListByMonth,
		popularStyle,
		getBrands,
		getBeerStyles,
	} from "@/api/platform.js"
	import CustomNavBar from '@/components/CustomNavBar.vue'
	import Sieving from '@/components/sieving/index.vue'
	
	export default {
		name: 'StyleSelection',
		components: {
			CustomNavBar,
			Sieving
		},
		data() {
			return {
				// 列表数据
				beerList: [],
				totalBeers: 0,
				loading: false,
				isRefreshing: false,
				hasMore: true,
				
				// 筛选相关
				selectedStyle: '',
				popularStyleList: [],
				
				// 查询参数
				queryParams: {
					pageNum: 1,
					pageSize: 10,
					sortType: 'latest',
					style: ''
				},

				// 筛选配置
				dropdownMenuList: [
					{
						title: '品牌',
						type: 'cell',
						prop: 'brand',
						value: '',
						options: [],
						showIcon: true,
						activeColor: '#D42E78'
					},
					{
						title: '风格',
						type: 'cell',
						prop: 'style',
						value: '',
						options: [],
						showIcon: true,
						activeColor: '#D42E78'
					},
					{
						title: '价格',
						type: 'slider',
						prop: 'price',
						value: {
							min: 100,
							max: 3000
						},
						showIcon: true,
						activeColor: '#D42E78'
					},
					{
						title: '排序',
						type: 'cell',
						prop: 'sort',
						value: 'comprehensive',
						showIcon: true,
						activeColor: '#D42E78',
						options: [
							{ label: '不限', value: 'comprehensive' },
							{ label: '高分优先', value: 'rating' },
							{ label: '热门优先', value: 'popular' },
							{ label: '最新发布', value: 'latest' }
						]
					}
				],
			}
		},
		created() {
			this.initData()
		},
		methods: {
			// 初始化数据
			async initData() {
				try {
					await Promise.all([
						this.getPopularStyles(),
						this.getBeerList()
					])
				} catch (error) {
					console.error('初始化数据失败:', error)
					uni.showToast({
						title: '加载失败，请重试',
						icon: 'none'
					})
				}
			},
			
			// 获取热门风格
			async getPopularStyles() {
				try {
					const res = await popularStyle()
					this.popularStyleList = res.data || []
				} catch (error) {
					console.error('获取热门风格失败:', error)
				}
			},
			
			// 获取啤酒列表
			async getBeerList(isRefresh = false) {
				if (this.loading) return
				
				try {
					this.loading = true
					if (isRefresh) {
						this.queryParams.pageNum = 1
						this.beerList = []
					}

					const res = await getNewBeerListByMonth(this.queryParams)
					const newList = res.data || []
					
					this.beerList = isRefresh ? 
						newList : [...this.beerList, ...newList]
					this.totalBeers = res.total || 0
					this.hasMore = newList.length >= this.queryParams.pageSize
					
				} catch (error) {
					console.error('获取啤酒列表失败:', error)
					uni.showToast({
						title: '加载失败，请重试',
						icon: 'none'
					})
				} finally {
					this.loading = false
					this.isRefreshing = false
				}
			},
			
			// 筛选相关方法
			handleFilterConfirm(value, allValues) {
				const { brand, style, price, sort } = allValues
				
				this.queryParams = {
					...this.queryParams,
					brandId: brand,
					styleId: style,
					priceMin: price?.min,
					priceMax: price?.max,
					sortType: sort
				}
				
				if (sort === 'comprehensive') {
					this.queryParams.weights = {
						popular: 0.5,
						rating: 0.3,
						latest: 0.2
					}
				} else {
					delete this.queryParams.weights
				}
				
				this.getBeerList(true)
			},
			
			handleFilterOpen(tabName) {
				this.queryParams.style = tabName
			},
			
			handleFilterClose() {
				this.queryParams.style = ''
			},
			
			selectStyle(style) {
				this.selectedStyle = style.beerStyles
				this.queryParams.style = style.beerStyles
				this.getBeerList(true)
				this.$refs.stylePopup.close()
			},
			
			clearFilter() {
				this.selectedStyle = ''
				this.queryParams.style = ''
				this.getBeerList(true)
				this.$refs.stylePopup.close()
			},
			
			// 列表相关方法
			loadMore() {
				if (!this.hasMore || this.loading) return
				this.queryParams.pageNum++
				this.getBeerList()
			},
			
			async onRefresh() {
				this.isRefreshing = true
				await this.getBeerList(true)
			},
			
			// 导航方法
			navigateToBeerDetail(beer) {
				uni.navigateTo({
					url: `/pages/index/review?beerId=${beer.id}`
				})
			}
		}
	}
</script>

<style lang="scss" scoped>
	.page {
		min-height: 100vh;
		background: #F2F2F2;
		
		.filter-section {
			background: #FFFFFF;
			border-bottom: 1rpx solid #F5F5F5;
			
			.filter-tabs {
				display: flex;
				align-items: center;
				height: 64rpx;
				padding: 0 32rpx;
				
				.tab-item {
					width: 122rpx;
					height: 64rpx;
					display: flex;
					align-items: center;
					justify-content: center;
					font-size: 28rpx;
					color: #606060;
					position: relative;
					margin-right: 24rpx;
					
					.tab-text {
						margin-right: 8rpx;
					}
					
					.tab-icon {
						width: 24rpx;
						height: 24rpx;
						transition: transform 0.3s;
						
						&.up {
							transform: rotate(180deg);
						}
					}
					
					&.active {
						color: #D42E78;
						
						.tab-icon {
							filter: invert(36%) sepia(75%) saturate(1217%) 
									hue-rotate(308deg) brightness(87%) contrast(98%);
						}
					}
				}
			}
		}
		
		.stats-bar {
			padding: 20rpx 32rpx;
			
			.stats-text {
				font-size: 24rpx;
				color: #606060;
			}
		}
		
		.content-container {
			.beer-list {
				padding: 0 32rpx;
				
				.beer-card {
					background: #FFFFFF;
					margin-bottom: 24rpx;
					
					.beer-info {
						display: flex;
						align-items: center;
						padding: 24rpx;
						
						.beer-image {
							width: 144rpx;
							height: 204rpx;
							margin-right: 24rpx;
							background: #F8F8F8;
						}
						
						.beer-details {
							flex: 1;
							
							.beer-name {
								font-size: 28rpx;
								color: #1E2019;
								margin-bottom: 16rpx;
							}
							
							.beer-style {
								font-size: 24rpx;
								color: rgba(30, 32, 25, 0.7);
								margin-bottom: 12rpx;
							}
							
							.brand-name {
								font-size: 24rpx;
								color: #606060;
							}
						}
						
						.arrow-icon {
							width: 32rpx;
							height: 32rpx;
							opacity: 0.4;
						}
					}
				}
			}
		}
		
		.style-popup {
			height: 100%;
			display: flex;
			flex-direction: column;
			
			.style-list {
				flex: 1;
				padding: 32rpx;
				
				.style-item {
					padding: 24rpx 0;
					font-size: 28rpx;
					color: #333333;
					
					&.active {
						color: #19367A;
						font-weight: 500;
					}
				}
			}
			
			.clear-button {
				height: 88rpx;
				line-height: 88rpx;
				text-align: center;
				font-size: 28rpx;
				color: #606060;
				border-top: 1rpx solid #F5F5F5;
			}
		}
	}

	.text-ellipsis {
		overflow: hidden;
		text-overflow: ellipsis;
		white-space: nowrap;
	}
</style>