Fun/TeyvatGuide
1
0
Fork 0
mirror of https://github.com/BTMuli/TeyvatGuide.git synced 2025-12-14 09:38:13 +08:00
Code Issues Packages Projects Releases Wiki Activity

🐛 修复卡牌查找结果渲染错误

Browse Source
This commit is contained in:
BTMuli
2023-05-26 13:57:46 +08:00
parent 5ee9be1079
commit a1b85b3526
1 changed files with 121 additions and 99 deletions
Download Patch File Download Diff File Expand all files Collapse all files

62
src/pages/WIKI/GCG.vue
View File

@@ -1,8 +1,5 @@
<template>
<div v-if="loading">
<TLoading title="正在加载卡牌列表" />
</div>
<div v-else>
<TOLoading v-model="loading" title="正在加载卡牌列表" />
<v-tabs v-model="tab" align-tabs="start" class="cards-tab">
<div v-show="!doSearch">
<v-tab value="character">
@@ -26,11 +23,14 @@
@keyup.enter="searchCard"
/>
</v-tabs>
<div v-if="!doSearch">
<div v-show="!doSearch">
<v-window v-model="tab">
<v-window-item value="character">
<div class="cards-grid">
<v-card v-for="item in CardsInfoC" :key="item.contentId" class="card-cls" @click="toOuter(item.name, item.contentId)">
<v-card
v-for="item in CardsInfoC" :key="item.contentId" class="card-cls"
@click="toOuter(item.name, item.contentId)"
>
<div class="card-border">
<img src="/WIKI/GCG/bg/normal.webp" alt="border">
</div>
@@ -45,7 +45,10 @@
</v-window-item>
<v-window-item value="action">
<div class="cards-grid">
<v-card v-for="item in CardsInfoA" :key="item.contentId" class="card-cls" @click="toOuter(item.name, item.contentId)">
<v-card
v-for="item in CardsInfoA" :key="item.contentId" class="card-cls"
@click="toOuter(item.name, item.contentId)"
>
<div class="card-border">
<img src="/WIKI/GCG/bg/normal.webp" alt="border">
</div>
@@ -60,7 +63,10 @@
</v-window-item>
<v-window-item value="monster">
<div class="cards-grid">
<v-card v-for="item in CardsInfoM" :key="item.contentId" class="card-cls" @click="toOuter(item.name, item.contentId)">
<v-card
v-for="item in CardsInfoM" :key="item.contentId" class="card-cls"
@click="toOuter(item.name, item.contentId)"
>
<div class="card-border">
<img src="/WIKI/GCG/bg/normal.webp" alt="border">
</div>
@@ -75,11 +81,14 @@
</v-window-item>
</v-window>
</div>
<div v-else>
<div v-show="doSearch">
<div class="cards-grid">
<div v-for="item in CardsInfoS" :key="item.contentId" class="card-cls" @click="toOuter(item.name, item.contentId)">
<v-card
v-for="item in CardsInfoS" :key="item.contentId" class="card-cls"
@click="toOuter(item.name, item.contentId)"
>
<div class="card-border">
<img src="/WIKI/GCG/bg/normal.webp" alt="border">
<img src="/WIKI/GCG/bg/special.webp" alt="border">
</div>
<div class="card-cover">
<img :src="item.icon" alt="cover">
@@ -87,18 +96,17 @@
<div class="card-content">
<span>{{ item.name }}</span>
</div>
</div>
</v-card>
</div>
</div>
<v-snackbar v-model="snackbar" timeout="1500" color="error">
未找到相关卡牌
</v-snackbar>
</div>
</template>
<script lang="ts" setup>
// vue
import { ref, onMounted, computed } from "vue";
import TLoading from "../../components/main/t-loading.vue";
import { computed, onMounted, ref } from "vue";
import TOLoading from "../../components/overlay/to-loading.vue";
// utils
import { createTGWindow } from "../../utils/TGWindow";
import { AppGCGData } from "../../data";
@@ -125,21 +133,35 @@ onMounted(async () => {
});
async function loadData () {
CardsInfoC.value = allCards.value.filter((item) => item.type === "角色牌");
CardsInfoA.value = allCards.value.filter((item) => item.type === "行动牌");
CardsInfoM.value = allCards.value.filter((item) => item.type === "魔物牌");
await Promise.allSettled(
allCards.value.map(async (item) => {
if (item.type === "角色牌") CardsInfoC.value.push(item);
if (item.type === "行动牌") CardsInfoA.value.push(item);
if (item.type === "魔物牌") CardsInfoM.value.push(item);
}),
);
loading.value = false;
}
function toOuter (cardName: string, cardId: number) {
const url = OBC_CONTENT_API.replace("{content_id}", cardId.toString());
createTGWindow(url, "GCG", cardName, 1200, 800, true);
}
async function searchCard () {
loading.value = true;
if (search.value === "") {
setTimeout(() => {
doSearch.value = false;
loading.value = false;
}, 1000);
return;
}
doSearch.value = true;
const res: TGApp.App.GCG.WikiBriefInfo[] = [];
allCards.value.map((item) => (item.name.includes(search.value) ? res.push(item) : null));
await Promise.allSettled(allCards.value.map((item) => (item.name.includes(search.value) ? res.push(item) : null)));
res.sort((a, b) => a.name.localeCompare(b.name));
console.log(res);
loading.value = false;
if (res.length === 0) {
snackbar.value = true;
@@ -151,7 +173,7 @@ async function searchCard () {
</script>
<style lang="css" scoped>
.cards-tab {
font-family: Genshin,serif;
font-family: Genshin, serif;
margin-bottom: 20px;
color: var(--content-text-3);
}