🚸 材料浮窗

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

@@ -10,17 +10,23 @@
         <PhPosObc v-for="(card, index) in obsPos" :key="index" :pos="card" />
       </div>
       <div class="tp-grid" v-show="isUserPos">
-        <PhPosUser v-for="(card, index) in userPos" :key="index" :pos="card" />
+        <PhPosUser
+          @click-m="handleMaterial"
+          v-for="(card, index) in userPos"
+          :key="index"
+          :pos="card"
+        />
       </div>
     </template>
   </THomeCard>
-  <!-- TODO: 活动奖励材料浮窗 -->
+  <TwoMaterial v-model="showMaterial" :data="curMaterial" />
 </template>
 <script lang="ts" setup>
 import showLoading from "@comp/func/loading.js";
 import showSnackbar from "@comp/func/snackbar.js";
 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 useAppStore from "@store/app.js";
@@ -31,6 +37,8 @@ import { onMounted, shallowRef, ref, watch } from "vue";
 
 import THomeCard from "./ph-comp-card.vue";
 
+import { WikiMaterialData } from "@/data/index.js";
+
 type TPositionEmits = (e: "success") => void;
 
 const { isLogin } = storeToRefs(useAppStore());
@@ -40,6 +48,8 @@ const emits = defineEmits<TPositionEmits>();
 
 const isInit = ref<boolean>(false);
 const isUserPos = ref<boolean>(isLogin.value);
+const showMaterial = ref<boolean>(false);
+const curMaterial = shallowRef<TGApp.App.Material.WikiItem>(WikiMaterialData[0]);
 const obsPos = shallowRef<Array<TGApp.BBS.Obc.PositionItem>>([]);
 const userPos = shallowRef<Array<TGApp.Game.ActCalendar.ActItem>>([]);
 
@@ -89,6 +99,18 @@ async function loadWikiPosition(): Promise<void> {
     await TGLogger.Error(`获取近期活动失败：[${resp.retcode}-${resp.message}`);
   }
 }
+
+function handleMaterial(cur: TGApp.Game.ActCalendar.ActReward): void {
+  console.log("handleMaterial", cur);
+  const find = WikiMaterialData.find((i) => i.id === cur.item_id);
+  if (!find) {
+    showSnackbar.warn(`未找到${cur.name}的百科信息`);
+    return;
+  }
+  curMaterial.value = find;
+  showMaterial.value = true;
+  console.log(showMaterial.value);
+}
 </script>
 <style lang="scss" scoped>
 .tp-switch {

src/components/pageHome/ph-pos-user.vue

@@ -80,6 +80,7 @@
         v-for="reward in props.pos.reward_list"
         :key="reward.item_id"
         class="ph-puc-reward"
+        @click="showMaterial(reward)"
       >
         <img :src="`/icon/bg/${reward.rarity}-Star.webp`" class="bg" alt="bg" />
         <TMiImg :ori="true" :alt="reward.name" :src="reward.icon" class="icon" />
@@ -97,12 +98,14 @@ import { onMounted, onUnmounted, ref } from "vue";
 import { useRouter } from "vue-router";
 
 type PhCompPositionUserProps = { pos: TGApp.Game.ActCalendar.ActItem };
+type PhCompPositionUserEmits = (e: "clickM", cur: TGApp.Game.ActCalendar.ActReward) => void;
 
 // eslint-disable-next-line no-undef
 let timer: NodeJS.Timeout | null = null;
 const router = useRouter();
 
 const props = defineProps<PhCompPositionUserProps>();
+const emits = defineEmits<PhCompPositionUserEmits>();
 
 const endTs = ref<number>(0);
 const restTs = ref<number>(0);
@@ -140,6 +143,11 @@ async function toAbyss(): Promise<void> {
   await router.push({ name: "深境螺旋" });
 }
 
+function showMaterial(reward: TGApp.Game.ActCalendar.ActReward): void {
+  emits("clickM", reward);
+  console.log("showMaterial", reward);
+}
+
 onUnmounted(() => {
   if (timer !== null) clearInterval(timer);
 });