zc_saas_pc/src/pages/person-center/play-record/index.vue

<template>
  <div class="play-record">
    <div class="play-record__header clearfix">
      播放记录
      <!-- <a class="clear-btn">清空记录</a> -->
    </div>
    <div class="play-record__body">
      <div class="date-item" v-for="(v, k) in recordList" :key="k">
        <div class="date-item__header">{{ k }}</div>
        <div class="date-item__body">
          <div class="list">
            <div
              class="course-item"
              v-for="(sectionItem, sectionIndex) in v.list"
              :key="'section' + sectionIndex"
            >
              <div class="course-item__header">{{ sectionItem.goodsName }}</div>
              <div class="course-item__body">
                <div class="img" @click="goCourse(sectionItem)">
                  <img
                    :src="$tools.splitImgHost(sectionItem.coverUrl, true)"
                    alt=""
                  />
                </div>
                <div class="text">
                  <div class="title">
                    {{ sectionItem.sectionName }}
                    <!-- <div class="note">60学时</div> -->
                  </div>
                  <div class="progress">
                    学习进度
                    <el-progress
                      class="progress-line"
                      :text-inside="true"
                      :stroke-width="16"
                      :percentage="
                        toFixed(
                          (sectionItem.videoCurrentTime /
                            sectionItem.durationTime) *
                            100
                        )
                      "
                    ></el-progress>
                  </div>
                </div>
                <!-- <div class="btns-wrap">
                  <div class="btns">
                    <div class="btn btn--warm">删除记录</div>
                  </div>
                </div> -->
              </div>
            </div>
          </div>
        </div>
      </div>
    </div>

    <div class="play-record__footer">
      <div class="pagination">
        <el-pagination
          @current-change="currentChange"
          background
          layout="prev, pager, next"
          :total="total"
          :pager-count="5"
          :page-size="params.pageSize"
        >
        </el-pagination>
      </div>
    </div>

    <el-dialog
      width="800px"
      class="rebuild"
      :visible.sync="showRebuildDetailModal"
      :close-on-click-modal="false"
      :close-on-press-escape="false"
      :show-close="false"
    >
      <div class="rebuild__content">
        <div class="rebuild__close" @click="showRebuildDetailModal = false">
          X
        </div>
        <div class="rebuild__header">审核详情</div>
        <div class="rebuild__body">
          <div class="content">
            <div class="content__header">
              <div class="title">重要提示：</div>
              <div class="desc">
                您的学时审核不通过，不通过原因如下，请查阅，并重学不通过的课程内容。
              </div>
            </div>

            <div class="content__body">
              <div class="list">
                <div
                  class="list__item"
                  v-for="(item, index) in rebuildItems"
                  :key="index"
                >
                  <div class="title">
                    <span class="note" v-if="item.type == 0"> 测试 </span>
                    <span class="note note--yellow" v-if="item.type == 1"
                      >录播</span
                    >
                    <span class="note note--yellow" v-if="item.type == 2"
                      >直播</span
                    >
                    <span class="note note--yellow" v-if="item.type == 3"
                      >回放</span
                    >
                    {{ index + 1 }}、{{ item.name }}
                  </div>
                  <div class="desc">
                    <!-- <div class="imgs">
                      <div
                        class="img"
                        v-for="(items, indexs) in item.userStudyRecordPhoto"
                        :key="indexs"
                      >
                        <img :src="$tools.splitImgHost(items.photo)" />
                        <div class="note">
                          {{ $tools.timestampToTime(items.createTime, false) }}
                        </div>
                      </div>
                    </div> -->
                  </div>
                  <div class="desc">
                    原因：
                    <span class="note">{{ item.auditReason }}</span>
                  </div>
                </div>
              </div>
            </div>
          </div>
        </div>
        <div class="rebuild__footer">
          <el-button class="confirm" @click="rebuildSubmit" type="primary"
            >确认已阅读</el-button
          >
        </div>
      </div>
    </el-dialog>
  </div>
</template>

<script>
export default {
  name: "MyCourse",
  data() {
    return {
      activeName: "1",
      recordList: {},
      total: 0,
      rebuildItems: [],
      rebuildItem: {},
      params: {
        pageNum: 1,
        pageSize: 10,
      },
      sysTime: 0,
      showRebuildDetailModal: false,
    };
  },
  mounted() {
    this.studRrecordListUserRecord();
  },
  methods: {
    toFixed(num) {
      console.log(num);
      if (num) {
        let str = String(num).indexOf(".");

        if (str != -1) {
          return +num.toFixed(2);
        } else {
          return num;
        }
      } else {
        return 0;
      }
    },

    rebuildSubmit() {
      this.$confirm(
        "如对审核结果有异议，请勿点击确认重学。致电020-87085982咨询",
        "注意",
        {
          confirmButtonText: "确认重学",
          cancelButtonText: "取消",
          closeOnClickModal: false,
          closeOnPressEscape: false,
          distinguishCancelAndClose: false,
          showClose: false,
        }
      )
        .then((_) => {
          this.$request
            .courseperiodrebuild({
              goodsId: this.rebuildItem.goodsId,
              gradeId: this.rebuildItem.gradeId,
            })
            .then((res) => {
              this.showRebuildDetailModal = false;
              this.$router.push({
                path: `/my-course-detail/${this.rebuildItem.goodsId}`,
                query: {
                  gradeId: this.rebuildItem.gradeId,
                  orderGoodsId: this.rebuildItem.orderGoodsId,
                  rebuild: 1,
                },
              });
            });
        })
        .catch((_) => {});
    },
    currentChange(e) {
      this.params.pageNum = e;
      this.studRrecordListUserRecord();
    },
    studRrecordListUserRecord() {
      this.$request.studRrecordListUserRecord(this.params).then((res) => {
        let dateObj = {};

        res.rows.forEach((row) => {
          if (!dateObj[row.date]) {
            dateObj[row.date] = { title: row.goodsName, list: [] };
            dateObj[row.date].list.push(row);
          } else {
            dateObj[row.date].list.push(row);
          }
        });

        // for (let k in dateObj) {
        //   dateObj[k].list.sort((a, b) => {
        //     return a.createTime - b.createTime;
        //   });
        // }
        console.log(dateObj, "dateObj");
        this.recordList = dateObj;
        this.total = res.total;
      });
    },

    async goCourse(sectionItem) {
      this.sysTime = this.$tools.timest();
      this.$request
        .orderInfo({
          orderGoodsId: sectionItem.orderGoodsId,
        })
        .then(async (res) => {
          let item = res.data;
          if (item.interfacePushId > 0 && item.officialStatus != 1) {
            this.$message({
              type: "warning",
              message:
                "机构正在为您报名中，请耐心等待，有疑问请联系020-87085982！",
            });
            return;
          }
          if (
            this.sysTime <= item.serviceStartTime ||
            this.sysTime >= item.serviceEndTime
          ) {
            this.$message({
              type: "warning",
              message: "不在学习服务期，不能进入学习",
            });
            return;
          }

          if (
            (item.classStartTime && this.sysTime <= item.classStartTime) ||
            (item.classEndTime && this.sysTime >= item.classEndTime)
          ) {
            this.$message({
              type: "warning",
              message: "不在班级有效期，不能进入学习",
            });
            return;
          }

          if (item.learningStatus == 2) {
            this.$message({
              type: "warning",
              message: "开放学习时间待定，不能进入学习",
            });
            return;
          }

          if (item.classStatus == 0) {
            this.$message({
              type: "warning",
              message: "尚未开班，不能进入学习",
            });
            return;
          }
          if (
            item.learningStatus == 3 &&
            this.sysTime < item.learningTimeStart
          ) {
            this.$message({
              type: "warning",
              message: "不在开放学习时间,不能进入学习",
            });
            return;
          }

          let rebuildStatus = await this.courseGoodsRebuildStatus(
            item.goodsId,
            item.gradeId
          );

          if (rebuildStatus == 0) {
            this.rebuildItem = item;
            this.$request
              .getcourseperiodcheat({
                goodsId: item.goodsId,
                gradeId: item.gradeId,
              })
              .then((res) => {
                this.rebuildItems = res.rows;
              });
            this.showRebuildDetailModal = true;
            return;
          }

          if (item.educationName == "继续教育") {
            this.$request
              .lockLockStatus({
                action: "jxjy",
              })
              .then((res) => {
                //有其他端在操作，不能学习
                this.$message({
                  type: "warning",
                  message: res.msg,
                });
              })
              .catch((err) => {
                //可以学习
                this.$request
                  .courseCourseList({
                    pageNum: 1,
                    pageSize: 1,
                    goodsId: item.goodsId,
                    gradeId: item.gradeId,
                  })
                  .then((res) => {
                    if (res.rows.length) {
                      this.go("/my-course-detail/" + sectionItem.goodsId, {
                        gradeId: sectionItem.gradeId,
                        orderGoodsId: sectionItem.orderGoodsId,
                        courseId: sectionItem.courseId,
                      });
                    } else {
                      this.$message({
                        type: "warning",
                        message: "课程内暂无可以学习的科目",
                      });
                    }
                  });
              });
          } else {
            this.$request
              .courseCourseList({
                pageNum: 1,
                pageSize: 1,
                goodsId: item.goodsId,
                gradeId: item.gradeId,
              })
              .then((res) => {
                if (res.rows.length) {
                  this.go("/my-course-detail/" + sectionItem.goodsId, {
                    gradeId: sectionItem.gradeId,
                    orderGoodsId: sectionItem.orderGoodsId,
                    courseId: sectionItem.courseId,
                  });
                } else {
                  this.$message({
                    type: "warning",
                    message: "课程内暂无可以学习的科目",
                  });
                }
              });
          }
        });
    },
    go(path, query) {
      this.$router.push({
        path,
        query,
      });
    },

    /**
     * @param {Object} goodsId 商品id
     * 查询商品重修状态
     */
    courseGoodsRebuildStatus(goodsId, gradeId) {
      return new Promise((resolve) => {
        this.$request
          .courseGoodsRebuildStatus({
            goodsId: goodsId,
            gradeId: gradeId,
          })
          .then((res) => {
            resolve(res.data);
          });
      });
    },
  },
};
</script>

<!-- Add "scoped" attribute to limit CSS to this component only -->
<style scoped lang="scss">
.play-record {
  &__header {
    height: 56px;
    line-height: 56px;
    .clear-btn {
      margin-top: 12px;
      float: right;
      display: block;
      width: 122px;
      height: 32px;
      background: #eeeeee;
      border-radius: 16px;
      text-align: center;
      line-height: 32px;
      color: #3f8dfd;
    }
  }
  &__body {
    .date-item {
      margin-top: 24px;
      border-top: 1px solid #eee;

      &:nth-of-type(1) {
        margin: 0;
      }

      &__header {
        padding-left: 15px;
        height: 40px;
        line-height: 40px;
      }

      &__body {
        .list {
          .course-item {
            margin-top: 20px;
            background: #fafbfc;
            border-radius: 8px;
            overflow: hidden;

            &:nth-of-type(1) {
              margin: 0;
            }

            &__header {
              height: 40px;
              border-bottom: 1px solid #eee;
              padding: 0 18px;
              line-height: 40px;
              font-size: 16px;
              font-family: Microsoft YaHei;
              font-weight: bold;
              color: #333333;
            }

            &__body {
              .img {
                cursor: pointer;
                float: left;
                width: 160px;
                height: 90px;

                img {
                  max-width: 100%;
                  max-height: 100%;
                }
              }

              .text {
                float: left;
                margin-left: 12px;
                .title {
                  margin-top: 10px;
                  font-size: 16px;
                  font-family: Microsoft YaHei;
                  font-weight: 400;
                  color: #333333;
                  .note {
                    display: inline-block;
                    vertical-align: middle;
                    border: 1px solid #333333;
                    border-radius: 4px;
                    font-size: 12px;
                    font-family: Microsoft YaHei;
                    font-weight: 400;
                    color: #333333;
                    padding: 2px 5px;
                    margin-left: 12px;
                  }
                }

                .progress {
                  margin-top: 30px;

                  font-size: 14px;
                  font-family: Microsoft YaHei;
                  font-weight: 400;
                  color: #333333;

                  &-line {
                    width: 200px;
                    display: inline-block;
                  }
                }
              }

              .btns-wrap {
                display: table;
                float: right;
                height: 90px;
                width: 130px;

                .btns {
                  display: table-cell;
                  vertical-align: middle;
                  text-align: center;

                  .btn {
                    cursor: pointer;
                    margin: 2px 0;
                    width: 122px;
                    height: 32px;
                    background: #3f8dfd;
                    border-radius: 16px;
                    display: inline-block;
                    text-align: center;
                    line-height: 32px;
                    color: #fff;

                    &--warm {
                      background: #ff3b30;
                    }
                  }
                }
              }
            }
          }
        }
      }
    }
  }

  &__footer {
    .pagination {
      padding: 30px 0;
      text-align: center;
    }
  }

  .rebuild {
    /deep/ .el-dialog__header {
      display: none;
    }
    /deep/ .el-dialog__body {
      padding: 0;
      overflow: unset;
    }

    &__close {
      cursor: pointer;
      position: absolute;
      right: 0;
      top: -28px;
      width: 24px;
      height: 24px;
      line-height: 24px;
      text-align: center;
      color: #eee;
      border: 1px solid #eee;
      border-radius: 50%;
    }

    &__header {
      height: 40px;
      border-bottom: 1px solid #eee;
      line-height: 40px;
      font-size: 16px;
      font-family: Microsoft YaHei;
      font-weight: bold;
      color: #333333;
      padding-left: 24px;
    }

    &__body {
      height: 400px;
      padding: 0 24px;

      .content {
        height: 100%;
        overflow-y: auto;

        &__header {
          padding: 16px 0;
          border-bottom: 1px solid #eee;

          .title {
            font-size: 16px;
            font-family: Microsoft YaHei;
            font-weight: bold;
            color: #ff3b30;
            line-height: 24px;
          }

          .desc {
            margin-top: 10px;
            font-size: 16px;
            font-family: Microsoft YaHei;
            font-weight: 400;
            color: #ff3b30;
            line-height: 24px;
          }
        }

        &__body {
          .list {
            &__item {
              padding: 16px 0;
              border-bottom: 1px solid #eee;

              .title {
                font-size: 14px;
                font-family: Microsoft YaHei;
                font-weight: 400;
                color: #333333;

                .note {
                  display: inline-block;
                  text-align: center;
                  line-height: 18px;
                  width: 32px;
                  height: 20px;
                  border: 1px solid #3f8dfd;
                  border-radius: 4px;
                  color: #3f8dfd;
                  font-size: 12px;

                  &--yellow {
                    border: 1px solid #ff9500;
                    color: #ff9500;
                  }
                }
              }

              .desc {
                margin-top: 10px;
                font-size: 14px;
                font-family: Microsoft YaHei;
                font-weight: 400;
                color: #333333;

                .note {
                  color: #ff3b30;
                  line-height: 20px;
                }

                .img {
                  width: 100px;
                  height: 100px;
                  display: inline-block;
                  text-align: center;

                  img {
                    max-width: 100%;
                    max-height: 100%;
                  }
                }
              }
            }
          }
        }
      }
    }

    &__footer {
      height: 90px;
      border-top: 1px solid #eee;
      text-align: center;
      .confirm {
        width: 200px;
        height: 40px;
        padding: 0;
        border-radius: 20px;
        text-align: center;
        line-height: 40px;
        color: #fff;
        margin: 24px auto;
      }
    }
  }
}
</style>