feat(calendar): 组件写好了，然后就是跳转的事情了

src/components/t-calendar.vue

@@ -0,0 +1,187 @@
+<template>
+	<v-list class="calendar-card">
+		<v-list-item>
+			<v-list-item-title
+				style="color: #fec90b; margin-left: 10px; margin-bottom: 10px; font-family: Genshin, serif"
+			>
+				<v-icon color="#EBD49E">mdi-calendar-clock</v-icon> 今日素材
+				<span style="color: #faf7e8">{{ new Date().toLocaleDateString() }}</span>
+				<v-btn
+					v-for="text of btnText"
+					@click="getShowCards(text.week)"
+					class="calendar-btn"
+					:style="{
+						border: text.week === weekNow ? '2px solid #fec90b' : '0',
+						background: text.week === btnNow ? '#fec90b' : '#4A5366',
+					}"
+				>
+					{{ text.text }}
+				</v-btn>
+			</v-list-item-title>
+			<div v-if="loading">
+				<t-loading :title="loadingTitle" :empty="loadingEmpty" position="relative" />
+			</div>
+			<div v-else class="calendar-grid">
+				<v-card title="天赋培养" class="calendar-single">
+					<v-card-text class="calendar-icons">
+						<v-img
+							v-for="item in showCharacters"
+							:src="item.cover"
+							class="calendar-icon"
+							@click="showContent(item)"
+						/>
+					</v-card-text>
+				</v-card>
+				<v-card title="武器突破" class="calendar-single">
+					<v-card-text class="calendar-icons">
+						<v-img
+							v-for="item in showWeapons"
+							:src="item.cover"
+							class="calendar-icon"
+							@click="showContent(item)"
+						/>
+					</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";
+import TLoading from "./t-loading.vue";
+// plugins
+import MysOper from "../plugins/Mys";
+// interface
+import { CalendarCard } from "../plugins/Mys/interface/calendar";
+import { OBC_CONTENT_API } from "../plugins/Mys/interface/utils";
+
+// loading
+const loading = ref(true as boolean);
+const loadingTitle = ref("正在加载材料日历");
+const loadingEmpty = ref(false as boolean);
+
+// data
+const characterCards = ref([] as CalendarCard[]);
+const weaponCards = ref([] as CalendarCard[]);
+const weekNow = ref(new Date().getDay());
+const btnNow = ref(0 as number);
+
+const btnText = [
+	{
+		week: 0,
+		text: "周日",
+	},
+	{
+		week: 1,
+		text: "周一",
+	},
+	{
+		week: 2,
+		text: "周二",
+	},
+	{
+		week: 3,
+		text: "周三",
+	},
+	{
+		week: 4,
+		text: "周四",
+	},
+	{
+		week: 5,
+		text: "周五",
+	},
+	{
+		week: 6,
+		text: "周六",
+	},
+];
+
+// show data
+const showCharacters = ref([] as CalendarCard[]);
+const showWeapons = ref([] as CalendarCard[]);
+const router = useRouter();
+
+onMounted(async () => {
+	loadingTitle.value = "正在获取材料日历数据";
+	const calendarData = await MysOper.Calendar.get();
+	if (!calendarData) {
+		loadingEmpty.value = true;
+		loadingTitle.value = "暂无材料日历";
+		return;
+	}
+	loadingEmpty.value = false;
+	loadingTitle.value = "正在渲染材料日历";
+	const calendarCards = MysOper.Calendar.card(calendarData);
+	const week = new Date().getDay();
+	btnNow.value = week;
+	characterCards.value = calendarCards.filter(card => card.type === 2);
+	weaponCards.value = calendarCards.filter(card => card.type === 1);
+	getShowCards(week);
+	loading.value = false;
+});
+
+// 根据星期几获取显示内容
+function getShowCards(choice: number) {
+	btnNow.value = choice;
+	const week = choice === 0 ? 7 : choice;
+	showCharacters.value = characterCards.value
+		.filter(card => card.drop_day.includes(week.toString()))
+		.sort((a, b) => a.sort_day[week] - b.sort_day[week]);
+	showWeapons.value = weaponCards.value
+		.filter(card => card.drop_day.includes(week.toString()))
+		.sort((a, b) => a.sort_day[week] - b.sort_day[week]);
+}
+
+function showContent(item: CalendarCard) {
+	// todo：二级跳转，目前先直接跳到角色详情页
+	window.open(OBC_CONTENT_API.replace("{content_id}", item.url));
+}
+</script>
+<style lang="css" scoped>
+.calendar-card {
+	margin-top: 10px;
+	font-family: Genshin-Light, serif;
+	background: #546d8b;
+	border-radius: 10px;
+}
+
+.calendar-grid {
+	display: grid;
+	grid-template-columns: repeat(2, 1fr);
+	grid-gap: 10px;
+	margin: 10px;
+}
+
+.calendar-single {
+	background: #faf7e8;
+	color: #546d8b;
+	border-radius: 10px;
+}
+
+.calendar-icons {
+	display: grid;
+	grid-template-columns: repeat(auto-fill, minmax(50px, 1fr));
+	grid-gap: 5px;
+}
+
+.calendar-icon {
+	width: 50px;
+	height: 50px;
+	margin: 5px;
+	border-radius: 10px;
+}
+
+.calendar-icon :hover {
+	cursor: pointer;
+}
+
+.calendar-btn {
+	margin-left: 10px;
+	font-family: Genshin-Light, serif;
+	color: #faf7e8;
+	border-radius: 10px;
+}
+</style>

src/components/t-position.vue

@@ -49,8 +49,8 @@
 <script lang="ts" setup>
 // vue
 import { ref, onMounted } from "vue";
-import TLoading from "./t-loading.vue";
 import { useRouter } from "vue-router";
+import TLoading from "./t-loading.vue";
 // utils
 import { createTGWindow } from "../utils/TGWindow";
 // plugins

src/pages/Home.vue

@@ -1,10 +1,12 @@
 <template>
 	<t-pool />
 	<t-position />
+	<t-calendar />
 </template>
 
 <script lang="ts" setup>
 // vue
 import TPool from "../components/t-pool.vue";
 import TPosition from "../components/t-position.vue";
+import TCalendar from "../components/t-calendar.vue";
 </script>

src/plugins/Mys/interface/calendar.ts

@@ -87,19 +87,22 @@ export interface CalendarContent {
  * @since Alpha v0.1.1
  * @interface CalendarCard
  * @property {number} id 角色/武器 ID
+ * @property {number} type 角色/武器，角色为 2，武器为 1
  * @property {string} title 角色/武器 名称
  * @property {string} cover 角色/武器 封面
- * @property {string} url 跳转链接
+ * @property {string} url 跳转链接，一般为 content_id
  * @property {string[]} drop_day 掉落日
- * @property {Map<number>} sort 排序
+ * @property {Map<number>} sort_day 排序
  * @property {CalendarContent[]} contentInfos 材料内容
  * @return {CalendarCard}
  */
 export interface CalendarCard {
 	id: number;
+	type: number;
 	title: string;
 	cover: string;
 	url: string;
 	drop_day: string[];
-	sort: Map<number>;
+	sort_day: Map<number>;
+	contentInfos: CalendarContent[];
 }

src/plugins/Mys/utils/calendar.ts

@@ -18,11 +18,13 @@ export function getCalendarCard(calendarData: CalendarData[]): CalendarCard[] {
 	calendarData.forEach((data: CalendarData) => {
 		return calendarCard.push({
 			id: Number(data.id),
+			type: Number(data.break_type),
 			title: data.title,
 			cover: data.img_url,
 			url: data.jump_type === "1" ? data.jump_url : data.content_id,
 			drop_day: data.drop_day,
-			sort: JSON.parse(data.sort),
+			sort_day: JSON.parse(data.sort),
+			contentInfos: data.contentInfos,
 		});
 	});
 	return calendarCard;