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' + (props.showDeadBox && 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>
              </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"
              :width="710"
              class="top-tab"
            />
          </view>
          <view class="d-flex flex-col radius-l bg-light p-25 mt-3" style="min-height:70vh">
            <slot name="extraTabs" :tabCurrentId="tabCurrentId" :content="loader.content.value" />
          </view>
          <ContentNote />
        </view>
        <LikeFooter :content="loader.content.value">
          <template #left>
            <ArticleCorrect :content="loader.content.value" />
          </template>
        </LikeFooter>
      </template>
    </SimplePageContentLoader>
  </view>
</template>
<script setup lang="ts">
import { computed } from "vue";
import { useSimplePageContentLoader } from "@/common/composeabe/SimplePageContentLoader";
import { useLoadQuerys } from "@/common/composeabe/LoadQuerys";
import { useTabControl } from "@/common/composeabe/TabControl";
import SimplePageContentLoader from "@/common/components/SimplePageContentLoader.vue";
import ImageSwiper from "@/pages/parts/ImageSwiper.vue";
import ContentNote from "@/pages/parts/ContentNote.vue";
import Tabs from "@/components/nav/Tabs.vue";
import LikeFooter from "@/pages/parts/LikeFooter.vue";
import ArticleCorrect from "@/pages/parts/ArticleCorrect.vue";
import type { GetContentDetailItem } from "@/api/CommonContent";
import type { DetailTabPageProps, DetailTabPageTabsArray } from "./DetailTabPage";

const props = withDefaults(defineProps<DetailTabPageProps>(), {
  extraTabs: () => [],
  showHead: true,
  showDeadBox: false,
})

const emit = defineEmits([
  "tabChange",
  "loaded"
])

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");
  if (!props.load)
    throw new Error("!props.load");

  const d = await props.load(params.id, tabsArrayObject);

  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);
  emit("loaded", d);
  return d;
});

const { 
  tabCurrentId,
  tabCurrentIndex,
  tabsArray,
  tabs,
} = useTabControl({
  tabs: props.extraTabs,
  onTabChange(a, b) {
    emit("tabChange", a, b);
  },
})

const tabsArrayObject : DetailTabPageTabsArray = {
  tabsArray,
  getTabById(id: number) {
    return tabsArray.value.find(t => t.id == id);
  }
}

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

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

<style lang="scss">

</style>