feat: 优化酒评页面评分交互效果
This commit is contained in:
davy
parent
a069a9e7cc
commit
12a5c6771a
@ -243,60 +243,76 @@
|
||||
},
|
||||
isFavor: false, // 是否收藏
|
||||
sortType: 'latest',
|
||||
isLoggedIn: false,
|
||||
isBarAuthenticated: false,
|
||||
ratingAnimation: null,
|
||||
isAnimating: false
|
||||
};
|
||||
},
|
||||
onLoad({beerId}) {
|
||||
this.beerId = beerId
|
||||
this.queryForm.beerId = beerId
|
||||
this.getBeerInfoFun()
|
||||
this.getReviewListFun()
|
||||
this.getReviewScoreListFun()
|
||||
// 只在登录状态下获取收藏状态和我的评价信息
|
||||
const token = uni.getStorageSync('token')
|
||||
if (token) {
|
||||
this.getBeerFavorStatusFun()
|
||||
this.getMyReviewInfoFun()
|
||||
}
|
||||
this.initPageData()
|
||||
},
|
||||
onShow() {
|
||||
console.log('show')
|
||||
this.reviewList = []
|
||||
this.queryForm.pageNum = 1
|
||||
this.getReviewListFun()
|
||||
this.getReviewScoreListFun()
|
||||
// 只在登录状态下获取收藏状态和我的评价信息
|
||||
const token = uni.getStorageSync('token')
|
||||
if (token) {
|
||||
this.getBeerFavorStatusFun()
|
||||
this.getMyReviewInfoFun()
|
||||
}
|
||||
// 滚动到最顶
|
||||
uni.pageScrollTo({
|
||||
scrollTop: 0,
|
||||
duration: 0,
|
||||
})
|
||||
this.checkLoginStatus()
|
||||
this.initPageData()
|
||||
},
|
||||
methods: {
|
||||
toPageBottom() {
|
||||
// 检查登录状态
|
||||
checkLoginStatus() {
|
||||
const token = uni.getStorageSync('token')
|
||||
this.isLoggedIn = !!token
|
||||
|
||||
if (this.isLoggedIn) {
|
||||
const barInfo = uni.getStorageSync('barInfo')
|
||||
this.isBarAuthenticated = barInfo && barInfo.authState === 2
|
||||
}
|
||||
},
|
||||
|
||||
// 初始化页面数据
|
||||
async initPageData() {
|
||||
// 重置数据
|
||||
this.reviewList = []
|
||||
this.queryForm.pageNum = 1
|
||||
|
||||
// 获取基础数据
|
||||
await Promise.all([
|
||||
this.getBeerInfoFun(),
|
||||
this.getReviewListFun(),
|
||||
this.getReviewScoreListFun()
|
||||
])
|
||||
|
||||
// 获取需要登录的数据
|
||||
if (this.isLoggedIn) {
|
||||
await Promise.all([
|
||||
this.getBeerFavorStatusFun(),
|
||||
this.getMyReviewInfoFun()
|
||||
])
|
||||
}
|
||||
|
||||
// 滚动到顶部
|
||||
uni.pageScrollTo({
|
||||
scrollTop: 9999,
|
||||
scrollTop: 0,
|
||||
duration: 0
|
||||
})
|
||||
},
|
||||
// 查询酒款收藏状态
|
||||
getBeerFavorStatusFun() {
|
||||
const token = uni.getStorageSync('token')
|
||||
if (!token) {
|
||||
this.$refs.loginRef.open()
|
||||
|
||||
// 获取酒款收藏状态
|
||||
async getBeerFavorStatusFun() {
|
||||
try {
|
||||
if (!this.isLoggedIn) {
|
||||
this.isFavor = false
|
||||
return
|
||||
}
|
||||
getBeerFavorStatus(this.beerId).then(res => {
|
||||
if(res.data) {
|
||||
this.isFavor = true
|
||||
}else {
|
||||
const res = await getBeerFavorStatus(this.beerId)
|
||||
this.isFavor = !!res.data
|
||||
} catch (error) {
|
||||
console.error('获取收藏状态失败:', error)
|
||||
this.isFavor = false
|
||||
}
|
||||
})
|
||||
},
|
||||
|
||||
// 获取酒款信息
|
||||
getBeerInfoFun() {
|
||||
getBeerInfo(this.beerId).then(res => {
|
||||
@ -340,18 +356,73 @@
|
||||
})
|
||||
},
|
||||
// 获取我的酒评信息
|
||||
getMyReviewInfoFun() {
|
||||
const token = uni.getStorageSync('token')
|
||||
if (!token) {
|
||||
this.$refs.loginRef.open()
|
||||
async getMyReviewInfoFun() {
|
||||
try {
|
||||
if (!this.isLoggedIn) {
|
||||
this.myReviewInfo = null
|
||||
return
|
||||
}
|
||||
getMyReviewInfo(this.beerId).then(res => {
|
||||
const res = await getMyReviewInfo(this.beerId)
|
||||
this.myReviewInfo = res.data
|
||||
})
|
||||
} catch (error) {
|
||||
console.error('获取我的酒评信息失败:', error)
|
||||
this.myReviewInfo = null
|
||||
}
|
||||
},
|
||||
// 写酒评
|
||||
toWrite() {
|
||||
if (!this.isLoggedIn) {
|
||||
this.$refs.loginRef.open()
|
||||
return
|
||||
}
|
||||
|
||||
if (!this.isBarAuthenticated) {
|
||||
const barInfo = uni.getStorageSync('barInfo')
|
||||
|
||||
if (!barInfo || barInfo.authState === 0) {
|
||||
uni.showModal({
|
||||
title: '提示',
|
||||
content: '请先认证门店',
|
||||
showCancel: true,
|
||||
success: (res) => {
|
||||
if (res.confirm) {
|
||||
uni.navigateTo({
|
||||
url: '/pages/index/registration'
|
||||
})
|
||||
}
|
||||
}
|
||||
})
|
||||
return
|
||||
}
|
||||
|
||||
if (barInfo.authState === 1) {
|
||||
uni.showToast({
|
||||
title: '您的门店正在认证中，请耐心等待',
|
||||
icon: 'none'
|
||||
})
|
||||
return
|
||||
}
|
||||
}
|
||||
|
||||
uni.navigateTo({
|
||||
url: '/pages/index/writeReview?beerId=' + this.beerId
|
||||
})
|
||||
},
|
||||
// 计算综合评分
|
||||
getScore(a, b, c) {
|
||||
let score = 0
|
||||
score = (a + b + c) / 3
|
||||
return score.toFixed(0)
|
||||
},
|
||||
// 跳转 品牌方
|
||||
toBrand() {
|
||||
if (!this.beerInfo.breweryId) return
|
||||
uni.navigateTo({
|
||||
url: '/pages/index/brandHome?breweryId=' + this.beerInfo.breweryId
|
||||
})
|
||||
},
|
||||
// 收藏酒款
|
||||
async favorBeerFun(status) {
|
||||
const token = uni.getStorageSync('token')
|
||||
if (!token) {
|
||||
this.$refs.loginRef.open()
|
||||
@ -399,97 +470,24 @@
|
||||
return
|
||||
}
|
||||
|
||||
uni.navigateTo({
|
||||
url: '/pages/index/writeReview?beerId=' + this.beerId
|
||||
})
|
||||
},
|
||||
// 计算综合评分
|
||||
getScore(a, b, c) {
|
||||
let score = 0
|
||||
score = (a + b + c) / 3
|
||||
return score.toFixed(0)
|
||||
},
|
||||
// 跳转 品牌方
|
||||
toBrand() {
|
||||
if (!this.beerInfo.breweryId) return
|
||||
uni.navigateTo({
|
||||
url: '/pages/index/brandHome?breweryId=' + this.beerInfo.breweryId
|
||||
})
|
||||
},
|
||||
// 收藏酒款
|
||||
favorBeerFun(status) {
|
||||
const token = uni.getStorageSync('token')
|
||||
if (!token) {
|
||||
this.$refs.loginRef.open()
|
||||
return
|
||||
}
|
||||
|
||||
// 检查认证状态
|
||||
const barInfo = uni.getStorageSync('barInfo')
|
||||
if (!barInfo || barInfo.authState === 0) {
|
||||
uni.showModal({
|
||||
title: '提示',
|
||||
content: '请先认证门店',
|
||||
showCancel: true,
|
||||
success: (res) => {
|
||||
if (res.confirm) {
|
||||
uni.navigateTo({
|
||||
url: '/pages/index/registration'
|
||||
})
|
||||
}
|
||||
}
|
||||
})
|
||||
return
|
||||
}
|
||||
|
||||
if (barInfo.authState === 1) {
|
||||
uni.showToast({
|
||||
title: '您的门店正在认证中，请耐心等待',
|
||||
icon: 'none'
|
||||
})
|
||||
return
|
||||
}
|
||||
|
||||
let data = {
|
||||
try {
|
||||
await favorBeer({
|
||||
beerId: this.beerId,
|
||||
status
|
||||
}
|
||||
favorBeer(data).then(res => {
|
||||
if (status == 1) {
|
||||
this.isFavor = true
|
||||
uni.showToast({
|
||||
title: '收藏成功',
|
||||
icon: 'success'
|
||||
})
|
||||
} else {
|
||||
this.isFavor = false
|
||||
|
||||
this.isFavor = status === 1
|
||||
uni.showToast({
|
||||
title: '取消收藏',
|
||||
title: status === 1 ? '收藏成功' : '取消收藏',
|
||||
icon: status === 1 ? 'success' : 'none'
|
||||
})
|
||||
} catch (error) {
|
||||
console.error('收藏操作失败:', error)
|
||||
uni.showToast({
|
||||
title: error.msg || '操作失败',
|
||||
icon: 'none'
|
||||
})
|
||||
}
|
||||
}).catch(err => {
|
||||
console.error('收藏操作失败:', err)
|
||||
if (err.code === 500 && err.msg.includes('门店未认证')) {
|
||||
uni.showModal({
|
||||
title: '提示',
|
||||
content: '请先认证门店',
|
||||
showCancel: true,
|
||||
success: (res) => {
|
||||
if (res.confirm) {
|
||||
uni.navigateTo({
|
||||
url: '/pages/index/registration'
|
||||
})
|
||||
}
|
||||
}
|
||||
})
|
||||
} else {
|
||||
uni.showToast({
|
||||
title: err.msg || '操作失败',
|
||||
icon: 'none'
|
||||
})
|
||||
}
|
||||
})
|
||||
},
|
||||
// 点赞
|
||||
handleLike(item) {
|
||||
@ -653,6 +651,45 @@
|
||||
url: '/pages/index/allReviews?beerId=' + this.beerId
|
||||
})
|
||||
},
|
||||
// 处理评分变化时的动画效果
|
||||
handleRatingChange(newValue, type) {
|
||||
if (this.isAnimating) return;
|
||||
this.isAnimating = true;
|
||||
|
||||
// 创建动画实例
|
||||
const animation = uni.createAnimation({
|
||||
duration: 300,
|
||||
timingFunction: 'ease'
|
||||
});
|
||||
|
||||
// 为评分值添加缩放动画
|
||||
animation.scale(1.2).step();
|
||||
animation.scale(1.0).step();
|
||||
|
||||
this.ratingAnimation = animation.export();
|
||||
|
||||
// 添加触感反馈
|
||||
if (uni.vibrateShort) {
|
||||
uni.vibrateShort();
|
||||
}
|
||||
|
||||
// 300ms后重置动画状态
|
||||
setTimeout(() => {
|
||||
this.isAnimating = false;
|
||||
}, 300);
|
||||
},
|
||||
|
||||
// 切换标签页时的动画效果
|
||||
handleTabChange(tab) {
|
||||
if (this.currentTab === tab) return;
|
||||
|
||||
// 添加触感反馈
|
||||
if (uni.vibrateShort) {
|
||||
uni.vibrateShort();
|
||||
}
|
||||
|
||||
this.currentTab = tab;
|
||||
}
|
||||
}
|
||||
}
|
||||
</script>
|
||||
@ -1190,4 +1227,61 @@
|
||||
}
|
||||
}
|
||||
}
|
||||
|
||||
.rating-bars {
|
||||
.rating-bar {
|
||||
.bar {
|
||||
.bar-filled {
|
||||
transition: width 0.3s cubic-bezier(0.4, 0, 0.2, 1);
|
||||
}
|
||||
}
|
||||
|
||||
.bar-value {
|
||||
transition: all 0.3s ease;
|
||||
}
|
||||
}
|
||||
}
|
||||
|
||||
.rating-overview {
|
||||
.rating-score-large {
|
||||
transition: all 0.3s ease;
|
||||
}
|
||||
}
|
||||
|
||||
.rating-tabs {
|
||||
.tab-item {
|
||||
transition: all 0.3s ease;
|
||||
|
||||
&:active {
|
||||
transform: scale(0.95);
|
||||
}
|
||||
}
|
||||
}
|
||||
|
||||
.review-sort {
|
||||
.sort-item {
|
||||
transition: all 0.3s ease;
|
||||
|
||||
&:active {
|
||||
transform: scale(0.95);
|
||||
}
|
||||
}
|
||||
}
|
||||
|
||||
.write-review {
|
||||
transition: all 0.3s ease;
|
||||
|
||||
&:active {
|
||||
transform: scale(0.98);
|
||||
opacity: 0.9;
|
||||
}
|
||||
}
|
||||
|
||||
.like-btn {
|
||||
transition: all 0.3s ease;
|
||||
|
||||
&:active {
|
||||
transform: scale(0.95);
|
||||
}
|
||||
}
|
||||
</style>
|
||||
Loading…
x
Reference in New Issue
Block a user