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.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">
            <u-tabs 
              :list="tabs" 
              :current="tabCurrentIndex"
              lineWidth="30"
              lineColor="#d9492e"
              :activeStyle="{
                color: '#000',
                fontWeight: 'bold',
                transform: 'scale(1.05)'
              }"
              :inactiveStyle="{
                color: '#606266',
                transform: 'scale(1)'
              }"
              :scrollable="tabs.length >= 4"
              class="top-tab"
              @click="onTabClick"
            />
          </view>

          <view class="d-flex flex-col radius-l bg-light p-25 mt-3" style="min-height:70vh">
            <!-- 简介 -->
            <template v-if="tabCurrentId == 0">
              <u-parse 
                v-if="loader.content.value.intro"
                :content="loader.content.value.intro"
                :tagStyle="commonParserStyle"
              />
              <u-parse 
                v-if="loader.content.value.content"
                :content="loader.content.value.content"
                :tagStyle="commonParserStyle"
              />
            </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>
      </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 type { PropType, Ref } from "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 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 });
  return d;
});

const { 
  tabCurrentId,
  tabCurrentIndex,
  tabsArray,
  tabs,
  onTabClick
} = useTabControl({
  tabs: [
    {
      id: 0,
      name: '简介',
      visible: true,
    },
    {
      id: 1,
      name: '图片',
      visible: true,
    },
    {
      id: 2,
      name: '视频',
      visible: true,
    },
    {
      id: 3,
      name: '音频',
      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>