diff --git a/pagesMy/myAttention.vue b/pagesMy/myAttention.vue
index c26afc6..2294664 100644
--- a/pagesMy/myAttention.vue
+++ b/pagesMy/myAttention.vue
@@ -32,20 +32,27 @@
-
-
-
-
-
-
+
+
+
+
+
+ {{item.beerName}}
+ {{ item.beerStyles}}
+
+
+ {{ item.brandName}}
+
+
+
+
+ {{ item.beerOverallRating || '5.0'}}
+
+ {{item.beerReviewsCount || '0'}} 条评论
+
-
-
- {{ item.beerName }}
-
- {{ item.beerOverallRating || '5' }}
- ({{ item.beerReviewsCount || '0' }})
+
+
@@ -54,29 +61,33 @@
- 暂无关注的酒款
+
+
+ 暂无关注的酒款
+
-
-
-
-
-
+
+
+
+
+
{{ item.brandName }}
- {{ item.brandDesc }}
+ 全系列{{item.productCount || 'XXX'}}款产品在售
- 取消关注
+
+
+
-
- 暂无关注的品牌
+
+ 暂无关注的品牌
+
@@ -105,8 +116,13 @@
isVerified: false,
isVerifying: false,
tabCur: 0,
- favoriteBeerList: [], // 收藏的酒款列表
- favoriteBreweryList: [], // 收藏的酒厂列表
+ scrollLeft: 0,
+ 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.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
+ this.favoriteBreweryList = res.rows || []
})
},
- // 品牌方翻页
- changeBreweryPage() {
- if (this.favoriteBreweryList.length < this.totalBrewery) {
- this.breweryQuery.pageNum++
- this.getFavoriteBreweryList()
- }
+ // 取消收藏酒款
+ cancelFavBeer(item) {
+ uni.showModal({
+ title: '提示',
+ 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) {
- const target = e.target;
- target.src = '/static/default-brand.png'; // 设置默认图片
+ handleImageError() {
+ console.log('图片加载失败');
+ },
+ // 切换酒款页码
+ changeBeerPage() {
+ if (this.loading) return;
+ if (this.favoriteBeerList.length >= this.totalBeer) return;
+ this.beerQuery.pageNum++;
+ this.getFavoriteBeerList();
}
}
}
@@ -414,146 +413,190 @@
.my-container {
padding: 28rpx 36rpx;
- margin-top: 88rpx; // 为固定定位的导航栏留出空间
+ margin-top: 88rpx;
height: calc(100vh - 88rpx);
- .beer-grid {
- display: flex;
- flex-wrap: wrap;
- justify-content: flex-start;
- margin: -14rpx; // 抵消子元素的margin
-
- .beer-box {
- width: calc((100% - 84rpx) / 3); // 三等分宽度（减去两个间距）
- margin: 14rpx; // 统一的间距
- background: #FFFFFF;
- box-sizing: border-box;
- display: flex;
- flex-direction: column;
- border-radius: 16rpx;
- box-shadow: 0 2rpx 12rpx rgba(0, 0, 0, 0.04);
- overflow: hidden;
+ .beer-list {
+ .beer-item {
+ margin-bottom: 24rpx;
+
+ .beerCard {
+ border-radius: 12rpx;
+ background: #FFFFFF;
+ padding: 24rpx;
+ box-shadow: 0 2rpx 12rpx rgba(0, 0, 0, 0.05);
+ transition: all 0.3s ease;
- .cover-box {
- width: 100%;
- padding-bottom: 144%; // 保持图片比例
- position: relative;
- overflow: hidden;
+ &:active {
+ transform: scale(0.98);
+ }
- .cover {
- position: absolute;
- top: 0;
- left: 0;
- width: 100%;
- height: 100%;
+ .beer-cover {
+ width: 144rpx;
+ height: 204rpx;
+ margin-right: 20rpx;
+ border-radius: 12rpx;
object-fit: cover;
}
- .like {
- position: absolute;
- right: 16rpx;
- bottom: 18rpx;
- width: 48rpx;
- height: 48rpx;
- 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;
- }
- }
+ .beer-info {
+ .beer-name {
+ font-size: 32rpx;
+ color: #1E2019;
+ font-weight: 500;
+ margin-bottom: 12rpx;
+ }
- .info-box {
- 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;
+ .beer-style {
+ font-size: 24rpx;
+ color: rgba(30, 32, 25, 0.8);
+ margin-bottom: 12rpx;
+ }
+
+ .brand-info {
+ margin-bottom: 12rpx;
+
+ .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;
+ }
+ }
+
+ .review-count {
+ color: #5F5F63;
+ font-size: 24rpx;
+ }
+ }
}
- .rating {
+ .action-box {
display: flex;
align-items: center;
- font-size: 24rpx;
- .score {
- color: #FFA033;
- font-weight: 600;
- margin-right: 4rpx;
- }
-
- .reviews {
- color: #999999;
- font-size: 20rpx;
+ .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;
- border-bottom: 1rpx solid #F0F4F9;
+ padding: 32rpx 24rpx;
+ margin-bottom: 24rpx;
+ background: #FFFFFF;
+ border-radius: 12rpx;
+ box-shadow: 0 2rpx 12rpx rgba(0, 0, 0, 0.05);
- .brand-info {
- display: flex;
- align-items: center;
+ .logo {
+ width: 108rpx;
+ height: 108rpx;
+ border-radius: 50%;
+ margin-right: 28rpx;
+ background-color: #f5f5f5;
+ flex-shrink: 0;
+ }
+
+ .info {
flex: 1;
- margin-right: 20rpx;
+ min-width: 0;
- .logo {
- width: 108rpx;
- height: 108rpx;
- border-radius: 50%;
- margin-right: 28rpx;
- background-color: #f5f5f5;
- flex-shrink: 0;
+ .title {
+ font-size: 32rpx;
+ color: #19191B;
+ font-weight: 600;
+ margin-bottom: 12rpx;
+ overflow: hidden;
+ text-overflow: ellipsis;
+ white-space: nowrap;
}
- .brand-detail {
- flex: 1;
- min-width: 0;
-
- .title {
- font-size: 28rpx;
- color: #19191B;
- margin-bottom: 12rpx;
- font-weight: 500;
- overflow: hidden;
- text-overflow: ellipsis;
- white-space: nowrap;
- }
-
- .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;
- }
+ .desc {
+ font-size: 24rpx;
+ color: #9C9BA6;
}
}
+
+ .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;
+ }
}
}
}