From ff74dd1e9b376ad555983d2893fd4eeaaf8f388f Mon Sep 17 00:00:00 2001
From: akun <yuxin.bb@qq.com>
Date: Wed, 16 Apr 2025 17:08:58 +0800
Subject: [PATCH] =?UTF-8?q?fix(Fishing.vue):=20=E4=BF=AE=E5=A4=8D=E9=92=93?=
 =?UTF-8?q?=E9=B1=BC=E9=80=BB=E8=BE=91=E5=B9=B6=E4=BC=98=E5=8C=96=E5=8A=A8?=
 =?UTF-8?q?=E7=94=BB=E6=95=88=E6=9E=9C?=
MIME-Version: 1.0
Content-Type: text/plain; charset=UTF-8
Content-Transfer-Encoding: 8bit

修复钓鱼逻辑中的等待时间和提竿判断，移除不必要的点击计数逻辑。优化钓鱼成功后的动画效果，增加多条鱼时的特殊动画和提示信息。
---
 src/pages/fishing/Fishing.vue | 421 +++++++++++++++++-----------------
 1 file changed, 214 insertions(+), 207 deletions(-)

diff --git a/src/pages/fishing/Fishing.vue b/src/pages/fishing/Fishing.vue
index 35b4518..4ecc483 100644
--- a/src/pages/fishing/Fishing.vue
+++ b/src/pages/fishing/Fishing.vue
@@ -1,5 +1,4 @@
 <template>
-<<<<<<< HEAD
   <div class="fishing-page">
     <div class="fishing-container">
       <div class="fishing-area">
@@ -12,29 +11,38 @@
         >
           <div class="fishing-scene" @click="handleFish"></div>
           <div class="ripple"></div>
-=======
-    <div class="fishing-page">
-        <div class="fishing-container">
-            <div class="fishing-area">
-                <div class="fishing-animation" :class="{ 'fishing-active': isFishing }">
-                    <div class="fishing-scene" @click="handleFish"></div>
-                    <div class="ripple"></div>
-                </div>
-                <div class="result" v-if="resultMessage || nextPullTime">
-                    <el-alert v-if="resultMessage" :title="resultMessage" :type="currentCatch.length>0 ? 'success' : 'info'"
-                        :closable="false" show-icon />
-                    <el-alert v-if="nextPullTime" :title="`下次可钓鱼时间：${nextPullTime}`" type="warning" :closable="false" show-icon />
-                </div>
-            </div>
-            <div class="log-area">
-                <FishingLog :logs="fishingLogs" />
-                <div class="back-button">
-                    <el-button @click="goHome" size="small" type="default" icon="ArrowLeft">返回</el-button>
-                </div>
-            </div>
->>>>>>> 4a4857fa8239db297faeeaf348f16654927c8bb7
         </div>
+        <div class="result" v-if="resultMessage || nextPullTime">
+          <el-alert
+            v-if="resultMessage"
+            :title="resultMessage"
+            :type="currentCatch.length > 0 ? 'success' : 'info'"
+            :closable="false"
+            show-icon
+          />
+          <el-alert
+            v-if="nextPullTime"
+            :title="`下次可钓鱼时间：${nextPullTime}`"
+            type="warning"
+            :closable="false"
+            show-icon
+          />
+        </div>
+      </div>
+      <div class="log-area">
+        <FishingLog :logs="fishingLogs" />
+        <div class="back-button">
+          <el-button
+            @click="goHome"
+            size="small"
+            type="default"
+            icon="ArrowLeft"
+            >返回</el-button
+          >
+        </div>
+      </div>
     </div>
+  </div>
 </template>
 
 <script setup>
@@ -50,29 +58,21 @@ const nextPullTime = ref("");
 const isFishing = ref(false);
 const currentCatch = ref([]); // 改为数组
 const fishingLogs = ref([]);
-const clickCount = ref(0);
-const targetClicks = ref(0);
 const isWaiting = ref(false);
 const isReeling = ref(false);
 const fishEscapeTimer = ref(null);
 
 // 从localStorage加载缓存的钓鱼日志
 const loadCachedLogs = () => {
-    const cachedLogs = localStorage.getItem("fishingLogs");
-    if (cachedLogs) {
-        fishingLogs.value = JSON.parse(cachedLogs);
-    }
+  const cachedLogs = localStorage.getItem("fishingLogs");
+  if (cachedLogs) {
+    fishingLogs.value = JSON.parse(cachedLogs);
+  }
 };
 
 // 保存钓鱼日志到localStorage
 const saveLogs = () => {
-    localStorage.setItem("fishingLogs", JSON.stringify(fishingLogs.value));
-};
-
-<<<<<<< HEAD
-// 生成随机点击阈值（1-5秒内的随机次数）
-const generateRandomTarget = () => {
-  return Math.floor(Math.random() * 15) + 5; // 5-20次随机点击
+  localStorage.setItem("fishingLogs", JSON.stringify(fishingLogs.value));
 };
 
 // 生成随机等待时间（1-3秒）
@@ -91,13 +91,10 @@ const willReelFail = () => {
 };
 
 // 组件挂载时加载缓存的日志
-=======
->>>>>>> 4a4857fa8239db297faeeaf348f16654927c8bb7
 onMounted(() => {
-    loadCachedLogs();
+  loadCachedLogs();
 });
 
-<<<<<<< HEAD
 // 组件卸载时清除定时器
 onBeforeUnmount(() => {
   if (fishEscapeTimer.value) {
@@ -106,56 +103,50 @@ onBeforeUnmount(() => {
 });
 
 const handleFish = async () => {
-  // 如果正在钓鱼中，不允许操作
-  if (isFishing.value) return;
+  // 下杆前校验：如果设置了下次钓鱼时间，则判断当前时间是否在等待中
+  if (nextPullTime.value) {
+    // 尝试将 nextPullTime 转换为 Date 对象
+    const nextTime = new Date(nextPullTime.value);
+    if (Date.now() < nextTime.getTime()) {
+      ElMessage.warning(
+        `还未到下杆时间，请在 ${nextTime.toLocaleTimeString()} 后尝试`
+      );
+      return;
+    }
+  }
+  // 如果正在钓鱼且还处于等待上钩阶段，不允许操作
+  if (isFishing.value && !isWaiting.value) return;
 
   // 第一阶段：开始钓鱼
   if (!isWaiting.value) {
     isFishing.value = true;
-    resultMessage.value = "放下鱼竿，等待中...";
+    resultMessage.value = "放下鱼竿，等待不知好歹的🐟";
 
     // 随机等待时间后判断是否有鱼上钩
     setTimeout(() => {
       if (willFishEscape()) {
-        resultMessage.value = "鱼儿警觉地游走了...";
-        ElMessage.info("鱼儿游走了 🐟");
+        resultMessage.value = "鱼儿警觉地游走了... 🐟";
         isFishing.value = false;
         return;
       }
 
       isWaiting.value = true;
-      clickCount.value = 0;
-      targetClicks.value = generateRandomTarget();
-      resultMessage.value = "发现鱼儿上钩了！快点击收杆！";
+      resultMessage.value = "鱼儿上钩啦！速速收杆！速速速速速速";
+
+      isReeling.value = true;
 
       // 设置逃跑计时器
       fishEscapeTimer.value = setTimeout(() => {
-        if (isWaiting.value) {
+        if (isWaiting.value && isFishing.value) {
           isWaiting.value = false;
           isFishing.value = false;
           resultMessage.value = "鱼儿挣脱逃走了！";
-          ElMessage.warning("鱼儿逃走了 🎣");
         }
       }, 5000); // 5秒内必须完成提竿
     }, generateWaitTime());
     return;
   }
 
-  // 增加点击计数并添加提竿动画效果
-  clickCount.value++;
-  isReeling.value = true;
-  setTimeout(() => {
-    isReeling.value = false;
-  }, 200);
-
-  // 如果点击次数未达到目标，更新提示信息
-  if (clickCount.value < targetClicks.value) {
-    const remainingClicks = targetClicks.value - clickCount.value;
-    resultMessage.value = `继续点击！还需要${remainingClicks}次！`;
-    ElMessage.info(`还需点击${remainingClicks}次！`);
-    return;
-  }
-
   // 清除逃跑计时器
   if (fishEscapeTimer.value) {
     clearTimeout(fishEscapeTimer.value);
@@ -164,131 +155,140 @@ const handleFish = async () => {
 
   // 第二阶段：达到目标点击次数，判断是否提竿成功
   isWaiting.value = false;
+  isReeling.value = false;
 
   if (willReelFail()) {
     isFishing.value = false;
     resultMessage.value = "提竿时机不对，鱼儿溜走了！";
-    ElMessage.warning("提竿失败 🎣");
     return;
   }
 
   // 调用钓鱼接口
-  currentCatch.value = null;
+  currentCatch.value = [];
   resultMessage.value = "正在钓鱼中...";
-=======
-onBeforeUnmount(() => {
-    localStorage.removeItem("fishingLogs");
-});
 
-const handleFish = async () => {
-    if (isFishing.value) return;
+  try {
+    const res = await fishingClick();
+    if (res.success && res.data) {
+      const items = res.data.items || [];
+      if (res.data.nextPullTime) {
+        nextPullTime.value = new Date(res.data.nextPullTime).toLocaleString();
+      }
 
-    isFishing.value = true;
-    currentCatch.value = [];
-    resultMessage.value = "正在钓鱼中...";
->>>>>>> 4a4857fa8239db297faeeaf348f16654927c8bb7
-
-    try {
-        const res = await fishingClick();
-        if (res.success && res.data) {
-            const items = res.data.items || [];
-            if (res.data.nextPullTime) {
-                nextPullTime.value = new Date(res.data.nextPullTime).toLocaleString();
-            }
-
-            if (items.length > 0) {
-                currentCatch.value = items;
-
-                // 构建展示信息
-                const messageList = items.map(fish =>
-                    `「${fish.isRare ? "稀有的" : ""}${fish.fishName}」，重量 ${fish.weight}`
-                );
-                resultMessage.value = `你钓到了：\n${messageList.join("\n")}`;
-                ElMessage.success("钓鱼成功！🎣");
-
-                // 添加所有钓到的鱼到日志
-                const newLogs = items.map(fish => ({
-                    time: new Date(),
-                    fishName: fish.fishName,
-                    weight: fish.weight,
-                    isRare: fish.isRare,
-                }));
-                fishingLogs.value.unshift(...newLogs);
-                saveLogs();
-            } else {
-                resultMessage.value = "什么也没钓到，下次好运 🍀";
-                ElMessage.warning("什么也没钓到，下次好运 🍀");
-            }
+      if (items.length > 0) {
+        currentCatch.value = items;
+
+        // 构建展示信息
+        const messageList = items.map(
+          (fish) =>
+            `「${fish.isRare ? "稀有的" : ""}${fish.fishName}」，重量 ${
+              fish.weight
+            }`
+        );
+        resultMessage.value = `你钓到了：\n${messageList.join("\n")}`;
+        // 根据钓到的鱼的数量显示不同的消息和动画效果
+        if (items.length > 1) {
+          ElMessage({
+            message: `太棒了！一次钓到${items.length}条鱼！🎣✨`,
+            type: "success",
+            duration: 5000,
+            showClose: true,
+            customClass: "multi-catch-message",
+          });
+          // 添加额外的动画类
+          document
+            .querySelector(".fishing-animation")
+            .classList.add("multi-catch");
+          setTimeout(() => {
+            document
+              .querySelector(".fishing-animation")
+              .classList.remove("multi-catch");
+          }, 3000);
         } else {
-            resultMessage.value = res.message || "钓鱼失败";
-            if (res.data?.nextPullTime) {
-                nextPullTime.value = new Date(res.data.nextPullTime).toLocaleString();
-            }
-            ElMessage.error(res.message || "钓鱼失败 🎣");
+          ElMessage.success("钓鱼成功！🎣");
         }
-    } catch (err) {
-        resultMessage.value = "钓鱼出错，请稍后重试";
-        ElMessage.error("钓鱼出错，请稍后重试 🌊");
-        console.error(err);
-    } finally {
-        isFishing.value = false;
+
+        // 添加所有钓到的鱼到日志
+        const newLogs = items.map((fish) => ({
+          time: new Date(),
+          fishName: fish.fishName,
+          weight: fish.weight,
+          isRare: fish.isRare,
+        }));
+        fishingLogs.value.unshift(...newLogs);
+        saveLogs();
+      } else {
+        resultMessage.value = "什么也没钓到，下次好运 🍀";
+        ElMessage.warning("什么也没钓到，下次好运 🍀");
+      }
+    } else {
+      resultMessage.value = res.message || "钓鱼失败";
+      if (res.data?.nextPullTime) {
+        nextPullTime.value = new Date(res.data.nextPullTime).toLocaleString();
+      }
+      ElMessage.error(res.message || "钓鱼失败 🎣");
     }
+  } catch (err) {
+    resultMessage.value = "钓鱼出错，请稍后重试";
+    ElMessage.error("钓鱼出错，请稍后重试 🌊");
+    console.error(err);
+  } finally {
+    isFishing.value = false;
+  }
 };
 
 const goHome = () => {
-    router.push("/");
+  router.push("/");
 };
-
 </script>
 
 <style scoped>
 .fishing-page {
-    padding: 20px;
+  padding: 20px;
 }
 
 .fishing-container {
-    display: grid;
-    grid-template-columns: 1fr 400px;
-    gap: 20px;
-    max-width: 1200px;
-    margin: 0 auto;
-    min-height: calc(100vh - 40px);
+  display: grid;
+  grid-template-columns: 1fr 400px;
+  gap: 20px;
+  max-width: 1200px;
+  margin: 0 auto;
+  min-height: calc(100vh - 40px);
 }
 
 .back-button {
-    margin-top: 20px;
-    text-align: center;
+  margin-top: 20px;
+  text-align: center;
 }
 
 .back-button .el-button {
-    padding: 12px 24px;
-    font-size: 16px;
-    border-radius: 24px;
-    transition: all 0.3s ease;
-    background: #409eff;
-    border: 1px solid #409eff;
-    color: white;
-    font-weight: bold;
+  padding: 12px 24px;
+  font-size: 16px;
+  border-radius: 24px;
+  transition: all 0.3s ease;
+  background: #409eff;
+  border: 1px solid #409eff;
+  color: white;
+  font-weight: bold;
 }
 
 .back-button .el-button:hover {
-    transform: translateY(-2px);
-    box-shadow: 0 4px 16px rgba(64, 158, 255, 0.3);
-    background: #66b1ff;
-    border-color: #66b1ff;
+  transform: translateY(-2px);
+  box-shadow: 0 4px 16px rgba(64, 158, 255, 0.3);
+  background: #66b1ff;
+  border-color: #66b1ff;
 }
 
 .fishing-area {
-    text-align: center;
-    background: #fff;
-    padding: 20px;
-    border-radius: 8px;
-    box-shadow: 0 2px 12px 0 rgba(0, 0, 0, 0.1);
-    position: relative;
+  text-align: center;
+  background: #fff;
+  padding: 20px;
+  border-radius: 8px;
+  box-shadow: 0 2px 12px 0 rgba(0, 0, 0, 0.1);
+  position: relative;
 }
 
 .fishing-animation {
-<<<<<<< HEAD
   height: 500px;
   position: relative;
   margin: 20px 0;
@@ -296,7 +296,6 @@ const goHome = () => {
   border-radius: 8px;
   background: #fff;
   cursor: pointer;
-  pointer-events: none;
 }
 
 .fishing-scene {
@@ -308,30 +307,11 @@ const goHome = () => {
   background: url("@/assets/fishing-scene.svg") no-repeat center;
   background-size: cover;
   transition: transform 0.2s ease;
-  pointer-events: auto;
-=======
-    height: 500px;
-    position: relative;
-    margin: 20px 0;
-    overflow: hidden;
-    border-radius: 8px;
-    background: #fff;
-    cursor: pointer;
-}
-
-.fishing-scene {
-    width: 100%;
-    height: 100%;
-    position: absolute;
-    top: 0;
-    left: 0;
-    background: url("@/assets/fishing-scene.svg") no-repeat center;
-    background-size: cover;
->>>>>>> 4a4857fa8239db297faeeaf348f16654927c8bb7
+  cursor: pointer;
 }
 
 .fishing-active .fishing-scene {
-    animation: scene-active 3s ease-in-out infinite;
+  animation: scene-active 3s ease-in-out infinite;
 }
 
 .reeling .fishing-scene {
@@ -339,65 +319,92 @@ const goHome = () => {
 }
 
 .ripple {
-    position: absolute;
-    width: 30px;
-    height: 30px;
-    background: rgba(255, 255, 255, 0.7);
-    border-radius: 50%;
-    left: 60%;
-    top: 70%;
-    transform: translate(-50%, -50%) scale(0);
-    opacity: 0;
+  position: absolute;
+  width: 30px;
+  height: 30px;
+  background: rgba(255, 255, 255, 0.7);
+  border-radius: 50%;
+  left: 60%;
+  top: 70%;
+  transform: translate(-50%, -50%) scale(0);
+  opacity: 0;
 }
 
 .fishing-active .ripple {
-    animation: ripple 2s infinite;
+  animation: ripple 2s infinite;
 }
 
-<<<<<<< HEAD
-=======
-.fishing-controls {
-    margin: 20px 0;
-}
-
->>>>>>> 4a4857fa8239db297faeeaf348f16654927c8bb7
 .result {
-    margin-top: 20px;
+  margin-top: 20px;
 }
 
 @keyframes ripple {
-    0% {
-        transform: translate(-50%, -50%) scale(0);
-        opacity: 1;
-    }
-    100% {
-        transform: translate(-50%, -50%) scale(4);
-        opacity: 0;
-    }
+  0% {
+    transform: translate(-50%, -50%) scale(0);
+    opacity: 1;
+  }
+  100% {
+    transform: translate(-50%, -50%) scale(4);
+    opacity: 0;
+  }
 }
 
 @keyframes scene-active {
-    0%,
-    100% {
-        transform: scale(1);
-    }
-    50% {
-        transform: scale(1.02);
-    }
+  0%,
+  100% {
+    transform: scale(1) rotate(0deg);
+    filter: brightness(1);
+  }
+  25% {
+    transform: scale(1.05) rotate(-2deg);
+    filter: brightness(1.2);
+  }
+  75% {
+    transform: scale(1.05) rotate(2deg);
+    filter: brightness(1.2);
+  }
 }
 
 @keyframes reel {
   0% {
-    transform: rotate(0deg);
+    transform: rotate(0deg) scale(1);
   }
   50% {
-    transform: rotate(-5deg);
+    transform: rotate(-8deg) scale(1.1);
   }
   100% {
-    transform: rotate(0deg);
+    transform: rotate(0deg) scale(1);
   }
 }
 
+/* 多条鱼时的特殊动画效果 */
+@keyframes multi-catch {
+  0%,
+  100% {
+    transform: scale(1) rotate(0deg);
+    filter: brightness(1) contrast(1);
+  }
+  25% {
+    transform: scale(1.15) rotate(-5deg);
+    filter: brightness(1.3) contrast(1.1);
+  }
+  75% {
+    transform: scale(1.15) rotate(5deg);
+    filter: brightness(1.3) contrast(1.1);
+  }
+}
+
+.multi-catch {
+  animation: multi-catch 1s ease-in-out 3 !important;
+}
+
+.multi-catch-message {
+  font-size: 16px !important;
+  font-weight: bold !important;
+  background: linear-gradient(45deg, #4caf50, #2196f3) !important;
+  color: white !important;
+}
+
 .fishing-scene:active {
   transform: scale(0.98);
 }