🌱 集录祈愿处理 #96

src/components/gachaRecord/gro-dataview.vue

@@ -70,7 +70,7 @@
 import { onMounted, ref, watch } from "vue";
 
 interface GachaDataViewProps {
-  dataType: "new" | "avatar" | "weapon" | "normal";
+  dataType: "new" | "avatar" | "weapon" | "normal" | "mix";
   dataVal: TGApp.Sqlite.GachaRecords.SingleTable[];
 }
 
@@ -148,6 +148,7 @@ function getTitle(type: "top" | "5" | "4" | "3"): string {
     if (props.dataType === "avatar") return "角色祈愿";
     if (props.dataType === "weapon") return "武器祈愿";
     if (props.dataType === "normal") return "常驻祈愿";
+    if (props.dataType === "mix") return "集录祈愿";
     return "";
   } else if (props.dataVal.length === 0) {
     return "暂无数据";

src/components/gachaRecord/gro-overview.vue

@@ -1,18 +1,14 @@
 <template>
-  <div
-    class="gro-o-container"
-    :style="{
-      gridTemplateColumns: newData.length !== 0 ? 'repeat(4, 1fr)' : 'repeat(3, 1fr)',
-    }"
-  >
+  <div class="gro-o-container">
     <gro-dataview v-if="newData.length !== 0" v-model:data-val="newData" data-type="new" />
     <gro-dataview v-model:data-val="normalData" data-type="normal" />
     <gro-dataview v-model:data-val="avatarData" data-type="avatar" />
     <gro-dataview v-model:data-val="weaponData" data-type="weapon" />
+    <gro-dataview v-if="mixData.length !== 0" v-model:data-val="mixData" data-type="mix" />
   </div>
 </template>
 <script lang="ts" setup>
-import { watch } from "vue";
+import { computed, watch } from "vue";
 
 import GroDataview from "./gro-dataview.vue";
 
@@ -26,6 +22,18 @@ let newData = props.modelValue.filter((item) => item.uigfType === "100");
 let normalData = props.modelValue.filter((item) => item.uigfType === "200");
 let avatarData = props.modelValue.filter((item) => item.uigfType === "301");
 let weaponData = props.modelValue.filter((item) => item.uigfType === "302");
+let mixData = props.modelValue.filter((item) => item.uigfType === "500");
+
+const cnCols = computed(() => {
+  let total = 5;
+  if (newData.length === 0) {
+    total -= 1;
+  }
+  if (mixData.length === 0) {
+    total -= 1;
+  }
+  return `repeat(${total}, 1fr)`;
+});
 
 // 监听数据变化
 watch(
@@ -35,6 +43,7 @@ watch(
     normalData = newVal.filter((item) => item.uigfType === "200");
     avatarData = newVal.filter((item) => item.uigfType === "301");
     weaponData = newVal.filter((item) => item.uigfType === "302");
+    mixData = newVal.filter((item) => item.uigfType === "500");
   },
 );
 </script>
@@ -44,5 +53,6 @@ watch(
   width: 100%;
   height: 100%;
   grid-gap: 10px;
+  grid-template-columns: v-bind(cnCols);
 }
 </style>