pbl-teacher-table/src/components/pages/courseDetail.vue

<template>
  <div class="pb_content">
    <div class="pb_head">
      <span>课程管理</span>
    </div>
    <div
      class="pb_content_body"
      style="width: 100%; height: 89%; overflow: hidden"
    >
      <div class="cd_head">
        <div class="cd_bread">
          <el-breadcrumb separator-class="el-icon-arrow-right">
            <el-breadcrumb-item :to="{ path: '/course' }"
              >课程管理</el-breadcrumb-item
            >
            <el-breadcrumb-item>{{ course.title }}</el-breadcrumb-item>
          </el-breadcrumb>
        </div>
        <div class="cd_picture">
          <div class="cd_image">
            <el-image
              style="width: 350px; height: 200px"
              :src="course.imgUrl"
              fit="cover"
            ></el-image>
          </div>
          <div class="cd_title">
            <div>
              <div class="cd_title_name">
                <span>{{ course.title }}</span>
              </div>
              <!-- <div class="cd_rate">
              <el-rate></el-rate>
            </div> -->
              <div class="course_view">
                <i></i><span>{{ course.learning }}人在学</span>
              </div>
            </div>
            <div>
              <el-button type="primary" @click="dialogVisible = true"
                >查看课程视频</el-button
              >
            </div>
          </div>
        </div>
      </div>
      <div class="cd_boder"></div>
      <div class="cd_content">
        <div class="cd_content_nav">
          <div :class="{ active: show }" @click="show = true">
            <span>课程简介</span>
          </div>
          <div :class="{ active: !show }" @click="show = false">
            <span>学员查看</span>
          </div>
        </div>
        <div class="cd_content_intro" v-if="show">
          <span v-html="course.brief" class="cont"></span>
        </div>
        <div class="cd_content_stutents_box" v-else>
          <div class="cd_content_stutents">
            <div v-if="students.length == 0">
              <span>暂无学生</span>
            </div>
            <div class="student_box" v-for="index in students" :key="index">
              <span>{{ index.name }}</span>
            </div>
          </div>
        </div>
      </div>
    </div>
    <el-dialog
      title="查看课程视频"
      :visible.sync="dialogVisible"
      :append-to-body="true"
      width="750px"
      :before-close="handleClose"
      class="dialog_diy"
    >
      <div>
        <div class="pb_head" style="width: 100%">
          <span>{{ course.title }}</span>
        </div>
        <div>
          <div class="workd_head">
            <div class="workd_media">
              <!-- <el-image
                style="width: 100%; height: 300px"
                :src="require('../../assets/tu4.png')"
              ></el-image> -->
              <video-player
                class="video-player vjs-custom-skin"
                ref="videoPlayer"
                :playsinline="true"
                :options="playerO"
                @play="onPlayerPlay($event)"
                style="width: 100%; height: 100%"
              ></video-player>
            </div>
            <div class="cd_content_steps">
              <div
                class="cd_steps_box"
                v-for="(media, index) in course.mediaList"
                :key="media"
                @click="switchVideo(media, index)"
              >
                <!-- <i :class="{ active: index < 1 }"></i> -->
                <i
                  :class="{
                    active: playerOptions.sources[0].src == media,
                  }"
                ></i>
                <span>视频{{ index + 1 }}</span>
              </div>
            </div>
          </div>
        </div>
      </div>
      <span slot="footer" style="display: flex; justify-content: center">
        <el-button @click="cancelM">关 闭</el-button>
      </span>
    </el-dialog>
  </div>
</template>

<script>
export default {
  data() {
    return {
      show: true,
      id: this.$route.query.id,
      course: {},
      students: [],
      dialogVisible: false,
      playerOptions: {
        playbackRates: [0.7, 1.0, 1.5, 2.0], //播放速度
        autoplay: false, //如果true,浏览器准备好时开始回放。
        muted: false, // 默认情况下将会消除任何音频。
        loop: false, // 导致视频一结束就重新开始。
        preload: "auto", // 建议浏览器在<video>加载元素后是否应该开始下载视频数据。auto浏览器选择最佳行为,立即开始加载视频（如果浏览器支持）
        language: "zh-CN",
        aspectRatio: "16:9", // 将播放器置于流畅模式，并在计算播放器的动态大小时使用该值。值应该代表一个比例 - 用冒号分隔的两个数字（例如"16:9"或"4:3"）
        fluid: true, // 当true时，Video.js player将拥有流体大小。换句话说，它将按比例缩放以适应其容器。
        sources: [
          {
            type: "video/mp4", //这里的种类支持很多种：基本视频格式、直播、流媒体等，具体可以参看git网址项目   || "video/ogg"|| "video/webm"
            src: "", //url地址require("../../assets/media/aaa.mp4")
          },
        ],
        // poster: require("../../assets/tu31.png"), //你的封面地址
        // poster: dataRes.imgUrl, //你的封面地址
        notSupportedMessage: "此视频暂无法播放，请稍后再试", //允许覆盖Video.js无法播放媒体源时显示的默认信息。
        controlBar: {
          timeDivider: true, //当前时间和持续时间的分隔符
          durationDisplay: true, //显示持续时间
          remainingTimeDisplay: false, //是否显示剩余时间功能
          fullscreenToggle: true, //全屏按钮
        },
      },
      playerO: {},
    };
  },
  methods: {
    getDetail() {
      const loading = this.$loading.service({
        background: "rgba(255, 255, 255, 0.7)",
        target: document.querySelector(".student_table"),
      });
      let params = {
        cid: this.id,
      };
      this.ajax
        .get(this.$store.state.api + "getCourseDetail", params)
        .then((res) => {
          loading.close();
          res.data[0].filter((element) => {
            element.imgUrl = JSON.parse(element.chapters).poster;
            element.mediaList = JSON.parse(element.chapters).midia.split(",");
          });
          this.course = res.data[0][0];
          this.students = res.data[1];

          this.playerOptions.poster = this.course.imgUrl;
          this.playerOptions.sources[0].src = this.course.mediaList[0];
          this.playerO = this.playerOptions;

          console.log(res.data);
        })
        .catch((err) => {
          loading.close();
          console.error(err);
        });
    },
    switchVideo(media, index) {
      this.playerO = {};
      this.playerOptions.poster = "";
      this.playerOptions.sources[0].src = media;
      this.playerO = this.playerOptions;
    },
    cancelM() {
      this.dialogVisible = false;
      this.$refs.videoPlayer.player.pause();
    },
    onPlayerPlay() {},
    handleClose(done) {
      this.$refs.videoPlayer.player.pause();
      done();
    },
  },
  created() {
    this.getDetail();
  },
};
</script>

<style scoped>
.course_view {
  display: flex;
  align-items: center;
  margin: 5px 0 0 0;
  font-size: 14px;
}

.course_view i {
  background-image: url("../../assets/liulan.png");
  width: 25px;
  height: 25px;
  background-size: 100% 100%;
  /* margin-top: 1px; */
  line-height: 25px;
  vertical-align: text-top;
  background-repeat: no-repeat;
}

.cd_head {
  background: #fff;
  width: 94%;
  margin: 0 auto;
}

.cd_bread {
  margin: 20px auto;
}

.cd_picture {
  display: flex;
}

.cd_image {
  margin-right: 20px;
}

.cd_title {
  margin-top: 10px;
  display: flex;
  flex-direction: column;
  justify-content: space-between;
}

.cd_title_name {
  font-size: 22px;
}

.cd_rate {
  margin: 10px 0;
}

.cd_boder {
  border: 5px solid #eee;
  width: 100%;
  margin-top: 30px;
}

.cd_content {
  width: 94%;
  margin: 20px auto;
  height: 59%;
  overflow: hidden;
}

.cd_content_nav {
  height: 55px;
  margin: 20px 0 0 0;
  display: flex;
  align-items: center;
}

.cd_content_nav div {
  font-size: 18px;
  margin-right: 20px;
  color: rgb(180, 180, 180);
  padding-bottom: 5px;
  box-sizing: border-box;
}

.cd_content_nav .active {
  border-bottom: 5px solid rgb(90, 124, 194);
  color: #000;
}

.cd_content_intro {
  width: 80%;
  height: 79%;
  overflow: auto;
  min-height: 300px;
}

.cd_content_intro span {
  text-indent: 2em;
  display: block;
  line-height: 27px;
}
.cd_content_stutents_box {
  width: 80%;
  height: 79%;
  overflow: auto;
  min-height: 300px;
}
.cd_content_stutents {
  display: flex;
  flex-wrap: wrap;
}

.student_box {
  width: 120px;
  margin: 10px 10px 0 0;
  background: rgb(227, 117, 154);
  height: 40px;
  line-height: 40px;
  text-align: center;
  border-radius: 5px;
  color: #fff;
}
/* table 样式 */
.cont >>> table {
  border-top: 1px solid #ccc;
  border-left: 1px solid #ccc;
}
.cont >>> table td,
.cont >>> table th {
  border-bottom: 1px solid #ccc;
  border-right: 1px solid #ccc;
  padding: 3px 5px;
}
.cont >>> table th {
  border-bottom: 2px solid #ccc;
  text-align: center;
}

/* blockquote 样式 */
.cont >>> blockquote {
  display: block;
  border-left: 8px solid #d0e5f2;
  padding: 5px 10px;
  margin: 10px 0;
  line-height: 1.4;
  font-size: 100%;
  background-color: #f1f1f1;
}

/* code 样式 */
.cont >>> code {
  display: inline-block;
  *display: inline;
  *zoom: 1;
  background-color: #f1f1f1;
  border-radius: 3px;
  padding: 3px 5px;
  margin: 0 3px;
}
.cont >>> pre code {
  display: block;
}

/* ul ol 样式 */
.cont >>> ul,
ol {
  margin: 10px 0 10px 20px;
}

.workd_media {
  width: 100%;
  height: 400px;
}
.pb_head {
  font-size: 26px;
  /* font-weight: 600; */
  width: 95%;
  margin: 10px auto;
  padding: 10px 5px;
  border-bottom: 3px solid #eee;
}

.cd_content_steps {
  display: flex;
  width: 90%;
  margin: 15px auto 0;

  padding: 15px 0 0 0;
  justify-content: space-around;
  border-top: 1px solid #eeeeee;
}
.cd_steps_box {
  display: flex;
  justify-content: center;
  align-items: center;
  flex-direction: column;
  cursor: pointer;
}
.cd_steps_box i {
  background-image: url("../../assets/dui.png");
  width: 15px;
  height: 15px;
  background-size: 100% 100%;
  display: inline-block;
  line-height: 15px;
  vertical-align: text-top;
  background-repeat: no-repeat;
}
.cd_steps_box span {
  font-size: 15px;
  margin-top: 5px;
}
.cd_steps_box .active {
  background-image: url("../../assets/dui-active.png");
}
.dialog_diy >>> .el-dialog {
  background: #fafafa;
}
.dialog_diy >>> .el-dialog__header {
  background: #3d67bc !important;
  padding: 15px 20px;
}
.dialog_diy >>> .el-dialog__title {
  color: #fff;
}
.dialog_diy >>> .el-dialog__headerbtn {
  top: 19px;
}
.dialog_diy >>> .el-dialog__headerbtn .el-dialog__close {
  color: #fff;
}
.dialog_diy >>> .el-dialog__headerbtn .el-dialog__close:hover {
  color: #fff;
}
</style>