From f5534632ffa69cbc7b0607b1194dcf8d0b5a3aab Mon Sep 17 00:00:00 2001
From: zzc <1761997216@qq.com>
Date: Mon, 25 May 2026 00:01:32 +0800
Subject: [PATCH] fix: rating

---
 components/SuccessPopup/SuccessPopup.vue | 183 +++++++++++++++++++++++
 pages/rating/detail.vue                  |  24 ++-
 pages/rating/index.vue                   |  17 ++-
 3 files changed, 211 insertions(+), 13 deletions(-)
 create mode 100644 components/SuccessPopup/SuccessPopup.vue

diff --git a/components/SuccessPopup/SuccessPopup.vue b/components/SuccessPopup/SuccessPopup.vue
new file mode 100644
index 0000000..c02225b
--- /dev/null
+++ b/components/SuccessPopup/SuccessPopup.vue
@@ -0,0 +1,183 @@
+<template>
+  <view class="success-popup" v-if="visible" @touchmove.stop.prevent>
+    <view class="mask" :class="{ 'mask-show': showAnim }" @tap="close"></view>
+    <view class="popup-content" :class="{ 'content-show': showAnim }">
+      <view class="icon-wrap">
+        <text class="emoji">{{ actionData?.emoji || '✨' }}</text>
+        <!-- 环形扩散特效 -->
+        <view class="ring ring-1"></view>
+        <view class="ring ring-2"></view>
+        <!-- 星星点缀 -->
+        <view class="sparkle s-1">✨</view>
+        <view class="sparkle s-2">✨</view>
+        <view class="sparkle s-3">✨</view>
+      </view>
+      <text class="title">评分成功</text>
+      <text class="subtitle">你已将TA评价为「{{ actionData?.label || '...' }}」</text>
+    </view>
+  </view>
+</template>
+
+<script setup>
+import { ref } from 'vue';
+
+const visible = ref(false);
+const showAnim = ref(false);
+const actionData = ref(null);
+let timer = null;
+
+const show = (action) => {
+  actionData.value = action;
+  visible.value = true;
+  
+  // 留一点时间让DOM渲染，然后添加动画类
+  setTimeout(() => {
+    showAnim.value = true;
+  }, 50);
+
+  if (timer) clearTimeout(timer);
+  // 2秒后自动关闭
+  timer = setTimeout(() => {
+    close();
+  }, 2000); 
+};
+
+const close = () => {
+  showAnim.value = false;
+  setTimeout(() => {
+    visible.value = false;
+  }, 300); // 等待淡出动画结束
+};
+
+defineExpose({
+  show,
+  close
+});
+</script>
+
+<style lang="scss" scoped>
+.success-popup {
+  position: fixed;
+  top: 0;
+  left: 0;
+  right: 0;
+  bottom: 0;
+  z-index: 9999;
+  display: flex;
+  justify-content: center;
+  align-items: center;
+}
+
+.mask {
+  position: absolute;
+  top: 0;
+  left: 0;
+  right: 0;
+  bottom: 0;
+  background-color: rgba(0, 0, 0, 0.4);
+  backdrop-filter: blur(4px);
+  opacity: 0;
+  transition: opacity 0.3s ease;
+}
+
+.mask.mask-show {
+  opacity: 1;
+}
+
+.popup-content {
+  position: relative;
+  width: 460rpx;
+  background-color: #ffffff;
+  border-radius: 40rpx;
+  padding: 64rpx 40rpx;
+  display: flex;
+  flex-direction: column;
+  align-items: center;
+  opacity: 0;
+  transform: scale(0.8) translateY(20rpx);
+  transition: all 0.4s cubic-bezier(0.175, 0.885, 0.32, 1.275);
+  box-shadow: 0 16rpx 48rpx rgba(0, 0, 0, 0.15);
+}
+
+.popup-content.content-show {
+  opacity: 1;
+  transform: scale(1) translateY(0);
+}
+
+.icon-wrap {
+  position: relative;
+  width: 160rpx;
+  height: 160rpx;
+  display: flex;
+  justify-content: center;
+  align-items: center;
+  margin-bottom: 40rpx;
+}
+
+.emoji {
+  font-size: 100rpx;
+  position: relative;
+  z-index: 10;
+  animation: emojiBounce 1.2s infinite alternate ease-in-out;
+}
+
+@keyframes emojiBounce {
+  0% { transform: translateY(0) scale(1); }
+  100% { transform: translateY(-12rpx) scale(1.05); }
+}
+
+.ring {
+  position: absolute;
+  top: 50%;
+  left: 50%;
+  transform: translate(-50%, -50%);
+  border-radius: 50%;
+  border: 4rpx solid #4d44f1;
+  opacity: 0;
+}
+
+.ring-1 {
+  animation: ripple 1.6s cubic-bezier(0.21, 0.53, 0.56, 0.8) infinite;
+}
+
+.ring-2 {
+  animation: ripple 1.6s cubic-bezier(0.21, 0.53, 0.56, 0.8) infinite 0.8s;
+}
+
+@keyframes ripple {
+  0% { width: 100rpx; height: 100rpx; opacity: 0.8; }
+  100% { width: 260rpx; height: 260rpx; opacity: 0; }
+}
+
+.sparkle {
+  position: absolute;
+  font-size: 32rpx;
+  opacity: 0;
+  z-index: 11;
+}
+
+.s-1 { top: -10rpx; right: -20rpx; animation: popStar 1.4s ease-out infinite 0.1s; }
+.s-2 { bottom: 10rpx; left: -30rpx; animation: popStar 1.4s ease-out infinite 0.6s; font-size: 24rpx; }
+.s-3 { top: 60rpx; left: -40rpx; animation: popStar 1.4s ease-out infinite 1.1s; font-size: 28rpx; }
+
+@keyframes popStar {
+  0% { transform: scale(0) rotate(0deg); opacity: 0; }
+  30% { transform: scale(1.2) rotate(45deg); opacity: 1; }
+  80% { transform: scale(0) rotate(90deg); opacity: 0; }
+  100% { transform: scale(0) rotate(90deg); opacity: 0; }
+}
+
+.title {
+  font-size: 40rpx;
+  font-weight: 800;
+  color: #111;
+  margin-bottom: 16rpx;
+  font-family: -apple-system, BlinkMacSystemFont, 'Helvetica Neue', Helvetica, Segoe UI, Arial, Roboto, 'PingFang SC', 'miui', 'Hiragino Sans GB', 'Microsoft Yahei', sans-serif;
+}
+
+.subtitle {
+  font-size: 28rpx;
+  color: #666;
+  text-align: center;
+}
+</style>
\ No newline at end of file
diff --git a/pages/rating/detail.vue b/pages/rating/detail.vue
index 7c04cd2..c8f4e47 100644
--- a/pages/rating/detail.vue
+++ b/pages/rating/detail.vue
@@ -115,6 +115,9 @@
         </view>
       </view>
     </view>
+
+    <!-- 评分成功特效弹窗 -->
+    <SuccessPopup ref="successPopupRef" />
   </view>
 </template>
 
@@ -123,6 +126,7 @@ import { ref } from 'vue';
 import { getStatusBarHeight } from "@/utils/system";
 import { onLoad, onPullDownRefresh, onReachBottom } from "@dcloudio/uni-app";
 import AttitudePanel from "@/components/AttitudePanel/AttitudePanel.vue";
+import SuccessPopup from "@/components/SuccessPopup/SuccessPopup.vue";
 import { fetchTopicRatingItems } from "@/api/topicItem";
 import { FILE_BASE_URL } from "@/utils/constants";
 import { topicItemScore } from "@/api/topicItem";
@@ -131,6 +135,7 @@ const statusBarHeight = ref(getStatusBarHeight() || 44);
 const loading = ref(false);
 const hasMore = ref(true);
 const currentAction = ref('');
+const successPopupRef = ref(null);
 
 const goBack = () => {
   uni.navigateBack();
@@ -151,10 +156,12 @@ const itemId = ref('');
 
 const handleActionChange = async (action) => {
   const originAction = detailData.value.userAction;
-   const originScore = detailData.value.score;
-   try {
-    detailData.value.userAction = detailData.value.userAction === action.label ? '' : action.label;
-    currentAction.value = action.label;
+  const originScore = detailData.value.score;
+  const isCancel = detailData.value.userAction === action.label;
+  
+  try {
+    detailData.value.userAction = isCancel ? '' : action.label;
+    currentAction.value = detailData.value.userAction;
 
     const res = await topicItemScore({
       topicId: detailData.value.topicId,
@@ -162,11 +169,12 @@ const handleActionChange = async (action) => {
       scoreType: action.scoreType
     });
     detailData.value.score = res?.scoreAvg || originScore;
+    
+    // 如果是成功评分（非取消），展示特效弹窗
+    if (!isCancel && successPopupRef.value) {
+      successPopupRef.value.show(action);
+    }
   } catch (error) {
-    uni.showToast({
-      title: '评分失败',
-      icon: 'none'
-    });
     detailData.value.userAction = originAction;
     detailData.value.score = originScore;
     currentAction.value = originAction;
diff --git a/pages/rating/index.vue b/pages/rating/index.vue
index 227f2dd..23903d8 100644
--- a/pages/rating/index.vue
+++ b/pages/rating/index.vue
@@ -148,6 +148,8 @@
       </view>
     </view>
 
+    <!-- 评分成功特效弹窗 -->
+    <SuccessPopup ref="successPopupRef" />
   </view>
 </template>
 
@@ -158,6 +160,7 @@ import { onPullDownRefresh, onReachBottom, onLoad } from "@dcloudio/uni-app";
 import { fetchTopicDetail, fetchTopicRatingItems } from "@/api/topic";
 import { FILE_BASE_URL } from "@/utils/constants";
 import RatingCard from "@/components/RatingCard/RatingCard.vue";
+import SuccessPopup from "@/components/SuccessPopup/SuccessPopup.vue";
 import { topicItemScore } from "@/api/topicItem";
 // 状态栏高度处理
 const statusBarHeight = ref(getStatusBarHeight() || 44);
@@ -166,6 +169,7 @@ const loading = ref(false);
 const hasMore = ref(true);
 const currentPage = ref(1);
 const currentTopicId = ref(null);
+const successPopupRef = ref(null);
 
 const goBack = () => {
   uni.navigateBack({
@@ -287,19 +291,22 @@ const comments = ref([...mockComments]);
 const handleAction = async (item, action) => {
    const originAction = item.userAction;
    const originScore = item.scoreAvg;
+   const isCancel = item.userAction === action.label;
+   
    try {
-    item.userAction = item.userAction === action.label ? '' : action.label;
+    item.userAction = isCancel ? '' : action.label;
     const res = await topicItemScore({
       topicId: currentTopicId.value,
       itemId: item.id,
       scoreType: action.scoreType
     });
     item.scoreAvg = res?.scoreAvg || originScore;
+    
+    // 如果是成功评分（非取消），展示特效弹窗
+    if (!isCancel && successPopupRef.value) {
+      successPopupRef.value.show(action);
+    }
   } catch (error) {
-    uni.showToast({
-      title: '评分失败',
-      icon: 'none'
-    });
     item.userAction = originAction;
     item.scoreAvg = originScore;
   }