learnDetail.vue

<template>
  <div class="learn-detail-page-content">
    <Header title="学习内容详情" />
    <div class="page-wrapper">
      <div class="title-content">
        <div class="row-body">
          <div class="title-label">学习内容名称</div>
          <div class="title-body">{{ list.name }}</div>
        </div>
        <div class="row-body">
          <div class="title-label">学习内容宣传图</div>
          <div class="title-body">
            <img :src="list.cover" alt="" />
          </div>
        </div>
      </div>
      <van-collapse v-model="activeNames" accordion>
        <van-collapse-item
          :name="item.id"
          :title="item.name"
          v-for="(item, index) in list.exhibitionBoardList"
          :key="index"
        >
          <div class="content">
            <div class="row-body">
              <div class="title-label">展板版权方</div>
              <div class="title-body">{{ item.boardCopyrightOwnerName }}</div>
            </div>
            <div class="row-body">
              <div class="title-label">展板宣传图</div>
              <div class="title-body">
                <img :src="item.cover" alt="" />
              </div>
            </div>
            <div class="detail-body">
              <div class="learn-title">展板简介</div>
              <div class="learn-body textarea">
                {{ item.remarks || '暂无数据'}}
              </div>
            </div>

            <div class="detail-body">
              <div class="learn-title">展板视频</div>
              <div class="learn-body" v-if="item.videoList.length">
                <span class="file-box" v-for="(s, i) in item.videoList" :key="i">
                  <video
                    controls
                    width="100%"
                    height="100%"
                    poster="@/assets/images/applets/video.png"
                  >
                    <source :src="s.fileUrl" />
                  </video>
                  <span>{{ s.fileName }}</span>
                </span>
              </div>
              <div class="learn-body" v-if="!item.videoList.length">暂无数据</div>
            </div>
            <div class="detail-body">
              <div class="learn-title">展板音频</div>
              <div class="learn-body">
                <span
                  class="file-box audio"
                  v-for="(s, i) in item.audioList"
                  :key="i"
                >
                  <audio
                    controls
                    width="100%"
                    height="100%"
                    poster="@/assets/images/applets/audio.png"
                  >
                    <source :src="s.fileUrl" />
                  </audio>
                  <span>{{ s.fileName }}</span>
                </span>
              </div>
              <div class="learn-body" v-if="!item.audioList.length">暂无数据</div>
            </div>
          </div>
        </van-collapse-item>
      </van-collapse>
    </div>
  </div>
</template>

<script>
import Header from "@/components/Header/index.vue";
export default {
  components: { Header },
  data() {
    return {
      activeNames: [],
      list: [],
    };
  },
  mounted() {
    this.id = this.$route.query.id;
    this.getContentInfo();
  },
  methods: {
    // 获取详情
    getContentInfo() {
      let vm = this;
      let param = {
        id: this.id,
      };
      vm.$https(
        {
          url: `learningContent/get/${this.id}`,
          method: "get",
          authType: this.backToken,
        },
        param
      )
        .then((res) => {
          if (res.data.resultCode === "200") {
            this.list = res.data.data;
            this.activeNames = this.list.exhibitionBoardList[0].id;
          } else {
            this.$toast(res.data.message);
          }
        })
        .catch(function (err) {
          console.log(err);
        });
    },
  },
};
</script>

<style lang="scss" scoped>
.learn-detail-page-content {
  padding: 50px 16px 16px;
  box-sizing: border-box;
  .page-wrapper {
    padding-top: 20px;
    width: 100%;
    height: calc(100vh - 80px);
    overflow-y: auto;
  }
  .title-content {
    padding: 0 10px;
  }
  .row-body {
    margin-bottom: 30px;
    display: flex;
    color: #333;
    .title-label {
      font-size: 14px;
      width: 140px;
    }
    .title-body {
      font-size: 16px;
      font-weight: 700;
      flex: 1;
      img {
        width: 160px;
        height: 100px;
      }
    }
  }
  ::v-deep .van-collapse-item__title {
    font-size: 16px;
    font-weight: 700;
    &:active {
      background-color: transparent;
    }
  }
  .van-hairline--top-bottom::after {
    border-width: 0;
  }
  .content {
    .learn-title {
      font-size: 14px;
      color: #333333;
      padding-bottom: 12px;
    }

    .detail-body {
      margin-bottom: 20px;
      .learn-body {
        display: flex;
        flex-wrap: wrap;
        padding-bottom: 12px;
        .file-box {
          width: 50%;
          padding: 10px;
          box-sizing: border-box;
        }
        .file-box.audio {
            width: 100%;
          }
        img {
          width: 32px;
          height: auto;
          padding: 0 5px;
          box-sizing: border-box;
          vertical-align: middle;
        }
      }
      .textarea {
        line-height: 1.5;
        color: #333;
      }
    }
  }
}
</style>