labsop_scientific_h5/pages/notice/detail.vue

<template>
  <view class="detail-page-container">
    <view class="notice-header">
      <view class="notice-title">{{ info.noticeTitle }}</view>
      <view class="notice-meta">
        <text class="author">发布人：{{ info.createdName || '-' }}</text>
        <text class="time">{{ info.noticeTime || '-' }}</text>
      </view>
    </view>
    
    <scroll-view scroll-y class="detail-body">
      <view class="content-box">
        <uv-parse v-if="info.noticeContent" :content="info.noticeContent"></uv-parse>
        <uv-empty v-else mode="data" text="暂无内容"></uv-empty>
      </view>
    </scroll-view>
  </view>
</template>

<script setup lang="ts">
import { ref } from 'vue';
import { onLoad } from '@dcloudio/uni-app';
import { useSystemApi } from '@/api/system/index';

const systemApi = useSystemApi();
const info = ref<any>({});

const fetchDetail = async (id: string | number) => {
  try {
    const res: any = await systemApi.getNoticeDetail(id);
    if (res.code == 200) {
      info.value = res.data || {};
    }
  } catch (error) {
    console.error(error);
  }
};

onLoad((options: any) => {
  if (options.id) {
    fetchDetail(options.id);
  }
});
</script>

<style lang="scss" scoped>
.detail-page-container {
  height: 100vh;
  display: flex;
  flex-direction: column;
  background-color: #fff;
}

.notice-header {
  padding: 40rpx 30rpx;
  border-bottom: 2rpx solid #f2f2f2;

  .notice-title {
    font-size: 36rpx;
    font-weight: bold;
    color: #333;
    line-height: 1.4;
    margin-bottom: 24rpx;
  }

  .notice-meta {
    display: flex;
    font-size: 24rpx;
    color: #999;

    .author {
      margin-right: 30rpx;
    }
  }
}

.detail-body {
  flex: 1;
  overflow: hidden;

  .content-box {
    padding: 30rpx;
    line-height: 1.6;
    color: #555;
    font-size: 30rpx;
    word-break: break-all;
  }
}
</style>