designer-hub/packages/app/src/pages-sub/home/content/index.vue

<route lang="json">
{
  "style": {
    "navigationBarTitleText": "详情",
    "navigationBarBackgroundColor": "#fff"
  }
}
</route>
<script setup lang="ts">
import { logo } from '../../../core/libs/svgs'
import { getBanner, getContent } from '../../../core/libs/requests'
import Article from '../components/article.vue'
import { Content } from '../../../core/libs/models'

const id = ref()
const type = ref()
const bannerHome = ref<{
  coverVideoImage: string
  name: string
  playCount: number
  url: string
  indexPromotionalVideoImage: string
  detailsType: string
  id: string | number
  details: string
  createTime: string | number
}>({
  coverVideoImage: '',
  name: '',
  url: '',
  indexPromotionalVideoImage: '',
  detailsType: '',
  id: 0,
  details: '',
  createTime: 0,
  playCount: 0,
})
const detailArticle = computed(() => {
  if (type.value === 'banner') {
    return {
      isBanner: true,
      ...data.value,
    }
  } else if (type.value === 'home-banner') {
    return {
      isBanner: true,
      title: bannerHome.value.name,
      contentDetail: bannerHome.value.details,
      createTime: bannerHome.value.createTime.toString(),
      viewsCount: bannerHome.value.playCount,
    }
  } else {
    return {
      isBanner: false,
      ...data.value,
    }
  }
})
const request = ref<() => Promise<IResData<Partial<Content>>>>()
const { data, run } = useRequest(() => request.value(), { initialData: {} })
const formatData = (res) => {
  return {
    data: {
      isBanner: true,
      title: res.name,
      contentDetail: res.bannerDetailsContent,
    },
  }
}
onLoad(async (query: { id: string; type?: 'banner'; data?: string }) => {
  id.value = query.id
  type.value = query.type
  if (type.value === 'banner') {
    request.value = () =>
      getBanner(id.value).then((res) => {
        uni.setNavigationBarTitle({
          title: res.data?.name,
        })
        return {
          ...res,
          data: {
            isBanner: true,
            title: res.data?.name,
            contentDetail: res.data?.bannerDetailsContent,
            createTime: res.data?.createTime.toString(),
            viewsCount: res.data?.viewCount,
          },
        }
      })
  } else if (type.value === 'home-banner') {
    console.log('home-banner', JSON.parse(query.data))
    bannerHome.value = JSON.parse(query.data)
    uni.setNavigationBarTitle({
      title: bannerHome.value.name,
    })
  } else {
    request.value = () => getContent({ id: id.value })
  }
  await run()
})
onShareAppMessage(() => ({
  title: data.value?.title,
}))
onShareTimeline(() => ({
  title: data.value?.title,
}))
</script>
<template>
  <div class="flex-grow bg-white">
    <Article
      :isBanner="detailArticle.isBanner"
      :title="detailArticle?.title"
      :author="{ name: '筑巢荟' }"
      :content="detailArticle?.contentDetail"
      :createAt="detailArticle?.createTime"
      :viewNum="detailArticle?.viewsCount || 0"
    >
      <template #avatar><wd-img width="28" height="28" :src="logo"></wd-img></template>
    </Article>
  </div>
</template>