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

<template>
	<view class="page">
		<!-- 筛选导航 -->
		<Sieving
			ref="filterDropdown"
			:dropdownMenu="dropdownMenuList"
			themeColor="#D42E78"
			@confirm="handleFilterConfirm"
			@close="handleFilterClose"
			@open="handleFilterOpen"
		/>

		<!-- 统计信息 -->
		<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 hover-effect"
					v-for="beer in beerList"
					:key="beer.id"
					@click="navigateToBeerDetail(beer)"
				>
					<view class="beer-info">
						<image 
							:src="beer.cover" 
							class="beer-image"
							mode="aspectFill"
							:lazy-load="true"
						/>
						<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>
	</view>
</template>

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

				// 筛选配置
				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.getBrandOptions(),
						this.getStyleOptions()
					])
					await this.getBeerList()
				} catch (error) {
					console.error('初始化数据失败:', error)
					uni.showToast({
						title: '加载失败，请重试',
						icon: 'none'
					})
				}
			},
			
			// 获取品牌选项
			async getBrandOptions() {
				try {
					const res = await getBrands()
					const brands = res.data || []
					this.dropdownMenuList[0].options = brands.map(brand => ({
						label: brand.brandName,
						value: brand.id
					}))
				} catch (error) {
					console.error('获取品牌列表失败:', error)
				}
			},
			
			// 获取风格选项
			async getStyleOptions() {
				try {
					const res = await getBeerStyles()
					const styles = res.data || []
					this.dropdownMenuList[1].options = styles.map(style => ({
						label: style.beerStyles,
						value: style.id
					}))
				} 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 getBeerByStyle(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
				}
				
				this.getBeerList(true)
			},
			
			handleFilterOpen(tabName) {
				this.activeTab = tabName
			},
			
			handleFilterClose() {
				this.activeTab = ''
			},
			
			// 列表相关方法
			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: #F9F9F9;
	
	// 统计信息
	.stats-bar {
		padding: 16rpx 24rpx;
		background: #FFFFFF;
		margin-bottom: 24rpx;
		box-shadow: 0 2rpx 8rpx rgba(0, 0, 0, 0.05);
		
		.stats-text {
			font-size: 24rpx;
			color: #999999;
		}
	}
	
	// 内容区域
	.content-container {
		flex: 1;
		overflow: hidden;
		
		.beer-list {
			height: calc(100vh - 180rpx);
			padding: 0 24rpx;
			
			.beer-card {
				background: #FFFFFF;
				border-radius: 16rpx;
				margin-bottom: 24rpx;
				box-shadow: 0 2rpx 12rpx rgba(0, 0, 0, 0.05);
				
				.beer-info {
					display: flex;
					align-items: center;
					padding: 24rpx;
					
					.beer-image {
						width: 120rpx;
						height: 120rpx;
						border-radius: 12rpx;
						margin-right: 24rpx;
						object-fit: cover;
					}
					
					.beer-details {
						flex: 1;
						
						.beer-name {
							font-size: 28rpx;
							font-weight: 600;
							color: #333333;
							margin-bottom: 8rpx;
						}
						
						.beer-style {
							font-size: 24rpx;
							color: #666666;
							margin-bottom: 8rpx;
						}
						
						.brand-name {
							font-size: 24rpx;
							color: #999999;
						}
					}
					
					.arrow-icon {
						width: 32rpx;
						height: 32rpx;
						margin-left: 16rpx;
						opacity: 0.3;
					}
				}
			}
			
			.empty-state {
				display: flex;
				flex-direction: column;
				align-items: center;
				padding: 96rpx 0;
				
				.empty-image {
					width: 240rpx;
					height: 240rpx;
					margin-bottom: 32rpx;
				}
				
				.empty-text {
					font-size: 28rpx;
					color: #999999;
				}
			}
			
			.loading-status {
				padding: 32rpx 0;
				text-align: center;
				
				.loading-wrapper {
					display: flex;
					align-items: center;
					justify-content: center;
					
					.loading-icon {
						width: 40rpx;
						height: 40rpx;
						margin-right: 16rpx;
					}
					
					.loading-text {
						font-size: 24rpx;
						color: #999999;
					}
				}
				
				.no-more {
					font-size: 24rpx;
					color: #999999;
				}
			}
		}
	}
}

// 添加按键反馈效果
.hover-effect {
	transition: all 0.2s ease;
	
	&:active {
		transform: scale(0.96);
		opacity: 0.8;
	}
}

// 添加图片加载优化相关样式
.beer-image {
	will-change: transform;
	backface-visibility: hidden;
	transform: translateZ(0);
}

// 添加骨架屏样式
.skeleton {
	background: linear-gradient(90deg, #f2f2f2 25%, #e6e6e6 37%, #f2f2f2 63%);
	background-size: 400% 100%;
	animation: skeleton-loading 1.4s ease infinite;
}

@keyframes skeleton-loading {
	0% {
		background-position: 100% 50%;
	}
	100% {
		background-position: 0 50%;
	}
}

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