hfysite/pages/manger/news/info.vue

<script>
import RoundedTitle from "@/components/public/roundedTitle.vue";
import {getQueryString} from "@/until/domTool";
import {apiMap} from "@/map/apiMap";
import {rCode} from "@/map/rcodeMap_esm";
import {handle} from "@/until/handle";
import {unescapeHtml} from "@/until/unescapeHtml";
import {timestampToTime} from "@/until/time";

export default {
  name: "newsInfo",
  components: {RoundedTitle},

  data(){
    return {
      loading: false,
      newsInfo: {},

    }
  },
  beforeMount() {
    // 获取路径中的id值
    this.newsId = getQueryString('id');
    if( !this.newsId ){
      this.$message.error('未获取到文章id');
      window.location.href = "/manger/news";
      return ;
    }
    console.log(this.newsId);
    this.loadNewsInfo();

  },
  methods: {
    async loadNewsInfo(){
        let newsId = this.newsId;
        if( !newsId ){
          this.$message.error('未获取到文章id');
          return;
        }
        this.loading = true;
        let [err,res] = await handle(this.$axios.get(`${apiMap.newsInfo.path}/${newsId}`));
        this.loading = false;
        if(err){
          this.$message.error('获取文章信息失败');
          return console.log(err);
        }
      let  result = res.data;
      if (result.code === rCode.OK){
        this.$message.success('');
        let pageData = result.data;
        pageData.htmlContent = unescapeHtml(pageData.content);
        pageData.createTime = timestampToTime(pageData.date_time);
        //
        this.newsInfo = result.data;
        console.log(this.newsInfo);
      }else{
        this.$message.error(`获取文章信息失败,${result.msg}`);
      }
    }
  }
}
</script>

<template>
  <div class="w-full p-2">
    <rounded-title class="text-xl">
      <span>文章详情</span>
      <a href="/manger/news"
         class="px-10 h-full ml-5 rounded bg-blue-400 text-white cursor-pointer
        hover:text-orange-500 ">文章中心</a>
    </rounded-title>
    <div class="page-content-box w-full mt-2 p-0.5  rounded bg-white">
      <div class="page-title">{{newsInfo.title}}</div>
      <div class="w-full mt-2">
        <div class="w-full">
          <div class="w-full flex justify-between">
            <div class="w-1/2">
              <span>作者:</span>
              <span>{{newsInfo.author}}</span>

            </div>
            <div class="w-1/2">
              <span>发布时间:</span>
              <span>{{newsInfo.createTime}}</span>
            </div>
          </div>
        </div>

      </div>
      <div class="w-full mt-2">
        <div class="w-full">
          <div class="w-full mt-2 border border-gray-400 rounded p-0.5" v-html="newsInfo.htmlContent">
          </div>
        </div>
      </div>
    </div>
  </div>
</template>

<style scoped>
.page-title{
  font-size: 1.5rem;
  font-weight: bold;

}
</style>