fix(gacha): 修复 gacha 数据获取不到的问题

src/components/t-position.vue

@@ -1,36 +1,30 @@
 <template>
-	<v-list class="Position-card">
+	<v-list class="position-card">
 		<v-list-item>
-			<v-list-item-title style="color: #fec90b">
-				近期活动 <span v-show="loading"><v-progress-circular indeterminate color="blue" /></span>
-			</v-list-item-title>
-			<div v-show="!loading" class="Position-grid">
-				<v-card class="Position-single" v-for="card in positionCards">
-					<v-card-title>
-						<v-list class="single-list">
-							<v-list-item>
-								<template v-slot:prepend>
-									<v-avatar>
-										<v-img :src="card.icon" />
-									</v-avatar>
-								</template>
-								<v-list-item-title>{{ card.title }}</v-list-item-title>
-								<v-list-item-subtitle>{{ card.abstract }}</v-list-item-subtitle>
-							</v-list-item>
-						</v-list>
-					</v-card-title>
+			<v-list-item-title style="color: #fec90b">近期活动</v-list-item-title>
+			<div class="position-grid">
+				<v-card v-for="card in positionCards" style="background: #5c6474;color: #f4d8a8">
+					<v-list style="background: #5c6474;color: #f4d8a8">
+						<v-list-item :title="card.title" :subtitle="card.abstract">
+						<template v-slot:prepend>
+						<v-avatar>
+							<v-img :src="card.icon" />
+						</v-avatar>
+						</template>
+						</v-list-item>
+					</v-list>
 					<v-divider></v-divider>
 					<v-card-text>
 						<span style="width: 60%">
 							<v-icon>mdi-calendar-clock</v-icon>
-							{{ card.create_time }}~{{ transTime(card.end_time) }}
+							{{ card.time.start }}~{{ card.time.end }}
 						</span>
 					</v-card-text>
 					<v-card-actions>
 						<span style="width: 80%; margin-left: 10px">
 							<v-icon>mdi-clock-outline</v-icon>
 							剩余时间：
-							<span style="color: #90caf9">{{ lastTime[Number(card.end_time)] }}</span>
+							<span style="color: #90caf9">{{ positionTimeGet[card.post_id] }}</span>
 						</span>
 						<v-btn @click="toPost(card)" class="ms-2 card-btn mr-2">
 							<template v-slot:prepend>
@@ -49,7 +43,6 @@
 import { ref, onMounted } from "vue";
 import { useRouter } from "vue-router";
 // utils
-import TGMap from "../utils/TGMap";
 import { createTGWindow } from "../utils/TGWindow";
 // plugins
 import MysOper from "../plugins/Mys";
@@ -62,22 +55,21 @@ const loading = ref(true as boolean);
 
 // 数据
 const positionCards = ref([] as PositionCard[]);
-const lastTime = ref({} as Map<string>);
+const positionTimeGet = ref({} as Map<string>);
+const positionTimeEnd = ref({} as Map<number>);
 const router = useRouter();
 
 onMounted(async () => {
 	try {
 		const positionData = await MysOper.Position.get();
 		positionCards.value = MysOper.Position.card(positionData);
-		const time: Map<string> = {};
 		positionCards.value.forEach(card => {
-			time[Number(card.end_time)] = getLastTime(Number(card.end_time) - Date.now());
+			positionTimeGet.value[card.post_id] = getLastPositionTime(card.time.end_stamp - Date.now());
+			positionTimeEnd.value[card.post_id] = card.time.end_stamp;
 		});
-		lastTime.value = time;
-		setInterval(() => {
-			const timeMap = new TGMap(lastTime.value);
-			timeMap.forEach((value, key) => {
-				timeMap.set(key, getLastTime(Number(key) - Date.now()));
+		await setInterval(() => {
+			positionCards.value.forEach(card => {
+				positionTimeGet.value[card.post_id] = getLastPositionTime(card.time.end_stamp - Date.now());
 			});
 		}, 1000);
 	} catch (error) {
@@ -88,15 +80,7 @@ onMounted(async () => {
 	}
 });
 
-function transTime(time: string) {
-	return new Date(Number(time))
-		.toLocaleString("zh-CN", {
-			hour12: false,
-		})
-		.replace(/\//g, "-");
-}
-
-function getLastTime(time: number) {
+function getLastPositionTime(time: number) {
 	const day = Math.floor(time / (24 * 3600 * 1000));
 	const hour = Math.floor((time % (24 * 3600 * 1000)) / (3600 * 1000));
 	const minute = Math.floor((time % (3600 * 1000)) / (60 * 1000));
@@ -107,7 +91,7 @@ function getLastTime(time: number) {
 }
 
 async function toPost(card: PositionCard) {
-	const post_id = card.url.split("/").pop();
+	const post_id = card.post_id;
 	// 获取路由路径
 	const path = router.resolve({
 		name: "帖子详情",
@@ -116,27 +100,22 @@ 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 {
+.position-card {
 	margin: 0 10px;
 	font-family: "Genshin", serif;
 	background: rgba(0, 0, 0, 0.5);
 	border-radius: 10px;
 }
 
-.Position-grid {
+.position-grid {
 	display: grid;
 	grid-template-columns: repeat(auto-fill, minmax(400px, 1fr));
 	grid-gap: 20px;
 	padding: 10px;
 }
-
-.Position-single {
-	background: rgba(0, 0, 0, 0.5);
-	border-radius: 10px;
-}
 </style>

src/pages/Home.vue

@@ -1,13 +1,15 @@
 <template>
 	<div v-if="loading">
-		<t-loading title="正在加载卡池信息" />
+		<t-loading :title="loadingTitle" />
 	</div>
 	<div v-else>
-		<div v-if="empty">
-			<t-loading title="暂无卡池信息" empty />
+		<div v-if="poolEmpty">
+			<v-card class="pool-card">
+				<v-card-title>暂无卡池信息</v-card-title>
+			</v-card>
 		</div>
-		<div v-else class="pool-cards">
-			<v-card v-for="pool in poolInfo" class="Home-card">
+		<div class="pool-cards" v-else>
+			<v-card v-for="pool in poolCards" class="pool-card">
 				<template v-slot:prepend>
 					<v-img
 						:src="pool.voice.icon"
@@ -23,21 +25,21 @@
 				</template>
 				<!-- 卡池封面 -->
 				<v-row class="Home-pool">
-					<div class="Home-pool-cover" @click="toPost(pool)">
+					<div class="pool-cover" @click="toPost(pool)">
 						<img :src="pool.cover" alt="cover" />
 					</div>
-					<div class="Home-pool-character">
+					<div class="pool-character">
 						<div v-for="character in pool.characters" @click="toOuter(character.url, pool.title)">
-							<img :src="character.icon" class="Home-pool-icon" alt="character" />
+							<img :src="character.icon" class="pool-icon" alt="character" />
 						</div>
-						<div class="Home-pool-clock">
+						<div class="pool-clock">
 							<v-progress-circular
-								:model-value="timePass"
+								:model-value="poolTimePass[pool.post_id]"
 								size="100"
 								color="blue-lighten-3"
 								width="10"
 							>
-								{{ timeGet }}
+								{{ poolTimeGet[pool.post_id] }}
 							</v-progress-circular>
 						</div>
 					</div>
@@ -60,54 +62,55 @@
 import { onMounted, ref } from "vue";
 import { useRouter } from "vue-router";
 import TLoading from "../components/t-loading.vue";
-import TPosition from "../components/t-position.vue";
 // plugin
 import MysOper from "../plugins/Mys";
 // utils
 import { createTGWindow } from "../utils/TGWindow";
 // interface
-import { GachaData, GachaCard } from "../plugins/Mys/interface/gacha";
+import { GachaCard } from "../plugins/Mys/interface/gacha";
+import { Map } from "../interface/Base";
+import TPosition from "../components/t-position.vue";
 
+// vue
 const router = useRouter();
-const poolInfo = ref([] as GachaCard[]);
+
+// loading
 const loading = ref(true);
-const empty = ref(false);
-const timeGet = ref("");
-const timePass = ref(0);
+const loadingTitle = ref("加载中...");
+const poolEmpty = ref(false);
+
+// data
+const poolCards = ref([] as GachaCard[]);
+const poolTimeGet = ref({} as Map<string>);
+const poolTimePass = ref({} as Map<number>);
 
 onMounted(async () => {
-	const responseGachaPool: GachaData[] = await MysOper.Gacha.get();
-	const start_time = responseGachaPool[0].start_time;
-	const end_time = responseGachaPool[0].end_time;
-	// 如果没有卡池信息则不进行后续操作
-	if (responseGachaPool.length === 0) {
-		loading.value = false;
-		empty.value = true;
-		return;
+	loadingTitle.value = "正在获取卡池信息...";
+	const gachaData = await MysOper.Gacha.get();
+	if (!gachaData || gachaData.length === 0) {
+		poolEmpty.value = true;
+		loadingTitle.value = "暂无卡池信息";
 	}
-	empty.value = false;
-	poolInfo.value = await MysOper.Gacha.card(responseGachaPool);
-	getTimeNow(start_time, end_time);
-	setInterval(() => {
-		loading.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);
+	loading.value = false;
 });
 
-function getTimeNow(start_time: string, end_time: string) {
-	setInterval(() => {
-		const start = new Date(start_time);
-		const now = new Date();
-		const end = new Date(end_time);
-		const time = end.getTime() - now.getTime();
-		// 截断，取 0.000%
-		timePass.value = (time / (end.getTime() - start.getTime())) * 100;
-		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);
-		timeGet.value = `${hour}:${minute.toFixed(0).padStart(2, "0")}:${second
-			.toFixed(0)
-			.padStart(2, "0")}`;
-	}, 1000);
+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")}`;
 }
 
 function toOuter(url: string, title: string) {
@@ -135,7 +138,7 @@ async function toPost(pool: GachaCard) {
 	align-items: center;
 }
 
-.Home-card {
+.pool-card {
 	margin: 10px;
 }
 
@@ -144,42 +147,42 @@ async function toPost(pool: GachaCard) {
 	margin-right: 10px;
 }
 
-.Home-pool-cover {
+.pool-cover {
 	width: 690px;
 	height: auto;
 	margin-bottom: 10px;
 	overflow: hidden;
 }
 
-.Home-pool-cover img {
+.pool-cover img {
 	width: 100%;
 	height: auto;
 	transition: all 0.5s;
 }
 
-.Home-pool-cover :hover {
+.pool-cover :hover {
 	cursor: pointer;
 	transform: scale(1.1);
 	transition: all 0.5s;
 }
 
-.Home-pool-character {
+.pool-character {
 	width: 100%;
 	height: 80px;
 	display: flex;
 }
 
-.Home-pool-icon {
+.pool-icon {
 	width: 80px;
 	height: 80px;
 	margin: 0 10px;
 }
 
-.Home-pool-character :hover .Home-pool-icon {
+.pool-character :hover .pool-icon {
 	cursor: pointer;
 }
 
-.Home-pool-clock {
+.pool-clock {
 	width: auto;
 	margin-left: 40px;
 	float: right;

src/plugins/Mys/interface/gacha.ts

@@ -66,7 +66,7 @@ export interface GachaPool {
 
 /**
  * @description 用于渲染的卡池数据
- * @since Alpha
+ * @since Alpha v0.1.1
  * @interface GachaCard
  * @property {string} title 卡池标题
  * @property {string} subtitle 卡池副标题
@@ -76,7 +76,9 @@ export interface GachaPool {
  * @property {GachaPool} voice 卡池角色语音
  * @property time 卡池时间
  * @property {string} time.start 卡池开始时间
+ * @property {string} time.start_stamp 卡池开始时间戳
  * @property {string} time.end 卡池结束时间
+ * @property {string} time.end_stamp 卡池结束时间戳
  * @return {GachaCard}
  */
 export interface GachaCard {
@@ -88,6 +90,8 @@ export interface GachaCard {
 	voice: GachaPool;
 	time: {
 		start: string;
+		start_stamp: number;
 		end: string;
+		end_stamp: number;
 	};
 }

src/plugins/Mys/interface/position.ts

@@ -73,18 +73,25 @@ export interface PositionData {
  * @since Alpha v0.1.1
  * @interface PositionCard
  * @property {string} title 标题
- * @property {string} url 链接
+ * @property {number} post_id 帖子ID
  * @property {string} icon 图标
  * @property {string} abstract 摘要
- * @property {string} create_time 创建时间
- * @property {string} end_time 结束时间
+ * @property time 时间
+ * @property {string} time.start 开始时间
+ * @property {number} time.start_stamp 开始时间戳
+ * @property {string} time.end 结束时间
+ * @property {number} time.end_stamp 结束时间戳
  * @return {PositionCard}
  */
 export interface PositionCard {
 	title: string;
-	url: string;
+	post_id: number;
 	icon: string;
 	abstract: string;
-	create_time: string;
-	end_time: string;
+	time: {
+		start: string;
+		start_stamp: number;
+		end: string;
+		end_stamp: number;
+	};
 }

src/plugins/Mys/utils/gacha.ts

@@ -2,7 +2,7 @@
  * @file plugins Mys utils gacha.ts
  * @description Mys 插件抽卡工具
  * @author BTMuli<bt-muli@outlook.com>
- * @since Alpha
+ * @since Alpha v0.1.1
  */
 
 import { getPostData } from "../request/post";
@@ -11,36 +11,40 @@ import { PostData } from "../interface/post";
 
 /**
  * @description 根据卡池信息转为渲染用的卡池信息
- * @since Alpha
+ * @since Alpha v0.1.1
  * @param {GachaData[]} gachaData 卡池信息
- * @return {GachaCard[]}
+ * @return {Promise<GachaCard[]>}
  */
 export async function getGachaCard(gachaData: GachaData[]): Promise<GachaCard[]> {
 	const gachaCard: GachaCard[] = [];
-	gachaData.map(async (data: GachaData) => {
-		const post_id: number | undefined = Number(data.activity_url.split("/").pop()) || undefined;
-		if (post_id === undefined) {
-			throw new Error("无法获取帖子 ID");
-		}
-		const post: PostData = await getPostData(post_id);
-		gachaCard.push({
-			title: data.title,
-			subtitle: data.content_before_act,
-			cover: post.cover?.url || post.post.images[0],
-			post_id: post_id,
-			characters: data.pool.map(character => ({
-				icon: character.icon,
-				url: character.url,
-			})),
-			voice: {
-				icon: data.voice_icon,
-				url: data.voice_url,
-			},
-			time: {
-				start: data.start_time,
-				end: data.end_time,
-			},
-		});
-	});
+	await Promise.allSettled(
+		gachaData.map(async (data: GachaData) => {
+			const post_id: number | undefined = Number(data.activity_url.split("/").pop()) || undefined;
+			if (post_id === undefined) {
+				throw new Error("无法获取帖子 ID");
+			}
+			const post: PostData = await getPostData(post_id);
+			return gachaCard.push({
+				title: data.title,
+				subtitle: data.content_before_act,
+				cover: post.cover?.url || post.post.images[0],
+				post_id: post_id,
+				characters: data.pool.map(character => ({
+					icon: character.icon,
+					url: character.url,
+				})),
+				voice: {
+					icon: data.voice_icon,
+					url: data.voice_url,
+				},
+				time: {
+					start: data.start_time,
+					start_stamp: new Date(data.start_time).getTime(),
+					end: data.end_time,
+					end_stamp: new Date(data.end_time).getTime(),
+				},
+			});
+		})
+	);
 	return gachaCard;
 }

src/plugins/Mys/utils/position.ts

@@ -37,11 +37,19 @@ export function getPositionCard(positionData: PositionData[]): PositionCard[] {
 	positionData.map(position => {
 		res.push({
 			title: position.title,
-			url: position.url,
+			post_id: Number(position.url.split("/").pop()),
 			icon: position.icon,
 			abstract: position.abstract,
-			create_time: position.create_time,
-			end_time: position.end_time,
+			time: {
+				start: position.create_time,
+				start_stamp: new Date(position.create_time).getTime(),
+				end: new Date(Number(position.end_time))
+					.toLocaleString("zh-CN", {
+						hour12: false,
+					})
+					.replace(/\//g, "-"),
+				end_stamp: Number(position.end_time),
+			},
 		});
 	});
 	return res;