minnan/src/pages/article/common/DetailTabPage.vue

<template>
  <!-- TAB分页的详情页 -->
  <view class="d-flex flex-col bg-base">
    <SimplePageContentLoader :loader="loader">
      <template v-if="loader.content.value">
        <view class="d-flex flex-col">

          <!-- 轮播大图 -->
          <ImageSwiper 
            v-if="showHead" 
            :images="loader.content.value.images"
          />

          <!-- 标题区域 -->
          <view class="d-flex flex-col mt-3 p-3">
            <slot name="title" :content="loader.content.value">
              <view class="d-flex flex-col">
                <view class="d-flex flex-row align-center">
                  <text :class="'size-lll font-songti font-bold color-text-content flex-shrink-1 mr-2' + (loader.content.value.titleBox ? ' border-all-text' : '')">
                    {{ loader.content.value.title }}
                  </text>
                  <slot name="titleEnd" :content="loader.content.value" />
                </view>
                <text class="size-base color-text-content-second mt-2">{{ loader.content.value.desc }}</text>
                <text v-if="loader.content.value.from" class="size-s color-text-content-second">来源：{{ loader.content.value.from }}</text>
              </view>
            </slot>
            <slot name="titleExtra" :content="loader.content.value" />
          </view>

          <!-- 内容切换标签 -->
          <view class="ml-2 mr-2">
            <Tabs
              :tabs="tabs" 
              v-model:currentIndex="tabCurrentIndex"
              :autoScroll="true"
              :autoItemWidth="false"
              :defaultIndicatorWidth="130"
              class="top-tab"
            />
          </view>

          <view class="d-flex flex-col radius-l bg-light p-25 mt-3" style="min-height:70vh">
            <!-- 简介 -->
            <template v-if="tabCurrentId == 0">
              <Parse
                v-if="loader.content.value.intro"
                :content="loader.content.value.intro"
                :tagStyle="commonParserStyle"
              />
              <Parse
                v-if="loader.content.value.content"
                :content="loader.content.value.content"
                :tagStyle="commonParserStyle"
              />
              <text v-if="emptyContent">暂无简介</text>
            </template>
            <!-- 图片 -->
            <template v-else-if="tabCurrentId == 1">
              <slot name="imagesPrefix" />
              <ImageGrid
                :images="loader.content.value.images"
                :rowCount="2"
                :preview="true"
                imageHeight="200rpx"
              />
            </template>
            <!-- 视频 -->
            <template v-else-if="tabCurrentId == 2">
              <video
                v-if="loader.content.value.video"
                class="w-100 video"
                autoplay
                :poster="loader.content.value.image"
                :src="loader.content.value.video"
                controls
              />
            </template>
            <!-- 音频 -->
            <template v-else-if="tabCurrentId == 3">
              <video 
                v-if="loader.content.value.audio"
                class="w-100 video"
                autoplay
                :poster="loader.content.value.image"
                :src="loader.content.value.audio"
                controls
              />
            </template>
            <!-- 其他tab -->
            <slot v-else name="extraTabs" :tabCurrentId="tabCurrentId" :content="loader.content.value" />
          </view>
          <ContentNote />
        </view>
        <LikeFooter :content="loader.content.value" />
      </template>
    </SimplePageContentLoader>
  </view>
</template>
<script setup lang="ts">
import type { GetContentDetailItem } from "@/api/CommonContent";
import { useSimplePageContentLoader } from "@/common/composeabe/SimplePageContentLoader";
import { useLoadQuerys } from "@/common/composeabe/LoadQuerys";
import { useTabControl, type TabControlItem } from "@/common/composeabe/TabControl";
import SimplePageContentLoader from "@/common/components/SimplePageContentLoader.vue";
import ImageGrid from "@/pages/parts/ImageGrid.vue";
import ImageSwiper from "@/pages/parts/ImageSwiper.vue";
import ContentNote from "@/pages/parts/ContentNote.vue";
import commonParserStyle from "@/common/style/commonParserStyle";
import { computed, type PropType, type Ref } from "vue";
import Parse from "@/components/display/parse/Parse.vue";
import Tabs from "@/components/nav/Tabs.vue";
import LikeFooter from "@/pages/parts/LikeFooter.vue";

const props = defineProps({
  load: {
    type: Function as PropType<(id: number, tabsArray: Ref<TabControlItem[]>) => Promise<GetContentDetailItem>>,
    default: null,
  },
  extraTabs: {
    type: Array as PropType<TabControlItem[]>,
    default: () => [],
  },
  showHead: {
    type: Boolean,
    default: true,
  },
})

const emit = defineEmits([
  "tabChange"
])

const emptyContent = computed(() => {
  return !(loader.content.value?.intro as string || '').trim() && !(loader.content.value?.content || '').trim();
})

const loader = useSimplePageContentLoader<
  GetContentDetailItem, 
  { id: number }
>(async (params) => {
  if (!params)
    throw new Error("!params");
  const d = await props.load(params.id, tabsArray);
  tabsArray.value[1].visible = Boolean(d.images && d.images.length > 1);
  tabsArray.value[2].visible = Boolean(d.video);
  tabsArray.value[3].visible = Boolean(d.audio);

  if (d.title)
    uni.setNavigationBarTitle({ title: d.title });
  setTimeout(() => {
    if (emptyContent.value) {
      if (d.video)
        tabCurrentIndex.value = 1;
      else if (d.video)
        tabCurrentIndex.value = 2;
    }
  }, 200);
  return d;
});

const { 
  tabCurrentId,
  tabCurrentIndex,
  tabsArray,
  tabs,
} = useTabControl({
  tabs: [
    {
      id: 0,
      text: '简介',
      visible: true,
    },
    {
      id: 1,
      text: '图片',
      visible: true,
    },
    {
      id: 2,
      text: '视频',
      visible: true,
    },
    {
      id: 3,
      text: '音频',
      visible: true,
    },
    ...props.extraTabs,
  ],
  onTabChange(a, b) {
    emit("tabChange", a, b);
  },
})

useLoadQuerys({ id : 0 }, (p) => loader.loadData(p));

defineExpose({
  getPageShareData() {
    const content = loader.content.value;
    if (!content)
      return {};
    const res = {
      title: content.title,
      imageUrl: content.image,
    };
    return res;
  } 
})
</script>

<style lang="scss">

</style>