davy/zdtap-uniapp-main
1
0
Fork 0
Code Issues Pull Requests Actions Packages Projects Releases Wiki Activity

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

Browse Source
This commit is contained in:
davy 2025-04-07 21:12:12 +08:00
parent f76b79c7f9
commit df5985c05c
1 changed files with 255 additions and 212 deletions
Show Stats Download Patch File Download Diff File Expand all files Collapse all files

467
pagesMy/myAttention.vue
View File

@ -32,20 +32,27 @@
<view v-if="tabCur == 0" class="my-container"> <view v-if="tabCur == 0" class="my-container">
<template v-if="favoriteBeerList.length > 0"> <template v-if="favoriteBeerList.length > 0">
<scroll-view style="height: 100%;" enable-flex scroll-y @scrolltolower="changeBeerPage"> <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>
</view> <view class="action-box">
<view class="info-box"> <image src="/static/heart-remove.svg" class="cancel-icon" mode="aspectFit" @click.stop="cancelFavBeer(item)"></image>
<view class="title">{{ item.beerName }}</view>
<view class="rating">
<text class="score">{{ item.beerOverallRating || '5' }}</text>
<text class="reviews">({{ item.beerReviewsCount || '0' }})</text>
</view> </view>
</view> </view>
</view> </view>
@ -54,29 +61,33 @@
</scroll-view> </scroll-view>
</template> </template>
<template v-else> <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> </template>
</view> </view>
<view v-if="tabCur == 1" class="my-brandSide"> <view v-if="tabCur == 1" class="my-brandSide">
<template v-if="favoriteBreweryList.length > 0"> <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="title">{{ item.brandName }}</view>
<view class="desc">{{ item.brandDesc }}</view> <view class="desc">全系列{{item.productCount || 'XXX'}}款产品在售</view>
</view> </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>
<view class="cu-load" :class="favoriteBreweryList.length == totalBrewery ? 'over' :'more'"></view>
</scroll-view> </scroll-view>
</template> </template>
<template v-else> <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> </template>
</view> </view>
</template> </template>
@ -105,8 +116,13 @@
isVerified: false, isVerified: false,
isVerifying: false, isVerifying: false,
tabCur: 0, tabCur: 0,
favoriteBeerList: [], // 收藏的酒款列表 scrollLeft: 0,
favoriteBreweryList: [], // 收藏的酒厂列表 favoriteBeerList: [],
favoriteBreweryList: [],
totalBeer: 0,
totalBrewery: 0,
loading: false,
refreshing: false,
beerQuery: { beerQuery: {
pageNum: 1, pageNum: 1,
pageSize: 10 pageSize: 10
@ -114,11 +130,7 @@
breweryQuery: { breweryQuery: {
pageNum: 1, pageNum: 1,
pageSize: 10 pageSize: 10
}, }
totalBeer: 0,
totalBrewery: 0,
loading: false,
refreshing: false
}; };
}, },
onShow() { onShow() {
@ -245,8 +257,10 @@
// 重新检查登录状态 // 重新检查登录状态
this.checkLoginStatus() this.checkLoginStatus()
}, },
// 切换tab
tabSelect(e) { tabSelect(e) {
this.tabCur = e.currentTarget.dataset.id this.tabCur = e.currentTarget.dataset.id
this.scrollLeft = (e.currentTarget.dataset.id - 1) * 60
}, },
// 获取收藏的酒款列表 // 获取收藏的酒款列表
getFavoriteBeerList() { getFavoriteBeerList() {
@ -265,97 +279,82 @@
this.refreshing = false this.refreshing = false
}) })
}, },
// 酒款翻页 // 获取收藏的品牌列表
changeBeerPage() {
if (this.favoriteBeerList.length < this.totalBeer) {
this.beerQuery.pageNum++
this.getFavoriteBeerList()
}
},
// 获取收藏的酒厂列表
getFavoriteBreweryList() { getFavoriteBreweryList() {
if(this.loading) return
this.loading = true
listMyFavoriteBrewery(this.breweryQuery).then(res => { 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) { toBeer(item) {
uni.navigateTo({ uni.navigateTo({
url: "/pages/index/review?beerId=" + item.beerId url: `/pages/index/review?beerId=${item.beerId}`
}) })
}, },
// 跳转到品牌详情 // 跳转到品牌详情
toBrand(item) { toBrand(item) {
uni.navigateTo({ 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,146 +413,190 @@
.my-container { .my-container {
padding: 28rpx 36rpx; padding: 28rpx 36rpx;
margin-top: 88rpx; // 为固定定位的导航栏留出空间 margin-top: 88rpx;
height: calc(100vh - 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 .beerCard {
border-radius: 12rpx;
.beer-box { background: #FFFFFF;
width: calc((100% - 84rpx) / 3); // 三等分宽度（减去两个间距） padding: 24rpx;
margin: 14rpx; // 统一的间距 box-shadow: 0 2rpx 12rpx rgba(0, 0, 0, 0.05);
background: #FFFFFF; transition: all 0.3s ease;
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;
.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; 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; font-size: 24rpx;
color: rgba(30, 32, 25, 0.8);
.title { margin-bottom: 12rpx;
font-size: 28rpx; }
color: #19191B;
font-weight: 600; .brand-info {
margin-bottom: 8rpx; margin-bottom: 12rpx;
overflow: hidden;
text-overflow: ellipsis; .brand-logo {
display: -webkit-box; width: 30rpx;
-webkit-line-clamp: 2; height: 30rpx;
-webkit-box-orient: vertical; 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; display: flex;
align-items: center; align-items: center;
font-size: 24rpx;
.score { .cancel-icon {
color: #FFA033; width: 40rpx;
font-weight: 600; height: 40rpx;
margin-right: 4rpx; margin-right: 32rpx;
} color: #030303;
filter: invert(0%) sepia(0%) saturate(0%) hue-rotate(324deg) brightness(0%) contrast(100%);
.reviews {
color: #999999;
font-size: 20rpx;
} }
} }
} }
} }
} }
.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 { .my-brandSide {
padding: 28rpx 36rpx; padding: 28rpx 36rpx;
margin-top: 88rpx; // 为固定定位的导航栏留出空间 margin-top: 88rpx;
height: calc(100vh - 88rpx); height: calc(100vh - 88rpx);
background: #F9F9F9;
.brandSide-box { .brandSide-box {
display: flex; display: flex;
align-items: center; align-items: center;
justify-content: space-between; justify-content: space-between;
padding: 32rpx 0; padding: 32rpx 24rpx;
border-bottom: 1rpx solid #F0F4F9; margin-bottom: 24rpx;
background: #FFFFFF;
border-radius: 12rpx;
box-shadow: 0 2rpx 12rpx rgba(0, 0, 0, 0.05);
.brand-info { .logo {
display: flex; width: 108rpx;
align-items: center; height: 108rpx;
border-radius: 50%;
margin-right: 28rpx;
background-color: #f5f5f5;
flex-shrink: 0;
}
.info {
flex: 1; flex: 1;
margin-right: 20rpx; min-width: 0;
.logo { .title {
width: 108rpx; font-size: 32rpx;
height: 108rpx; color: #19191B;
border-radius: 50%; font-weight: 600;
margin-right: 28rpx; margin-bottom: 12rpx;
background-color: #f5f5f5; overflow: hidden;
flex-shrink: 0; text-overflow: ellipsis;
white-space: nowrap;
} }
.brand-detail { .desc {
flex: 1; font-size: 24rpx;
min-width: 0; color: #9C9BA6;
.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;
}
} }
} }
.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;
}
} }
} }
} }