mdi-calendar-clock
- {{ pool.time.start }}~{{ pool.time.end }}
+ {{ pool.time.str }}
@@ -65,8 +77,12 @@ const showBar = ref
(false);
const barText = ref("");
const barColor = ref("error");
+const hasNew = ref(false);
+const showNew = ref(false);
+
// data
const poolCards = ref([]);
+const poolSelect = ref([]);
const poolTimeGet = ref>({});
const poolTimePass = ref>({});
const timer = ref>({});
@@ -124,6 +140,7 @@ onMounted(async () => {
if (poolTimePass.value[pool.postId] <= 0) {
poolTimeGet.value[pool.postId] = "已结束";
poolTimePass.value[pool.postId] = 100;
+ showNew.value = false;
} else if (pool.time.startStamp - Date.now() > 0) {
poolTimeGet.value[pool.postId] = "未开始";
poolTimePass.value[pool.postId] = 100;
@@ -133,6 +150,17 @@ onMounted(async () => {
}, 1000);
return pool;
});
+ if (poolCards.value.length > 2) {
+ poolSelect.value = poolCards.value.filter(
+ (pool) =>
+ poolTimeGet.value[pool.postId] !== "未开始" && poolTimeGet.value[pool.postId] !== "已结束",
+ );
+ hasNew.value =
+ poolCards.value.filter((pool) => poolTimeGet.value[pool.postId] === "未开始").length > 0;
+ } else {
+ poolSelect.value = poolCards.value;
+ hasNew.value = false;
+ }
loading.value = false;
});
@@ -171,6 +199,21 @@ async function toOuter(url: string, title: string): Promise {
createTGWindow(url, "Sub_window", `Pool_${title}`, 1200, 800, true, true);
}
+// 更换显示的卡池
+async function switchPool(): Promise {
+ showNew.value = !showNew.value;
+ if (showNew.value) {
+ poolSelect.value = poolCards.value.filter(
+ (pool) => poolTimeGet.value[pool.postId] === "未开始",
+ );
+ } else {
+ poolSelect.value = poolCards.value.filter(
+ (pool) =>
+ poolTimeGet.value[pool.postId] !== "未开始" && poolTimeGet.value[pool.postId] !== "已结束",
+ );
+ }
+}
+
onUnmounted(() => {
Object.keys(timer.value).forEach((key) => {
clearInterval(timer.value[Number(key)]);
@@ -190,32 +233,56 @@ onUnmounted(() => {
.pool-title {
display: flex;
- color: var(--common-text-title);
+ align-items: center;
+ justify-content: space-between;
font-family: var(--font-title);
font-size: 20px;
}
-.pool-title img {
+.pool-title-left {
+ display: flex;
+ align-items: center;
+ justify-content: start;
+ color: var(--common-text-title);
+ column-gap: 10px;
+}
+
+.pool-title-left img {
width: 25px;
height: 25px;
border-radius: 50%;
- margin-right: 10px;
background: var(--common-shadow-4);
- transform: translate(0, 2px);
+}
+
+.pool-title-right {
+ display: flex;
+ align-items: center;
+ justify-content: start;
+ gap: 15px;
+}
+
+.pool-switch {
+ display: flex;
+ height: 36px;
+ align-items: center;
+ justify-content: center;
+ color: var(--box-text-1);
}
.pool-grid {
- display: flex;
+ display: grid;
align-items: center;
justify-content: space-between;
gap: 10px;
+ grid-template-columns: repeat(2, 1fr);
}
.pool-card {
position: relative;
overflow: hidden;
- width: 50%;
+ width: 100%;
border-radius: 5px;
+ aspect-ratio: 69 / 32;
box-shadow: 0 5px 5px var(--common-shadow-4);
}
diff --git a/src/plugins/Mys/types/Gacha.d.ts b/src/plugins/Mys/types/Gacha.d.ts
index 9c9d2074..de80e51b 100644
--- a/src/plugins/Mys/types/Gacha.d.ts
+++ b/src/plugins/Mys/types/Gacha.d.ts
@@ -1,13 +1,12 @@
/**
* @file plugins Mys types Gacha.d.ts
* @description Mys 插件卡池类型定义文件
- * @author BTMuli
- * @since Alpha v0.2.1
+ * @since Beta v0.3.3
*/
/**
* @description Mys 卡池类型定义
- * @since Alpha v0.2.1
+ * @since Beta v0.3.3
* @namespace Gacha
* @return Gacha
*/
@@ -20,7 +19,7 @@ declare namespace TGApp.Plugins.Mys.Gacha {
* @property {Data[]} data.list 卡池数据
* @return Response
*/
- export interface Response extends TGApp.Plugins.Mys.Base.Response {
+ interface Response extends TGApp.Plugins.Mys.Base.Response {
data: {
list: Data[];
};
@@ -43,7 +42,7 @@ declare namespace TGApp.Plugins.Mys.Gacha {
* @property {string} end_time 卡池结束时间
* @return Data
*/
- export interface Data {
+ interface Data {
id: string;
title: string;
activity_url: string;
@@ -64,14 +63,14 @@ declare namespace TGApp.Plugins.Mys.Gacha {
* @property {string} url 链接
* @return MiniItem
*/
- export interface MiniItem {
+ interface MiniItem {
icon: string;
url: string;
}
/**
* @description 用于渲染的卡池数据
- * @since Alpha v0.2.1
+ * @since Beta v0.3.3
* @interface RenderCard
* @property {string} title 卡池标题
* @property {string} subtitle 卡池副标题
@@ -79,13 +78,12 @@ declare namespace TGApp.Plugins.Mys.Gacha {
* @property {number} postId 卡池对应帖子ID
* @property {MiniItem[]} characters 卡池包含的角色
* @property {MiniItem} voice 卡池角色语音
- * @property {string} time.start 卡池开始时间
+ * @property {string} time.str 卡池时间字符串
* @property {string} time.startStamp 卡池开始时间戳
- * @property {string} time.end 卡池结束时间
* @property {string} time.endStamp 卡池结束时间戳
* @return RenderCard
*/
- export interface RenderCard {
+ interface RenderCard {
title: string;
subtitle: string;
cover: string;
@@ -93,9 +91,8 @@ declare namespace TGApp.Plugins.Mys.Gacha {
characters: MiniItem[];
voice: MiniItem;
time: {
- start: string;
+ str: string;
startStamp: number;
- end: string;
endStamp: number;
};
}
diff --git a/src/plugins/Mys/utils/getGachaCard.ts b/src/plugins/Mys/utils/getGachaCard.ts
index cc63a42c..5abde166 100644
--- a/src/plugins/Mys/utils/getGachaCard.ts
+++ b/src/plugins/Mys/utils/getGachaCard.ts
@@ -1,15 +1,14 @@
/**
* @file plugins Mys utils getGachaCard.ts
* @description Mys 插件抽卡工具
- * @author BTMuli
- * @since Alpha v0.2.1
+ * @since Beta v0.3.3
*/
import getPostData from "../request/getPostData";
/**
* @description 根据卡池信息转为渲染用的卡池信息
- * @since Alpha v0.2.1
+ * @since Beta v0.3.3
* @param {TGApp.Plugins.Mys.Gacha.Data[]} gachaData 卡池信息
* @param {Record} poolCover 卡池封面
* @returns {Promise}
@@ -37,6 +36,7 @@ async function getGachaCard(
console.error(error);
}
}
+ const timeStr = `${data.start_time} ~ ${data.end_time}`;
return gachaCard.push({
title: data.title,
subtitle: data.content_before_act,
@@ -51,9 +51,8 @@ async function getGachaCard(
url: data.voice_url,
},
time: {
- start: data.start_time,
+ str: timeStr,
startStamp: new Date(data.start_time).getTime(),
- end: data.end_time,
endStamp: new Date(data.end_time).getTime(),
},
});