Lexus-media/src/views/notification/detail/itemDetail.vue

<template>
  <div class="notice_jingXiaoshang_detail">
    <div class="titleBox">
        <!-- <div class="titleStyle">【{{contentData.title}}】{{contentData.addtime}}</div> -->
        <div class="titleStyle">{{contentData.title}}</div>
        <span @click="backToPre()">返回上一级</span>
    </div>
    <div style=" border: 1px solid  #ccc"></div>
    <div class="content">
        <!--{{contentData.content || '-'}}-->
        <p v-html="contentData.content"></p>
    </div>
      <div class="files">
          <p style="width: 65px">附件：</p>
          <div class="filesName">
              <p v-for="(item, index) in contentData.files"
              :key="index"
              @click="downloadFile(item)">
                  {{ item.file_name || '-'}}
              </p>
          </div>
      </div>
  </div>
</template>

<script>
import { php_url } from "../../../config/env";
import axiosPhp from "axios";
export default {
  components: {},
  data() {
    return {
        contentData:{},
        unifiedUrl:'/lexus_php/api/',
    };
  },
  computed: {},
  methods: {
    backToPre() {
     this.$router.back(-1)
    },
    // 下载附件
    downloadFile: function (item) {
      console.log(item);
      let url = php_url + item.file_url;
      window.open(url);
    },
     getDetailInfo:function (info) {
         axiosPhp({
             method: "post",
             url: php_url + this.unifiedUrl + "notice_content.php",
             data: {
                 id:info.id,
                 agentId:info.agentId
             },
         })
         .then((res) => {
             console.log(res)
             if (res.data.code === 200) {
                console.log(res)
                this.contentData = {
                    addtime:res.data.addtime,
                    content:res.data.content,
                    title:res.data.title,
                    files:res.data.files
                }
             }
         })
         .catch((err) => {
             alert(err)
         });
     }

  },
    created() {},
    mounted() {
        this.contentData = this.$route.query;
        this.getDetailInfo(this.contentData)
    }
};
</script>


<style scoped lang="less">
.titleBox{
    display: flex;
    align-items: center;
    justify-content: space-between;
}
.titleBox span{
    color: #0000ff;
    text-align: right;
    cursor: pointer;
}
.notice_jingXiaoshang_detail {
    margin-left: 32px;
}
.titleStyle {
    font-weight:bold;
    font-size: 16px;
    height: 50px;
    line-height: 50px;
}
.content {
    margin-top: 16px;
}
.files {
    display: flex;
    margin-top: 20px;
    .filesName {
        p {
            color: #0056a0;
            &:hover{
                cursor: pointer;
            }
        }
    }
}
</style>