yos_web/src/SManagement/notice/notice_detail/NoticeDetail.vue

<template>
  <div class="normal-card">
    <div class="title-box">
      <div class="title">{{detailData.title}}</div>
      <div>
        <div class="descript">{{detailData.summary}}</div>
        <div class="info">
          <span class="tag">{{detailData.classname}}</span>
          <span>{{detailData.createdate}}</span>
        </div>
      </div>
    </div>
    <div class="text-content" v-if="detailData.content != '<p><br></p>'">
      <div id="fwb"></div>
    </div>
    <div class="file-content"  v-if="detailData.attinfos && detailData.attinfos.length > 0">
      <div class="file-download">
        <p class="title">附件下载</p>
        <div class="file-list">
          <file-item 
                    :isDownLoad="true" 
                    :itemStyle="itemStyle" 
                    :sat_noticeid="detailData.sat_noticeid" 
                    :fileData="detailData.attinfos"
                    @updateDownLoadRecord="updateDownLoadRecord">
          </file-item>
        </div>
      </div>
    </div>
    <div class="comments">
      <div class="score-box">
        <p>评分反馈</p>
        <div class="handle">
          <p>总体</p>
          <el-rate v-model="send.content.score" :disabled="!commentData.leavemessage == false" :colors="scoreColor"></el-rate>
          <p>满意</p>
        </div>
        <p>{{detailData.readpersoncount}}人评分</p>
      </div>
      <div class="text-box">
        <p>留言反馈</p>
        <div class="comment-panl">
          <el-input type="textarea" :rows="4" placeholder="请填写留言" resize="none" :disabled="!commentData.leavemessage == false" v-model="send.content.leavemessage">
          </el-input>
          <el-button type="success" size="small" :disabled="!commentData.leavemessage == false" @click.native="sendComment()">发表</el-button>
        </div>
      </div>
    </div>
  </div>
</template>

<script>
import FileItem from '@/components/file-block/index2'
export default {
  name: "NoticeDetail",
  data () {
    return {
      //拉取数据配置
      param: {
          "classname": "saletool.notice.notice",
          "method": "queryNoticeMain",
          "content": {   
              "sat_noticeid":4

          }
      },
      //发表配置
      send: {
        "classname": "saletool.notice.notice",
        "method": "updateReadRecord",
        "content": {
          "sat_noticeid": this.$route.query.id,
          "score": 0,
          "leavemessage": ""
        }
      },
      //itemfile样式
      itemStyle: {
        itemWidth: 360,
        margin:20,
        img: {
          width: 29,
          height: 29
        },
        title: 14,
        descript: 10
      },
      score: 0,
      scoreColor: ["#99A9BF", "#F7BA2A", "#FADB14"],
      textarea: "",
      //详情数据
      detailData: '',
      //评论数据
      commentData:''
    };
  },
  components: {
    FileItem
  },
  filters: {

  },
  computed: {},
  watch: {},
  created () {
    this.getNoticeDetail()
    this.getCommentDetail()
  },
  mounted () {
  },
  methods: {
    //解析富文本
    compileFWB () {
      document.getElementById('fwb').innerHTML = this.detailData.content
    },
    //获取详情数据
    async getNoticeDetail () {
      this.param.content.sat_noticeid = this.$route.query.id
      let res = await this.$api.requested(this.param)
      this.detailData = res.data
      this.detailData.attinfos = this.fileType.fileList(this.detailData.attinfos)
      this.detailData.content != '<p><br></p>' ? this.compileFWB() : ''
    },
    //发表
    async sendComment () { 
      if (!this.send.content.leavemessage == true || this.send.content.score == 0) {
        this.$notify({
          title:'提示',
          message:'请填写评论或评分',
          type:'warning'
        })
        return
      } else {
        let res = await this.$api.requested(this.send)
        this.tool.showMessage(res,() => {
          this.getCommentDetail()
        })
      }
      
    },
    //获取评论
    async getCommentDetail() {
      let res = await this.$api.requested({
        "accesstoken": "148928f55b25f5c4636d5ae7cd339f93",
        "classname": "saletool.notice.notice",
        "method": "queryReadRecord",
        "content": {
            "sat_noticeid":this.$route.query.id
        }
      })
      this.commentData = res.data[0]    
      this.send.content.score = res.data[0].score
      this.send.content.leavemessage = res.data[0].leavemessage
    },
    //更新下载记录
    async updateDownLoadRecord(data) {
      let res = await this.$api.requested({
        "classname": "saletool.notice.notice",
        "method": "updateDownloadRecord",
        "content": {
          "sat_noticeid":this.$route.query.id
        }
      })
    }
  }
};
</script>

<style scoped>
*{
  box-sizing: border-box;
}
.fwb-img {
  width: 50% !important;
}
.title {
  font-size: 14px;
  font-family: PingFang SC-Bold, PingFang SC;
  font-weight: bold;
  color: #333333;
}
.normal-card {
  padding: 30px;
  margin-top: 10px;
  font-family: PingFang SC-Regular;
  margin: 0 auto;
}
.normal-card .title-box {
  padding-bottom: 20px;
  border-bottom: 1px solid #eeeeee;
  display: flex;
  flex-direction: column;
}
.normal-card .title-box .title {
  line-height: 24px;
  padding-bottom: 10px;
  font-size: 25px;
  border-bottom: 1px solid #eeeeee;
}
.normal-card .title-box .descript {
  font-size: 14px;
  font-family: PingFang SC-Bold, PingFang SC;
  color: #333333;
  line-height: 24px;
  padding-top: 10px;
}
.normal-card .title-box .info {
  line-height: 16px;
  margin-top: 10px;
  font-size: 12px;
  display: flex;
  align-items: center;
}
.normal-card .title-box .info .tag {
  border: 1px solid #fa8c16;
  color: #fa8c16;
  margin-right: 10px;
  text-align: center;
  font-size: 10px;
  display: inline-block;
  padding: 2px 5px;
}
.normal-card .text-content {
  padding: 20px 0;
  border-bottom: 1px solid #eeeeee;
  font-size: 12px;
}
.normal-card .text-content #fwb {
}
#fwb img {
  width: 200px !important;
}
.normal-card .file-content {
  border-bottom: 1px solid #eeeeee;
  font-size: 12px;
}
.normal-card .file-content .title {
  margin: 10px 0;
}
.normal-card .file-content video {
  margin-top: 10px;
}
.normal-card .file-content .title {
  margin-bottom: 10px;
}
.normal-card .file-content .file-download .file-list {
  display: flex;
  flex-wrap: wrap;
  padding-bottom: 8px;
}
.normal-card .comments {
  margin-top: 20px;
}
.normal-card .comments .score-box {
}
.normal-card .comments .score-box p:first-child {
  font-size: 14px;
  font-family: PingFang SC-Bold, PingFang SC;
  font-weight: bold;
  color: #333333;
}
.normal-card .comments .score-box .handle {
  margin-top: 22px;
  display: flex;
}
.normal-card .comments .score-box .handle p:first-child {
  font-size: 14px;
  font-weight: 400;
  color: #333333;
  margin-right: 20px;
}
.normal-card .comments .score-box p:last-child {
  font-size: 12px;
  font-weight: 400;
  color: #999999;
  margin-top: 12px;
}
.normal-card .comments .score-box .handle p:last-child {
  font-size: 14px;
  font-weight: normal;
  color: #262626;
  margin-left: 20px;
  margin-top: 0;
}
.normal-card .comments .text-box {
  margin-top: 40px;
}
.normal-card .comments .text-box p {
  font-size: 14px;
  font-family: PingFang SC-Bold, PingFang SC;
  font-weight: bold;
  color: #333333;
}
.normal-card .comments .text-box .comment-panl {
  margin-top: 10px;
}
.normal-card .comments .text-box .comment-panl .el-input {
  min-height: 64px;
}
.normal-card .comments .text-box .comment-panl .el-button {
  background: #52c41a;
  margin-top: 10px;
}
.file-see img,video {
  max-width: 100%;
}
</style>