details.vue

<template>
  <div class="info">
    <div class="info-header">学习内容详情</div>
    <div class="info-container">
      <div class="info-wrapper">
        <el-form
          class="demo-form-inline"
          :inline="true"
          :model="formInline"
          label-position="top"
        >
          <el-form-item label="学习内容名称" class="w50">
            <span>{{ formInline.name }}</span>
          </el-form-item>
          <el-form-item label="学习内容宣传图" class="w50">
            <img class="imgSize" :src="formInline.cover" alt />
          </el-form-item>
        </el-form>
        <el-collapse v-model="activeNames" @change="handleChange">
          <el-collapse-item
            v-for="(item, index) in formInline.exhibitionBoardList"
            :key="index"
            :title="item.name"
          >
            <el-form
              class="demo-form-inline"
              :inline="true"
              :model="formInline"
              label-position="top"
            >
              <el-form-item label="展板宣传图"  class="w100">
                <img v-if="item.cover && item.cover !== ''" class="imgSize" :src="item.cover" alt />
                <div v-else>&nbsp;&nbsp;暂无数据</div>
              </el-form-item>
              <el-form-item label="展板版权方" class="w50" >
                <span>{{ item.boardCopyrightOwnerName }}</span>
              </el-form-item>
              <el-form-item label="展板名称">
                <span v-if="item.name && item.name !== ''">{{ item.name }}</span>
                <div v-else>&nbsp;&nbsp;暂无数据</div>
              </el-form-item>
             
              <el-form-item label="展板简介" class="w100">
                <span v-if="item.remarks && item.remarks !== ''">{{ item.remarks }}</span>
                <div v-else>&nbsp;&nbsp;暂无数据</div>
              </el-form-item>
              <el-form-item label="展板视频" class="w100">
                <div class="video-box" v-if="item.videoList && item.videoList.length >0 ">
                  
                  <div
                  @contextmenu.prevent
                    class="video-item"
                    v-for="vi in item.videoList"
                    :key="vi.id"
                  >
                  <video :poster="vi.thumbnail" controls controlsList='nodownload noremote footbar'>
                    <source :src="vi.fileUrl" />
                  </video>
                  <span>&nbsp;&nbsp;&nbsp;&nbsp;</span>
                    <span>&nbsp;{{ vi.fileName }}</span>
                  </div>
                </div>
                <div v-else>&nbsp;&nbsp;暂无数据</div>
              </el-form-item>
              <el-form-item label="展板音频">
                <div class="audio-box" v-if="item.audioList &&item.audioList.length>0">
                  <div
                    class="audio-item"
                    v-for="(au, index) in item.audioList"
                    :key="index"
                  >
                    <audio :src="au.fileUrl" controls />
                    <span>{{ au.fileName }}</span>
                  </div>
                </div>
                <div v-else>&nbsp;&nbsp;暂无数据</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() {
    return {
      activeNames: [1],
      formInline: {},
    };
  },
  mounted() {
    this.init();
  },
  methods: {
    init() {
      if(this.$route.query.id){
        this.getInfo(this.$route.query.id,'learningContent/get/');
      }else if(this.$route.query.auditId){
        this.getInfo(this.$route.query.auditId,'learningContent/getAudit/');
      }
      
    },
    //  获取版权方详情
    getInfo(id,url) {
      let vm = this;
      vm.$https(
        {
          url: url + id,
          method: "get",
          authType: this.backToken,
        }
        // param
      )
        .then((res) => {
          let data = res.data.data;
          vm.formInline = data;
          const boardList = data.exhibitionBoardList 
          for(var i=0;i<boardList.length;i++){
            for(var j=0;j<boardList[i].videoList.length;j++){
              boardList[i].videoList[j].fileUrl = Base64.decode(boardList[i].videoList[j].intro)
            }
          }
          // console.log(boardList)
          vm.formInline.exhibitionBoardList = boardList
          // console.log(1111,vm.formInline.exhibitionBoardList)
          // console.log(this.formInline.exhibitionBoardList[0].videoList); 
        })
        .catch(function (err) {
          console.log(err);
        });
    },
    close() {
      history.go(-1);
    },
    handleChange(val) {
      // console.log(val);
    },
  },
};
</script>

<style lang="less">
.video-box {
  width: 100%;
  .video-item {
    width: 100%;
     video {
    width: 300px;
    height: 200px;
  }
  }
 
}
audio:focus {
  outline: none;
}
.audio-item{
  padding-bottom:10px;
  display: flex;
  align-items: center;
  span{
    margin-left: 30px;
  }
}
</style>