feat: 优化酒评页面评分交互效果

pages/index/review.vue

@@ -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.initPageData()
-			this.getReviewListFun()
-			this.getReviewScoreListFun()
-			// 只在登录状态下获取收藏状态和我的评价信息
-			const token = uni.getStorageSync('token')
-			if (token) {
-				this.getBeerFavorStatusFun()
-				this.getMyReviewInfoFun()
-			}
 		},
 		onShow() {
-			console.log('show')
+			this.checkLoginStatus()
-			this.reviewList = []
+			this.initPageData()
-			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,
-			})
 		},
 		methods: {
-			toPageBottom() {
+			// 检查登录状态
-				uni.pageScrollTo({
+			checkLoginStatus() {
-						scrollTop: 9999,
-						})
-			},
-			// 查询酒款收藏状态
-			getBeerFavorStatusFun() {
 				const token = uni.getStorageSync('token')
-				if (!token) {
+				this.isLoggedIn = !!token
-					this.$refs.loginRef.open()
+				
-					return
+				if (this.isLoggedIn) {
+					const barInfo = uni.getStorageSync('barInfo')
+					this.isBarAuthenticated = barInfo && barInfo.authState === 2
 				}
-				getBeerFavorStatus(this.beerId).then(res => {
+			},
-					if(res.data) {
+			
-						this.isFavor = true
+			// 初始化页面数据
-					}else {
+			async initPageData() {
-						this.isFavor = false
+				// 重置数据
-					}
+				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: 0,
+					duration: 0
 				})
 			},
+			
+			// 获取酒款收藏状态
+			async getBeerFavorStatusFun() {
+				try {
+					if (!this.isLoggedIn) {
+						this.isFavor = false
+						return
+					}
+					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() {
+			async getMyReviewInfoFun() {
-				const token = uni.getStorageSync('token')
+				try {
-				if (!token) {
+					if (!this.isLoggedIn) {
-					this.$refs.loginRef.open()
+						this.myReviewInfo = null
-					return
+						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({
+				try {
-					url: '/pages/index/writeReview?beerId=' + this.beerId
+					await favorBeer({
-				})
+						beerId: this.beerId,
-			},
+						status
-			// 计算综合评分
-			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) {
+					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'
 					})
-					return
 				}
-				
-				let data = {
-					beerId: this.beerId,
-					status
-				}
-				favorBeer(data).then(res => {
-					if (status == 1) {
-						this.isFavor = true
-						uni.showToast({
-							title: '收藏成功',
-							icon: 'success'
-						})
-					} else {
-						this.isFavor = false
-						uni.showToast({
-							title: '取消收藏',
-							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>