|
|
@ -4,6 +4,7 @@ import { useRouter } from 'vue-router' |
|
|
import { useMonsterStore } from '@/stores/monster' |
|
|
import { useMonsterStore } from '@/stores/monster' |
|
|
import { useCharacterStore } from '@/stores/character' |
|
|
import { useCharacterStore } from '@/stores/character' |
|
|
import { ElMessage } from 'element-plus' |
|
|
import { ElMessage } from 'element-plus' |
|
|
|
|
|
import Particles from '@/components/Particles/Particles.vue' |
|
|
import defaultIcon from '@/assets/images/item-default.svg' |
|
|
import defaultIcon from '@/assets/images/item-default.svg' |
|
|
|
|
|
|
|
|
const router = useRouter() |
|
|
const router = useRouter() |
|
|
@ -33,13 +34,14 @@ const getMonsterTypeClass = (type: number) => { |
|
|
return classes[type] || 'type-normal' |
|
|
return classes[type] || 'type-normal' |
|
|
} |
|
|
} |
|
|
|
|
|
|
|
|
|
|
|
const playerId = computed(() => characterStore.currentCharacter?.id || 0) |
|
|
const playerLevel = computed(() => characterStore.currentCharacter?.levelId || 0) |
|
|
const playerLevel = computed(() => characterStore.currentCharacter?.levelId || 0) |
|
|
|
|
|
|
|
|
const canChallenge = (monster: { level: number }) => { |
|
|
const canChallenge = (monster: { levelId: number }) => { |
|
|
return playerLevel.value >= monster.level |
|
|
return playerLevel.value >= monster.levelId |
|
|
} |
|
|
} |
|
|
|
|
|
|
|
|
const handleChallenge = async (monster: { id: number; level: number }) => { |
|
|
const handleChallenge = async (monster: { id: number; levelId: number }) => { |
|
|
if (!canChallenge(monster)) { |
|
|
if (!canChallenge(monster)) { |
|
|
ElMessage.warning('等级不足,无法挑战') |
|
|
ElMessage.warning('等级不足,无法挑战') |
|
|
return |
|
|
return |
|
|
@ -52,12 +54,15 @@ const handleGoBack = () => { |
|
|
} |
|
|
} |
|
|
|
|
|
|
|
|
onMounted(async () => { |
|
|
onMounted(async () => { |
|
|
await monsterStore.fetchMonsters() |
|
|
if (playerId.value) { |
|
|
|
|
|
await monsterStore.fetchMonsters(playerId.value) |
|
|
|
|
|
} |
|
|
}) |
|
|
}) |
|
|
</script> |
|
|
</script> |
|
|
|
|
|
|
|
|
<template> |
|
|
<template> |
|
|
<div class="monster-list-page"> |
|
|
<div class="monster-list-page"> |
|
|
|
|
|
<Particles :particle-count="50" :particle-colors="['#ffffff', '#aaaaaa']" class="particles-bg" /> |
|
|
<div class="page-container"> |
|
|
<div class="page-container"> |
|
|
<div class="page-header"> |
|
|
<div class="page-header"> |
|
|
<span class="back-btn" @click="handleGoBack">← 返回</span> |
|
|
<span class="back-btn" @click="handleGoBack">← 返回</span> |
|
|
@ -75,13 +80,9 @@ onMounted(async () => { |
|
|
</div> |
|
|
</div> |
|
|
|
|
|
|
|
|
<div v-else class="monster-list"> |
|
|
<div v-else class="monster-list"> |
|
|
<div |
|
|
<div v-for="monster in monsterStore.monsters" :key="monster.id" class="monster-card" |
|
|
v-for="monster in monsterStore.monsters" |
|
|
|
|
|
:key="monster.id" |
|
|
|
|
|
class="monster-card" |
|
|
|
|
|
:class="[getMonsterTypeClass(monster.type), { disabled: !canChallenge(monster) }]" |
|
|
:class="[getMonsterTypeClass(monster.type), { disabled: !canChallenge(monster) }]" |
|
|
@click="handleChallenge(monster)" |
|
|
@click="handleChallenge(monster)"> |
|
|
> |
|
|
|
|
|
<div class="card-inner"> |
|
|
<div class="card-inner"> |
|
|
<div class="card-header"> |
|
|
<div class="card-header"> |
|
|
<div class="card-title-row"> |
|
|
<div class="card-title-row"> |
|
|
@ -90,7 +91,7 @@ onMounted(async () => { |
|
|
</div> |
|
|
</div> |
|
|
<div class="card-info"> |
|
|
<div class="card-info"> |
|
|
<span class="card-title">{{ monster.name }}</span> |
|
|
<span class="card-title">{{ monster.name }}</span> |
|
|
<span class="card-level">等级 {{ monster.level }}</span> |
|
|
<span class="card-level">等级 {{ monster.levelId }}</span> |
|
|
</div> |
|
|
</div> |
|
|
</div> |
|
|
</div> |
|
|
<span class="type-badge" :class="getMonsterTypeClass(monster.type)"> |
|
|
<span class="type-badge" :class="getMonsterTypeClass(monster.type)"> |
|
|
@ -121,11 +122,7 @@ onMounted(async () => { |
|
|
|
|
|
|
|
|
<div class="card-rewards" v-if="monster.rewards && monster.rewards.length > 0"> |
|
|
<div class="card-rewards" v-if="monster.rewards && monster.rewards.length > 0"> |
|
|
<span class="reward-label">击杀奖励:</span> |
|
|
<span class="reward-label">击杀奖励:</span> |
|
|
<span |
|
|
<span v-for="reward in monster.rewards" :key="reward.id" class="reward-item"> |
|
|
v-for="reward in monster.rewards" |
|
|
|
|
|
:key="reward.id" |
|
|
|
|
|
class="reward-item" |
|
|
|
|
|
> |
|
|
|
|
|
{{ reward.itemName }} ×{{ reward.count }} |
|
|
{{ reward.itemName }} ×{{ reward.count }} |
|
|
</span> |
|
|
</span> |
|
|
<span v-if="monster.rewards.length > 2" class="reward-more">+{{ monster.rewards.length - 2 }}</span> |
|
|
<span v-if="monster.rewards.length > 2" class="reward-more">+{{ monster.rewards.length - 2 }}</span> |
|
|
@ -151,6 +148,14 @@ onMounted(async () => { |
|
|
position: relative; |
|
|
position: relative; |
|
|
} |
|
|
} |
|
|
|
|
|
|
|
|
|
|
|
.particles-bg { |
|
|
|
|
|
position: fixed !important; |
|
|
|
|
|
top: 0; |
|
|
|
|
|
left: 0; |
|
|
|
|
|
width: 100% !important; |
|
|
|
|
|
height: 100% !important; |
|
|
|
|
|
} |
|
|
|
|
|
|
|
|
.page-container { |
|
|
.page-container { |
|
|
max-width: 480px; |
|
|
max-width: 480px; |
|
|
margin: 0 auto; |
|
|
margin: 0 auto; |
|
|
|