fix: 钓到多条鱼提示修正
This commit is contained in:
LyMysterious
+144
-159
@@ -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;
|
||||
if (isFishing.value) return;
|
||||
|
||||
isFishing.value = true;
|
||||
currentCatch.value = null;
|
||||
resultMessage.value = "正在钓鱼中...";
|
||||
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();
|
||||
}
|
||||
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("钓鱼成功！🎣");
|
||||
if (items.length > 0) {
|
||||
currentCatch.value = items;
|
||||
|
||||
// 添加到日志并保存到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 || "钓鱼失败 🎣");
|
||||
// 构建展示信息
|
||||
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>
|
||||
|
||||
Reference in New Issue
Block a user