mirror of
https://github.com/BTMuli/TeyvatGuide.git
synced 2025-12-12 09:18:14 +08:00
fix(home): 首页组件分割
This commit is contained in:
BTMuli
204
src/components/t-pool.vue
Normal file
204
src/components/t-pool.vue
Normal file
@@ -0,0 +1,204 @@
|
||||
<template>
|
||||
<v-list class="pool-card">
|
||||
<v-list-item>
|
||||
<v-list-item-title style="color: #fec90b; margin-left: 10px; font-family: Genshin, serif"
|
||||
>限时祈愿</v-list-item-title
|
||||
>
|
||||
<div v-if="loading">
|
||||
<t-loading :title="loadingTitle" :empty="loadingEmpty" position="relative" />
|
||||
</div>
|
||||
<div v-else class="pool-grid">
|
||||
<v-card
|
||||
v-for="pool in poolCards"
|
||||
style="background: #faf7e8; color: #546d8b; border-radius: 10px"
|
||||
>
|
||||
<v-list style="background: #faf7e8; color: #546d8b">
|
||||
<v-list-item :title="pool.title" :subtitle="pool.subtitle">
|
||||
<template v-slot:prepend>
|
||||
<v-img
|
||||
:src="pool.voice.icon"
|
||||
style="transform: translate(0, -10px); width: 60px; height: 60px"
|
||||
/>
|
||||
</template>
|
||||
<template v-slot:append>
|
||||
<audio :src="pool.voice.url" controls />
|
||||
</template>
|
||||
</v-list-item>
|
||||
</v-list>
|
||||
<div class="pool-cover" @click="toPost(pool)">
|
||||
<img :src="pool.cover" alt="cover" />
|
||||
</div>
|
||||
<div class="pool-character">
|
||||
<div v-for="character in pool.characters" @click="toOuter(character.url, pool.title)">
|
||||
<img :src="character.icon" class="pool-icon" alt="character" />
|
||||
</div>
|
||||
<div class="pool-clock">
|
||||
<v-progress-circular
|
||||
:model-value="poolTimePass[pool.post_id]"
|
||||
size="100"
|
||||
width="10"
|
||||
color="#90caf9"
|
||||
>
|
||||
{{ poolTimeGet[pool.post_id] }}
|
||||
</v-progress-circular>
|
||||
</div>
|
||||
</div>
|
||||
<v-card-text>
|
||||
<span style="width: 60%">
|
||||
<v-icon>mdi-calendar-clock</v-icon>
|
||||
{{ pool.time.start }}~{{ pool.time.end }}
|
||||
</span>
|
||||
</v-card-text>
|
||||
</v-card>
|
||||
</div>
|
||||
</v-list-item>
|
||||
</v-list>
|
||||
</template>
|
||||
<script lang="ts" setup>
|
||||
// vue
|
||||
import { ref, onMounted } from "vue";
|
||||
import { useRouter } from "vue-router";
|
||||
// utils
|
||||
import { createTGWindow } from "../utils/TGWindow";
|
||||
// plugins
|
||||
import MysOper from "../plugins/Mys";
|
||||
// interface
|
||||
import { GachaCard } from "../plugins/Mys/interface/gacha";
|
||||
import { Map } from "../interface/Base";
|
||||
import TLoading from "./t-loading.vue";
|
||||
|
||||
// vue
|
||||
const router = useRouter();
|
||||
|
||||
// loading
|
||||
const loading = ref(true as boolean);
|
||||
const loadingTitle = ref("正在加载祈愿数据");
|
||||
const loadingEmpty = ref(false as boolean);
|
||||
|
||||
// data
|
||||
const poolCards = ref([] as GachaCard[]);
|
||||
const poolTimeGet = ref({} as Map<string>);
|
||||
const poolTimePass = ref({} as Map<number>);
|
||||
|
||||
onMounted(async () => {
|
||||
try {
|
||||
loadingTitle.value = "正在获取限时祈愿数据";
|
||||
const gachaData = await MysOper.Gacha.get();
|
||||
if (!gachaData) {
|
||||
loadingEmpty.value = true;
|
||||
return;
|
||||
}
|
||||
loadingEmpty.value = false;
|
||||
loadingTitle.value = "正在渲染限时祈愿";
|
||||
poolCards.value = await MysOper.Gacha.card(gachaData);
|
||||
poolCards.value.map(pool => {
|
||||
poolTimeGet.value[pool.post_id] = getLastPoolTime(pool.time.end_stamp - Date.now());
|
||||
poolTimePass.value[pool.post_id] = pool.time.end_stamp - Date.now();
|
||||
});
|
||||
await setInterval(() => {
|
||||
poolCards.value.map(pool => {
|
||||
poolTimeGet.value[pool.post_id] = getLastPoolTime(pool.time.end_stamp - Date.now());
|
||||
poolTimePass.value[pool.post_id] =
|
||||
((pool.time.end_stamp - Date.now()) / (pool.time.end_stamp - pool.time.start_stamp)) *
|
||||
100;
|
||||
});
|
||||
}, 1000);
|
||||
} catch (error) {
|
||||
console.error(error);
|
||||
return;
|
||||
} finally {
|
||||
loading.value = false;
|
||||
}
|
||||
});
|
||||
|
||||
function toOuter(url: string, title: string) {
|
||||
createTGWindow(url, "祈愿", title, 1200, 800, true);
|
||||
}
|
||||
|
||||
function getLastPoolTime(time: number) {
|
||||
const hour = Math.floor(time / 1000 / 60 / 60);
|
||||
const minute = Math.floor((time / 1000 / 60 / 60 - hour) * 60);
|
||||
const second = Math.floor(((time / 1000 / 60 / 60 - hour) * 60 - minute) * 60);
|
||||
return `${hour}:${minute.toFixed(0).padStart(2, "0")}:${second.toFixed(0).padStart(2, "0")}`;
|
||||
}
|
||||
|
||||
async function toPost(pool: GachaCard) {
|
||||
// 获取路由路径
|
||||
const path = router.resolve({
|
||||
name: "帖子详情",
|
||||
params: {
|
||||
post_id: pool.post_id.toString(),
|
||||
},
|
||||
}).href;
|
||||
// 打开新窗口
|
||||
createTGWindow(path, "限时祈愿", pool.title, 960, 720, false);
|
||||
}
|
||||
</script>
|
||||
|
||||
<style lang="css">
|
||||
.pool-card {
|
||||
font-family: "Genshin", serif;
|
||||
width: 100%;
|
||||
background: #546d8b;
|
||||
border-radius: 10px;
|
||||
}
|
||||
|
||||
.pool-grid {
|
||||
display: grid;
|
||||
grid-template-columns: repeat(auto-fill, minmax(600px, 1fr));
|
||||
grid-gap: 20px;
|
||||
margin-top: 10px;
|
||||
}
|
||||
|
||||
.pool-cover {
|
||||
margin: 0 20px 10px;
|
||||
width: calc(100% - 40px);
|
||||
height: auto;
|
||||
overflow: hidden;
|
||||
border-radius: 10px;
|
||||
display: flex;
|
||||
justify-content: center;
|
||||
align-items: center;
|
||||
}
|
||||
|
||||
.pool-cover img {
|
||||
width: 100%;
|
||||
transition: all 0.5s;
|
||||
border-radius: 10px;
|
||||
}
|
||||
|
||||
.pool-cover :hover {
|
||||
cursor: pointer;
|
||||
transform: scale(1.1);
|
||||
transition: all 0.5s;
|
||||
}
|
||||
|
||||
.pool-character {
|
||||
margin: 0 20px;
|
||||
width: 100%;
|
||||
height: 80px;
|
||||
display: flex;
|
||||
}
|
||||
|
||||
.pool-character img {
|
||||
border-radius: 10px;
|
||||
}
|
||||
|
||||
.pool-icon {
|
||||
width: 80px;
|
||||
height: 80px;
|
||||
margin: 0 10px;
|
||||
}
|
||||
|
||||
.pool-character :hover .pool-icon {
|
||||
cursor: pointer;
|
||||
}
|
||||
|
||||
.pool-clock {
|
||||
width: auto;
|
||||
margin-left: 40px;
|
||||
float: right;
|
||||
font-size: small;
|
||||
height: 80px;
|
||||
}
|
||||
</style>
|
||||
@@ -4,7 +4,10 @@
|
||||
<v-list-item-title style="color: #fec90b; margin-left: 10px; font-family: Genshin, serif"
|
||||
>近期活动</v-list-item-title
|
||||
>
|
||||
<div class="position-grid">
|
||||
<div v-if="loading">
|
||||
<t-loading :title="loadingTitle" :empty="loadingEmpty" position="relative" />
|
||||
</div>
|
||||
<div v-else class="position-grid">
|
||||
<v-card
|
||||
v-for="card in positionCards"
|
||||
style="background: #faf7e8; color: #546d8b; border-radius: 10px"
|
||||
@@ -46,6 +49,7 @@
|
||||
<script lang="ts" setup>
|
||||
// vue
|
||||
import { ref, onMounted } from "vue";
|
||||
import TLoading from "./t-loading.vue";
|
||||
import { useRouter } from "vue-router";
|
||||
// utils
|
||||
import { createTGWindow } from "../utils/TGWindow";
|
||||
@@ -57,6 +61,8 @@ import { Map } from "../interface/Base";
|
||||
|
||||
// loading
|
||||
const loading = ref(true as boolean);
|
||||
const loadingTitle = ref("正在加载近期活动");
|
||||
const loadingEmpty = ref(false as boolean);
|
||||
|
||||
// 数据
|
||||
const positionCards = ref([] as PositionCard[]);
|
||||
@@ -66,7 +72,15 @@ const router = useRouter();
|
||||
|
||||
onMounted(async () => {
|
||||
try {
|
||||
loadingTitle.value = "正在获取近期活动数据";
|
||||
const positionData = await MysOper.Position.get();
|
||||
if (!positionData) {
|
||||
loadingEmpty.value = true;
|
||||
loadingTitle.value = "暂无近期活动";
|
||||
return;
|
||||
}
|
||||
loadingEmpty.value = false;
|
||||
loadingTitle.value = "正在渲染近期活动";
|
||||
positionCards.value = MysOper.Position.card(positionData);
|
||||
positionCards.value.forEach(card => {
|
||||
positionTimeGet.value[card.post_id] = getLastPositionTime(card.time.end_stamp - Date.now());
|
||||
@@ -105,13 +119,13 @@ async function toPost(card: PositionCard) {
|
||||
},
|
||||
}).href;
|
||||
// 打开新窗口
|
||||
createTGWindow(path, "祈愿", card.title, 960, 720, false);
|
||||
createTGWindow(path, "近期活动", card.title, 960, 720, false);
|
||||
}
|
||||
</script>
|
||||
|
||||
<style lang="css">
|
||||
.position-card {
|
||||
margin: 0 10px;
|
||||
margin-top: 10px;
|
||||
font-family: "Genshin", serif;
|
||||
background: #546d8b;
|
||||
border-radius: 10px;
|
||||
@@ -119,8 +133,8 @@ async function toPost(card: PositionCard) {
|
||||
|
||||
.position-grid {
|
||||
display: grid;
|
||||
grid-template-columns: repeat(auto-fill, minmax(400px, 1fr));
|
||||
grid-template-columns: repeat(3, minmax(400px, 1fr));
|
||||
grid-gap: 20px;
|
||||
padding: 10px;
|
||||
margin-top: 10px;
|
||||
}
|
||||
</style>
|
||||
|
||||
Reference in New Issue
Block a user