index.vue 3.0 KB

123456789101112131415161718192021222324252627282930313233343536373839404142434445464748495051525354555657585960616263646566676869707172737475767778798081828384858687888990919293949596979899100101102103104105106107108109110111112113114115116117118119120121
  1. <route lang="json">
  2. {
  3. "style": {
  4. "navigationBarTitleText": "详情",
  5. "navigationBarBackgroundColor": "#fff"
  6. }
  7. }
  8. </route>
  9. <script setup lang="ts">
  10. import { logo } from '../../../core/libs/svgs'
  11. import { getBanner, getContent } from '../../../core/libs/requests'
  12. import Article from '../components/article.vue'
  13. import { Content } from '../../../core/libs/models'
  14. const id = ref()
  15. const type = ref()
  16. const bannerHome = ref<{
  17. coverVideoImage: string
  18. name: string
  19. playCount: number
  20. url: string
  21. indexPromotionalVideoImage: string
  22. detailsType: string
  23. id: string | number
  24. details: string
  25. createTime: string | number
  26. }>({
  27. coverVideoImage: '',
  28. name: '',
  29. url: '',
  30. indexPromotionalVideoImage: '',
  31. detailsType: '',
  32. id: 0,
  33. details: '',
  34. createTime: 0,
  35. playCount: 0,
  36. })
  37. const detailArticle = computed(() => {
  38. if (type.value === 'banner') {
  39. return {
  40. isBanner: true,
  41. ...data.value,
  42. }
  43. } else if (type.value === 'home-banner') {
  44. return {
  45. isBanner: true,
  46. title: bannerHome.value.name,
  47. contentDetail: bannerHome.value.details,
  48. createTime: bannerHome.value.createTime.toString(),
  49. viewsCount: bannerHome.value.playCount,
  50. }
  51. } else {
  52. return {
  53. isBanner: false,
  54. ...data.value,
  55. }
  56. }
  57. })
  58. const request = ref<() => Promise<IResData<Partial<Content>>>>()
  59. const { data, run } = useRequest(() => request.value(), { initialData: {} })
  60. const formatData = (res) => {
  61. return {
  62. data: {
  63. isBanner: true,
  64. title: res.name,
  65. contentDetail: res.bannerDetailsContent,
  66. },
  67. }
  68. }
  69. onLoad(async (query: { id: string; type?: 'banner'; data?: string }) => {
  70. id.value = query.id
  71. type.value = query.type
  72. if (type.value === 'banner') {
  73. request.value = () =>
  74. getBanner(id.value).then((res) => {
  75. uni.setNavigationBarTitle({
  76. title: res.data?.name,
  77. })
  78. return {
  79. ...res,
  80. data: {
  81. isBanner: true,
  82. title: res.data?.name,
  83. contentDetail: res.data?.bannerDetailsContent,
  84. createTime: res.data?.createTime.toString(),
  85. viewsCount: res.data?.viewCount,
  86. },
  87. }
  88. })
  89. } else if (type.value === 'home-banner') {
  90. console.log('home-banner', JSON.parse(query.data))
  91. bannerHome.value = JSON.parse(query.data)
  92. uni.setNavigationBarTitle({
  93. title: bannerHome.value.name,
  94. })
  95. } else {
  96. request.value = () => getContent({ id: id.value })
  97. }
  98. await run()
  99. })
  100. onShareAppMessage(() => ({
  101. title: data.value?.title,
  102. }))
  103. onShareTimeline(() => ({
  104. title: data.value?.title,
  105. }))
  106. </script>
  107. <template>
  108. <div class="flex-grow bg-white">
  109. <Article
  110. :isBanner="detailArticle.isBanner"
  111. :title="detailArticle?.title"
  112. :author="{ name: '筑巢荟' }"
  113. :content="detailArticle?.contentDetail"
  114. :createAt="detailArticle?.createTime"
  115. :viewNum="detailArticle?.viewsCount || 0"
  116. >
  117. <template #avatar><wd-img width="28" height="28" :src="logo"></wd-img></template>
  118. </Article>
  119. </div>
  120. </template>