feat 支持更多豆瓣详情展示

src/views/discover/MediaDetailView.vue

@@ -109,7 +109,7 @@ async function checkMovieExists() {
 // 查询当前媒体是否已订阅
 async function checkSubscribe(season = 0) {
   try {
-    const mediaid = `tmdb:${mediaDetail.value.tmdb_id}`
+    const mediaid = mediaDetail.value.tmdb_id ? `tmdb:${mediaDetail.value.tmdb_id}` : `douban:${mediaDetail.value.douban_id}`
 
     const result: Subscribe = await api.get(`subscribe/media/${mediaid}`, {
       params: {
@@ -420,9 +420,9 @@ onBeforeMount(() => {
     />
   </div>
   <div v-if="mediaDetail.tmdb_id || mediaDetail.douban_id" class="max-w-8xl mx-auto px-4">
-    <template v-if="mediaDetail.backdrop_path">
+    <template v-if="mediaDetail.backdrop_path || mediaDetail.poster_path">
       <div class="vue-media-back absolute left-0 top-0 w-full h-96">
-        <VImg class="h-96" :src="mediaDetail.backdrop_path" cover />
+        <VImg class="h-96" :src="mediaDetail.backdrop_path || mediaDetail.poster_path" cover />
       </div>
       <div class="vue-media-back absolute left-0 top-0 w-full h-96" />
     </template>
@@ -512,10 +512,6 @@ onBeforeMount(() => {
               <span>{{ joinArray(director.roles) }}</span>
               <a class="crew-name" :href="`${director.url}`" target="_blank">{{ director.name }}</a>
             </li>
-            <li v-for="director in mediaDetail.actors" :key="director.id">
-              <span>{{ joinArray(director.roles) }}</span>
-              <a class="crew-name" :href="`${director.url}`" target="_blank">{{ director.name }}</a>
-            </li>
           </ul>
           <div class="mt-6">
             <a v-if="mediaDetail.tmdb_id" class="mb-2 mr-2 inline-flex last:mr-0" :href="getTheMovieDbLink()" target="_blank">
@@ -667,12 +663,56 @@ onBeforeMount(() => {
             </div>
           </div>
         </div>
+        <div v-else-if="mediaDetail.douban_id" class="media-overview-right">
+          <div class="media-facts">
+            <div v-if="mediaDetail.vote_average" class="media-ratings">
+              <VRating
+                v-model="mediaDetail.vote_average"
+                density="compact"
+                length="10"
+                class="ma-2"
+                readonly
+              />
+            </div>
+            <div v-if="mediaDetail.douban_id" class="media-fact">
+              <span>豆瓣ID</span>
+              <span class="media-fact-value">{{ mediaDetail.douban_id }}</span>
+            </div>
+            <div v-if="mediaDetail.original_title" class="media-fact">
+              <span>原始标题</span>
+              <span class="media-fact-value">{{ mediaDetail.original_title }}</span>
+            </div>
+            <div v-if="mediaDetail.release_date" class="media-fact">
+              <span>上映日期</span>
+              <span class="media-fact-value">
+                {{ mediaDetail.release_date }}
+              </span>
+            </div>
+            <div v-if="mediaDetail.production_countries" class="media-fact border-b-0">
+              <span>出品国家</span>
+              <span class="media-fact-value">
+                <span v-for="country in getProductionCountries" :key="country" class="flex items-center justify-end text-end">
+                  {{ country }}
+                </span>
+              </span>
+            </div>
+          </div>
+        </div>
       </div>
       <div v-if="mediaDetail.tmdb_id">
         <PersonCardSlideView
           :apipath="`tmdb/credits/${mediaDetail.tmdb_id}/${mediaProps.type}`"
-          :linkurl="`/credits/tmdb/credits/${mediaDetail.tmdb_id}/${mediaProps.type}?title=演员阵容`"
+          :linkurl="`/credits/tmdb/credits/${mediaDetail.tmdb_id}/${mediaProps.type}?title=演员阵容&type=tmdb`"
           title="演员阵容"
+          type="tmdb"
+        />
+      </div>
+      <div v-else-if="mediaDetail.douban_id">
+        <PersonCardSlideView
+          :apipath="`douban/credits/${mediaDetail.douban_id}/${mediaProps.type}`"
+          :linkurl="`/credits/douban/credits/${mediaDetail.douban_id}/${mediaProps.type}?title=演员阵容&type=douban`"
+          title="演员阵容"
+          type="douban"
         />
       </div>
       <div v-if="mediaDetail.tmdb_id">
@@ -682,6 +722,13 @@ onBeforeMount(() => {
           title="推荐"
         />
       </div>
+      <div v-else-if="mediaDetail.douban_id">
+        <MediaCardSlideView
+          :apipath="`douban/recommend/${mediaDetail.douban_id}/${mediaProps.type}`"
+          :linkurl="`/browse/douban/recommend/${mediaDetail.douban_id}/${mediaProps.type}?title=推荐`"
+          title="推荐"
+        />
+      </div>
       <div v-if="mediaDetail.tmdb_id">
         <MediaCardSlideView
           :apipath="`tmdb/similar/${mediaDetail.tmdb_id}/${mediaProps.type}`"

src/views/discover/PersonCardListView.vue

@@ -1,13 +1,14 @@
 <script lang="ts" setup>
 import api from '@/api'
-import type { TmdbPerson } from '@/api/types'
-import PersonCard from '@/components/cards/PersonCard.vue'
+import DoubanPersonCard from '@/components/cards/DoubanPersonCard.vue'
+import TmdbPersonCard from '@/components/cards/TmdbPersonCard.vue'
 import NoDataFound from '@/components/NoDataFound.vue'
 
 // 输入参数
 const props = defineProps({
   apipath: String,
   params: Object as PropType<{ [key: string]: any }>,
+  type: String,
 })
 
 // 判断是否有滚动条
@@ -29,8 +30,8 @@ const loading = ref(false)
 const isRefreshed = ref(false)
 
 // 数据列表
-const dataList = ref<TmdbPerson[]>([])
-const currData = ref<TmdbPerson[]>([])
+const dataList = ref<any>([])
+const currData = ref<any>([])
 
 // 获取列表数据
 async function fetchData({ done }: { done: any }) {
@@ -135,11 +136,22 @@ async function fetchData({ done }: { done: any }) {
   >
     <template #loading />
     <div
-      v-if="dataList.length > 0"
+      v-if="dataList.length > 0 && props.type === 'tmdb'"
       class="grid gap-4 grid-media-card mx-3"
       tabindex="0"
     >
-      <PersonCard
+      <TmdbPersonCard
+        v-for="data in dataList"
+        :key="data.id"
+        :person="data"
+      />
+    </div>
+    <div
+      v-if="dataList.length > 0 && props.type === 'douban'"
+      class="grid gap-4 grid-media-card mx-3"
+      tabindex="0"
+    >
+      <DoubanPersonCard
         v-for="data in dataList"
         :key="data.id"
         :person="data"

src/views/discover/PersonCardSlideView.vue

@@ -1,21 +1,22 @@
 <script lang="ts" setup>
-import PersionCard from '@/components/cards/PersonCard.vue'
+import TmdbPersonCard from '@/components/cards/TmdbPersonCard.vue'
 import api from '@/api'
-import type { TmdbPerson } from '@/api/types'
 import SlideView from '@/components/slide/SlideView.vue'
+import DoubanPersonCard from '@/components/cards/DoubanPersonCard.vue'
 
 // 输入参数
 const props = defineProps({
   apipath: String,
   linkurl: String,
   title: String,
+  type: String,
 })
 
 // 组件加载完成
 const componentLoaded = ref(false)
 
 // 数据列表
-const dataList = ref<TmdbPerson[]>([])
+const dataList = ref<any>([])
 
 // 获取订阅列表数据
 async function fetchData() {
@@ -46,7 +47,14 @@ onMounted(fetchData)
         v-for="data in dataList"
         :key="data.id"
       >
-        <PersionCard
+        <TmdbPersonCard
+          v-if="props.type === 'tmdb'"
+          :person="data"
+          height="15rem"
+          width="10rem"
+        />
+        <DoubanPersonCard
+          v-if="props.type === 'douban'"
           :person="data"
           height="15rem"
           width="10rem"