YY_MP_REFACTOR/src/pages/information/index.vue

<template>
  <view class="page">
    <LoginRequiredState v-if="!isLoggedIn" />

    <template v-else>
      <InformationTabs v-model="activeTab" :tabs="tabs" />

      <AcademicInfoPanel v-if="activeTab === 'academic'" ref="academicPanelRef" />

      <ProductAlbumPanel v-else ref="albumPanelRef" />
    </template>
  </view>
</template>

<script setup lang="ts">
import { computed, ref } from 'vue'

import { onPullDownRefresh, onReachBottom, onShareAppMessage } from '@dcloudio/uni-app'

import { useUserStore } from '@/stores/modules/user'

import AcademicInfoPanel from './components/academic/AcademicInfoPanel.vue'
import ProductAlbumPanel from './components/album/ProductAlbumPanel.vue'
import InformationTabs from './components/shared/InformationTabs.vue'
import LoginRequiredState from './components/shared/LoginRequiredState.vue'

type TabKey = 'academic' | 'album'

interface TabItem {
  label: string
  value: TabKey
}

interface PanelExpose {
  refresh: () => Promise<void>
  loadMore: () => Promise<void>
}

interface ShareDataset {
  id?: string | number
  title?: string
  activeTab?: TabKey
}

const userStore = useUserStore()

const isLoggedIn = computed<boolean>(() => {
  return Boolean(userStore.isLoggedIn)
})

const tabs: TabItem[] = [
  {
    label: '学术信息',
    value: 'academic',
  },
  {
    label: '产品相册',
    value: 'album',
  },
]

const activeTab = ref<TabKey>('academic')

const academicPanelRef = ref<PanelExpose | null>(null)
const albumPanelRef = ref<PanelExpose | null>(null)

const currentPanel = computed<PanelExpose | null>(() => {
  return activeTab.value === 'academic' ? academicPanelRef.value : albumPanelRef.value
})

onReachBottom(() => {
  if (!isLoggedIn.value) return

  void currentPanel.value?.loadMore()
})

onPullDownRefresh(async () => {
  try {
    if (!isLoggedIn.value) return

    await currentPanel.value?.refresh()
  } finally {
    uni.stopPullDownRefresh()
  }
})

onShareAppMessage((res) => {
  const dataset =
    res.from === 'button' ? (res.target?.dataset as ShareDataset | undefined) : undefined

  const id = dataset?.id
  const title = dataset?.title || '要易小助手'
  const type = dataset?.activeTab || activeTab.value

  return {
    title,
    path: id
      ? `/pages-sub-packages/information/detail/index?type=${type}&id=${id}`
      : '/pages/information/index',
  }
})
</script>

<style scoped lang="scss">
.page {
  min-height: 100vh;
  background: #fff;
}
</style>