YzXyh_v3/UI/XYH.APP/src/pages-sub/news/detail.vue

<template>
  <view v-if="ready" class="page-container">
    <vb-cell-group>
      <view class="flex-column pos-r p-15">
        <view class="py-5 fs-20 font-bold">{{ news.title }}</view>
        <view class="d-flex justify-between  align-center">
          <view class="d-fcv py-10 ps-5 text-gray-5">
          {{ formatDate(news.date, "YYYY-MM-DD") }} {{ news.categoryName }}
          </view>
          <vb-share :title="news.title" :path="`/sub-page/news/detail?id=${news.newsId}`" :type="0"></vb-share>
        </view>
        <view class="my-5">
          <rich-text :nodes="news.content"></rich-text>
        </view>
        <view class="mt-10" v-if="images.length > 0">
          <vb-image :images="images"></vb-image>
        </view>
      </view>
    </vb-cell-group>
    <Comment :source-id="newsId" source-type="news"></Comment>
  </view>
  <view v-else class="d-fc h-200px bg-tran">
    <vb-loading color="var(--vb-color)" :show-text="true"></vb-loading>
  </view>
</template>

<script lang="ts" setup>
import dayjs from "dayjs"
import apis from "@/api"
import route from "@/route"
import configs from "@/core/config"
import Comment from "@/components/comment.vue"

const params = route.getRouteParams("newsDetail")
const ready = ref(false)
const news = ref<any>({})
const newsId = ref(params.id)

function formatDate(date: any, format = "YYYY-MM-DD") {
  return dayjs(new Date(date)).format(format)
}

const images = computed(() => {
  if (news.value.images) {
    return news.value.images.split(",").map((item: string) => configs.baseUrl + "/oss/preview/" + item)
  }
  return []
})

function loadData() {
  if (newsId.value) {
    apis.amActivity.newsApi.getNews(newsId.value).then((res) => {
      news.value = res
      ready.value = true
    })
  }
}

function read() {
  if (newsId.value) {
    apis.amActivity.statisticsApi.read(newsId.value, "news").then(() => {})

  }
}

onLoad((e:any) => {
  if (!newsId.value&&e.hasOwnProperty('id')) {
    newsId.value=e.id
  }
  read()
})
onShow(loadData)  
</script>

<style scoped></style>