From df5985c05c95c2f93dceeac149286e1391eebccc Mon Sep 17 00:00:00 2001 From: davy Date: Mon, 7 Apr 2025 21:12:12 +0800 Subject: [PATCH] =?UTF-8?q?feat:=20=E5=AE=8C=E6=88=90=E6=94=B6=E8=97=8F?= =?UTF-8?q?=E9=A1=B5=E9=9D=A2=E9=85=8D=E7=BD=AE=EF=BC=8C=E4=BC=98=E5=8C=96?= =?UTF-8?q?=E5=93=81=E7=89=8C=E5=92=8C=E9=85=92=E6=AC=BE=E5=8D=A1=E7=89=87?= =?UTF-8?q?=E6=A0=B7=E5=BC=8F=EF=BC=8C=E4=BF=AE=E5=A4=8D=E5=8F=96=E6=B6=88?= =?UTF-8?q?=E5=85=B3=E6=B3=A8=E5=8A=9F=E8=83=BD?= MIME-Version: 1.0 Content-Type: text/plain; charset=UTF-8 Content-Transfer-Encoding: 8bit --- pagesMy/myAttention.vue | 467 ++++++++++++++++++++++------------------ 1 file changed, 255 insertions(+), 212 deletions(-) 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 @@ @@ -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; + } } } }