zc_saas_admin/src/views/secondBuild/courseList/index.vue

<template>
  <div id="">
    <table-list
      :tableSets="tableSet"
      :tableData="tableData"
      :navText="navText"
      :loading="loading"
    >
      <template slot="btn" slot-scope="props">
        <el-button type="text" @click="msgInfo(props.scope.row)"
          >课程内容详情</el-button
        ><el-button
          type="text"
          @click="exportBtn(props.scope.row)"
          style="margin-left: 0px"
          >导出课程结构</el-button
        >
      </template>
    </table-list>
    <pagination
      :total="total"
      :pageSize="formData.pageSize"
      :currentPage="formData.pageNum"
      @handleSizeChange="handleSizeChange"
      @handleCurrentChange="handleCurrentChange"
    />
    <el-dialog
      :visible.sync="dialogVisible"
      width="1300px"
      :show-close="false"
      :close-on-click-modal="false"
    >
      <div slot="title" class="hearders">
        <div class="leftTitle">{{ goodsBoxName }}</div>
        <div class="rightBoxs">
          <img src="@/assets/images/Close@2x.png" alt="" @click="close" />
        </div>
      </div>
      <div class="dis_flexs">
        <div class="leftBoxs">
          <span v-if="!activeId" style="font-size: 30px"
            >请打开目录详情，点击播放您需要观看的视频内容。</span
          >
          <div v-show="vid" id="player"></div>
          <div v-show="vidzb" id="playerzb"></div>
        </div>
        <div class="rightBoxslist">
          <div v-for="(item, index) in courseList" :key="index" class="bg_ls">
            <div
              class="jus_sty"
              :style="
                item.checked
                  ? 'border-bottom: 1px dotted #666;margin-bottom:6px;'
                  : ''
              "
            >
              <div style="font-size: 12px">{{ item.courseName }}</div>
              <div class="line_h" @click="getCourseInfos(item, index)">
                {{ item.checked ? "—" : "+" }}
              </div>
            </div>
            <template v-if="item.checked">
              <div v-for="(items, indexs) in item.children" :key="indexs">
                <div
                  class="firstSty"
                  @click="getSecouredInfos(items, index, indexs)"
                >
                  <div class="typeIcon" v-if="items.type === 3">
                    {{ getTypeName(items.sectionType) }}
                  </div>
                  <i
                    v-if="items.type !== 3"
                    :class="
                      items.checked
                        ? 'el-icon-caret-bottom'
                        : 'el-icon-caret-right'
                    "
                  ></i>
                  <span :style="activeId === items.onlyId ? 'color:red;' : ''">
                    {{ items.menuName }}
                  </span>
                  <span v-if="items.type === 3" class="itemsty">{{
                    $methodsTools.secondToDate(items.durationTime, false)
                  }}</span>
                </div>
                <template v-if="items.checked">
                  <div
                    v-for="(its, ids) in items.children"
                    :key="ids"
                    style="padding-left: 14px"
                  >
                    <div
                      class="firstSty"
                      @click="getTemsInfo(its, index, indexs, ids)"
                    >
                      <div class="typeIcon" v-if="its.type === 3">
                        {{ getTypeName(its.sectionType) }}
                      </div>
                      <i
                        v-if="its.type !== 3"
                        :class="
                          its.checked
                            ? 'el-icon-caret-bottom'
                            : 'el-icon-caret-right'
                        "
                      ></i>
                      <span
                        :style="activeId === its.onlyId ? 'color:red;' : ''"
                      >
                        {{ its.menuName }}
                      </span>
                      <span v-if="its.type === 3" class="itemsty">{{
                        $methodsTools.secondToDate(its.durationTime, false)
                      }}</span>
                    </div>
                    <template v-if="its.checked">
                      <div
                        v-for="(itschild, ids) in its.children"
                        :key="ids"
                        style="padding-left: 14px"
                        @click="getTemsInfo(itschild)"
                      >
                        <div class="firstSty">
                          <div class="typeIcon">
                            {{ getTypeName(itschild.sectionType) }}
                          </div>
                          <span
                            :style="
                              activeId === itschild.onlyId ? 'color:red;' : ''
                            "
                          >
                            {{ itschild.menuName }}
                          </span>
                          <span class="itemsty">{{
                            $methodsTools.secondToDate(
                              itschild.durationTime,
                              false
                            )
                          }}</span>
                        </div>
                      </div>
                    </template>
                  </div>
                </template>
              </div>
            </template>
          </div>
        </div>
      </div>
      <span slot="footer" class="dialog-footer">
        <el-button @click="close">取 消</el-button>
      </span>
    </el-dialog>
  </div>
</template>

<script>
import tableList from "@/components/tableList";
import pagination from "@/components/pagination";
export default {
  name: "",
  components: { tableList, pagination },
  data() {
    return {
      loading: false, //当前表单加载是否加载动画
      navText: {
        title: "课程列表",
        index: 0,
        ch: "条",
        num: false,
        changeWidth: "150px",
        border: true,
        choice: true,
        addHide: true,
        backFatherBtn: {
          status: false,
          title: "未定义",
        },
      },
      formData: {
        status: 1,
        pageSize: 10,
        pageNum: 1,
        commitPeriodStatus: 1,
      },
      // 表单
      tableSet: [
        {
          label: "教育类型",
          prop: "educationName",
          hidden: true,
        },
        {
          label: "业务层次",
          prop: "projectName",
          hidden: true,
        },
        {
          label: "商品编码",
          prop: "code",
          hidden: false,
        },
        {
          label: "商品名称",
          prop: "goodsName",
          hidden: true,
        },
        {
          label: "商品状态",
          prop: "status",
          hidden: false,
          scope: "hasTime",
        },
        {
          label: "学时",
          prop: "classHours",
          hidden: true,
        },
        {
          label: "官方审核备注说明",
          prop: "commitPeriodRemark",
          hidden: true,
        },
        {
          label: "学习服务期",
          prop1: "serviceTimeType",
          prop2: "serviceTimeNum",
          prop3: "studyStartTime",
          prop4: "studyEndTime",
          scope: "studentServicePeriod",
          hidden: false,
        },
      ],
      tableData: [], //表单数据
      total: 0, //一共多少条
      dialogVisible: false,
      courseList: [], //详情列表
      activeId: "", //当前选中ID
      vodPlayerJs: "https://player.polyv.net/script/player.js",
      vid: "",
      playerJs:
        "https://player.polyv.net/resp/live-h5-player/latest/liveplayer.min.js",
      uidzb: "egsxlptzdq",
      vidzb: "",
      goodsId: "",
      goodsBoxName: "",
    };
  },
  mounted() {
    this.$api
      .inquireCourseEducationType({
        educationName: "继续教育",
        status: 1,
      })
      .then((res) => {
        this.tableData = res.rows;
        if (res.rows && res.rows.length > 0) {
          this.$api
            .inquireCourseProjectType({
              educationId: res.rows[0].id,
              projectName: "施工现场专业人员",
              status: 1,
            })
            .then((result) => {
              if (result.rows && result.rows.length > 0) {
                this.formData.educationId = result.rows[0].educationId;
                this.formData.projectId = result.rows[0].id;
                this.search();
              } else {
                this.$message.error("项目类型未查询到施工现场专业人员");
                return;
              }
            });
        } else {
          this.$message.error("教育类型未查询到继续教育");
          return;
        }
      });
  },
  methods: {
    getTypeName(type) {
      let ast = "";
      switch (type) {
        case 1:
          ast = "录播";
          break;
        case 2:
          ast = "直播";
          break;
        case 3:
          ast = "回放";
          break;
        default:
          break;
      }
      return ast;
    },
    /**
     * 导出商品的课程结构
     */
    exportBtn(item) {
      this.$api
        .inquireGradegradeexportGoodsMenuExcel({ goodsId: item.goodsId })
        .then((res) => {
          this.$methodsTools.exportData(res.msg);
        });
    },
    /**
     * 关闭详情触发事件
     */
    close() {
      this.dialogVisible = false;
      this.clears();
    },
    search(int) {
      this.loading = true;
      if (int === 1) {
        this.formData.pageNum = 1;
      }
      var data = JSON.parse(JSON.stringify(this.formData));
      data.chapterNum = 1;
      this.$api
        .commonfreegoodslist(data)
        .then((res) => {
          this.tableData = res.rows;
          this.total = res.total;
          this.navText.index = res.total;
        })
        .finally(() => {
          this.loading = false;
        });
    },
    /**
     * 点击详情
     */
    msgInfo(option) {
      this.goodsBoxName = option.goodsName;
      this.$api.obtainCourseSgoodsId(option.goodsId).then(async (res) => {
        // if (res.rows.length) {
        if (!res.rows.length) {
          this.dialogVisible = true;
        } else {
          res.rows.forEach((item, index) => {
            item.checked = false;
          });
          this.courseList = res.rows;
          await this.autoGetCourseInfos(res.rows[0], 0);
          this.dialogVisible = true;
        }
        // } else {
        //   this.$message.warning("该商品暂无课程");
        //   return;
        // }
      });
    },
    /**
     * 自动播放第一个视频
     */
    autoGetCourseInfos(option, int) {
      return new Promise((resolve, reject) => {
        this.$api
          .inquireCoursemenuListS({ courseId: option.courseId })
          .then((res) => {
            res.rows.forEach((item) => {
              if (item.type !== 3) {
                item.checked = false;
              }
              if (item.type === 3) {
                item.onlyId = `${option.courseId}-0-0-${item.menuId}`;
              }
            });
            this.$set(this.courseList[int], "children", res.rows);
            this.$set(this.courseList[int], "checked", true);
            if (this.courseList[0].children.length) {
              switch (this.courseList[0].children[0].type) {
                case 1:
                  this.$api
                    .inquireCourseListmodulechapter(
                      this.courseList[0].children[0].menuId
                    )
                    .then((resz) => {
                      resz.data.forEach((item) => {
                        if (item.type !== 3) {
                          item.checked = false;
                          item.type = 2;
                          item.courseId =
                            this.courseList[0].children[0].courseId;
                          item.menuName = item.name;
                        }
                      });
                      this.$set(
                        this.courseList[int].children[0],
                        "children",
                        resz.data
                      );
                      this.$set(
                        this.courseList[int].children[0],
                        "checked",
                        true
                      );
                      if (this.courseList[int].children[0].children.length) {
                        this.$api
                          .inquireCoursechaptersectionlist(
                            this.courseList[0].children[0].children[0].chapterId
                          )
                          .then((result) => {
                            result.data.forEach((item) => {
                              item.type = 3;
                              item.menuName = item.name;
                              item.onlyId = `${this.courseList[0].children[0].children[0].courseId}-${this.courseList[0].children[0].children[0].moduleId}-${this.courseList[0].children[0].children[0].chapterId}-${item.sectionId}`;
                            });
                            this.$set(
                              this.courseList[int].children[0].children[0],
                              "children",
                              result.data
                            );
                            this.$set(
                              this.courseList[int].children[0].children[0],
                              "checked",
                              true
                            );
                            if (
                              this.courseList[int].children[0].children[0]
                                .children.length
                            ) {
                              this.activeId =
                                this.courseList[0].children[0].children[0].children[0].onlyId;
                              this.initVideo(
                                this.courseList[0].children[0].children[0]
                                  .children[0]
                              );
                            }
                          });
                      }
                    });
                  break;
                case 2:
                  this.$api
                    .inquireCoursechaptersectionlist(
                      this.courseList[0].children[0].menuId
                    )
                    .then((result) => {
                      result.data.forEach((item) => {
                        item.type = 3;
                        item.menuName = item.name;
                        item.onlyId = `${this.courseList[0].children[0].courseId}-0-${this.courseList[0].children[0].menuId}-${item.sectionId}`;
                      });
                      this.$set(
                        this.courseList[int].children[0],
                        "children",
                        result.data
                      );
                      this.$set(
                        this.courseList[int].children[0],
                        "checked",
                        true
                      );
                      if (this.courseList[0].children[0].children.length) {
                        this.activeId =
                          this.courseList[0].children[0].children[0].onlyId;
                        this.initVideo(
                          this.courseList[0].children[0].children[0]
                        );
                      }
                    });
                  break;
                case 3:
                  this.activeId = this.courseList[0].children[0].onlyId;
                  this.initVideo(this.courseList[0].children[0]);
                  break;

                default:
                  break;
              }
            }
            resolve();
          });
      });
    },
    /**
     * 点击课程
     */
    getCourseInfos(option, int) {
      if (option.checked) {
        this.$set(this.courseList[int], "checked", false);
      } else {
        if (option.children) {
          this.$set(this.courseList[int], "checked", true);
          return;
        }
        this.$api
          .inquireCoursemenuListS({ courseId: option.courseId })
          .then((res) => {
            res.rows.forEach((item) => {
              if (item.type !== 3) {
                item.checked = false;
              }
              if (item.type === 3) {
                item.onlyId = `${option.courseId}-0-0-${item.menuId}`;
              }
            });
            this.$set(this.courseList[int], "children", res.rows);
            this.$set(this.courseList[int], "checked", true);
          });
      }
    },
    getSecouredInfos(option, int, ints) {
      if (option.type === 3) {
        //触发节函数
        this.activeId = option.onlyId;
        this.initVideo(option);
      } else {
        if (option.checked) {
          this.$set(this.courseList[int].children[ints], "checked", false);
        } else {
          if (option.children) {
            this.$set(this.courseList[int].children[ints], "checked", true);
            return;
          }
          if (option.type === 1) {
            this.$api
              .inquireCourseListmodulechapter(option.menuId)
              .then((res) => {
                res.data.forEach((item) => {
                  if (item.type !== 3) {
                    item.checked = false;
                    item.type = 2;
                    item.courseId = option.courseId;
                    item.menuName = item.name;
                  }
                });
                this.$set(
                  this.courseList[int].children[ints],
                  "children",
                  res.data
                );
                this.$set(this.courseList[int].children[ints], "checked", true);
              });
          }
          if (option.type === 2) {
            this.$api
              .inquireCoursechaptersectionlist(option.menuId)
              .then((res) => {
                res.data.forEach((item) => {
                  item.type = 3;
                  item.menuName = item.name;
                  item.onlyId = `${option.courseId}-0-${option.menuId}-${item.sectionId}`;
                });
                this.$set(
                  this.courseList[int].children[ints],
                  "children",
                  res.data
                );
                this.$set(this.courseList[int].children[ints], "checked", true);
              });
          }
        }
      }
    },
    getTemsInfo(option, int, ints, ids) {
      if (option.type === 3) {
        //触发节函数
        this.initVideo(option);
      } else {
        if (option.checked) {
          this.$set(
            this.courseList[int].children[ints].children[ids],
            "checked",
            false
          );
        } else {
          if (option.children) {
            this.$set(
              this.courseList[int].children[ints].children[ids],
              "checked",
              true
            );
            return;
          }
          if (option.type === 2) {
            this.$api
              .inquireCoursechaptersectionlist(option.chapterId)
              .then((res) => {
                res.data.forEach((item) => {
                  item.type = 3;
                  item.menuName = item.name;
                  item.onlyId = `${option.courseId}-${option.moduleId}-${option.chapterId}-${item.sectionId}`;
                });
                this.$set(
                  this.courseList[int].children[ints].children[ids],
                  "children",
                  res.data
                );
                this.$set(
                  this.courseList[int].children[ints].children[ids],
                  "checked",
                  true
                );
              });
          }
        }
      }
    },
    handleSizeChange(v) {
      this.formData.pageSize = v;
      this.formData.pageNum = 1;
      this.search();
    },
    handleCurrentChange(v) {
      this.formData.pageNum = v;
      this.search();
    },
    async initVideo(option) {
      await this.clears();
      this.activeId = option.onlyId;
      if (option.sectionType === 2) {
        this.vidzb = option.liveUrl;
        this.loadPlayerScriptzb(this.loadPlayerzb);
      } else {
        this.vid = option.recordingUrl;
        this.loadPlayerScript(this.loadPlayer);
      }
    },
    loadPlayerScript(callback) {
      if (!window.polyvPlayer) {
        const myScript = document.createElement("script");
        myScript.setAttribute("src", this.vodPlayerJs);
        myScript.onload = callback;
        document.body.appendChild(myScript);
      } else {
        callback();
      }
    },
    loadPlayer() {
      var self = this;
      const polyvPlayer = window.polyvPlayer;
      self.player = polyvPlayer({
        wrap: "#player",
        width: 932,
        height: 627,
        vid: self.vid,
        teaser_show: 0,
        playsafe: function (vid, next) {
          self.$api.obtainpolyvvideosign(vid).then((res) => {
            next(res.data);
          });
        },
      });
    },
    /**
     * @param {String} 关闭视频窗口-销毁实例
     */
    clears() {
      return new Promise((resolve, reject) => {
        this.activeId = "";
        this.vid = "";
        this.vidzb = "";
        if (this.player) {
          this.player.destroy();
        }
        if (this.playerzb) {
          this.playerzb.destroy();
        }
        resolve();
      });
    },
    /**
     * @param {String} 直播预览
     */
    loadPlayerScriptzb(callback) {
      if (!window.polyvLivePlayer) {
        const myScript = document.createElement("script");
        myScript.setAttribute("src", this.playerJs);
        myScript.onload = callback;
        document.body.appendChild(myScript);
      } else {
        callback();
      }
    },

    loadPlayerzb() {
      const polyvLivePlayer = window.polyvLivePlayer;
      this.playerzb = polyvLivePlayer({
        wrap: "#playerzb",
        width: 932,
        height: 627,
        uid: this.uidzb,
        vid: this.vidzb,
      });
    },
  },
};
</script>

<style lang="less" scoped>
/deep/.el-button {
  border-radius: 8px;
}
/deep/.el-dialog {
  border-radius: 8px;
  .el-dialog__header {
    padding: 0;
    .hearders {
      height: 40px;
      display: flex;
      align-items: center;
      justify-content: space-between;
      padding: 0px 18px 0px 20px;
      border-bottom: 1px solid #e2e2e2;
      .leftTitle {
        font-size: 14px;
        font-weight: bold;
        color: #2f4378;
      }
      .rightBoxs {
        display: flex;
        align-items: center;
        img {
          width: 14px;
          height: 14px;
          margin-left: 13px;
          cursor: pointer;
        }
      }
    }
  }
  .el-dialog__footer {
    padding: 0;
    .dialog-footer {
      padding: 0px 40px;
      height: 70px;
      border-top: 1px solid #e2e2e2;
      display: flex;
      align-items: center;
      justify-content: flex-end;
    }
  }
}
.imgBox {
  width: 100%;
  // height: 210px;
  border: 1px solid #e2e2e2;
  border-radius: 8px;
  padding: 8px 8px 3px;
  display: flex;
  flex-direction: column;
  align-items: center;
  .imgLabel {
    flex: 1;
    width: 100%;
    border: 1px dotted #e2e2e2;
    color: #999;
    font-size: 14px;
    cursor: pointer;
    border-radius: 8px;
    .msPhoto {
      display: flex;
      justify-content: center;
      align-items: center;
      max-width: 100%;
      max-height: 270px;
      img {
        max-width: 100%;
        max-height: 270px;
      }
    }
    .imgbbx {
      display: flex;
      flex-direction: column;
      align-items: center;
      justify-content: center;
      width: 100%;
      height: 100%;
      i {
        font-weight: bold;
        margin: 14px 0;
        font-size: 24px;
      }
    }
  }
  p {
    margin: 5px 0px;
  }
}
.dis_flexs {
  display: flex;
}
.leftBoxs {
  width: 932px;
  height: 627px;
  border: 1px solid #eee;
  display: flex;
  align-items: center;
  justify-content: center;
}
.rightBoxslist {
  flex: 1;
  max-height: 627px;
  overflow-y: auto;
  margin-left: 10px;
}
.bg_ls {
  background-color: #eee;
  padding: 8px;
  margin-bottom: 10px;
}
.jus_sty {
  display: flex;
  justify-content: space-between;
  padding: 6px 0px;
}
.line_h {
  font-size: 14px;
  height: 18px;
  width: 18px;
  font-weight: bold;
  color: #000;
  background-color: rgb(153, 153, 153);
  line-height: 18px;
  text-align: center;
  cursor: pointer;
}
.firstSty {
  font-size: 13px;
  margin-bottom: 6px;
  cursor: pointer;
  &:hover {
    color: red;
  }
}
.typeIcon {
  display: inline-block;
  border-radius: 8px;
  border: 1px solid #000;
  padding: 0px 4px;
  color: #000 !important;
  font-size: 12px;
}
.itemsty {
  font-size: 13px;
  color: purple;
  margin-left: 14px;
}
</style>