💄 祈愿页数据行样式美化

src/components/gachaRecord/gro-data-line.vue

@@ -0,0 +1,175 @@
+<template>
+  <div class="gro-dl-box">
+    <div class="gro-dl-progress" />
+    <div class="gro-dl-icon">
+      <img :alt="props.data.name" :src="getIcon()" />
+    </div>
+    <div class="gro-dl-line">
+      <div class="gro-dl-base">
+        <div class="gro-dl-name">{{ props.data.name }}</div>
+        <div class="gro-dl-time">{{ props.data.time }}</div>
+      </div>
+      <div class="gro-dl-info">
+        <div class="gro-dl-cnt">{{ props.count }}</div>
+        <div class="gro-dl-hint" v-if="hint !== ''">{{ hint }}</div>
+      </div>
+    </div>
+  </div>
+</template>
+<script lang="ts" setup>
+import { computed } from "vue";
+
+import { AppGachaData } from "../../data/index.js";
+import TSUserGacha from "../../plugins/Sqlite/modules/userGacha.js";
+
+export interface GroDataLineProps {
+  data: TGApp.Sqlite.GachaRecords.SingleTable;
+  count: number;
+}
+
+const props = defineProps<GroDataLineProps>();
+const hint = getEndHint();
+
+function getIcon(): string {
+  const itemType = TSUserGacha.getGachaItemType(props.data.itemId);
+  if (itemType[0] === "角色") {
+    return `/WIKI/character/${props.data.itemId}.webp`;
+  } else if (itemType[0] === "武器") {
+    return `/WIKI/weapon/${props.data.itemId}.webp`;
+  } else {
+    return `/source/UI/paimon.webp`;
+  }
+}
+
+function getEndHint(): string {
+  if (props.data.gachaType === "100" || props.data.gachaType === "200") return "";
+  // if (props.data.rank !== "5") return "";
+  const itemTime = new Date(props.data.time).getTime();
+  const poolsFind = AppGachaData.filter((pool) => {
+    if (pool.type.toLocaleString() !== props.data.gachaType) return false;
+    const startTime = new Date(pool.from).getTime();
+    const endTime = new Date(pool.to).getTime();
+    return itemTime >= startTime && itemTime <= endTime;
+  });
+  if (poolsFind.length === 0) return "";
+  if (props.data.rank === "5") {
+    if (poolsFind.some((pool) => pool.up5List.includes(Number(props.data.itemId)))) return "UP";
+    return "歪";
+  } else if (props.data.rank === "4") {
+    if (poolsFind.some((pool) => pool.up4List.includes(Number(props.data.itemId)))) return "UP";
+    return "歪";
+  }
+  return "";
+}
+
+const progressColor = computed<string>(() => {
+  if (hint === "UP") return "var(--tgc-od-orange)";
+  if (hint === "歪") return "var(--tgc-od-red)";
+  return "var(--tgc-od-blue)";
+});
+const progressWidth = computed<string>(() => {
+  let final = 10;
+  if (props.data.rank === "5") {
+    if (props.data.gachaType === "302") final = 80;
+    else final = 90;
+  } else if (props.data.rank === "4") {
+    final = 10;
+  } else {
+    return "0%";
+  }
+  return ((props.count / final) * 100).toFixed(2) + "%";
+});
+</script>
+<style lang="css" scoped>
+.gro-dl-box {
+  position: relative;
+  display: flex;
+  width: calc(100% - 10px);
+  height: 40px;
+  align-items: center;
+  justify-content: flex-start;
+  padding: 5px;
+  border-radius: 5px;
+  margin: 0 5px;
+  background: var(--box-bg-3);
+  column-gap: 5px;
+}
+
+.gro-dl-progress {
+  position: absolute;
+  bottom: 0;
+  left: 0;
+  width: v-bind(progressWidth);
+  max-width: 100%;
+  height: 5px;
+  border-radius: 5px;
+  background: v-bind(progressColor);
+  transition: width 0.5s;
+}
+
+.gro-dl-icon {
+  display: flex;
+  width: 30px;
+  height: 30px;
+  align-items: center;
+  justify-content: center;
+
+  img {
+    width: 100%;
+    height: 100%;
+  }
+}
+
+.gro-dl-line {
+  display: flex;
+  width: 100%;
+  align-items: center;
+  justify-content: space-between;
+}
+
+.gro-dl-base {
+  display: flex;
+  flex-direction: column;
+  align-items: flex-start;
+  justify-content: center;
+}
+
+.gro-dl-name {
+  height: 16px;
+  color: var(--common-text-title);
+  font-family: var(--font-title);
+  font-size: 14px;
+}
+
+.gro-dl-time {
+  height: 14px;
+  color: var(--box-text-7);
+  font-size: 12px;
+}
+
+.gro-dl-info {
+  display: flex;
+  align-items: flex-end;
+  justify-content: center;
+  column-gap: 5px;
+}
+
+.gro-dl-cnt {
+  color: var(--common-text-title);
+  font-family: var(--font-title);
+}
+
+.gro-dl-hint {
+  display: flex;
+  width: 30px;
+  height: 30px;
+  align-items: center;
+  justify-content: center;
+  padding: 5px;
+  border-radius: 50%;
+  background: var(--box-bg-1);
+  color: v-bind(progressColor);
+  font-family: var(--font-title);
+  transform: rotate(25deg);
+}
+</style>

src/components/gachaRecord/gro-dataview.vue

@@ -40,26 +40,20 @@
       </v-tabs>
       <v-window v-model="tab" class="gro-bottom-window">
         <v-window-item value="5" class="gro-b-window-item">
-          <div v-for="(item, index) in star5List" :key="index" class="gro-bwi-item">
-            <div class="gro-bwi-icon">
-              <img :src="item.icon" alt="icon" />
-            </div>
-            <div class="gro-bwi-data" :title="item.time">
-              <span>{{ item.name }}</span>
-              <span>{{ item.gachaCount }}</span>
-            </div>
-          </div>
+          <GroDataLine
+            v-for="(item, index) in star5List"
+            :key="index"
+            :data="item.data"
+            :count="item.count"
+          />
         </v-window-item>
         <v-window-item value="4" class="gro-b-window-item">
-          <div v-for="(item, index) in star4List" :key="index" class="gro-bwi-item">
-            <div class="gro-bwi-icon">
-              <img :src="item.icon" alt="icon" />
-            </div>
-            <div class="gro-bwi-data" :title="item.time">
-              <span>{{ item.name }}</span>
-              <span>{{ item.gachaCount }}</span>
-            </div>
-          </div>
+          <GroDataLine
+            v-for="(item, index) in star4List"
+            :key="index"
+            :data="item.data"
+            :count="item.count"
+          />
         </v-window-item>
       </v-window>
     </div>
@@ -68,7 +62,7 @@
 <script lang="ts" setup>
 import { onMounted, ref, watch } from "vue";
 
-import TSUserGacha from "../../plugins/Sqlite/modules/userGacha.js";
+import GroDataLine, { GroDataLineProps } from "./gro-data-line.vue";
 
 interface GachaDataViewProps {
   dataType: "new" | "avatar" | "weapon" | "normal" | "mix";
@@ -77,21 +71,13 @@ interface GachaDataViewProps {
 
 const props = defineProps<GachaDataViewProps>();
 
-// 单个祈愿物品
-interface renderGachaItem extends TGApp.Sqlite.GachaRecords.SingleTable {
-  // 第几抽出的
-  gachaCount: number;
-  // 图标
-  icon: string;
-}
-
 // data
 const loading = ref<boolean>(true); // 是否加载完
 const title = ref<string>(""); // 卡片标题
 const startDate = ref<string>(""); // 最早的时间
 const endDate = ref<string>(""); // 最晚的时间
-const star5List = ref<renderGachaItem[]>([]); // 5星物品数据
-const star4List = ref<renderGachaItem[]>([]); // 4星物品数据
+const star5List = ref<GroDataLineProps[]>([]); // 5星物品数据
+const star4List = ref<GroDataLineProps[]>([]); // 4星物品数据
 const reset5count = ref<number>(1); // 5星垫抽数量
 const reset4count = ref<number>(1); // 4星垫抽数量
 const star3count = ref<number>(0); // 3星物品数量
@@ -121,17 +107,15 @@ function loadData(): void {
       } else if (item.rank === "4") {
         reset5count.value++;
         star4List.value.push({
-          ...item,
-          gachaCount: reset4count.value,
-          icon: getIcon(item.itemId),
+          data: item,
+          count: reset4count.value,
         });
         reset4count.value = 1;
       } else if (item.rank === "5") {
         reset4count.value++;
         star5List.value.push({
-          ...item,
-          gachaCount: reset5count.value,
-          icon: getIcon(item.itemId),
+          data: item,
+          count: reset5count.value,
         });
         reset5count.value = 1;
       }
@@ -173,22 +157,12 @@ function getTitle(type: "top" | "5" | "4" | "3"): string {
 
 // 获取5星平均抽数
 function getStar5Avg(): string {
-  const resetList = star5List.value.map((item) => item.gachaCount);
+  const resetList = star5List.value.map((item) => item.count);
   if (resetList.length === 0) return "0";
   const total = resetList.reduce((a, b) => a + b);
   return (total / star5List.value.length).toFixed(2);
 }
 
-// 获取物品图标
-function getIcon(itemId: string): string {
-  const type = TSUserGacha.getGachaItemType(itemId);
-  if (type[0] === "角色") {
-    return "/WIKI/character/" + itemId + ".webp";
-  } else {
-    return "/WIKI/weapon/" + itemId + ".webp";
-  }
-}
-
 // 监听数据变化
 watch(
   () => props.dataVal,
@@ -262,35 +236,4 @@ watch(
   gap: 5px;
   overflow-y: auto;
 }
-
-.gro-bwi-item {
-  display: flex;
-  width: 100%;
-  height: 30px;
-  gap: 5px;
-}
-
-.gro-bwi-icon {
-  display: flex;
-  width: 30px;
-  height: 30px;
-  align-items: center;
-  justify-content: center;
-}
-
-.gro-bwi-icon img {
-  width: 100%;
-  height: 100%;
-}
-
-.gro-bwi-data {
-  display: flex;
-  width: calc(100% - 50px);
-  height: 100%;
-  align-items: center;
-  justify-content: space-between;
-  padding: 0 10px;
-  border-radius: 5px;
-  background: var(--box-bg-3);
-}
 </style>