feat: 完成收藏页面配置，优化品牌和酒款卡片样式，修复取消关注功能

pagesMy/myAttention.vue

@@ -32,20 +32,27 @@
 				<view v-if="tabCur == 0" class="my-container">
 					<template v-if="favoriteBeerList.length > 0">
 						<scroll-view style="height: 100%;" enable-flex scroll-y @scrolltolower="changeBeerPage">
-							<view class="beer-grid">
+							<view class="beer-list">
-								<view class="beer-box" v-for="(item, index) in favoriteBeerList" :key="index" @click="toBeer(item)">
+								<view class="beer-item" v-for="(item, index) in favoriteBeerList" :key="index" @click="toBeer(item)">
-									<view class="cover-box">
+									<view class="beerCard flex align-center">
-										<image :src="item.cover" class="cover" mode="aspectFill"></image>
+										<image :src="item.cover" class="beer-cover" mode="aspectFill"></image>
-										<view class="like">
+										<view class="flex-1 beer-info">
-											<text class="cuIcon-likefill" style="color: #4E63E0"
+											<view class="beer-name">{{item.beerName}}</view>
-												@click.stop="cancelFavBeer(item)"></text>
+											<view class="beer-style">{{ item.beerStyles}}</view>
+											<view class="brand-info flex align-center">
+												<image :src="item.brandLogo" class="brand-logo" mode="aspectFill"></image>
+												<text class="brand-name">{{ item.brandName}}</text>
+											</view>
+											<view class="rating-info flex align-center">
+												<text class="rating">
+													<text class="cuIcon-favorfill"></text>
+													{{ item.beerOverallRating || '5.0'}}
+												</text>
+												<text class="review-count">{{item.beerReviewsCount || '0'}} 条评论</text>
 											</view>
 										</view>
-									<view class="info-box">
+										<view class="action-box">
-										<view class="title">{{ item.beerName }}</view>
+											<image src="/static/heart-remove.svg" class="cancel-icon" mode="aspectFit" @click.stop="cancelFavBeer(item)"></image>
-										<view class="rating">
-											<text class="score">{{ item.beerOverallRating || '5' }}</text>
-											<text class="reviews">({{ item.beerReviewsCount || '0' }})</text>
 										</view>
 									</view>
 								</view>
@@ -54,29 +61,33 @@
 						</scroll-view>
 					</template>
 					<template v-else>
-						<view class="flex align-center justify-center"
+						<view class="empty-state">
-							style="height: 140rpx;width: 100%;color: #747783;font-size: 24rpx;">暂无关注的酒款</view>
+							<text class="cuIcon-like empty-icon"></text>
+							<text class="empty-text">暂无关注的酒款</text>
+						</view>
 					</template>
 				</view>
 				<view v-if="tabCur == 1" class="my-brandSide">
 					<template v-if="favoriteBreweryList.length > 0">
-						<scroll-view style="height: 100%;" scroll-y="true" @scrolltolower="changeBreweryPage">
+						<scroll-view style="height: 100%;" scroll-y="true">
-							<view class="brandSide-box" v-for="(item, index) in favoriteBreweryList" :key="index">
+							<view v-for="(item, index) in favoriteBreweryList" :key="index" class="brandSide-box" @tap="toBrand(item)">
-								<view class="brand-info" @click="toBrand(item)">
+								<view class="flex align-center justify-start">
-									<image :src="item.brandLogo" class="logo" mode="aspectFill" @error="handleImageError"></image>
+									<image :src="item.brandLogo || '/static/default-brewery.png'" class="logo" mode="aspectFill" lazy-load></image>
-									<view class="brand-detail">
+									<view class="info">
 										<view class="title">{{ item.brandName }}</view>
-										<view class="desc">{{ item.brandDesc }}</view>
+										<view class="desc">全系列{{item.productCount || 'XXX'}}款产品在售</view>
 									</view>
 								</view>
-								<view class="cu-btn radius bg-gray" @click.stop="cancelFavBrewery(item)">取消关注</view>
+								<view class="action-box">
+									<image src="/static/heart-remove.svg" class="cancel-icon" mode="aspectFit" @click.stop="cancelFavBrewery(item)"></image>
+								</view>
 							</view>
-							<view class="cu-load" :class="favoriteBreweryList.length == totalBrewery ? 'over' :'more'"></view>
 						</scroll-view>
 					</template>
 					<template v-else>
-						<view class="flex align-center justify-center"
+						<view class="empty-state">
-							style="height: 140rpx;width: 100%;color: #747783;font-size: 24rpx;">暂无关注的品牌</view>
+							<text class="empty-text">暂无关注的品牌</text>
+						</view>
 					</template>
 				</view>
 			</template>
@@ -105,8 +116,13 @@
 				isVerified: false,
 				isVerifying: false,
 				tabCur: 0,
-				favoriteBeerList: [], // 收藏的酒款列表
+				scrollLeft: 0,
-				favoriteBreweryList: [], // 收藏的酒厂列表
+				favoriteBeerList: [],
+				favoriteBreweryList: [],
+				totalBeer: 0,
+				totalBrewery: 0,
+				loading: false,
+				refreshing: false,
 				beerQuery: {
 					pageNum: 1,
 					pageSize: 10
@@ -114,11 +130,7 @@
 				breweryQuery: {
 					pageNum: 1,
 					pageSize: 10
-				},
+				}
-				totalBeer: 0,
-				totalBrewery: 0,
-				loading: false,
-				refreshing: false
 			};
 		},
 		onShow() {
@@ -245,8 +257,10 @@
 				// 重新检查登录状态
 				this.checkLoginStatus()
 			},
+			// 切换tab
 			tabSelect(e) {
 				this.tabCur = e.currentTarget.dataset.id
+				this.scrollLeft = (e.currentTarget.dataset.id - 1) * 60
 			},
 			// 获取收藏的酒款列表
 			getFavoriteBeerList() {
@@ -265,97 +279,82 @@
 					this.refreshing = false
 				})
 			},
-			// 酒款翻页
+			// 获取收藏的品牌列表
-			changeBeerPage() {
-				if (this.favoriteBeerList.length < this.totalBeer) {
-					this.beerQuery.pageNum++
-					this.getFavoriteBeerList()
-				}
-			},
-			// 获取收藏的酒厂列表
 			getFavoriteBreweryList() {
-				if(this.loading) return
-				this.loading = true
-				
 				listMyFavoriteBrewery(this.breweryQuery).then(res => {
-					console.log('品牌列表数据:', res.rows)
+					this.favoriteBreweryList = res.rows || []
-					this.totalBrewery = res.total
-					if (res.rows && res.rows.length > 0) {
-						res.rows.forEach(it => {
-							// 直接使用原始数据，不做字段映射
-							this.favoriteBreweryList.push(it)
-						})
-					}
-				}).finally(() => {
-					this.loading = false
-					this.refreshing = false
 				})
 			},
-			// 品牌方翻页
+			// 取消收藏酒款
-			changeBreweryPage() {
+			cancelFavBeer(item) {
-				if (this.favoriteBreweryList.length < this.totalBrewery) {
+				uni.showModal({
-					this.breweryQuery.pageNum++
+					title: '提示',
-					this.getFavoriteBreweryList()
+					content: '确定取消收藏该酒款吗？',
+					success: (res) => {
+						if (res.confirm) {
+							favorBeer({
+								beerId: item.beerId,
+								status: 2
+							}).then(() => {
+								uni.showToast({
+									title: '取消成功',
+									icon: 'success'
+								})
+								// 重置数据
+								this.favoriteBeerList = []
+								this.beerQuery.pageNum = 1
+								this.getFavoriteBeerList()
+							})
 						}
+					}
+				})
+			},
+			// 取消收藏品牌
+			cancelFavBrewery(item) {
+				uni.showModal({
+					title: '提示',
+					content: '确定取消关注该品牌吗？',
+					success: (res) => {
+						if (res.confirm) {
+							favorBrewery({
+								breweryId: item.breweryId,
+								status: 2
+							}).then(() => {
+								uni.showToast({
+									title: '取消成功',
+									icon: 'success'
+								})
+								// 重置数据
+								this.favoriteBreweryList = []
+								this.breweryQuery.pageNum = 1
+								this.getFavoriteBreweryList()
+							})
+						}
+					}
+				})
 			},
 			// 跳转到酒款详情
 			toBeer(item) {
 				uni.navigateTo({
-					url: "/pages/index/review?beerId=" + item.beerId
+					url: `/pages/index/review?beerId=${item.beerId}`
 				})
 			},
 			// 跳转到品牌详情
 			toBrand(item) {
 				uni.navigateTo({
-					url: '/pages/index/brandHome?breweryId=' + item.breweryId
+					url: `/pages/index/brand?breweryId=${item.breweryId}`
 				})
 			},
-			// 取消关注酒款
-			cancelFavBeer(item) {
-				let data = {
-					beerId: item.beerId,
-					status: 2
-				}
-				favorBeer(data).then(res => {
-					uni.showToast({
-						title: '取消收藏',
-						icon: 'none'
-					})
-					this.favoriteBeerList = []
-					this.beerQuery.pageNum = 1
-					this.getFavoriteBeerList()
-				})
-			},
-			// 取消关注酒厂
-			cancelFavBrewery(item) {
-				let data = {
-					breweryId: item.breweryId,
-					status: 2
-				}
-				favorBrewery(data).then(res => {
-					uni.showToast({
-						title: '取消收藏',
-						icon: 'none'
-					})
-					this.favoriteBreweryList = []
-					this.breweryQuery.pageNum = 1
-					this.getFavoriteBreweryList()
-				})
-			},
-			// 下拉刷新
-			onRefresh() {
-				this.refreshing = true
-				this.beerQuery.pageNum = 1
-				this.breweryQuery.pageNum = 1
-				this.favoriteBeerList = []
-				this.favoriteBreweryList = []
-				this.getFavoriteBeerList()
-				this.getFavoriteBreweryList()
-			},
 			// 处理图片加载错误
-			handleImageError(e) {
+			handleImageError() {
-				const target = e.target;
+				console.log('图片加载失败');
-				target.src = '/static/default-brand.png'; // 设置默认图片
+			},
+			// 切换酒款页码
+			changeBeerPage() {
+				if (this.loading) return;
+				if (this.favoriteBeerList.length >= this.totalBeer) return;
+				this.beerQuery.pageNum++;
+				this.getFavoriteBeerList();
 			}
 		}
 	}
@@ -414,110 +413,137 @@
 
 		.my-container {
 			padding: 28rpx 36rpx;
-			margin-top: 88rpx;  // 为固定定位的导航栏留出空间
+			margin-top: 88rpx;
 			height: calc(100vh - 88rpx);
 			
-			.beer-grid {
+			.beer-list {
-				display: flex;
+				.beer-item {
-				flex-wrap: wrap;
+					margin-bottom: 24rpx;
-				justify-content: flex-start;
-				margin: -14rpx;  // 抵消子元素的margin
 					
-				.beer-box {
+					.beerCard {
-					width: calc((100% - 84rpx) / 3);  // 三等分宽度（减去两个间距）
+						border-radius: 12rpx;
-					margin: 14rpx;  // 统一的间距
 						background: #FFFFFF;
-					box-sizing: border-box;
+						padding: 24rpx;
-					display: flex;
+						box-shadow: 0 2rpx 12rpx rgba(0, 0, 0, 0.05);
-					flex-direction: column;
+						transition: all 0.3s ease;
-					border-radius: 16rpx;
-					box-shadow: 0 2rpx 12rpx rgba(0, 0, 0, 0.04);
-					overflow: hidden;
 
-					.cover-box {
+						&:active {
-						width: 100%;
+							transform: scale(0.98);
-						padding-bottom: 144%;  // 保持图片比例
+						}
-						position: relative;
-						overflow: hidden;
 
-						.cover {
+						.beer-cover {
-							position: absolute;
+							width: 144rpx;
-							top: 0;
+							height: 204rpx;
-							left: 0;
+							margin-right: 20rpx;
-							width: 100%;
+							border-radius: 12rpx;
-							height: 100%;
 							object-fit: cover;
 						}
 
-						.like {
+						.beer-info {
-							position: absolute;
+							.beer-name {
-							right: 16rpx;
+								font-size: 32rpx;
-							bottom: 18rpx;
+								color: #1E2019;
-							width: 48rpx;
+								font-weight: 500;
-							height: 48rpx;
+								margin-bottom: 12rpx;
-							border-radius: 50%;
-							background: rgba(255, 255, 255, 0.9);
-							backdrop-filter: blur(4rpx);
-							box-shadow: 0 2rpx 8rpx rgba(0, 0, 0, 0.1);
-							display: flex;
-							justify-content: center;
-							align-items: center;
-						}
 							}
 
-					.info-box {
+							.beer-style {
-						padding: 12rpx;
-						
-						.title {
-							font-size: 28rpx;
-							color: #19191B;
-							font-weight: 600;
-							margin-bottom: 8rpx;
-							overflow: hidden;
-							text-overflow: ellipsis;
-							display: -webkit-box;
-							-webkit-line-clamp: 2;
-							-webkit-box-orient: vertical;
-						}
-
-						.rating {
-							display: flex;
-							align-items: center;
 								font-size: 24rpx;
+								color: rgba(30, 32, 25, 0.8);
+								margin-bottom: 12rpx;
+							}
 
-							.score {
+							.brand-info {
-								color: #FFA033;
+								margin-bottom: 12rpx;
-								font-weight: 600;
+
+								.brand-logo {
+									width: 30rpx;
+									height: 30rpx;
+									margin-right: 12rpx;
+									border-radius: 50%;
+								}
+
+								.brand-name {
+									font-size: 28rpx;
+									color: #1E2019;
+								}
+							}
+
+							.rating-info {
+								.rating {
+									background: #F5F5F5;
+									padding: 8rpx 16rpx;
+									border-radius: 16rpx;
+									color: #5F5F63;
+									font-size: 24rpx;
+									margin-right: 16rpx;
+
+									.cuIcon-favorfill {
+										color: #FFBC11;
+										font-size: 30rpx;
 										margin-right: 4rpx;
 									}
+								}
 
-							.reviews {
+								.review-count {
-								color: #999999;
+									color: #5F5F63;
-								font-size: 20rpx;
+									font-size: 24rpx;
 								}
 							}
 						}
+
+						.action-box {
+							display: flex;
+							align-items: center;
+							
+							.cancel-icon {
+								width: 40rpx;
+								height: 40rpx;
+								margin-right: 32rpx;
+								color: #030303;
+								filter: invert(0%) sepia(0%) saturate(0%) hue-rotate(324deg) brightness(0%) contrast(100%);
+							}
+						}
+					}
+				}
+			}
+			
+			.empty-state {
+				height: 100%;
+				display: flex;
+				flex-direction: column;
+				align-items: center;
+				justify-content: center;
+				padding: 60rpx;
+				
+				.empty-image {
+					width: 240rpx;
+					height: 240rpx;
+					margin-bottom: 20rpx;
+				}
+				
+				.empty-text {
+					color: #747783;
+					font-size: 28rpx;
 				}
 			}
 		}
 
 		.my-brandSide {
 			padding: 28rpx 36rpx;
-			margin-top: 88rpx;  // 为固定定位的导航栏留出空间
+			margin-top: 88rpx;
 			height: calc(100vh - 88rpx);
+			background: #F9F9F9;
 
 			.brandSide-box {
 				display: flex;
 				align-items: center;
 				justify-content: space-between;
-				padding: 32rpx 0;
+				padding: 32rpx 24rpx;
-				border-bottom: 1rpx solid #F0F4F9;
+				margin-bottom: 24rpx;
-				
+				background: #FFFFFF;
-				.brand-info {
+				border-radius: 12rpx;
-					display: flex;
+				box-shadow: 0 2rpx 12rpx rgba(0, 0, 0, 0.05);
-					align-items: center;
-					flex: 1;
-					margin-right: 20rpx;
 				
 				.logo {
 					width: 108rpx;
@@ -528,15 +554,15 @@
 					flex-shrink: 0;
 				}
 				
-					.brand-detail {
+				.info {
 					flex: 1;
 					min-width: 0;
 					
 					.title {
-							font-size: 28rpx;
+						font-size: 32rpx;
 						color: #19191B;
+						font-weight: 600;
 						margin-bottom: 12rpx;
-							font-weight: 500;
 						overflow: hidden;
 						text-overflow: ellipsis;
 						white-space: nowrap;
@@ -545,14 +571,31 @@
 					.desc {
 						font-size: 24rpx;
 						color: #9C9BA6;
-							line-height: 1.4;
-							overflow: hidden;
-							text-overflow: ellipsis;
-							display: -webkit-box;
-							-webkit-line-clamp: 2;
-							-webkit-box-orient: vertical;
 					}
 				}
+				
+				.action-box {
+					.cancel-icon {
+						width: 40rpx;
+						height: 40rpx;
+						margin-right: 32rpx;
+						color: #030303;
+						filter: invert(0%) sepia(0%) saturate(0%) hue-rotate(324deg) brightness(0%) contrast(100%);
+					}
+				}
+			}
+			
+			.empty-state {
+				height: 100%;
+				display: flex;
+				flex-direction: column;
+				align-items: center;
+				justify-content: center;
+				padding: 60rpx;
+				
+				.empty-text {
+					color: #747783;
+					font-size: 28rpx;
 				}
 			}
 		}