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: {},
      newsId: '',
      editUrl_: ''
    }
  },
  beforeMount() {
    // 获取路径中的id值
    this.newsId = getQueryString('id');
    if( !this.newsId ){
      this.$message.error('未获取到文章id');
      window.location.href = "/manger/news";
      return ;
    }
    this.loadNewsInfo();
  },
  computed:{
    editUrl: function(){
      let id = this.newsInfo.id;
      return `/manger/news/edit?id=${id}`
    }
  },
  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}`);
      }
    },
    deleteArticle(){
      this.$confirm({
        content: '确定要删除吗？',
        okText: '确定',
        cancelText: '取消',
        onOk: () => {
          this.executeDeleteArticle();
        }});
    },
    async executeDeleteArticle(){
      let newsId = this.newsInfo.id;
      if (!newsId)
        return this.$message.error('未获取到文章id');
      let url = apiMap.newsDelete.path;
      url += `?id=${newsId}`
      let [err,res] = await handle(this.$axios.delete(url, {id: newsId}));
      if(err){
        this.$message.error(`[删除文章] 失败:${err.message}`)
        console.log(err)
        return err
      }
      let result = res.data
      if(result.code !== rCode.OK) {
        this.$message.error(`[删除文章] 失败:${result.msg}`)
        return result
      }
      this.$message.success(`[删除文章] 成功`)
      window.location.href = "/manger/news";
    }
  }
}
</script>

<template>
  <div class="w-full p-2">
    <rounded-title class="text-xl flex align-items justify-around">
      <div>
        <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>
      </div>

      <a
        :href="editUrl"
        class="edit-btn custom-btn btn-13">编辑</a>
      <a-button @click="deleteArticle">
        <a-icon type="delete" />
      </a-button>
    </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>