YY_MP_REFACTOR/src/pages/information/detail/index.vue

<template>
  <view class="detail-page">
    <view v-if="detail" class="detail">
      <view v-if="title" class="detail-title">
        {{ title }}
      </view>

      <view v-if="createTime || author" class="detail-meta">
        <view v-if="createTime">{{ createTime }}</view>
        <view v-if="author" class="detail-author">{{ author }}</view>
      </view>

      <view v-if="drugName" class="detail-drug"> 关联药品：{{ drugName }} </view>
      <view v-if="content" class="detail-content">
        <MpHtml :content="content" />
      </view>
    </view>

    <view v-else class="empty">暂无内容</view>
  </view>
</template>

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

import { onLoad } from '@dcloudio/uni-app'
import MpHtml from 'mp-html/dist/uni-app/components/mp-html/mp-html'

import { getAlbumByIdApi, getArticleByIdApi } from '@/services/modules/information'
import type { AlbumPageNewItem, ArticleItem } from '@/services/modules/information/type'

type DetailType = 'academic' | 'album'
type DetailItem = ArticleItem | AlbumPageNewItem

interface PageQuery {
  id?: string
  type?: DetailType
}

const detail = ref<DetailItem>()
const detailType = ref<DetailType>('academic')

const isArticle = computed(() => detailType.value === 'academic')

const articleDetail = computed(() => detail.value as ArticleItem | undefined)
const albumDetail = computed(() => detail.value as AlbumPageNewItem | undefined)

const title = computed(() => {
  return isArticle.value ? articleDetail.value?.title : albumDetail.value?.xcmc
})

const createTime = computed(() => detail.value?.createTime?.slice(0, 10) || '')

const author = computed(() => {
  return isArticle.value ? articleDetail.value?.author : albumDetail.value?.createUser || ''
})

const drugName = computed(() => {
  if (isArticle.value) return ''
  return albumDetail.value?.glypName || albumDetail.value?.glyp || ''
})

const content = computed(() => {
  const html = isArticle.value ? articleDetail.value?.content : albumDetail.value?.wb

  return formatRichText(html || '')
})

onLoad((query) => {
  const { id, type = 'academic' } = query as PageQuery

  if (!id) return

  detailType.value = type

  void getDetail(id)
})

const getDetail = async (id: string): Promise<void> => {
  try {
    const { data } =
      detailType.value === 'academic' ? await getArticleByIdApi(id) : await getAlbumByIdApi(id)

    detail.value = data
  } catch (error) {
    console.error('get detail failed:', error)

    uni.showToast({
      title: '详情加载失败',
      icon: 'none',
    })
  }
}

const formatRichText = (html: string): string => {
  return html
    .replace(
      /<img\b(?![^>]*\bstyle=)/gi,
      '<img style="max-width:100%;height:auto;display:block;margin:20rpx 0;"'
    )
    .replace(
      /<video\b(?![^>]*\bstyle=)/gi,
      '<video style="width:100%;height:auto;display:block;margin:20rpx 0;"'
    )
}
</script>

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

.detail {
  padding: 36rpx 30rpx 60rpx;
}

.detail-title {
  color: #222222;
  font-size: 42rpx;
  font-weight: 600;
  line-height: 1.45;
}

.detail-meta {
  margin-top: 18rpx;
  color: #999999;
  font-size: 26rpx;
  line-height: 1.5;
}

.detail-author {
  margin-top: 24rpx;
}

.detail-drug {
  margin-top: 24rpx;
  padding: 18rpx 20rpx;
  border-left: 6rpx solid #3b82f6;
  border-radius: 8rpx;
  background-color: #f5f8ff;
  color: #4b5563;
  font-size: 26rpx;
  line-height: 1.5;
}

.detail-content {
  margin-top: 34rpx;
  color: #333333;
  font-size: 31rpx;
  line-height: 1.8;
  word-break: break-word;
}

.empty {
  padding: 120rpx 30rpx;
  color: #999999;
  font-size: 28rpx;
  text-align: center;
}
</style>