🚸 首页活动组件奖励详情显示持有

src/components/pageBag/pbo-material.vue

@@ -13,7 +13,10 @@
             <img :src="`/icon/material/${props.data.info.id}.webp`" alt="icon" class="icon" />
           </div>
           <div class="pbom-name" @click="shareMaterial()">{{ props.data.info.name }}</div>
-          <div class="pbom-type">持有{{ dbInfo.count }}·{{ props.data.info.type }}</div>
+          <div class="pbom-type">
+            <span v-if="showRecord">持有{{ dbInfo.count }}·</span>
+            <span>{{ props.data.info.type }}</span>
+          </div>
         </div>
         <div class="pbom-mid">
           <div class="pbom-desc" v-html="parseHtmlText(props.data.info.description)" />
@@ -29,7 +32,7 @@
             />
           </div>
         </div>
-        <div class="pbom-bottom">
+        <div v-if="showRecord" class="pbom-bottom">
           <div class="pbom-bt-title">
             <v-icon color="var(--tgc-od-white)" size="16">mdi-clock-edit-outline</v-icon>
             <span>更新记录</span>
@@ -54,11 +57,11 @@ import TOverlay from "@comp/app/t-overlay.vue";
 import showDialog from "@comp/func/dialog.js";
 import showSnackbar from "@comp/func/snackbar.js";
 import TwoSource from "@comp/pageWiki/two-source.vue";
-import TSUserBagMaterial from "@Sqlm/userBagMaterial.js";
+import TSUserBagMaterial, { SKIP_BAG_TYPES } from "@Sqlm/userBagMaterial.js";
 import { getVersion } from "@tauri-apps/api/app";
 import { generateShareImg } from "@utils/TGShare.js";
 import { parseHtmlText, timestampToDate } from "@utils/toolFunc.js";
-import { onMounted, ref, shallowRef, watch } from "vue";
+import { computed, onMounted, ref, shallowRef, watch } from "vue";
 
 import PboConvert from "./pbo-convert.vue";
 
@@ -71,6 +74,7 @@ const props = defineProps<PboMaterialProps>();
 const emits = defineEmits<PboMaterialEmits>();
 const visible = defineModel<boolean>();
 const version = ref<string>();
+const showRecord = computed<boolean>(() => !SKIP_BAG_TYPES.includes(props.data.info.type));
 
 onMounted(async () => (version.value = await getVersion()));
 

src/components/pageHome/ph-comp-position.vue

@@ -19,28 +19,31 @@
       </div>
     </template>
   </THomeCard>
-  <TwoMaterial v-model="showMaterial" :data="curMaterial" />
+  <PboMaterial v-model="showMaterial" :data="curMaterial" :uid="Number(account.gameUid)" />
   <ToCalendar v-model="showCalendar" :item="curItemC" />
 </template>
 <script lang="ts" setup>
 import showLoading from "@comp/func/loading.js";
 import showSnackbar from "@comp/func/snackbar.js";
+import PboMaterial from "@comp/pageBag/pbo-material.vue";
 import ToCalendar from "@comp/pageHome/ph-calendar-overlay.vue";
 import PhPosObc from "@comp/pageHome/ph-pos-obc.vue";
 import PhPosUser from "@comp/pageHome/ph-pos-user.vue";
-import TwoMaterial from "@comp/pageWiki/two-material.vue";
 import recordReq from "@req/recordReq.js";
 import takumiReq from "@req/takumiReq.js";
+import TSUserBagMaterial from "@Sqlm/userBagMaterial.js";
 import useAppStore from "@store/app.js";
 import useUserStore from "@store/user.js";
 import { openUrl } from "@tauri-apps/plugin-opener";
 import TGLogger from "@utils/TGLogger.js";
+import { timestampToDate } from "@utils/toolFunc.js";
 import { storeToRefs } from "pinia";
 import { onMounted, ref, shallowRef, watch } from "vue";
 
 import THomeCard from "./ph-comp-card.vue";
 
 import { AppCalendarData, WikiMaterialData } from "@/data/index.js";
+import type { MaterialInfo } from "@/pages/common/PageBagMaterial.vue";
 
 type TPositionEmits = (e: "success") => void;
 
@@ -53,7 +56,7 @@ const isInit = ref<boolean>(false);
 const isUserPos = ref<boolean>(isLogin.value);
 const showMaterial = ref<boolean>(false);
 const showCalendar = ref<boolean>(false);
-const curMaterial = shallowRef<TGApp.App.Material.WikiItem>(WikiMaterialData[0]);
+const curMaterial = shallowRef<MaterialInfo>(genEmptyMaterial(WikiMaterialData[0]));
 const curTypeC = ref<"character" | "weapon">("character");
 const curItemC = shallowRef<TGApp.App.Calendar.Item>(AppCalendarData[0]);
 const obsPos = shallowRef<Array<TGApp.BBS.Obc.PositionItem>>([]);
@@ -119,10 +122,30 @@ async function loadWikiPosition(): Promise<void> {
   }
 }
 
+function genEmptyMaterial(material: TGApp.App.Material.WikiItem): MaterialInfo {
+  return {
+    info: material,
+    tb: {
+      uid: Number(account.value.gameUid),
+      id: material.id,
+      count: 0,
+      records: [],
+      updated: timestampToDate(Date.now()),
+    },
+  };
+}
+
+async function loadMaterial(material: TGApp.App.Material.WikiItem): Promise<MaterialInfo> {
+  const dbGet = await TSUserBagMaterial.getMaterial(Number(account.value.gameUid), material.id);
+  let res: MaterialInfo = genEmptyMaterial(material);
+  if (dbGet.length > 0) res.tb = dbGet[0];
+  return res;
+}
+
 async function handleMaterial(cur: TGApp.Game.ActCalendar.ActReward): Promise<void> {
   const findM = WikiMaterialData.find((i) => i.id === cur.item_id);
   if (findM) {
-    curMaterial.value = findM;
+    curMaterial.value = await loadMaterial(findM);
     showMaterial.value = true;
     return;
   }

src/plugins/Sqlite/modules/userBagMaterial.ts

@@ -8,14 +8,22 @@ import TGSqlite from "../index.js";
 
 import { WikiMaterialData } from "@/data/index.js";
 
+export const SKIP_BAG_TYPES: ReadonlyArray<string> = [
+  "系统开放",
+  "好感成长",
+  "风之翼",
+  "挑战结算道具",
+  "稀有货币",
+  "通用货币",
+];
+
 /**
  * 获取有效材料ID
  * @since Beta v0.9.0
  * @return {Array<number>}
  */
 function getValidMIds(): Array<number> {
-  const skipType = ["系统开放", "好感成长", "风之翼", "挑战结算道具", "稀有货币", "通用货币"];
-  const filter = WikiMaterialData.filter((m) => !skipType.includes(m.type));
+  const filter = WikiMaterialData.filter((m) => !SKIP_BAG_TYPES.includes(m.type));
   return filter.map((f) => f.id);
 }