From eaac5c2338318624060e9f6bf2fa44dc29940c57 Mon Sep 17 00:00:00 2001
From: LyMysterious <LyMy1234@outlook.com>
Date: Wed, 16 Apr 2025 14:09:00 +0800
Subject: [PATCH] =?UTF-8?q?fix:=20=E9=92=93=E5=88=B0=E5=A4=9A=E6=9D=A1?=
 =?UTF-8?q?=E9=B1=BC=E6=8F=90=E7=A4=BA=E4=BF=AE=E6=AD=A3?=
MIME-Version: 1.0
Content-Type: text/plain; charset=UTF-8
Content-Transfer-Encoding: 8bit

---
 src/pages/fishing/Fishing.vue | 311 ++++++++++++++++------------------
 1 file changed, 148 insertions(+), 163 deletions(-)

diff --git a/src/pages/fishing/Fishing.vue b/src/pages/fishing/Fishing.vue
index a4629c6..1248bcd 100644
--- a/src/pages/fishing/Fishing.vue
+++ b/src/pages/fishing/Fishing.vue
@@ -1,42 +1,25 @@
 <template>
-  <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 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>
         </div>
-        <div class="result" v-if="resultMessage || nextPullTime">
-          <el-alert
-            v-if="resultMessage"
-            :title="resultMessage"
-            :type="currentCatch ? '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,199 +33,201 @@ const router = useRouter();
 const resultMessage = ref("");
 const nextPullTime = ref("");
 const isFishing = ref(false);
-const currentCatch = ref(null);
+const currentCatch = ref([]); // 改为数组
 const fishingLogs = ref([]);
 
 // 从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));
+    localStorage.setItem("fishingLogs", JSON.stringify(fishingLogs.value));
 };
 
-// 组件挂载时加载缓存的日志
 onMounted(() => {
-  loadCachedLogs();
+    loadCachedLogs();
 });
 
-// 组件卸载前清除缓存
 onBeforeUnmount(() => {
-  localStorage.removeItem("fishingLogs");
+    localStorage.removeItem("fishingLogs");
 });
 
 const handleFish = async () => {
-  if (isFishing.value) return;
-
-  isFishing.value = true;
-  currentCatch.value = null;
-  resultMessage.value = "正在钓鱼中...";
-
-  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) {
-        const fish = items[0];
-        currentCatch.value = fish;
-        resultMessage.value = `你钓到了一条${fish.isRare ? "稀有的" : ""}「${
-          fish.fishName
-        }」，重量 ${fish.weight}`;
-        ElMessage.success("钓鱼成功！🎣");
-
-        // 添加到日志并保存到localStorage
-        fishingLogs.value.unshift({
-          time: new Date(),
-          fishName: fish.fishName,
-          weight: fish.weight,
-          isRare: fish.isRare,
-        });
-        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 || "钓鱼失败 🎣");
+    if (isFishing.value) return;
+
+    isFishing.value = true;
+    currentCatch.value = [];
+    resultMessage.value = "正在钓鱼中...";
+
+    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("什么也没钓到，下次好运 🍀");
+            }
+        } 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;
     }
-  } 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 {
-  height: 500px;
-  position: relative;
-  margin: 20px 0;
-  overflow: hidden;
-  border-radius: 8px;
-  background: #fff;
-  cursor: pointer;
+    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;
+    width: 100%;
+    height: 100%;
+    position: absolute;
+    top: 0;
+    left: 0;
+    background: url("@/assets/fishing-scene.svg") no-repeat center;
+    background-size: cover;
 }
 
 .fishing-active .fishing-scene {
-  animation: scene-active 3s ease-in-out infinite;
+    animation: scene-active 3s ease-in-out infinite;
 }
 
 .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;
 }
 
 .fishing-controls {
-  margin: 20px 0;
+    margin: 20px 0;
 }
 
 .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);
+    }
+    50% {
+        transform: scale(1.02);
+    }
 }
 </style>