heshui_shop_frontend/pages/announcement/detail.vue

<template>
  <s-layout :title="state.type" :bgStyle="{ color: '#fff' }">
   <view class="detail">
      <view v-if="state.type === '公告详情'" class="detail-header">
        <view  class="detail-header-title">{{ state.title }}</view>
        <view  class="detail-header-time">{{ dayjs(state.time).format('YYYY.MM.DD') }}</view>
      </view>
      <view class="detail-content" v-html="state.detailContent"></view>
    </view>
  </s-layout>
</template>

<script setup>
  import sheep from '@/sheep';
  import { onLoad } from '@dcloudio/uni-app';
  import { reactive } from 'vue';
  import dayjs from 'dayjs';

  const state = reactive({
    detailContent: '',
    type: '公告详情',
    title: '',
    time: '',
  });
  // 获取公告列表
  async function getNoticeDetail(id) {
    let { code, data: { content, title, createtime }, msg } = await sheep.$api.announcement.detail(id);
    if (code === 1) {
      state.detailContent = content;
      state.title = title;
      state.time = createtime;
    } else {
      state.detailContent = '';
      state.title = '';
      state.time = '';
    }
  }
  async function getArticleDetail(id) {
    let { code, data: { content }, msg } = await sheep.$api.businessSchool.articleDetail(id);
    if (code === 1) {
      state.detailContent = content;
    } else {
      state.detailContent = '';
    }
  }

  
  onLoad((options) => {
    const { type, id } = options;
    state.type = type;
    if ('公告详情' === type || !type) {
      getNoticeDetail(id);
    } else {
      getArticleDetail(id);
    }
  });
</script>
<style lang="scss" scoped>
.detail {
  padding: 20rpx;
  &-header {
    text-align: center;
    &-title {
      color: #000;
      font-size: 30rpx;
      font-weight: bold;
      margin-bottom: 10rpx;
    }
    &-time {
      color: #898989;
      font-size: 24rpx;
      font-weight: 400;
      margin-bottom: 10rpx;
    }
  }
  &-content {}
}
</style>