zjugis_OA/client_h5/src/pages/notice/details/index.vue

<template>
  <div class="notice_detail_box">
    <h2 class="title">{{ detail['title'] }}</h2>
    <div class="info">
      <div>
        <span>发布时间：{{ detail['createTime'] }}</span>
      </div>
      <div>
        <span>阅读次数：{{ detail['readNum'] }}</span>
      </div>
    </div>
    <div class="file_box">
      <span>附件：</span>
      <ul>
        <li v-for="(file, index) in fileUrls" @click="downloadFile(file['url'])"  :key="index">{{ file['name'] }}</li>
      </ul>
    </div>
    <div class="content" v-html="detail['content']"></div>
  </div>
</template>

<script setup lang="ts">
import request from "@/utils/request";
import { useFiles } from './mixins.ts'

const { fileUrls, queryFiles, downloadFile } = useFiles(request)

const detail = ref({
  title: '',
  createTime: '',
  readNum: 0,
  content: ''
});
/**
 * 获取详情
 * **/
 async function queryDetailById(idStr: any): Promise<void> {
  const urlApi = `/admin-api/adm/noticeAndLearn/query/detailById`
  const params = {
    id: idStr
  }
   const result = await request.get(urlApi, { params: params })
   const resultData = result.data;
  if (resultData) {
    detail.value = resultData
    queryFiles(resultData.files)
  }
}

function addReadNum(idStr: any) {
  const urlApi = `/admin-api/adm/noticeAndLearn/readNum/add`
  const params = {
    id: idStr
  }
  request.get(urlApi, { params: params })
}
function updateRead(idStr: any) {
  const urlApi = `/admin-api/adm/noticeAndLearn/read/update`
  const params = {
    id: idStr
  }
  request.get(urlApi, { params: params })
}
const route = useRoute()
const query = route.query
if (query.id) {
  queryDetailById(query.id)
  addReadNum(query.id)
  updateRead(query.id)
}
</script>

<style lang="scss" scoped>
.notice_detail_box {
  padding: 20px;
  >.info {
    display: flex;
    justify-content: space-between;
  }
  >.file_box {
    display: flex;
    margin-top: 15px;
    >span {
      color: #aaa;
      width: 80px;
    }
    >ul {
      >li {
        margin-bottom: 10px;
        color: #2e77e6;
      }
    }
  }
}
</style>