♻️ 抽奖详情做成 overlay

src/components/post/tp-backupText.vue

@@ -8,6 +8,11 @@
     <v-icon size="small">mdi-gift</v-icon>
     <span>{{ props.data.insert.lottery.toast }}</span>
   </div>
+  <TpoLottery
+    v-if="props.data.insert.lottery"
+    v-model="showLottery"
+    :lottery="props.data.insert.lottery.id"
+  />
   <details v-else-if="props.data.insert.fold" class="tp-backup-fold">
     <summary class="tp-backup-summary">
       <img alt="marker" src="/source/post/fold_marker.webp" class="tp-backup-marker" />
@@ -20,11 +25,11 @@
   <TpUnknown v-else :data="<TGApp.Plugins.Mys.SctPost.Empty>props.data" />
 </template>
 <script lang="ts" setup>
-import { toRaw } from "vue";
-import { useRouter } from "vue-router";
+import { ref, toRaw } from "vue";
 
 import TpParser from "./tp-parser.vue";
 import TpUnknown from "./tp-unknown.vue";
+import TpoLottery from "./tpo-lottery.vue";
 
 interface TpBackupText {
   insert: {
@@ -46,18 +51,15 @@ interface TpBackupTextProps {
 }
 
 const props = defineProps<TpBackupTextProps>();
-const router = useRouter();
+const showLottery = ref(false);
 
 console.log("tpBackupText", props.data.insert.backup_text, toRaw(props.data));
 
 async function toLottery() {
-  if (!props.data.insert.lottery) return;
-  await router.push({
-    name: "抽奖详情",
-    params: {
-      lottery_id: props.data.insert.lottery.id,
-    },
-  });
+  if (showLottery.value) {
+    showLottery.value = false;
+  }
+  showLottery.value = true;
 }
 </script>
 <style lang="css" scoped>

src/components/post/tpo-lottery.vue

@@ -0,0 +1,232 @@
+<template>
+  <TOverlay v-model="visible" hide :to-click="onCancel" blur-val="20px">
+    <div class="tpol-box" v-if="card">
+      <div class="tpol-title">
+        <span>抽奖详情</span>
+        <span class="tpol-time">{{ timeStatus }}</span>
+      </div>
+      <div class="tpol-list">
+        <v-list-item :title="card.creator.nickname" :subtitle="card.creator.introduce">
+          <template #prepend>
+            <v-avatar>
+              <v-img :src="card.creator.avatar_url" />
+            </v-avatar>
+          </template>
+        </v-list-item>
+        <div class="tpolr-title">参与方式：{{ upWay }}</div>
+        <div class="tpolr-title">
+          <span>奖品详情</span>
+          <div v-for="reward in card.rewards" :key="reward.name" class="reward-subtitle">
+            {{ reward.name }} {{ reward.goal }}份
+          </div>
+        </div>
+      </div>
+      <div class="tpol-title" v-if="timeStatus === '已开奖'">中奖详情</div>
+      <div v-if="timeStatus === '已开奖'">
+        <div v-for="reward in card.rewards" :key="reward.name" class="tpol-list">
+          <div class="tpolr-title">{{ reward.name }} {{ reward.win }}/{{ reward.goal }}</div>
+          <div class="tpol-grid">
+            <div v-for="user in reward.users" :key="user.uid" class="lottery-sub-list">
+              <div class="tpol-avatar">
+                <img :src="user.avatar_url" alt="avatar" />
+              </div>
+              <div class="tpol-nickname" :title="user.nickname">
+                {{ user.nickname }}
+              </div>
+            </div>
+          </div>
+        </div>
+      </div>
+      <div class="tpol-id">ID:{{ card.id }}</div>
+    </div>
+  </TOverlay>
+</template>
+<script setup lang="ts">
+import { computed, ref, watch } from "vue";
+
+import Mys from "../../plugins/Mys";
+import showSnackbar from "../func/snackbar";
+import TOverlay from "../main/t-overlay.vue";
+
+interface TpoLotteryProps {
+  modelValue: boolean;
+  lottery: string | undefined;
+}
+
+interface TpoLotteryEmits {
+  (e: "update:modelValue", value: boolean): void;
+
+  (e: "cancel"): void;
+}
+
+const props = defineProps<TpoLotteryProps>();
+const emits = defineEmits<TpoLotteryEmits>();
+const card = ref<TGApp.Plugins.Mys.Lottery.RenderCard>();
+const jsonData = ref<TGApp.Plugins.Mys.Lottery.FullData>();
+const timeStatus = ref<string>("未知");
+const upWay = ref<string>("未知");
+
+let timer: NodeJS.Timeout | undefined = undefined;
+
+const visible = computed({
+  get: () => props.modelValue,
+  set: (value) => {
+    emits("update:modelValue", value);
+  },
+});
+
+const onCancel = (): void => {
+  visible.value = false;
+  emits("cancel");
+};
+
+watch(
+  () => props.lottery,
+  async (value) => {
+    if (!value) return;
+    await load();
+  },
+  { immediate: true },
+);
+
+async function load(): Promise<void> {
+  if (!props.lottery) return;
+  if (card.value) return;
+  const cardGet = await Mys.Lottery.get(props.lottery);
+  if ("retcode" in cardGet) {
+    showSnackbar({
+      text: `[${cardGet.retcode}] ${cardGet.message}`,
+      color: "error",
+    });
+    return;
+  }
+  jsonData.value = cardGet;
+  if (cardGet.status === "Settled") {
+    timeStatus.value = "已开奖";
+  } else {
+    if (timer !== undefined) {
+      clearInterval(timer);
+      timer = undefined;
+    }
+    timer = setInterval(() => {
+      flushTimeStatus();
+    }, 1000);
+  }
+  card.value = Mys.Lottery.card(cardGet);
+  upWay.value = getUpWay(card.value?.upWay);
+}
+
+function getUpWay(upWay: string): string {
+  switch (upWay) {
+    case "Forward":
+      return "转发";
+    default:
+      return upWay;
+  }
+}
+
+function flushTimeStatus(): void {
+  if (!jsonData.value) return;
+  const timeNow = new Date().getTime();
+  const timeDiff = Number(jsonData.value.draw_time) * 1000 - timeNow;
+  if (timeDiff <= 0) {
+    timeStatus.value = "已开奖";
+    if (timer !== undefined) {
+      clearInterval(timer);
+      timer = undefined;
+    }
+  } else {
+    const day = Math.floor(timeDiff / (24 * 3600 * 1000));
+    const hour = Math.floor((timeDiff % (24 * 3600 * 1000)) / (3600 * 1000));
+    const minute = Math.floor((timeDiff % (3600 * 1000)) / (60 * 1000));
+    const second = Math.floor((timeDiff % (60 * 1000)) / 1000);
+    timeStatus.value = `${day}天${hour}小时${minute}分${second}秒`;
+  }
+}
+</script>
+<style lang="css" scoped>
+.tpol-box {
+  display: flex;
+  width: 800px;
+  max-width: 800px;
+  max-height: 50vh;
+  flex-direction: column;
+  padding: 10px;
+  border-radius: 10px;
+  background: var(--box-bg-1);
+  overflow-y: auto;
+  row-gap: 10px;
+}
+
+.tpol-title {
+  color: var(--common-text-title);
+  font-family: var(--font-title);
+  font-size: 20px;
+}
+
+.tpol-time {
+  margin-left: 10px;
+  color: var(--tgc-red-1);
+}
+
+.tpol-list {
+  padding: 5px;
+  border-radius: 5px;
+  background: var(--box-bg-2);
+}
+
+.tpolr-title {
+  margin-bottom: 10px;
+  margin-left: 5px;
+  font-size: 16px;
+}
+
+.reward-subtitle {
+  font-size: 16px;
+  opacity: 0.5;
+}
+
+.tpol-grid {
+  display: grid;
+  border-radius: 10px;
+  gap: 5px;
+  grid-template-columns: repeat(auto-fill, minmax(150px, 1fr));
+}
+
+.lottery-sub-list {
+  display: flex;
+  height: 40px;
+  align-items: center;
+  border-radius: 40px;
+  background: var(--box-bg-3);
+}
+
+.tpol-avatar {
+  display: inline-block;
+  overflow: hidden;
+  width: 30px;
+  height: 30px;
+  border-radius: 50%;
+  margin: 5px;
+}
+
+.tpol-avatar img {
+  width: 100%;
+  height: 100%;
+  object-fit: cover;
+}
+
+.tpol-nickname {
+  overflow: hidden;
+  max-width: 120px;
+  color: var(--box-text-4);
+  font-size: 14px;
+  text-overflow: ellipsis;
+  white-space: nowrap;
+}
+
+.tpol-id {
+  font-size: 14px;
+  text-align: right;
+}
+</style>

src/plugins/Mys/request/getLotteryData.ts

@@ -1,7 +1,7 @@
 /**
- * @file plugins Mys interface getLotteryData.ts
+ * @file plugins/Mys/request/getLotteryData.ts
  * @description Mys 插件抽奖接口
- * @since Alpha v0.2.1
+ * @since Beta v0.4.5
  */
 
 import { http } from "@tauri-apps/api";
@@ -10,11 +10,13 @@ import MysApi from "../api";
 
 /**
  * @description 获取抽奖信息
- * @since Alpha v0.2.1
+ * @since Beta v0.4.5
  * @param {string} lotteryId 抽奖 ID
- * @return {Promise<TGApp.Plugins.Mys.Lottery.FullData>}
+ * @return {Promise<TGApp.BBS.Response.Base|TGApp.Plugins.Mys.Lottery.FullData>}
  */
-async function getLotteryData(lotteryId: string): Promise<TGApp.Plugins.Mys.Lottery.FullData> {
+async function getLotteryData(
+  lotteryId: string,
+): Promise<TGApp.BBS.Response.Base | TGApp.Plugins.Mys.Lottery.FullData> {
   return await http
     .fetch<TGApp.Plugins.Mys.Lottery.Response>(MysApi.Lottery.replace("{lotteryId}", lotteryId), {
       method: "GET",
@@ -23,6 +25,7 @@ async function getLotteryData(lotteryId: string): Promise<TGApp.Plugins.Mys.Lott
       },
     })
     .then((res) => {
+      if (res.data.retcode !== 0) return <TGApp.BBS.Response.Base>res.data;
       return res.data.data.show_lottery;
     });
 }

src/views/t-lottery.vue

@@ -1,246 +0,0 @@
-<!-- todo 做成 overlay -->
-<template>
-  <TSwitchTheme />
-  <ToLoading v-model="loading" :empty="loadingEmpty" :title="loadingTitle" />
-  <div v-if="!loading" class="lottery-box">
-    <div class="lottery-title">
-      抽奖详情
-      <span style="color: #e06c63">{{
-        timeStatus === "已开奖" ? timeStatus : `待开奖 ${timeStatus}`
-      }}</span>
-    </div>
-    <div class="lottery-list">
-      <v-list-item>
-        <template #prepend>
-          <v-avatar>
-            <v-img :src="lotteryCard.creator.avatar_url" />
-          </v-avatar>
-        </template>
-        <template #append>
-          <v-btn variant="outlined" @click="backPost()"> 返回</v-btn>
-        </template>
-        {{ lotteryCard.creator.nickname }}
-        <v-list-item-subtitle>{{ lotteryCard.creator.introduce }}</v-list-item-subtitle>
-      </v-list-item>
-      <div class="reward-title">参与方式：{{ participationMethod }}</div>
-      <div class="reward-title">抽奖 ID：{{ lotteryCard.id }}</div>
-      <div class="reward-title">
-        奖品详情
-        <div v-for="reward in lotteryCard.rewards" :key="reward.name" class="reward-subtitle">
-          {{ reward.name }} {{ reward.goal }}份
-        </div>
-      </div>
-    </div>
-    <div v-if="timeStatus === '已开奖'">
-      <div class="lottery-title">中奖详情</div>
-      <div v-for="reward in lotteryCard.rewards" :key="reward.name" class="lottery-list">
-        <div class="reward-title">{{ reward.name }} {{ reward.win }}/{{ reward.goal }}</div>
-        <div class="lottery-grid">
-          <div v-for="user in reward.users" :key="user.uid" class="lottery-sub-list">
-            <div class="lottery-user-avatar">
-              <img :src="user.avatar_url" alt="avatar" />
-            </div>
-            <div class="lottery-user-nickname" :title="user.nickname">
-              {{ user.nickname }}
-            </div>
-          </div>
-        </div>
-      </div>
-    </div>
-  </div>
-  <div v-if="showJson" class="lottery-json">
-    <JsonViewer :value="jsonData" copyable boxed />
-  </div>
-</template>
-<script lang="ts" setup>
-import { appWindow } from "@tauri-apps/api/window";
-import { computed, onMounted, onUpdated, reactive, ref } from "vue";
-import JsonViewer from "vue-json-viewer";
-import { useRoute } from "vue-router";
-
-import TSwitchTheme from "../components/app/t-switchTheme.vue";
-import ToLoading from "../components/overlay/to-loading.vue";
-import Mys from "../plugins/Mys";
-import { useAppStore } from "../store/modules/app";
-import TGLogger from "../utils/TGLogger";
-
-// loading
-const loading = ref<boolean>(true);
-const loadingTitle = ref<string>("正在加载");
-const loadingEmpty = ref<boolean>(false);
-
-// store
-const appStore = useAppStore();
-const showJson = computed(() => appStore.devMode);
-// 定时器
-const lotteryTimer = ref<any>(null);
-// 参与方式
-const participationMethod = ref<string>("未知");
-
-function flushTimeStatus(): void {
-  const timeNow = new Date().getTime();
-  const timeDiff = Number(jsonData.draw_time) * 1000 - timeNow;
-  if (timeDiff <= 0) {
-    timeStatus.value = "已开奖";
-    clearInterval(lotteryTimer.value);
-  } else {
-    const day = Math.floor(timeDiff / (24 * 3600 * 1000));
-    const hour = Math.floor((timeDiff % (24 * 3600 * 1000)) / (3600 * 1000));
-    const minute = Math.floor((timeDiff % (3600 * 1000)) / (60 * 1000));
-    const second = Math.floor((timeDiff % (60 * 1000)) / 1000);
-    timeStatus.value = `${day}天${hour}小时${minute}分${second}秒`;
-  }
-}
-
-// 数据
-const lotteryId = <string>useRoute().params.lottery_id;
-const lotteryCard = ref<TGApp.Plugins.Mys.Lottery.RenderCard>(
-  <TGApp.Plugins.Mys.Lottery.RenderCard>{},
-);
-let jsonData = reactive<TGApp.Plugins.Mys.Lottery.FullData>(<TGApp.Plugins.Mys.Lottery.FullData>{});
-const timeStatus = ref<string>("未知");
-
-function backPost(): void {
-  window.history.back();
-}
-
-onMounted(async () => {
-  await appWindow.show();
-  // 检查数据
-  if (!lotteryId) {
-    loadingEmpty.value = true;
-    loadingTitle.value = "未找到数据";
-    await TGLogger.Error("[t-lottery.vue] 未找到 lottery_id");
-    return;
-  }
-  // 获取数据
-  loadingTitle.value = "正在获取数据...";
-  jsonData = await Mys.Lottery.get(lotteryId);
-  if (!jsonData) {
-    loadingEmpty.value = true;
-    loadingTitle.value = "未找到数据";
-    await TGLogger.Error("[t-lottery.vue] 未找到数据");
-    return;
-  }
-  await appWindow.setTitle("抽奖详情 " + jsonData.lottery_entity_summary);
-  loadingTitle.value = "正在渲染数据...";
-  lotteryCard.value = Mys.Lottery.card(jsonData);
-  if (jsonData.status === "Settled") {
-    timeStatus.value = "已开奖";
-  } else {
-    lotteryTimer.value = setInterval(() => {
-      flushTimeStatus();
-    }, 1000);
-  }
-  participationMethod.value = getUpWay(lotteryCard.value.upWay);
-  setTimeout(() => {
-    loading.value = false;
-  }, 1000);
-});
-
-// 获取参与方式
-function getUpWay(upWay: string): string {
-  switch (upWay) {
-    case "Forward":
-      return "转发";
-    default:
-      return upWay;
-  }
-}
-
-// 监听 timeStatus
-onUpdated(() => {
-  if (timeStatus.value === "已开奖") {
-    clearInterval(lotteryTimer.value);
-  }
-});
-</script>
-<style lang="css">
-.lottery-box {
-  padding: 10px;
-  border-radius: 20px;
-  margin-bottom: 10px;
-  background: var(--box-bg-1);
-}
-
-.lottery-title {
-  height: 40px;
-  margin-left: 40px;
-  color: var(--common-text-title);
-  font-family: var(--font-title);
-  font-size: 20px;
-}
-
-.lottery-list {
-  padding: 5px;
-  border: 1px solid var(--common-shadow-1);
-  border-radius: 5px;
-  margin-bottom: 10px;
-  background: var(--box-bg-2);
-}
-
-.reward-title {
-  margin: 10px;
-  font-size: 16px;
-}
-
-.reward-subtitle {
-  font-size: 16px;
-  opacity: 0.5;
-}
-
-.lottery-grid {
-  display: grid;
-  border-radius: 10px;
-  grid-template-columns: repeat(5, 1fr);
-}
-
-.lottery-sub-list {
-  display: flex;
-  height: 40px;
-  align-items: center;
-  border-radius: 40px;
-  margin: 5px;
-  background: var(--box-bg-3);
-}
-
-.lottery-user-avatar {
-  display: inline-block;
-  overflow: hidden;
-  width: 30px;
-  height: 30px;
-  border-radius: 50%;
-  margin: 5px;
-}
-
-.lottery-user-avatar img {
-  width: 100%;
-  height: 100%;
-  object-fit: cover;
-}
-
-.lottery-user-nickname {
-  overflow: hidden;
-  max-width: 120px;
-  color: var(--box-text-4);
-  font-size: 14px;
-  text-overflow: ellipsis;
-  white-space: nowrap;
-}
-
-.lottery-json {
-  border: 1px solid var(--common-shadow-1);
-  border-radius: 10px;
-  background: var(--box-bg-1);
-}
-
-.jv-container {
-  border-radius: 10px;
-  background: var(--box-bg-2) !important;
-}
-
-.jv-key,
-.jv-array {
-  color: var(--box-text-4) !important;
-}
-</style>