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

<template>
	<view class="page flex flex-col">
		<!-- 月份筛选区域 -->
		<view class="month-section">
			<view class="title">
				<text>新酒</text>
				<text>上市</text>
			</view>
			<scroll-view 
				scroll-x 
				class="month-scroll"
				:scroll-with-animation="true"
				:show-scrollbar="false"
			>
				<view class="month-content">
					<view 
						v-for="(it, index) in dataList" 
						:key="index"
						class="month-item"
						:class="{ active: currentMonthIndex === index }"
						@tap="changeMonth(it, index)"
					>
						<view class="month-info">
							<text class="month-num">{{it.month}}月</text>
							<text class="count">共{{it.beerCount}}款</text>
						</view>
					</view>
				</view>
			</scroll-view>
		</view>
		
		<!-- 风格筛选区域 -->
		<view class="style-section">
			<scroll-view 
				scroll-x 
				class="style-scroll"
				:scroll-with-animation="true"
				:show-scrollbar="false"
			>
				<view class="style-content">
					<view
						v-for="(item, index) in styleList"
						:key="index"
						class="style-item"
						:class="{ active: currentStyle === item.value }"
						@tap="handleStyleChange(item)"
					>
						<text class="style-text">{{ item.label }}</text>
					</view>
				</view>
			</scroll-view>
		</view>
		
		<!-- 列表内容区域 -->
		<view class="content-section">
			<scroll-view scroll-y class="content-scroll">
				<view class="list-wrapper">
					<view 
						v-for="it in currentMonth" 
						:key="it.id"
						class="list-group"
					>
						<view v-if="it.launchDate" class="date-header">
							<image src="@/static/icons/direct-right.svg" class="date-icon" mode="aspectFit" />
							<text class="date-day">{{ it.launchDate.slice(8, 10)}}</text>
							<text class="date-month">/{{ it.launchDate.slice(5, 7)}}月</text>
						</view>
						<beer-card :item="it" @click="toBeer(it)"></beer-card>
					</view>
				</view>
				
				<view class="empty-tip">更多新品发布信息，敬请关注更新~</view>
			</scroll-view>
		</view>
	</view>
</template>

<script>
import {
	getLastSixMonth,
	getNewBeerListByMonth,
	popularStyle
} from "@/api/platform.js";
import BeerCard from '@/components/BeerCard.vue';

export default {
	components: {
		BeerCard
	},
	data() {
		return {
			dataList: [],
			currentMonth: [],
			currentMonthIndex: 0,
			currentStyle: 'all',
			styleList: [
				{ label: '全部', value: 'all' },
				{ label: 'IPA', value: 'ipa' },
				{ label: '拉格', value: 'lager' },
				{ label: '艾尔', value: 'ale' },
				{ label: '西打', value: 'cider' },
				{ label: '其他', value: 'other' }
			],
			queryForm: {
				num: null
			}
		};
	},
	onLoad() {
		this.getLastSixMonthFun();
	},
	methods: {
		changeMonth(item, index) {
			this.currentMonthIndex = index;
			this.currentMonth = item.beers;
			this.queryForm.num = index;
			this.getNewBeerListByMonthFun();
		},
		getLastSixMonthFun() {
			getLastSixMonth().then(res => {
				console.log(res);
				this.dataList = res.data;
				this.queryForm.num = 0;
				this.getNewBeerListByMonthFun();
			});
		},
		toBeer(item) {
			uni.navigateTo({
				url: '/pages/index/review?beerId=' + item.id
			});
		},
		getNewBeerListByMonthFun() {
			getNewBeerListByMonth(this.queryForm).then(res => {
				console.log(res);
				this.currentMonth = res.data;
			});
		},
		handleStyleChange(item) {
			if (this.currentStyle === item.value) return;
			this.currentStyle = item.value;
			
			// 根据选择的风格类型设置查询参数
			if (item.value === 'all') {
				this.queryForm.style = '';
			} else if (item.value === 'other') {
				// 其他类别：排除主要类别
				this.queryForm.style = '!ipa,!lager,!ale,!cider';
			} else {
				// 主要类别：直接使用对应的值
				this.queryForm.style = item.value;
			}
			
			this.getNewBeerListByMonthFun();
		}
	}
};
</script>

<style lang="scss" scoped>
.page {
	min-height: 100vh;
	background: #F9F9F9;
	
	// 月份筛选区域样式
	.month-section {
		height: 136rpx;
		background: #FFFFFF;
		display: flex;
		align-items: center;
		position: relative;
		
		// 左侧"新酒上市"标题
		.title {
			display: flex;
			flex-direction: column;
			align-items: center;
			justify-content: center;
			width: 64rpx;
			margin: 0 32rpx 0 32rpx;
			flex-shrink: 0;
			position: relative;
			z-index: 1;
			
			&::after {
				content: '';
				position: absolute;
				right: -32rpx;
				top: 50%;
				transform: translateY(-50%);
				width: 32rpx;
				height: 100%;
				background: linear-gradient(to right, #FFFFFF 0%, rgba(255, 255, 255, 0) 100%);
				z-index: 2;
			}
			
			text {
				font-size: 32rpx;
				font-weight: 600;
				color: #0B0E26;
				line-height: 44rpx;
				position: relative;
				z-index: 3;
			}
		}
		
		// 月份滚动区域
		.month-scroll {
			flex: 1;
			height: 100%;
			position: relative;
			z-index: 0;
			
			// 月份内容
			.month-content {
				height: 100%;
				display: inline-flex;
				align-items: center;
				padding: 0 64rpx 0 32rpx;
				
				// 月份项
				.month-item {
					position: relative;
					height: 100%;
					display: flex;
					align-items: center;
					margin-right: 48rpx;
					flex-shrink: 0;
					padding: 0 8rpx;
					
					// 最后一个月份项
					&:last-child {
						margin-right: 32rpx;
					}
					
					// 月份信息展示
					.month-info {
						display: flex;
						flex-direction: column;
						align-items: center;
						
						.month-num { // 月份数字
							font-size: 32rpx;
							color: #606060;
							line-height: 1;
							margin-bottom: 4rpx;
						}
						
						.count { // 数量统计
							font-size: 20rpx;
							color: #999999;
							line-height: 1;
						}
					}
					
					// 选中状态样式
					&.active {
						&::after { // 日历形状边框
							content: '';
							position: absolute;
							top: 50%;
							left: 50%;
							transform: translate(-50%, -50%);
							width: 108rpx;
							height: 88rpx;
							border: 2rpx solid #D42E78;
							border-radius: 8rpx;
							z-index: 0;
						}
						
						&::before { // 顶部装饰条
							content: '';
							position: absolute;
							top: 0;
							left: 50%;
							transform: translateX(-50%);
							width: 32rpx;
							height: 4rpx;
							background: #D42E78;
							border-radius: 2rpx;
						}
						
						// 选中状态文字颜色
						.month-info {
							position: relative;
							z-index: 1;
							
							.month-num {
								color: #D42E78;
								font-weight: 500;
							}
							
							.count {
								color: #D42E78;
							}
						}
					}
				}
			}
		}
	}
	
	// 风格筛选区域样式
	.style-section {
		position: sticky;
		top: 80rpx;
		background: #FFFFFF;
		box-shadow: 0rpx 1rpx 3rpx 0rpx rgba(0, 0, 0, 0.1);
		margin-top: -12rpx;
		
		.style-scroll {
			.style-content {
				height: 112rpx;
				width: 100%;
				padding: 24rpx;
				background: #FFFFFF;
				display: flex;
				align-items: center;
				white-space: nowrap;
				
				// 风格项
				.style-item {
					position: relative;
					height: 64rpx;
					display: inline-flex;
					align-items: center;
					margin-right: 24rpx;
					flex-shrink: 0;
					
					&:last-child {
						margin-right: 24rpx;
					}
					
					// 风格文本
					.style-text {
						height: 64rpx;
						line-height: 64rpx;
						padding: 0 24rpx;
						border-radius: 12rpx;
						background: #F9F9F9;
						font-size: 28rpx;
						color: #606060;
						transition: all 0.3s ease;
						white-space: nowrap;
					}
					
					// 选中状态样式
					&.active {
						.style-text {
							color: #FFFFFF;
							background: #D42E78;
							font-weight: 500;
						}
					}
				}
			}
		}
	}
	
	// 内容区域样式
	.content-section {
		flex: 1;
		
		.content-scroll {
			// 计算剩余可滚动高度
			height: calc(100vh - 260rpx - env(safe-area-inset-bottom));
			
			.list-wrapper {
				padding: 24rpx 32rpx;
				
				.list-group {
					margin-bottom: 24rpx;
					
					// 日期分组
					.date-header {
						display: flex;
						align-items: center;
						margin-bottom: 16rpx;
						
						// 日期图标
						.date-icon {
							width: 28rpx;
							height: 28rpx;
							margin-right: 8rpx;
						}
						
						// 日期数字
						.date-day {
							font-size: 36rpx;
							color: #030303;
							font-weight: 600;
						}
						
						// 月份数字
						.date-month {
							font-size: 24rpx;
							color: #606060;
							margin-left: 4rpx;
						}
					}
					
					// 酒卡样式
					.beer-card {
						display: flex;
						align-items: flex-start;
						padding: 24rpx;
						background: #FFFFFF;
						border-radius: 12rpx;
						
						// 酒卡图片
						.beer-image {
							width: 144rpx;
							height: 204rpx;
							margin-right: 24rpx;
							border-radius: 12rpx;
							background: #F8F8F8;
							box-shadow: 0 2rpx 8rpx rgba(0, 0, 0, 0.05);
						}
						
						// 酒卡信息
						.beer-info {
							flex: 1;
							margin-right: 16rpx;
							min-height: 204rpx;
							display: flex;
							flex-direction: column;
							justify-content: space-between;
							
							// 主信息
							.main-info {
								margin-bottom: 24rpx;
								
								.beer-name {
									font-size: 32rpx;
									color: #030303;
									font-weight: 600;
									margin-bottom: 24rpx;
									line-height: 1.4;
								}
								
								// 副信息
								.sub-info {
									margin-bottom: 16rpx;
									
									// 风格名称
									.beer-style {
										font-size: 26rpx;
										color: #606060;
										margin-bottom: 16rpx;
									}
									
									.brand-name {
										font-size: 24rpx;
										color: #606060;
									}
								}
							}
						}
						
						// 箭头图标
						.arrow-icon {
							width: 32rpx;
							height: 32rpx;
							opacity: 0.3;
							margin-top: 8rpx;
						}
						
						// 点击效果
						&:active {
							opacity: 0.8;
						}
					}
				}
			}
			
			// 空提示
			.empty-tip {
				text-align: center;
				font-size: 24rpx;
				color: #999999;
				padding: 32rpx 0;
			}
		}
	}
}

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