zjugis_OA/client/src/AppNews.vue

<template>
  <div class="lookDetailBox">
    <div>
      <h2>{{ detailForm.title }}</h2>
      <p>
        <span>发布时间：{{ detailForm.adddate }}</span>
        <span style="margin-left: 60px">阅读次数：{{ detailForm.readNum }}</span>
      </p>
      <div v-html="detailForm.content"></div>
    </div>
  </div>
</template>
<script setup lang="ts">
import request from '@/config/axios'

const detailForm = ref<{
  title: string
  adddate: string
  readNum: number
  content: string
}>({
  title: '',
  adddate: '',
  readNum: 0,
  content: ''
})

async function queryDetailById(idStr: any): Promise<void> {
  const urlApi = `/adm/article/query/detailById`
  const params = {
    id: idStr
  }
  const result = await request.get({ url: urlApi, params })
  if (result) {
    detailForm.value = result
  }
}
function addReadNum(idStr: any) {
  const urlApi = `/adm/article/readNum/add`
  const params = {
    id: idStr
  }
  request.get({ url: urlApi, params })
}
const getUrlParams = (url: string) => {
  const arr1 = url.split('?')
  const arr2 = arr1[arr1.length - 1].split('&')
  const map = {}
  arr2.forEach((item) => {
    const arr3 = item.split('=')
    map[arr3[0]] = arr3[1]
  })
  return map
}
const query = getUrlParams(location.href) as {
  id: string
}
if (query.id) {
  queryDetailById(query.id)
  addReadNum(query.id)
}
</script>
<style lang="scss" scoped>
.lookDetailBox {
  background-color: #fff;
  padding: 20px 0px;
  position: relative;
  > div {
    width: 60vw;
    margin: auto;
    > h2 {
      text-align: center;
      font-size: 36px;
      font-weight: bold;
    }
    > p {
      text-align: center;
      padding: 40px;
      color: #444452;
      border-bottom: solid 1px #d8d8d8;
      margin-bottom: 30px;
    }
  }
}
</style>