🐛 修复兑换码为空时的渲染异常

BTMuli · Sep 27, 2024 · b37a086 · b37a086
1 parent 96c58af
commit b37a086
Show file tree

Hide file tree

Showing 2 changed files with 28 additions and 16 deletions.
diff --git a/src/components/main/t-gamenav.vue b/src/components/main/t-gamenav.vue
@@ -59,25 +59,17 @@ async function tryGetCode(): Promise<void> {
   if (!navFind) return;
   const actId = new URL(navFind.app_path).searchParams.get("act_id");
   if (!actId) {
-    showSnackbar({
-      text: "未找到活动ID",
-      color: "warn",
-    });
+    showSnackbar({ text: "未找到活动ID", color: "warn" });
     return;
   }
   const res = await TGRequest.Nav.getCode(actId);
   if (!Array.isArray(res)) {
-    showSnackbar({
-      text: `[${res.retcode}] ${res.message}`,
-      color: "warn",
-    });
+    showSnackbar({ text: `[${res.retcode}] ${res.message}`, color: "warn" });
     return;
   }
   codeData.value = res;
-  showSnackbar({
-    text: "获取兑换码成功",
-    color: "success",
-  });
+  showSnackbar({ text: "获取兑换码成功", color: "success" });
+  await TGLogger.Info(JSON.stringify(res));
   showOverlay.value = true;
 }
 

diff --git a/src/components/overlay/to-livecode.vue b/src/components/overlay/to-livecode.vue
@@ -4,17 +4,27 @@
       <div class="tolc-title">兑换码</div>
       <v-list-item v-for="(item, index) in props.data" :key="index">
         <template #title>
-          {{ item.code }}
+          {{ item.code === "" ? "暂无兑换码" : item.code }}
         </template>
         <template #subtitle>
           <div v-html="item.title"></div>
-          <span>{{ timestampToDate(Number(item.to_get_time) * 1000) }}</span>
+          <span title="开放时间">{{ timestampToDate(Number(item.to_get_time) * 1000) }}</span>
         </template>
         <template #prepend>
-          <img :src="item.img" alt="icon" />
+          <img
+            :src="item.img === '' ? '/source/UI/empty.webp' : item.img"
+            alt="icon"
+            class="tolc-icon"
+          />
         </template>
         <template #append>
-          <v-btn @click="copy(item.code)" icon="mdi-content-copy" variant="outlined"></v-btn>
+          <v-btn
+            :disabled="item.code === ''"
+            @click="copy(item.code)"
+            icon="mdi-content-copy"
+            variant="outlined"
+            class="tolc-btn"
+          ></v-btn>
         </template>
       </v-list-item>
     </div>
@@ -66,4 +76,14 @@ function copy(code: string): void {
   font-size: 20px;
   text-align: center;
 }
+
+.tolc-icon {
+  width: 40px;
+  margin-right: 10px;
+  aspect-ratio: 1;
+}
+
+.tolc-btn {
+  margin-left: 10px;
+}
 </style>