details.vue

<template>
  <div class="info info-board">
    <div class="info-header">展板内容详情</div>
    <div class="page-tip">
      <span class="tip-title">页面说明：</span>
      <span
        >可查看某块展板包含的所有文字及文件信息，视频及文档材料可下载到本地观看。</span
      >
    </div>
    <div class="info-container">
      <div class="info-wrapper">
        <el-collapse v-model="activeNames">
          <el-collapse-item title="审核意见" name="1">
            <el-form
              class="demo-form-inline"
              :inline="true"
              :model="reviewData"
              label-position="top"
            >
              <el-form-item label="审核层级" class="w100">
                <span class="w50 l-float">
                  <strong>初审：</strong>{{ reviewData.firstTime }}
                </span>
                <span class="w50">
                  <strong>复审：</strong>{{ reviewData.secondTime }}
                </span>
              </el-form-item>
              <el-form-item label="审核结果" class="w50">{{
                keyMap[reviewData.status]
              }}</el-form-item>
              <el-form-item
                label="驳回原因"
                v-if="reviewData.status === 'REFUSED'"
                >{{
                  reviewData.firstRemarks || reviewData.secondRemarks
                }}</el-form-item
              >
            </el-form>
          </el-collapse-item>
          <el-collapse-item title="展板基本信息" name="2">
            <el-form
              class="demo-form-inline"
              :inline="true"
              :model="contentData"
              label-position="top"
            >
              <el-form-item label="版权方" class="w50">{{
                contentData.boardCopyrightOwnerName
              }}</el-form-item>
              <el-form-item label="创建时间">{{
                contentData.createTime
              }}</el-form-item>
              <el-form-item label="展板分类" class="w50">{{
                contentData.exhibitionBoardCatName
              }}</el-form-item>
              <el-form-item label="上架情况">{{
                contentData.published ? "已上架" : "未上架"
              }}</el-form-item>
              <el-form-item label="审核情况" class="w50">{{
                keyMap[contentData.auditStatus]
              }}</el-form-item>
              <el-form-item label="展板图片" class="w50">
                <img class="imgSize" :src="contentData.cover" />
              </el-form-item>
               <el-form-item label="展板二维码" class="">
                <img class="imgSize" :src="contentData.qrcodeUrl" />
              </el-form-item>
              <el-form-item label="展板简介" class="w100">{{
                contentData.remarks
              }}</el-form-item>
            </el-form>
          </el-collapse-item>
          <el-collapse-item title="展板影音信息" name="3">
            <el-form
              class="demo-form-inline"
              :inline="true"
              :model="contentData"
              label-position="top"
            >
              <el-form-item label="展板视频" class="w100">
                <div v-if="contentData.videoList.length" @contextmenu.prevent>
                  <span
                    class="file-box"
                    v-for="(s, i) in contentData.videoList"
                    :key="i"
                  >
                    <video
                      controls
                      width="100%"
                      height="100%"
                      poster="images/applets/video.png"
                      controlsList='nodownload noremote footbar'
                    >
                      <source :src="s.fileUrl" />
                    </video>
                    <span>{{ s.fileName }}</span>
                  </span>
                </div>
                <div v-else>暂无数据</div>
              </el-form-item>
              <el-form-item label="展板音频">
                <div v-if="contentData.audioList.length">
                  <span
                    class=""
                    v-for="(s, i) in contentData.audioList"
                    :key="i"
                  >
                    <audio
                      style="float:left;"
                      controls
                      width="100%"
                      height="100%"
                      poster="images/applets/audio.png"
                      controlsList='nodownload'
                      oncontextmenu="return false"
                    >
                      <source :src="s.fileUrl" />
                    </audio>
                    <span style="float:left;display:inline-block;margin:10px 0px 20px 20px;">{{ s.fileName }}</span>
                  </span>
                </div>
                <div v-else>暂无数据</div>
              </el-form-item>
              <el-form-item label="展板图片" class="w100">
                <div v-if="contentData.imagesList.length">
                  <span
                    class="file-box"
                    v-for="(s, i) in contentData.imagesList"
                    :key="i"
                  >
                    <img class="imgSize" :src="s.fileUrl" alt />
                    <span>{{ s.fileName }}</span>
                  </span>
                </div>
                <div v-else>暂无数据</div>
              </el-form-item>
              <el-form-item label="展板文档(可点击查看或下载查看)" class="w100">
                <div v-if="contentData.dirList.length">
                  <span
                    class="dir-box"
                    v-for="(s, i) in contentData.dirList"
                    :key="i"
                    @click="reviewFile(s)"
                  >
                    <img
                      v-if="s.fileExtName === 'pdf'"
                      src="@/assets/pdf-icon.png"
                      alt=""
                    />
                    <img
                      v-if="s.fileExtName === 'pptx'"
                      src="@/assets/ppt-icon.png"
                      alt=""
                    />
                    <img
                      v-if="s.fileExtName === 'docx'"
                      src="@/assets/doc-icon.png"
                      alt=""
                    />
                    <img
                      v-if="s.fileExtName === 'mp4'"
                      src="@/assets/video-icon.png"
                      alt=""
                    />
                    <img
                      v-if="s.fileExtName === 'mp3'"
                      src="@/assets/audio-icon.png"
                      alt=""
                    />
                    <img
                      v-if="s.fileExtName === 'xls'"
                      src="@/assets/excel-icon.png"
                      alt=""
                    />
                    <span><a target="_blank" :href="s.fileUrl">{{ s.fileName }}</a></span>
                  </span>
                </div>
                <div v-else>暂无数据</div>
              </el-form-item>
            </el-form>
          </el-collapse-item>
        </el-collapse>
      </div>
    </div>
    <div class="info-footer">
      <div class="btn-group">
        <!-- 确定、取消 -->
        <el-button
          size="mini"
          type="primary"
          class="btn_form_search"
          @click="close"
          >关闭</el-button
        >
      </div>
    </div>
  </div>
</template>

<script>
let Base64 = require('js-base64').Base64
export default {
  data() {
    const keyMap = {
      TBC: "待初审",
      REFUSED: "已驳回",
      TBCA: "待复审",
      APPROVED_FINAL: "通过",
    };
    return {
      id: "",
      activeNames: ["1", "2", "3"],
      keyMap: keyMap,
      contentData: {
        imagesList:[],
        dirList:[],
        videoList:[],
        audioList:[]
      },
      reviewData: {},
    };
  },
  mounted() {
    this.id = this.$route.query.id;
    this.getReviewById();
    this.getContentById();
  },
  methods: {
    getContentById() {
      let vm = this;
      vm.$https({
        url: "exhibitionBoard/get/" + this.id,
        method: "get",
        authType: this.backToken,
      })
        .then((res) => {
          if (res.data.resultCode === "200") {
            vm.contentData = res.data.data;
            // console.log(vm.contentData.videoList)
            const videos = vm.contentData.videoList
            for(var i=0;i<videos.length;i++){
              videos[i].fileUrl = Base64.decode(videos[i].intro)
            }
            vm.contentData.videoList = videos
            vm.contentData.imagesList = [];
            vm.contentData.dirList = [];
            vm.contentData.datumList.forEach((item) => {
              if (item.fileType === "IMAGE") {
                vm.contentData.imagesList.push(item);
              } else {
                vm.contentData.dirList.push(item);
              }
            });
          } else {
            this.$message.error(res.data.message);
          }
        })
        .catch(function (err) {
          console.log(err);
        });
    },
    getReviewById() {
      let vm = this;
      const param = {
        id: this.id,
        type: "EXHIBITION_BOARD",
      };
      vm.$https(
        {
          url: "audit/getById",
          method: "get",
          authType: this.backToken,
        },
        param
      )
        .then((res) => {
          if (res.data.resultCode === "200") {
            vm.reviewData = res.data.data || {};
          } else {
            this.$message.error(res.data.message);
          }
        })
        .catch(function (err) {
          console.log(err);
        });
    },
    reviewFile() {
      console.log("点击预览。。。");
    },
    close() {
      this.$router.go(-1);
    },
  },
};
</script>
<style lang="less" scoped>
.info-board {
  .file-box {
    display: inline-block;
    width: 180px;
    height: 180px;
    margin: 0 10px;
  }
  .info-container {
    height: calc(100% - 250px);
  }
  /deep/.el-collapse-item__wrap {
    padding: 16px;
  }
  /deep/.el-collapse-item__header {
    position: relative;
    padding-left: 20px;
    font-size: 18px;
    color: #333;
    &::before {
      content: "";
      position: absolute;
      top: 14px;
      left: 0px;
      width: 4px;
      height: 18px;
      background: #000;
    }
  }
  .page-tip {
    width: 640px;
    background: #f7f5f2;
    border-radius: 8px;
    padding: 16px 20px;
    margin: 20px auto;
    font-size: 14px;
    color: #333333;
    .tip-title {
      font-weight: 700;
      margin-right: 5px;
    }
  }
  .dir-box {
    display: block;
    width: 100%;
    height: 96px;
    img {
      width: 96px;
      height: 96px;
      vertical-align: middle;
    }
    span {
      margin-left: 10px;
      line-height: 96px;
    }
  }
}
</style>