Fun/TeyvatGuide
1
0
Fork 0
mirror of https://github.com/BTMuli/TeyvatGuide.git synced 2025-12-07 08:42:49 +08:00
Code Issues Packages Projects Releases Wiki Activity

✨ 使用Swiper组件重构Gacha概览展示，优化数据展示方式

Browse Source
This commit is contained in:
BTMuli
2025-12-05 22:05:17 +08:00
parent f30ee36a83
commit 637be3c4af
1 changed files with 46 additions and 32 deletions
Download Patch File Download Diff File Expand all files Collapse all files

78
src/components/userGacha/gro-overview.vue
View File

@@ -1,20 +1,46 @@
<template> <template>
<div class="gro-o-container"> <Swiper
<GroDataView v-if="newData.length !== 0" :data-val="newData" data-type="new" /> :autoplay="false"
<GroDataView :data-val="normalData" data-type="normal" /> :centered-slides="false"
<GroDataView :data-val="avatarData" data-type="avatar" /> :loop="false"
<GroDataView :data-val="weaponData" data-type="weapon" /> :modules="swiperModules"
<GroDataView v-if="mixData.length !== 0" :data-val="mixData" data-type="mix" /> :pagination="{ clickable: true }"
</div> :slides-per-view="3"
:space-between="12"
class="gro-o-swiper"
>
<SwiperSlide v-if="newData.length !== 0">
<GroDataView :data-val="newData" data-type="new" />
</SwiperSlide>
<SwiperSlide>
<GroDataView :data-val="normalData" data-type="normal" />
</SwiperSlide>
<SwiperSlide>
<GroDataView :data-val="avatarData" data-type="avatar" />
</SwiperSlide>
<SwiperSlide>
<GroDataView :data-val="weaponData" data-type="weapon" />
</SwiperSlide>
<SwiperSlide v-if="mixData.length !== 0">
<GroDataView :data-val="mixData" data-type="mix" />
</SwiperSlide>
</Swiper>
</template> </template>
<script lang="ts" setup> <script lang="ts" setup>
import { computed, ref, watch } from "vue"; import "swiper/css";
import "swiper/css/pagination";
import "swiper/css/navigation";
import { A11y, Autoplay, Pagination } from "swiper/modules";
import { Swiper, SwiperSlide } from "swiper/vue";
import { computed } from "vue";
import GroDataView from "./gro-data-view.vue"; import GroDataView from "./gro-data-view.vue";
type GachaOverviewProps = { modelValue: Array<TGApp.Sqlite.GachaRecords.TableGacha> }; type GachaOverviewProps = { modelValue: Array<TGApp.Sqlite.GachaRecords.TableGacha> };
const props = defineProps<GachaOverviewProps>(); const props = defineProps<GachaOverviewProps>();
const swiperModules = [Autoplay, A11y, Pagination];
const newData = computed<Array<TGApp.Sqlite.GachaRecords.TableGacha>>(() => const newData = computed<Array<TGApp.Sqlite.GachaRecords.TableGacha>>(() =>
props.modelValue.filter((item) => item.uigfType === "100"), props.modelValue.filter((item) => item.uigfType === "100"),
); );
@@ -30,33 +56,21 @@ const weaponData = computed<Array<TGApp.Sqlite.GachaRecords.TableGacha>>(() =>
const mixData = computed<Array<TGApp.Sqlite.GachaRecords.TableGacha>>(() => const mixData = computed<Array<TGApp.Sqlite.GachaRecords.TableGacha>>(() =>
props.modelValue.filter((item) => item.uigfType === "500"), props.modelValue.filter((item) => item.uigfType === "500"),
); );
const cnCols = ref<string>(getCnCols());
function getCnCols(): string {
let total = 5;
if (newData.value.length === 0) {
total -= 1;
}
if (mixData.value.length === 0) {
total -= 1;
}
if (total === 5) return "repeat(5, 0.2fr)";
if (total === 4) return "repeat(4, 0.25fr)";
return "repeat(3, 0.33fr)";
}
// 监听数据变化
watch(
() => props.modelValue,
() => (cnCols.value = getCnCols()),
);
</script> </script>
<style lang="css" scoped> <style lang="css" scoped>
.gro-o-container { .gro-o-swiper {
display: grid; width: 100%;
height: 100%; height: 100%;
column-gap: 8px; column-gap: 8px;
grid-template-columns: v-bind(cnCols); /* stylelint-disable-line value-keyword-case */ }
/* swiper dot */
:deep(.swiper-pagination-bullet) {
background: var(--tgc-od-white);
}
:deep(.swiper-pagination-bullet-active) {
background-color: var(--tgc-pink-1);
} }
</style> </style>