add MediaCardListView

src/pages/ranking.vue

@@ -1,27 +1,32 @@
 <script setup lang="ts">
-import CardBasic from '@/views/pages/cards/card-basic/CardBasic.vue'
+import MediaCardListView from '@/views/discover/MediaCardListView.vue';
-import CardNavigation from '@/views/pages/cards/card-basic/CardNavigation.vue'
-import CardSolid from '@/views/pages/cards/card-basic/CardSolid.vue'
 </script>
 
 <template>
   <div>
-    <p class="text-2xl mb-6">
+    <p class="text-2xl font-weight-medium my-5">
-      Basic Cards
+      TMDB电影
     </p>
 
-    <CardBasic />
+    <MediaCardListView apipath="/tmdb/movies"/>
 
-    <p class="text-2xl mb-6 mt-14">
+    <p class="text-2xl font-weight-medium my-5">
-      Navigation Cards
+      TMDB电视剧
     </p>
 
-    <CardNavigation />
+    <MediaCardListView apipath="/tmdb/tvs"/>
 
-    <p class="text-2xl mt-14 mb-6 ">
+    <p class="text-2xl font-weight-medium my-5">
-      Solid Cards
+      豆瓣电影
     </p>
 
-    <CardSolid />
+    <MediaCardListView apipath="/douban/movies"/>
+
+    <p class="text-2xl font-weight-medium my-5">
+      豆瓣电视剧
+    </p>
+
+    <MediaCardListView apipath="/douban/tvs"/>
+
   </div>
 </template>

src/views/discover/MediaCardListView.vue

@@ -0,0 +1,74 @@
+<script lang="ts" setup>
+import api from "@/api";
+
+// 定义订阅字典结构
+interface MediaInfo {
+    // 类型 电影、电视剧
+    type?: string
+    // 媒体标题
+    title?: string
+    // 年份
+    year?: string
+    // TMDB ID
+    tmdb_id?: number
+    // IMDB ID
+    imdb_id?: string
+    // TVDB ID
+    tvdb_id?: string
+    // 豆瓣ID
+    douban_id?: string
+    // 媒体原语种
+    original_language?: string
+    // 媒体原发行标题
+    original_title?: string
+    // 媒体发行日期
+    release_date?: string
+    // 背景图片
+    backdrop_path?: string
+    // 海报图片
+    poster_path?: string
+    // 评分
+    vote_average: number
+    // 描述
+    overview?: string
+    // 二级分类
+    category?: string
+}
+
+// 输入参数
+const props = defineProps({
+  apipath: String,
+});
+
+// 数据列表
+const dataList = ref<MediaInfo[]>([]);
+
+// 获取订阅列表数据
+const fetchData = async () => {
+  try {
+    if (!props.apipath){
+      return
+    }
+    dataList.value = await api.get(props.apipath);
+  } catch (error) {
+    console.error(error);
+  }
+};
+
+// 加载时获取数据
+onMounted(fetchData);
+
+</script>
+
+<template>
+  <VRow>
+    <VCol v-for="data in dataList" :key="data.tmdb_id" cols="6" md="3" lg="2">
+      <VCard>
+        <VImg
+          :src="data.poster_path"
+          cover
+        />
+      </VCard>
+    </VCol>
+  </VRow>
+</template>

tailwind.config.js

@@ -1,5 +1,6 @@
 /** @type {import('tailwindcss').Config} */
 module.exports = {
+  prefix: 'tw-',
   content: ['./index.html', './src/**/*.{vue,js,ts,jsx,tsx}'],
   theme: {
     extend: {},