Gods
/
go_fish_web
8
0
Fork 0
Code Issues Pull Requests Packages Projects Releases 1 Wiki Activity

fix: 钓到多条鱼提示修正

Browse Source
main
LyMysterious 1 year ago
parent 4073466f2c
commit eaac5c2338
1 changed files with 148 additions and 163 deletions
Show Stats Download Patch File Download Diff File

311
src/pages/fishing/Fishing.vue
Unescape Escape View File

@ -1,42 +1,25 @@
<template> <template>
<div class="fishing-page"> <div class="fishing-page">
<div class="fishing-container"> <div class="fishing-container">
<div class="fishing-area"> <div class="fishing-area">
<div class="fishing-animation" :class="{ 'fishing-active': isFishing }"> <div class="fishing-animation" :class="{ 'fishing-active': isFishing }">
<div class="fishing-scene" @click="handleFish"></div> <div class="fishing-scene" @click="handleFish"></div>
<div class="ripple"></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>
<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>
</div>
</template> </template>
<script setup> <script setup>
@ -50,199 +33,201 @@ const router = useRouter();
const resultMessage = ref(""); const resultMessage = ref("");
const nextPullTime = ref(""); const nextPullTime = ref("");
const isFishing = ref(false); const isFishing = ref(false);
const currentCatch = ref(null); const currentCatch = ref([]); // 改为数组
const fishingLogs = ref([]); const fishingLogs = ref([]);
// 从localStorage加载缓存的钓鱼日志 // 从localStorage加载缓存的钓鱼日志
const loadCachedLogs = () => { const loadCachedLogs = () => {
const cachedLogs = localStorage.getItem("fishingLogs"); const cachedLogs = localStorage.getItem("fishingLogs");
if (cachedLogs) { if (cachedLogs) {
fishingLogs.value = JSON.parse(cachedLogs); fishingLogs.value = JSON.parse(cachedLogs);
} }
}; };
// 保存钓鱼日志到localStorage // 保存钓鱼日志到localStorage
const saveLogs = () => { const saveLogs = () => {
localStorage.setItem("fishingLogs", JSON.stringify(fishingLogs.value)); localStorage.setItem("fishingLogs", JSON.stringify(fishingLogs.value));
}; };
// 组件挂载时加载缓存的日志
onMounted(() => { onMounted(() => {
loadCachedLogs(); loadCachedLogs();
}); });
// 组件卸载前清除缓存
onBeforeUnmount(() => { onBeforeUnmount(() => {
localStorage.removeItem("fishingLogs"); localStorage.removeItem("fishingLogs");
}); });
const handleFish = async () => { const handleFish = async () => {
if (isFishing.value) return; if (isFishing.value) return;
isFishing.value = true; isFishing.value = true;
currentCatch.value = null; currentCatch.value = [];
resultMessage.value = "正在钓鱼中..."; resultMessage.value = "正在钓鱼中...";
try { try {
const res = await fishingClick(); const res = await fishingClick();
if (res.success && res.data) { if (res.success && res.data) {
const items = res.data.items || []; const items = res.data.items || [];
if (res.data.nextPullTime) { if (res.data.nextPullTime) {
nextPullTime.value = new Date(res.data.nextPullTime).toLocaleString(); nextPullTime.value = new Date(res.data.nextPullTime).toLocaleString();
} }
if (items.length > 0) { if (items.length > 0) {
const fish = items[0]; currentCatch.value = items;
currentCatch.value = fish;
resultMessage.value = `你钓到了一条${fish.isRare ? "稀有的" : ""}「${ // 构建展示信息
fish.fishName const messageList = items.map(fish =>
}」，重量 ${fish.weight}`; `「${fish.isRare ? "稀有的" : ""}${fish.fishName}」，重量 ${fish.weight}`
ElMessage.success("钓鱼成功！🎣"); );
resultMessage.value = `你钓到了：\n${messageList.join("\n")}`;
// 添加到日志并保存到localStorage ElMessage.success("钓鱼成功！🎣");
fishingLogs.value.unshift({
time: new Date(), // 添加所有钓到的鱼到日志
fishName: fish.fishName, const newLogs = items.map(fish => ({
weight: fish.weight, time: new Date(),
isRare: fish.isRare, fishName: fish.fishName,
}); weight: fish.weight,
saveLogs(); isRare: fish.isRare,
} else { }));
resultMessage.value = "什么也没钓到，下次好运 🍀"; fishingLogs.value.unshift(...newLogs);
ElMessage.warning("什么也没钓到，下次好运 🍀"); saveLogs();
} } else {
} else { resultMessage.value = "什么也没钓到，下次好运 🍀";
resultMessage.value = res.message || "钓鱼失败"; ElMessage.warning("什么也没钓到，下次好运 🍀");
if (res.data?.nextPullTime) { }
nextPullTime.value = new Date(res.data.nextPullTime).toLocaleString(); } else {
} resultMessage.value = res.message || "钓鱼失败";
ElMessage.error(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 = () => { const goHome = () => {
router.push("/"); router.push("/");
}; };
</script> </script>
<style scoped> <style scoped>
.fishing-page { .fishing-page {
padding: 20px; padding: 20px;
} }
.fishing-container { .fishing-container {
display: grid; display: grid;
grid-template-columns: 1fr 400px; grid-template-columns: 1fr 400px;
gap: 20px; gap: 20px;
max-width: 1200px; max-width: 1200px;
margin: 0 auto; margin: 0 auto;
min-height: calc(100vh - 40px); min-height: calc(100vh - 40px);
} }
.back-button { .back-button {
margin-top: 20px; margin-top: 20px;
text-align: center; text-align: center;
} }
.back-button .el-button { .back-button .el-button {
padding: 12px 24px; padding: 12px 24px;
font-size: 16px; font-size: 16px;
border-radius: 24px; border-radius: 24px;
transition: all 0.3s ease; transition: all 0.3s ease;
background: #409eff; background: #409eff;
border: 1px solid #409eff; border: 1px solid #409eff;
color: white; color: white;
font-weight: bold; font-weight: bold;
} }
.back-button .el-button:hover { .back-button .el-button:hover {
transform: translateY(-2px); transform: translateY(-2px);
box-shadow: 0 4px 16px rgba(64, 158, 255, 0.3); box-shadow: 0 4px 16px rgba(64, 158, 255, 0.3);
background: #66b1ff; background: #66b1ff;
border-color: #66b1ff; border-color: #66b1ff;
} }
.fishing-area { .fishing-area {
text-align: center; text-align: center;
background: #fff; background: #fff;
padding: 20px; padding: 20px;
border-radius: 8px; border-radius: 8px;
box-shadow: 0 2px 12px 0 rgba(0, 0, 0, 0.1); box-shadow: 0 2px 12px 0 rgba(0, 0, 0, 0.1);
position: relative; position: relative;
} }
.fishing-animation { .fishing-animation {
height: 500px; height: 500px;
position: relative; position: relative;
margin: 20px 0; margin: 20px 0;
overflow: hidden; overflow: hidden;
border-radius: 8px; border-radius: 8px;
background: #fff; background: #fff;
cursor: pointer; cursor: pointer;
} }
.fishing-scene { .fishing-scene {
width: 100%; width: 100%;
height: 100%; height: 100%;
position: absolute; position: absolute;
top: 0; top: 0;
left: 0; left: 0;
background: url("@/assets/fishing-scene.svg") no-repeat center; background: url("@/assets/fishing-scene.svg") no-repeat center;
background-size: cover; background-size: cover;
} }
.fishing-active .fishing-scene { .fishing-active .fishing-scene {
animation: scene-active 3s ease-in-out infinite; animation: scene-active 3s ease-in-out infinite;
} }
.ripple { .ripple {
position: absolute; position: absolute;
width: 30px; width: 30px;
height: 30px; height: 30px;
background: rgba(255, 255, 255, 0.7); background: rgba(255, 255, 255, 0.7);
border-radius: 50%; border-radius: 50%;
left: 60%; left: 60%;
top: 70%; top: 70%;
transform: translate(-50%, -50%) scale(0); transform: translate(-50%, -50%) scale(0);
opacity: 0; opacity: 0;
} }
.fishing-active .ripple { .fishing-active .ripple {
animation: ripple 2s infinite; animation: ripple 2s infinite;
} }
.fishing-controls { .fishing-controls {
margin: 20px 0; margin: 20px 0;
} }
.result { .result {
margin-top: 20px; margin-top: 20px;
} }
@keyframes ripple { @keyframes ripple {
0% { 0% {
transform: translate(-50%, -50%) scale(0); transform: translate(-50%, -50%) scale(0);
opacity: 1; opacity: 1;
} }
100% { 100% {
transform: translate(-50%, -50%) scale(4); transform: translate(-50%, -50%) scale(4);
opacity: 0; opacity: 0;
} }
} }
@keyframes scene-active { @keyframes scene-active {
0%, 0%,
100% { 100% {
transform: scale(1); transform: scale(1);
} }
50% { 50% {
transform: scale(1.02); transform: scale(1.02);
} }
} }
</style> </style>

Write Preview
Loading…
Cancel
Save