LibreShort/src/views/MyListTab.vue

<template>
    <ion-page>
        <ion-header>
            <ion-toolbar>
                <ion-title>My List</ion-title>
            </ion-toolbar>
        </ion-header>
        <ion-content>
            <div class="p-4">
                <div
                    class="grid grid-cols-2 xs:grid-cols-3 sm:grid-cols-4 md:grid-cols-5 lg:grid-cols-6 xl:grid-cols-7 2xl:grid-cols-8 gap-4"
                    ref="container"
                >
                    <div
                        v-for="item in collections"
                        :key="item.id"
                        @click="detail(item)"
                    >
                        <div class="aspect-w-9 aspect-h-16">
                            <img
                                class="object-cover rounded md:rounded-md xl:rounded-lg"
                                :src="item.series.cover"
                            />
                        </div>

                        <div class="text-xs line-clamp-2 mt-1">
                            {{ item.series.title }}
                        </div>
                    </div>
                    <div
                        class=""
                        @click="router.replace({ path: '/tabs/home' })"
                    >
                        <div
                            class="aspect-w-9 aspect-h-16 rounded bg-neutral-800"
                        >
                            <div class="grid place-content-center">
                                <div class="text-neutral-400 leading-none">
                                    <ion-icon class="text-3xl" :icon="add" />
                                </div>
                            </div>
                        </div>
                    </div>
                </div>
            </div>
        </ion-content>
    </ion-page>
</template>

<script setup lang="ts">
import http from "@/plugins/http";
import {
    IonPage,
    IonHeader,
    IonToolbar,
    IonTitle,
    IonContent,
    onIonViewDidEnter,
    IonIcon,
    useIonRouter,
} from "@ionic/vue";
import { useWindowSize, useElementSize } from "@vueuse/core";
import { computed, onActivated, onMounted, ref } from "vue";
import SeriesItem from "@/components/SeriesItem.vue";
import { add } from "ionicons/icons";

const router = useIonRouter();
const collections = ref<any[]>([]);
function getData() {
    http.get("/collections").then((res) => {
        collections.value = [...res.data];
    });
}
onIonViewDidEnter(() => {
    getData();
});
const { width, height } = useWindowSize();
const container = ref(null);
const { width: containerWidth, height: containerHeight } =
    useElementSize(container);
const itemSize = computed(() => {
    const itemWidth =
        Math.floor(
            containerWidth.value / Math.floor(containerWidth.value / 108)
        ) - 16;
    const itemHeight = (itemWidth * 16) / 9;
    return {
        width: itemWidth,
        height: itemHeight,
    };
});
function detail(item: any) {
    router.push({ path: `/series/${item.series.id}` });
}
</script>