feat: 1. 优化页面样式和交互 2. 添加新的图标资源

components/rowBeer.vue

@@ -73,7 +73,7 @@
 			width: 208rpx;
 			background: #FFFFFF;
 			margin-right: 16rpx;
-			margin-bottom: 36rpx;
+			margin-bottom: 24rpx;
 			box-sizing: border-box;
 			display: flex;
 			flex-direction: column;

pages/activityList/details.vue

@@ -9,8 +9,8 @@
 			<scroll-view scroll-y style="height: 100%;width: 100%;">
 				<!-- 活动标题和描述 -->
 				<view class="activity-header">
-					<view class="activity-title">{{activityInfo.title || 'TasteRoom 风味屋 · 风味之旅系列'}}</view>
+					<view class="activity-title">{{featureInfo.pageName || '专辑详情'}}</view>
-					<view class="activity-desc">{{activityInfo.description || '探索啤酒风味新边界'}}</view>
+					<view class="activity-desc">{{featureInfo.subTitle || '探索啤酒风味新边界'}}</view>
 				</view>
 				
 				<!-- 酒款列表 -->
@@ -50,8 +50,8 @@
 		},
 		data() {
 			return {
-				activityId: '',
+				featureId: '',
-				activityInfo: {},
+				featureInfo: {},
 				beerList: [],
 				queryForm: {
 					search: ''
@@ -61,28 +61,45 @@
 			};
 		},
 		onLoad(options) {
+			console.log('专辑详情页 onLoad options:', options)
 			if (options.id) {
-				this.activityId = options.id
+				this.featureId = options.id
-				this.getActivityDetail()
+				console.log('专辑ID:', this.featureId)
+				this.getFeatureDetail()
+			} else {
+				console.error('未传递专辑ID')
+				uni.showToast({
+					title: '参数错误',
+					icon: 'none'
+				})
 			}
 		},
 		onShow(){
 			// uni.showTabBar()
 		},
 		methods: {
-			// 获取活动详情
+			// 获取专辑详情
-			async getActivityDetail() {
+			async getFeatureDetail() {
 				try {
-					const res = await getFeaturePage(this.activityId)
+					console.log('开始获取专辑详情，ID:', this.featureId)
+					const res = await getFeaturePage(this.featureId)
+					console.log('专辑详情接口返回数据:', res)
 					if (res.code === 200 && res.data) {
-						this.activityInfo = res.data
+						this.featureInfo = res.data
-						// 获取活动相关的酒款列表
+						console.log('专辑详情数据:', this.featureInfo)
+						// 获取专辑相关的酒款列表
 						this.getBeerList()
+					} else {
+						console.error('获取专辑详情失败，返回码:', res.code)
+						uni.showToast({
+							title: '获取专辑详情失败',
+							icon: 'none'
+						})
 					}
 				} catch (error) {
-					console.error('获取活动详情失败:', error)
+					console.error('获取专辑详情失败:', error)
 					uni.showToast({
-						title: '获取活动详情失败',
+						title: '获取专辑详情失败',
 						icon: 'none'
 					})
 				}
@@ -91,9 +108,23 @@
 			// 获取酒款列表
 			async getBeerList() {
 				try {
-					const res = await getBeerList(this.activityInfo.keyword || '')
+					// 使用专辑的关键词或ID来获取相关酒款
+					const params = {
+						featurePageId: this.featureId
+					}
+					console.log('开始获取酒款列表，参数:', params)
+					
+					const res = await getBeerList(params)
+					console.log('酒款列表接口返回数据:', res)
 					if (res.code === 200 && res.data) {
 						this.beerList = res.data
+						console.log('酒款列表数据:', this.beerList)
+					} else {
+						console.error('获取酒款列表失败，返回码:', res.code)
+						uni.showToast({
+							title: '获取酒款列表失败',
+							icon: 'none'
+						})
 					}
 				} catch (error) {
 					console.error('获取酒款列表失败:', error)

pages/activityList/index.vue

@@ -28,13 +28,13 @@
 			</view>
 
 			<!-- 专辑列表 -->
-			<view v-for="(item,i) in featurePageList" :key="i" class="bg-white">
+			<view v-for="(item,i) in featurePageList" :key="i" class="bg-white feature-item">
 				<view class="flex justify-between align-center title-box" @click="toFeaturePage(item)">
 					<view class="flex-1 flex flex-col">
 						<text class="title">{{ item.pageName }}</text>
 						<text class="sub">{{ item.subTitle}}</text>
 					</view>
-					<image src="@/static/arrow-right.png" style="width: 48rpx;height: 48rpx;"></image>
+					<image src="@/static/arrow-right.svg" style="width: 48rpx;height: 48rpx;"></image>
 				</view>
 				<rowBeer :beers="item.beers" />
 			</view>
@@ -192,12 +192,14 @@
 </script>
 
 <style lang="scss" scoped>
+/* 页面基础样式 */
 .page {
 	background: #F9F9F9;
 	height: 100vh;
 	overflow-y: auto;
 }
 
+/* 固定搜索栏样式 */
 .fixed-search {
 	position: fixed;
 	left: 0;
@@ -209,10 +211,12 @@
 	transition: all 0.3s ease;
 }
 
+/* 搜索框容器样式 */
 .search-box {
 	padding: 0 30rpx;
 }
 
+/* 搜索输入框样式 */
 .search-input-container {
 	display: flex;
 	align-items: center;
@@ -225,6 +229,7 @@
 	position: relative;
 }
 
+/* 搜索框占位符文本样式 */
 .search-placeholder {
 	flex: 1;
 	padding: 0 20rpx;
@@ -233,6 +238,7 @@
 	position: relative;
 }
 
+/* 搜索图标容器样式 */
 .search-icon-container {
 	display: flex;
 	justify-content: center;
@@ -250,11 +256,12 @@
 	}
 }
 
+/* 内容区域容器样式 */
 .content-container {
 	padding-top: 0rpx;
 }
 
-/* 筛选导航栏 */
+/* 筛选导航栏样式 */
 .filter-bar {
 	position: sticky;
 	top:80rpx;
@@ -265,6 +272,7 @@
 	padding-top: 40rpx;
 }
 
+/* 筛选选项中心区域样式 */
 .choose-center {
 	height: 112rpx;
 	width: 100%;
@@ -272,6 +280,7 @@
 	background: #FFFFFF;
 }
 
+/* 导航选项容器样式 */
 .choose-navs {
 	// 导航选项的样式
 	font-family: Roboto;
@@ -279,6 +288,7 @@
 	font-weight: 500;
 }
 
+/* 导航选项文本样式 */
 .choose-navs-txt {
 	// 导航选项文本的样式
 	width: 144rpx;
@@ -295,16 +305,18 @@
 	}
 }
 
+/* 专辑标题区域样式 */
 .title-box {
 	padding: 24rpx 32rpx;
 	// margin-bottom: 24rpx;
 	// margin-top: 24rpx;
 }
 
+/* 专辑主标题样式 */
 .title {
 	font-size: 32rpx;
 	color: #030303;
-	font-weight: 600;
+	font-weight: bold;
 	line-height: 48rpx;
 	letter-spacing: normal;
 	margin-bottom: 8rpx;
@@ -314,6 +326,7 @@
 	text-overflow: ellipsis;
 }
 
+/* 专辑副标题样式 */
 .sub {
 	font-family: Roboto;
 	font-size: 24rpx;
@@ -329,4 +342,12 @@
 	text-overflow: ellipsis;
 	overflow: hidden;
 }
+
+/* 专辑项样式 */
+.feature-item {
+	margin: 24rpx 0;  /* 上下间距24rpx */
+	border-radius: 24rpx 0rpx 0rpx 24rpx;  /* 圆角 */
+	overflow: hidden;  /* 确保内容不会溢出圆角 */
+	box-shadow: 0 2rpx 8rpx rgba(0, 0, 0, 0.05);  /* 添加轻微阴影 */
+}
 </style>

pages/index/index.vue

@@ -146,6 +146,7 @@
 				finished: false,
 				navItems: ['新酒上市', '生成酒单', '酒币换购', '关注厂牌'],
 				currentAdIndex: 0, // 当前广告索引
+				adLoading: false, // 广告加载状态
 			};
 		},
 		created() {
@@ -160,6 +161,8 @@
 			if (this.featurePageList.length === 0) {
 				this.getActivityList()
 			}
+			// 预加载广告数据
+			this.preloadAdData()
 		},
 		watch: {
 			featurePageList: {
@@ -181,7 +184,6 @@
 			// 	})
 			// }, 500)
 			this.statusBaeHeight = uni.getWindowInfo.statusBarHeight
-			this.getBannerListFun() // 广告轮播图
 			uni.showShareMenu({
 				menus: ['shareAppMessage', 'shareTimeline']
 			})
@@ -198,6 +200,9 @@
 				// 只在用户状态变化时重新加载数据
 				this.resetAndLoadData()
 			}
+			
+			// 检查是否需要显示广告
+			this.checkAndShowAd()
 		},
 		methods: {
 			loginSuccess() {
@@ -300,13 +305,30 @@
 					url: "/pages/index/review?beerId=" + it.id
 				})
 			},
+			// 预加载广告数据
+			async preloadAdData() {
+				try {
+					this.adLoading = true
+					await this.getBannerListFun()
+				} catch (error) {
+					console.error('广告预加载失败：', error)
+				} finally {
+					this.adLoading = false
+				}
+			},
+			
 			// 查询广告弹窗 banner列表
-			getBannerListFun() {
+			async getBannerListFun() {
 				this.ADList = []
 				this.homeBanner = []
 				this.bannerJoin = null
-				getBannerList().then(res => {
+				
-					if (!res.data || !Array.isArray(res.data)) return
+				try {
+					const res = await getBannerList()
+					if (!res.data || !Array.isArray(res.data)) {
+						console.error('广告数据格式错误')
+						return
+					}
 					
 					res.data.forEach(it => {
 						if (it.bannerType === 'homeAD') { // 开屏广告
@@ -317,20 +339,46 @@
 							this.homeBanner.push(it)
 						} 
 					})
+				} catch (err) {
+					console.error('获取banner列表失败：', err)
+					uni.showToast({
+						title: '广告加载失败',
+						icon: 'none'
+					})
+				}
+			},
 			
-					// 检查是否需要显示开屏广告
+			// 检查并显示广告
-					const lastShowTime = uni.getStorageSync('lastShowHomeADTime')
+			checkAndShowAd() {
-					const currentTime = new Date().getTime()
+				if (this.ADList.length === 0) {
-					// 如果从未显示过或者距离上次显示超过24小时
+					// 如果没有广告数据，先获取广告数据
-					if (!lastShowTime || (currentTime - lastShowTime > 24 * 60 * 60 * 1000)) {
+					this.getBannerListFun().then(() => {
-						if (this.ADList.length > 0) {
+						this.showAdIfNeeded()
+					})
+					return
+				}
+				
+				this.showAdIfNeeded()
+			},
+			
+			// 判断是否需要显示广告
+			showAdIfNeeded() {
+				if (this.ADList.length === 0) return
+				
+				const lastShowTime = uni.getStorageSync('lastShowHomeADTime')
+				const currentTime = new Date().getTime()
+				
+				// 如果从未显示过或者距离上次显示超过1小时
+				if (!lastShowTime || (currentTime - lastShowTime > 60 * 60 * 1000)) {
+					this.$nextTick(() => {
+						if (this.$refs.ADRef) {
 							this.$refs.ADRef.open()
 						}
-					}
+					})
-				}).catch(err => {
+				}
-					console.error('获取banner列表失败：', err)
-				})
 			},
+			
+			// 关闭广告
 			closeAd() {
 				// 记录广告显示时间
 				uni.setStorageSync('lastShowHomeADTime', new Date().getTime())
@@ -338,7 +386,12 @@
 					backgroundColor: '#ffffff'
 				})
 				this.$refs.ADRef.close()
+				
+				// 添加关闭动画
+				this.currentAdIndex = 0
 			},
+			
+			// 处理广告点击
 			handleAD(item) {
 				if (!item || !item.bannerLink) return
 				
@@ -363,12 +416,29 @@
 						}
 					})
 				} else if (item.bannerLink.startsWith('http')) {
-					// 外部链接，可以使用web-view页面打开
+					// 外部链接，使用web-view页面打开
 					uni.navigateTo({
 						url: `/pages/webview/webview?url=${encodeURIComponent(item.bannerLink)}`
 					})
 				}
 			},
+			
+			// 处理广告轮播切换
+			handleAdSwiperChange(e) {
+				this.currentAdIndex = e.detail.current
+			},
+			
+			// 处理弹窗状态变化
+			handlePopupChange(e) {
+				if (!e.show) {
+					this.closeAd()
+				} else {
+					// 检查广告数据是否有效
+					if (this.ADList.length === 0) {
+						this.closeAd()
+					}
+				}
+			},
 			// 立即认证门店
 			toJoin() {
 				if (!this.bannerJoin || !this.bannerJoin.bannerLink) return
@@ -430,16 +500,6 @@
 						break;
 				}
 			},
-			// 处理广告轮播切换
-			handleAdSwiperChange(e) {
-				this.currentAdIndex = e.detail.current
-			},
-			// 处理弹窗状态变化
-			handlePopupChange(e) {
-				if (!e.show) {
-					this.closeAd()
-				}
-			},
 			// 跳转到生成酒单页面
 			toBeerList() {
 				uni.switchTab({