♻️ 活动奖励支持预览角色/武器

src/components/pageHome/ph-calendar-material.vue

@@ -1,71 +0,0 @@
-<template>
-  <div class="tcm-box">
-    <div class="tcm-left">
-      <div class="tcm-bg"><img :src="`/icon/bg/${item.star}-Star.webp`" alt="bg" /></div>
-      <div class="tcm-icon"><img :src="`/icon/material/${item.id}.webp`" alt="icon" /></div>
-      <div class="tcm-star" v-if="item.star !== 0">
-        <img :src="`/icon/star/${item.star}.webp`" alt="element" />
-      </div>
-    </div>
-    <div class="tcm-right">{{ item.name }}</div>
-  </div>
-</template>
-<script lang="ts" setup>
-defineProps<{ item: TGApp.App.Calendar.Material }>();
-</script>
-<style lang="css" scoped>
-.tcm-box {
-  position: relative;
-  display: flex;
-  height: 45px;
-  border: 1px solid var(--common-shadow-1);
-  border-radius: 5px;
-  background: var(--box-bg-1);
-  gap: 10px;
-}
-
-.tcm-left {
-  width: 45px;
-  height: 45px;
-  border-bottom-left-radius: 5px;
-  border-top-left-radius: 5px;
-}
-
-.tcm-bg,
-.tcm-icon {
-  position: absolute;
-  top: 0;
-  width: 45px;
-  height: 45px;
-  border-bottom-left-radius: 5px;
-  border-top-left-radius: 5px;
-}
-
-.tcm-bg img,
-.tcm-icon img {
-  width: 100%;
-  height: 100%;
-  border-bottom-left-radius: 5px;
-  border-top-left-radius: 5px;
-  object-fit: cover;
-}
-
-.tcm-star {
-  position: absolute;
-  bottom: -8px;
-  width: 45px;
-  height: auto;
-}
-
-.tcm-star img {
-  width: 100%;
-}
-
-.tcm-right {
-  display: flex;
-  align-items: center;
-  justify-content: center;
-  color: var(--box-text-2);
-  font-size: 14px;
-}
-</style>

src/components/pageHome/ph-calendar-overlay.vue

@@ -1,3 +1,4 @@
+<!-- 素材日历项浮窗 -->
 <template>
   <TOverlay v-model="visible">
     <div class="toc-box">
@@ -5,23 +6,19 @@
         <div class="toc-top">
           <TItemBox :model-value="boxData" />
           <div class="toc-material-grid">
-            <TibCalendarMaterial
-              v-for="(item, index) in props.dataVal.materials"
-              :key="index"
-              :item="item"
-            />
+            <PwMaterialItem v-for="(material, index) in materialList" :key="index" :material />
           </div>
         </div>
         <img alt="line" class="toc-line" src="/source/UI/item-line.webp" />
         <div class="toc-bottom">
           <div class="toc-src-box">
             <div class="toc-src-text">来源：</div>
-            <img :src="`/icon/nation/${props.dataVal.source.area}.webp`" alt="icon" />
+            <img :src="`/icon/nation/${props.item.source.area}.webp`" alt="icon" />
             <div class="toc-src-text">
-              {{ props.dataVal.source.area }} - {{ props.dataVal.source.name }}
+              {{ props.item.source.area }} - {{ props.item.source.name }}
             </div>
           </div>
-          <v-btn variant="outlined" @click="toDetail(props.dataVal)">详情</v-btn>
+          <v-btn variant="outlined" @click="toDetail(props.item)">详情</v-btn>
         </div>
       </div>
     </div>
@@ -31,33 +28,44 @@
 import TItemBox, { type TItemBoxData } from "@comp/app/t-itemBox.vue";
 import TOverlay from "@comp/app/t-overlay.vue";
 import showSnackbar from "@comp/func/snackbar.js";
+import PwMaterialItem from "@comp/pageWiki/pw-material-item.vue";
 import { computed } from "vue";
 import { useRouter } from "vue-router";
 
-import TibCalendarMaterial from "./ph-calendar-material.vue";
+import { WikiMaterialData } from "@/data/index.js";
 
-type ToCalendarProps = { dataType: "weapon" | "character"; dataVal: TGApp.App.Calendar.Item };
+type ToCalendarProps = { item: TGApp.App.Calendar.Item };
 
 const router = useRouter();
 
 const props = defineProps<ToCalendarProps>();
 const visible = defineModel<boolean>();
+const materialList = computed<Array<TGApp.App.Material.WikiItem>>(() => loadData());
 const boxData = computed<TItemBoxData>(() => ({
-  bg: `/icon/bg/${props.dataVal.star}-Star.webp`,
-  icon: `/WIKI/${props.dataType}/${props.dataVal.id}.webp`,
+  bg: `/icon/bg/${props.item.star}-Star.webp`,
+  icon: `/WIKI/${props.item.itemType}/${props.item.id}.webp`,
   size: "100px",
   height: "100px",
   display: "inner",
   clickable: false,
-  lt: props.dataVal.element
-    ? `/icon/element/${props.dataVal.element}元素.webp`
-    : `/icon/weapon/${props.dataVal.weapon}.webp`,
+  lt: props.item.element
+    ? `/icon/element/${props.item.element}元素.webp`
+    : `/icon/weapon/${props.item.weapon}.webp`,
   ltSize: "20px",
   innerHeight: 25,
-  innerIcon: props.dataVal.element ? `/icon/weapon/${props.dataVal.weapon}.webp` : undefined,
-  innerText: props.dataVal.name,
+  innerIcon: props.item.element ? `/icon/weapon/${props.item.weapon}.webp` : undefined,
+  innerText: props.item.name,
 }));
 
+function loadData(): Array<TGApp.App.Material.WikiItem> {
+  const tmp: Array<TGApp.App.Material.WikiItem> = [];
+  for (const d of props.item.materials) {
+    const material = WikiMaterialData.find((m) => m.id === d.id);
+    if (material) tmp.push(material);
+  }
+  return tmp;
+}
+
 async function toDetail(item: TGApp.App.Calendar.Item): Promise<void> {
   if (!["character", "weapon"].includes(item.itemType)) {
     showSnackbar.error("未知类型");
@@ -96,7 +104,7 @@ async function toDetail(item: TGApp.App.Calendar.Item): Promise<void> {
   display: grid;
   width: 100%;
   font-family: var(--font-title);
-  grid-gap: 10px;
+  gap: 10px;
   grid-template-columns: repeat(2, 1fr);
 }
 

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

@@ -34,7 +34,7 @@
       </div>
     </template>
   </THomeCard>
-  <ToCalendar v-model="showItem" :data-type="selectedType" :data-val="selectedItem" />
+  <ToCalendar v-model="showItem" :item="selectedItem" />
 </template>
 <script lang="ts" setup>
 import TItemBox, { type TItemBoxData } from "@comp/app/t-itemBox.vue";

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

@@ -20,10 +20,12 @@
     </template>
   </THomeCard>
   <TwoMaterial v-model="showMaterial" :data="curMaterial" />
+  <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 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";
@@ -38,7 +40,7 @@ import { onMounted, ref, shallowRef, watch } from "vue";
 
 import THomeCard from "./ph-comp-card.vue";
 
-import { WikiMaterialData } from "@/data/index.js";
+import { AppCalendarData, WikiMaterialData } from "@/data/index.js";
 
 type TPositionEmits = (e: "success") => void;
 
@@ -50,7 +52,10 @@ const emits = defineEmits<TPositionEmits>();
 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 curTypeC = ref<"character" | "weapon">("character");
+const curItemC = shallowRef<TGApp.App.Calendar.Item>(AppCalendarData[0]);
 const obsPos = shallowRef<Array<TGApp.BBS.Obc.PositionItem>>([]);
 const userPos = shallowRef<Array<TGApp.Game.ActCalendar.ActItem>>([]);
 
@@ -115,13 +120,21 @@ async function loadWikiPosition(): Promise<void> {
 }
 
 async function handleMaterial(cur: TGApp.Game.ActCalendar.ActReward): Promise<void> {
-  const find = WikiMaterialData.find((i) => i.id === cur.item_id);
-  if (!find) {
-    await openUrl(cur.wiki_url);
+  const findM = WikiMaterialData.find((i) => i.id === cur.item_id);
+  if (findM) {
+    curMaterial.value = findM;
+    showMaterial.value = true;
     return;
   }
-  curMaterial.value = find;
-  showMaterial.value = true;
+  // 尝试查找角色&武器
+  const findC = AppCalendarData.find((i) => i.id === cur.item_id);
+  if (findC) {
+    curTypeC.value = findC.itemType === "weapon" ? "weapon" : "character";
+    curItemC.value = findC;
+    showCalendar.value = true;
+    return;
+  }
+  await openUrl(cur.wiki_url);
 }
 </script>
 <style lang="scss" scoped>