fix(home): 首页放了一下卡池信息

src/interface/MysPost.ts

@@ -1,3 +1,8 @@
+export const MysNewsApi = "https://bbs-api.mihoyo.com/post/wapi/getNewsList?gids=2&type=";
+export const MysPostApi = "https://bbs-api.mihoyo.com/post/wapi/getPostFull?gids=2&post_id=";
+export const MysGachaInfo =
+	"https://api-takumi.mihoyo.com/common/blackboard/ys_obc/v1/gacha_pool?app_sn=ys_obc";
+
 /**
  * @description 获取 News 的返回类型
  * @see https://bbs-api.mihoyo.com/post/wapi/getNewsList?gids=2&type={EnumPostType}
@@ -81,6 +86,51 @@ export interface ResponsePost {
 	};
 }
 
+/**
+ * @description 获取卡池信息的返回类型
+ * @see https://api-takumi.mihoyo.com/common/blackboard/ys_obc/v1/gacha_pool?app_sn=ys_obc
+ * @interface ResponseGachaPool
+ * @property {number} retcode 返回码
+ * @property {string} message 返回信息
+ * @property data 返回数据
+ * @property data.list 卡池列表
+ * @property {string} data.list[].id 卡池ID
+ * @property {string} data.list[].title 卡池标题
+ * @property {string} data.list[].activity_url 卡池对应帖子
+ * @property {string} data.list[].content_before_act 卡池内容
+ * @property {string} data.list[].pool 卡池包含的角色
+ * @property {string} data.list[].pool[].icon 卡池角色头像
+ * @property {string} data.list[].pool[].url 卡池角色URL
+ * @property {string} data.list[].voice_icon 卡池角色语音头像
+ * @property {string} data.list[].voice_url 卡池角色语音URL
+ * @property {string} data.list[].voice_status 卡池角色语音状态
+ * @description 如下时间示例：2023-03-21 17:59:59
+ * @property {string} data.list[].start_time 卡池开始时间
+ * @property {string} data.list[].end_time 卡池结束时间
+ * @return ResponseGachaPool
+ */
+export interface ResponseGachaPool {
+	retcode: number;
+	message: string;
+	data: {
+		list: {
+			id: string;
+			title: string;
+			activity_url: string;
+			content_before_act: string;
+			pool: {
+				icon: string;
+				url: string;
+			}[];
+			voice_icon: string;
+			voice_url: string;
+			voice_status: string;
+			start_time: string;
+			end_time: string;
+		}[];
+	};
+}
+
 /**
  * @description 官方动态类型
  * @description 参考米游社官方页面

src/pages/Home.vue

@@ -1,7 +1,127 @@
 <template>
-	<h1>首页</h1>
+	<div v-show="poolInfo" class="pool-cards">
+		<v-card v-for="pool in poolInfo" style="margin-top: 20px">
+			<template v-slot:prepend>
+				<img src="/source/UI/wish.webp" alt="wish" style="width: 40px; height: 40px; float: left" />
+				<v-card-title>{{ pool.title }}</v-card-title>
+			</template>
+			<!-- 卡池封面 -->
+			<v-row style="margin-left: 10px">
+				<img :src="pool.cover" alt="cover" style="height: 340px; width: auto; margin-top: 10px" />
+				<v-col style="margin: auto 10px">
+					<div v-for="character in pool.characters">
+						<!-- todo 点击事件不生效	 -->
+						<img
+							:src="character.icon"
+							style="width: 80px; height: 80px"
+							alt="character"
+							@click="toOuter(character.url, pool.title)"
+						/>
+					</div>
+				</v-col>
+			</v-row>
+			<v-card-subtitle class="pt-4">{{ pool.subtitle }}</v-card-subtitle>
+			<!-- todo 样式美化 -->
+			<v-card-text>
+				<span style="width: 60%">
+					<v-icon>mdi-calendar-clock</v-icon>
+					{{ pool.time.start }}~{{ pool.time.end }}
+				</span>
+				<span style="width: 30%">
+					<audio :src="pool.voice.url" controls />
+				</span>
+				<v-img
+					:src="pool.voice.icon"
+					width="80px"
+					height="80px"
+					alt="voice"
+					style="padding-bottom: 20px; float: right"
+				/>
+			</v-card-text>
+		</v-card>
+	</div>
 </template>
 
-<script lang="ts" setup></script>
+<script lang="ts" setup>
+import { onMounted, ref } from "vue";
+import { http } from "@tauri-apps/api";
+import { createTGWindow } from "../utils/TGWindow";
+import { ResponseGachaPool, ResponsePost, MysPostApi, MysGachaInfo } from "../interface/MysPost";
 
-<style lang="css"></style>
+interface GachaPool {
+	title: string;
+	subtitle: string;
+	cover: string;
+	characters: {
+		icon: string;
+		url: string;
+	}[];
+	voice: {
+		icon: string;
+		url: string;
+	};
+	time: {
+		start: string;
+		end: string;
+	};
+}
+
+const poolInfo = ref([] as GachaPool[]);
+
+onMounted(async () => {
+	const responseGachaPool = await http
+		.fetch<ResponseGachaPool>(MysGachaInfo, {
+			method: "GET",
+			headers: {
+				"Content-Type": "application/json",
+			},
+		})
+		.then(response => {
+			return response.data.data.list;
+		});
+	responseGachaPool.map(async gachaPool => {
+		// 获取卡池 article post_id
+		const post_id = gachaPool.activity_url.split("/").pop();
+		const gachaCover = await http
+			.fetch<ResponsePost>(MysPostApi + post_id, {
+				method: "GET",
+				headers: {
+					referer: `https://bbs.mihoyo.com/ys/article/${post_id}`,
+				},
+			})
+			.then(response => {
+				return response.data.data.post.post.images[0];
+			});
+		console.log(gachaCover);
+		poolInfo.value.push({
+			title: gachaPool.title,
+			subtitle: gachaPool.content_before_act,
+			cover: gachaCover,
+			characters: gachaPool.pool.map(character => ({
+				icon: character.icon,
+				url: character.url,
+			})),
+			voice: {
+				icon: gachaPool.voice_icon,
+				url: gachaPool.voice_url,
+			},
+			time: {
+				start: gachaPool.start_time,
+				end: gachaPool.end_time,
+			},
+		});
+	});
+});
+
+function toOuter(url: string, title: string) {
+	createTGWindow(url, title, title, 960, 720, true);
+}
+</script>
+
+<style lang="css">
+.pool-cards {
+	display: flex;
+	flex-direction: column;
+	align-items: center;
+}
+</style>

src/pages/News.vue

@@ -109,6 +109,8 @@ import {
 	ResponseNews,
 	EnumPostType,
 	ResponsePost,
+	MysPostApi,
+	MysNewsApi,
 } from "../interface/MysPost";
 import { http, fs } from "@tauri-apps/api";
 import { createTGWindow } from "../utils/TGWindow";
@@ -118,10 +120,6 @@ import { parseMys } from "../utils/MysParse";
 const devStore = useDevStore();
 const appStore = useAppStore();
 
-// 常量
-const MysNewsApi = "https://bbs-api.mihoyo.com/post/wapi/getNewsList?gids=2&type=";
-const MysPostApi = "https://bbs-api.mihoyo.com/post/wapi/getPostFull?gids=2&post_id=";
-
 // 接口 todo：考虑放到 interface 文件夹下?
 interface CardDataType {
 	title: string;