mirror of
https://github.com/BTMuli/TeyvatGuide.git
synced 2026-03-15 03:53:16 +08:00
💄 修正类型，调整首页生日组件交互
This commit is contained in:
BTMuli
@@ -1,38 +1,41 @@
|
||||
<!-- 首页素材日历-角色生日组件 -->
|
||||
<template>
|
||||
<div class="tcb-container">
|
||||
<div class="tcb-top-none" v-if="!isBirthday">
|
||||
<img src="/source/UI/empty.webp" alt="empty" />
|
||||
<div class="pcb-container">
|
||||
<div v-if="!isBirthday" class="pcb-top-none">
|
||||
<img alt="empty" class="pcb-top-empty" src="/source/UI/empty.webp" />
|
||||
<span>今天没有角色过生日哦~</span>
|
||||
</div>
|
||||
<div class="tcb-top-active" v-else>
|
||||
<div v-else class="pcb-top-active">
|
||||
<img alt="empty" class="pcb-news" src="/source/UI/act_birthday.webp" @click="toNews()" />
|
||||
<span>今天是</span>
|
||||
<div v-for="i in cur" :key="i.role_id">
|
||||
<TMiImg
|
||||
:src="i.head_icon"
|
||||
:alt="i.name"
|
||||
:title="i.name"
|
||||
:ori="true"
|
||||
v-if="i.head_icon.startsWith('http')"
|
||||
/>
|
||||
<img @click="toBirth(true)" :src="i.head_icon" alt="empty" class="tcb-cur" v-else />
|
||||
</div>
|
||||
<span>的生日哦~</span>
|
||||
<img @click="toBirth(true)" src="/source/UI/act_birthday.webp" alt="empty" class="active" />
|
||||
</div>
|
||||
<div>即将到来：{{ next[0]?.role_birthday }}</div>
|
||||
<div v-for="i in next" :key="i.role_id" class="tcb-item">
|
||||
<TMiImg
|
||||
v-if="i.head_icon.startsWith('http')"
|
||||
:src="i.head_icon"
|
||||
v-for="i in cur"
|
||||
:key="i.role_id"
|
||||
:alt="i.name"
|
||||
@click="toBirth(i)"
|
||||
:title="i.name"
|
||||
:ori="true"
|
||||
:src="i.head_icon"
|
||||
:title="i.name"
|
||||
class="pcb-act-icon"
|
||||
@click="toBirth(i)"
|
||||
/>
|
||||
<img v-else :src="i.head_icon" alt="empty" @click="toBirth(i)" />
|
||||
<div class="tcb-item-info">
|
||||
<span>{{ i.name }} 所属：{{ i.belong === "" ? "未知" : i.belong }}</span>
|
||||
<span>{{ parseDesc(i.introduce) }}</span>
|
||||
<span>的生日哦~</span>
|
||||
</div>
|
||||
<div class="pcb-next-title">即将到来：{{ next[0]?.role_birthday }}</div>
|
||||
<div v-for="i in next" :key="i.role_id" class="pcb-item">
|
||||
<TMiImg
|
||||
:alt="i.name"
|
||||
:ori="true"
|
||||
:src="i.head_icon"
|
||||
:title="i.name"
|
||||
class="pcb-i-icon"
|
||||
@click="toBirth(i)"
|
||||
/>
|
||||
<div class="pcb-item-info">
|
||||
<span class="pcb-item-title">
|
||||
<span>{{ i.name }}</span>
|
||||
<span>所属：{{ i.belong === "" ? "未知" : i.belong }}</span>
|
||||
</span>
|
||||
<span class="pcb-item-desc" v-html="parseHtmlText(i.introduce)" />
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
@@ -41,10 +44,13 @@
|
||||
import TMiImg from "@comp/app/t-mi-img.vue";
|
||||
import TSAvatarBirth from "@Sqlm/avatarBirth.js";
|
||||
import useAppStore from "@store/app.js";
|
||||
import { parseHtmlText } from "@utils/toolFunc.js";
|
||||
import { storeToRefs } from "pinia";
|
||||
import { onBeforeMount, ref, shallowRef } from "vue";
|
||||
import { useRouter } from "vue-router";
|
||||
|
||||
import { ArcBirCalendar } from "@/data/index.js";
|
||||
|
||||
const router = useRouter();
|
||||
const { recentNewsType } = storeToRefs(useAppStore());
|
||||
const isBirthday = ref<boolean>(false);
|
||||
@@ -62,35 +68,35 @@ onBeforeMount(async () => {
|
||||
console.log(next.value);
|
||||
});
|
||||
|
||||
async function toBirth(type: TGApp.Archive.Birth.RoleItem | true): Promise<void> {
|
||||
function hasBirthRaw(raw: TGApp.Archive.Birth.CalendarItem): boolean {
|
||||
const monthList = ArcBirCalendar[raw.role_birthday[0]];
|
||||
if (!monthList) return false;
|
||||
const find = monthList.find((i) => i.role_id === raw.role_id);
|
||||
return !!find;
|
||||
}
|
||||
|
||||
async function toBirth(data: TGApp.Archive.Birth.CalendarItem): Promise<void> {
|
||||
let dateStr;
|
||||
if (type === true) {
|
||||
const hasRaw = hasBirthRaw(data);
|
||||
if (hasRaw) {
|
||||
const date = new Date();
|
||||
const month = date.getMonth() + 1;
|
||||
const day = date.getDate();
|
||||
dateStr = `${month}/${day}`;
|
||||
} else {
|
||||
dateStr = type.role_birthday;
|
||||
}
|
||||
if (type !== true) {
|
||||
await router.push({ name: "留影叙佳期", params: { date: dateStr } });
|
||||
return;
|
||||
}
|
||||
if (cur.value.length > 0 && !cur.value[0].is_subscribe) {
|
||||
recentNewsType.value = "news";
|
||||
await router.push("/news/2/news");
|
||||
return;
|
||||
}
|
||||
await router.push({ name: "留影叙佳期", params: { date: dateStr } });
|
||||
await router.push({ name: "角色图鉴", params: { id: data.role_id } });
|
||||
}
|
||||
|
||||
function parseDesc(intro: string): string {
|
||||
const dom = new DOMParser().parseFromString(intro, "text/html");
|
||||
return dom.body.textContent || "";
|
||||
async function toNews(): Promise<void> {
|
||||
recentNewsType.value = "news";
|
||||
await router.push({ name: "资讯", params: { gid: 2, type: "news" } });
|
||||
}
|
||||
</script>
|
||||
<style lang="css" scoped>
|
||||
.tcb-container {
|
||||
<style lang="scss" scoped>
|
||||
.pcb-container {
|
||||
position: relative;
|
||||
display: flex;
|
||||
width: 100%;
|
||||
height: 100%;
|
||||
@@ -105,32 +111,44 @@ function parseDesc(intro: string): string {
|
||||
row-gap: 4px;
|
||||
}
|
||||
|
||||
.tcb-top-none,
|
||||
.tcb-top-active {
|
||||
.pcb-top-active,
|
||||
.pcb-top-none {
|
||||
position: relative;
|
||||
display: flex;
|
||||
align-items: center;
|
||||
justify-content: center;
|
||||
column-gap: 8px;
|
||||
}
|
||||
|
||||
.tcb-top-none img,
|
||||
.tcb-top-active img {
|
||||
width: 40px;
|
||||
height: 40px;
|
||||
.pcb-top-empty {
|
||||
position: relative;
|
||||
width: 32px;
|
||||
flex-shrink: 0;
|
||||
aspect-ratio: 1;
|
||||
}
|
||||
|
||||
.tcb-top-active img.active {
|
||||
margin-left: auto;
|
||||
.pcb-news {
|
||||
position: relative;
|
||||
width: 32px;
|
||||
flex-shrink: 0;
|
||||
aspect-ratio: 1;
|
||||
cursor: pointer;
|
||||
}
|
||||
|
||||
.tcb-top-active img.tcb-cur {
|
||||
width: 40px;
|
||||
height: 40px;
|
||||
.pcb-act-icon {
|
||||
width: 32px;
|
||||
flex-shrink: 0;
|
||||
border-radius: 50%;
|
||||
background: var(--common-shadow-1);
|
||||
aspect-ratio: 1;
|
||||
background: var(--box-bg-2);
|
||||
cursor: pointer;
|
||||
}
|
||||
|
||||
.tcb-item {
|
||||
.pcb-next-title {
|
||||
font-family: var(--font-title);
|
||||
}
|
||||
|
||||
.pcb-item {
|
||||
position: relative;
|
||||
display: flex;
|
||||
width: 100%;
|
||||
@@ -140,28 +158,40 @@ function parseDesc(intro: string): string {
|
||||
border: 1px solid var(--common-shadow-1);
|
||||
border-radius: 4px;
|
||||
background: var(--box-bg-2);
|
||||
column-gap: 8px;
|
||||
}
|
||||
|
||||
.tcb-item img {
|
||||
.pcb-i-icon {
|
||||
position: relative;
|
||||
height: 80px;
|
||||
flex-shrink: 0;
|
||||
border-radius: 50%;
|
||||
aspect-ratio: 1;
|
||||
background: var(--box-bg-3);
|
||||
cursor: pointer;
|
||||
}
|
||||
|
||||
.tcb-item-info {
|
||||
.pcb-item-info {
|
||||
position: relative;
|
||||
display: flex;
|
||||
flex-direction: column;
|
||||
justify-content: center;
|
||||
align-items: flex-start;
|
||||
justify-content: flex-start;
|
||||
row-gap: 4px;
|
||||
}
|
||||
|
||||
.tcb-item-info :first-child {
|
||||
.pcb-item-title {
|
||||
position: relative;
|
||||
display: flex;
|
||||
column-gap: 8px;
|
||||
font-family: var(--font-title);
|
||||
font-size: 20px;
|
||||
line-height: 24px;
|
||||
}
|
||||
|
||||
.tcb-item-info :last-child {
|
||||
.pcb-item-desc {
|
||||
font-size: 14px;
|
||||
line-height: 14px;
|
||||
word-break: break-all;
|
||||
}
|
||||
</style>
|
||||
|
||||
6
src/types/App/Material.d.ts
vendored
6
src/types/App/Material.d.ts
vendored
@@ -1,6 +1,6 @@
|
||||
/**
|
||||
* 应用素材日历相关类型定义文件
|
||||
* @since Beta v0.9.0
|
||||
* @since Beta v0.9.1
|
||||
*/
|
||||
|
||||
declare namespace TGApp.App.Material {
|
||||
@@ -51,11 +51,11 @@ declare namespace TGApp.App.Material {
|
||||
|
||||
/**
|
||||
* 转换来源
|
||||
* @since Beta v0.9.0
|
||||
* @since Beta v0.9.1
|
||||
*/
|
||||
type ConvertSrc = {
|
||||
/** 材料ID */
|
||||
id: number;
|
||||
id: string;
|
||||
/** 材料名称 */
|
||||
name: string;
|
||||
/** 材料类型 */
|
||||
|
||||
Reference in New Issue
Block a user