💄 兑换码分享

src/components/main/t-gamenav.vue

@@ -7,7 +7,7 @@
     <div v-if="props.modelValue === 2 && hasNav" class="tgn-nav">
       <v-btn size="25" @click="tryGetCode" title="查看兑换码" icon="mdi-code-tags-check"></v-btn>
     </div>
-    <ToLivecode v-model="showOverlay" :data="codeData" />
+    <ToLivecode v-model="showOverlay" :data="codeData" v-model:actId="actId" />
   </div>
 </template>
 <script lang="ts" setup>
@@ -36,6 +36,7 @@ const appStore = useAppStore();
 const nav = ref<TGApp.BBS.Navigator.Navigator[]>([]);
 const codeData = ref<TGApp.BBS.Navigator.CodeData[]>([]);
 const showOverlay = ref<boolean>(false);
+const actId = ref<string>();
 
 const hasNav = computed<boolean>(() => {
   if (props.modelValue !== 2) return false;
@@ -57,12 +58,13 @@ async function tryGetCode(): Promise<void> {
   if (props.modelValue !== 2) return;
   const navFind = nav.value.find((item) => item.name === "前瞻直播");
   if (!navFind) return;
-  const actId = new URL(navFind.app_path).searchParams.get("act_id");
+  const actIdFind = new URL(navFind.app_path).searchParams.get("act_id");
-  if (!actId) {
+  if (!actIdFind) {
     showSnackbar({ text: "未找到活动ID", color: "warn" });
     return;
   }
-  const res = await TGRequest.Nav.getCode(actId);
+  actId.value = actIdFind;
+  const res = await TGRequest.Nav.getCode(actIdFind);
   if (!Array.isArray(res)) {
     showSnackbar({ text: `[${res.retcode}] ${res.message}`, color: "warn" });
     return;

src/components/overlay/to-livecode.vue

@@ -1,7 +1,18 @@
 <template>
   <TOverlay v-model="visible" :hide="true" :to-click="onCancel" blur-val="20px">
     <div class="tolc-box">
-      <div class="tolc-title">兑换码</div>
+      <div class="tolc-title">
+        <span>兑换码</span>
+        <v-icon
+          size="18px"
+          title="share"
+          @click="shareImg()"
+          icon="mdi-share-variant"
+          variant="outlined"
+          data-html2canvas-ignore
+        />
+      </div>
+      <div class="tolc-info">ActID:{{ props.actId }}</div>
       <v-list-item v-for="(item, index) in props.data" :key="index">
         <template #title>
           {{ item.code === "" ? "暂无兑换码" : item.code }}
@@ -19,11 +30,13 @@
         </template>
         <template #append>
           <v-btn
+            size="small"
             :disabled="item.code === ''"
             @click="copy(item.code)"
             icon="mdi-content-copy"
             variant="outlined"
             class="tolc-btn"
+            data-html2canvas-ignore
           ></v-btn>
         </template>
       </v-list-item>
@@ -33,12 +46,14 @@
 <script setup lang="ts">
 import { computed } from "vue";
 
+import { generateShareImg } from "../../utils/TGShare.js";
 import { timestampToDate } from "../../utils/toolFunc.js";
 import showSnackbar from "../func/snackbar.js";
 import TOverlay from "../main/t-overlay.vue";
 
 interface ToLiveCodeProps {
   data: TGApp.BBS.Navigator.CodeData[];
+  actId: string | undefined;
   modelValue: boolean;
 }
 
@@ -62,21 +77,42 @@ function copy(code: string): void {
   navigator.clipboard.writeText(code);
   showSnackbar({ text: "已复制到剪贴板", color: "success" });
 }
+
+async function shareImg(): Promise<void> {
+  const element = <HTMLElement>document.querySelector(".tolc-box");
+  const fileName = `LiveCode_${props.actId}_${new Date().getTime()}`;
+  await generateShareImg(fileName, element, 2);
+}
 </script>
 <style lang="css" scoped>
 .tolc-box {
-  padding: 10px;
+  position: relative;
-  border-radius: 10px;
+  width: 340px;
+  height: 200px;
+  padding: 5px;
+  border-radius: 5px;
   background: var(--app-page-bg);
 }
 
 .tolc-title {
+  display: flex;
+  align-items: center;
+  justify-content: center;
   color: var(--common-text-title);
+  column-gap: 5px;
   font-family: var(--font-title);
   font-size: 20px;
   text-align: center;
 }
 
+.tolc-info {
+  position: absolute;
+  z-index: -1;
+  right: 6px;
+  bottom: 2px;
+  font-size: 10px;
+}
+
 .tolc-icon {
   width: 40px;
   margin-right: 10px;