zc_saas_pc/src/pages/person-center/my-course/index.vue

<template>
  <div class="my-course">
    <div class="my-course__header">
      <el-tabs v-model="activeName">
        <el-tab-pane label="全部课程" name="1"></el-tab-pane>
        <el-tab-pane label="考前培训" name="2"></el-tab-pane>
        <el-tab-pane label="继续教育" name="3"></el-tab-pane>
      </el-tabs>
    </div>

    <div class="my-course__body">
      <div class="list">
        <div
          class="course-item"
          v-for="(item, index) in courseList"
          :key="index"
        >
          <div class="course-item__header">
            <div class="state">
              <template
                v-if="
                  sysTime >= item.serviceStartTime &&
                  sysTime <= item.serviceEndTime
                "
              >
                学习状态：
                <div class="note" v-if="item.stuAllNum == 0">未学习</div>
                <div
                  class="note note--yellow"
                  v-else-if="
                    item.stuAllNum > 0 && item.stuAllNum < item.secAllNum
                  "
                >
                  学习中
                </div>
                <div
                  class="note note--green"
                  v-else-if="item.stuAllNum >= item.secAllNum"
                >
                  已学完
                </div>
              </template>

              <template v-else>
                <span class="red"> 已过学习服务期，不可以学习了哦！</span>
              </template>

              <template v-if="item.profileTpStatus == 1">
                资料审核状态：
                <div class="note" v-if="item.profileStatus == null">
                  未提交资料
                </div>
                <div
                  class="note note--green"
                  v-else-if="item.profileStatus == 1"
                >
                  已通过
                </div>
                <div
                  class="note note--yellow"
                  v-else-if="item.profileStatus == 2"
                >
                  审核中
                </div>
                <div
                  class="note note--yellow"
                  v-else-if="item.profileStatus == 3"
                >
                  待完善
                </div>
              </template>

              <!-- 学时审核状态可以审核 -->
              <template v-if="item.periodStatus != -1">
                <template v-if="item.periodStatus == 0"
                  >机构审核：
                  <div class="note">学时审核不通过</div>
                </template>
                <template v-else-if="item.periodStatus == 2"
                  >机构审核：
                  <div class="note note--yellow">学时待审核</div></template
                >
                <template v-else-if="item.periodStatus == 1">
                  <template v-if="item.periodPlush > 0"
                    ><div class="note note--green">
                      学时已上报注册中心
                    </div></template
                  >
                  <template v-else
                    >机构审核：
                    <div class="note note--green">学时审核通过</div></template
                  >
                </template>
                <template
                  v-if="item.subscribeId != null && item.periodStatus == 1"
                >
                  <template v-if="item.subExamStatus === null">
                    待预约考试
                  </template>
                  <template
                    v-else-if="
                      item.subExamStatus === 0 &&
                      sysTime < item.subApplySiteStartTime
                    "
                  >
                    待考试，考试时间：{{
                      $tools.timestampToTime(
                        item.subApplySiteStartTime,
                        true,
                        true
                      )
                    }}
                    -
                    {{
                      $tools.timestampToTime(
                        item.subaApplySiteEndTime,
                        true,
                        true
                      )
                    }}
                  </template>
                  <template v-else-if="item.subExamStatus === 0"
                    >待出考试结果</template
                  >
                  <template v-else-if="item.subExamStatus === 1">
                    <span v-if="item.subResult === null">待出考试结果</span>
                    <span v-if="item.subResult === 0"
                      >考试结果：不通过，需补考</span
                    >
                    <span v-else-if="item.subResult === 1"
                      >考试结果：通过，考试成绩为{{ item.subPerformance }}</span
                    >
                  </template>
                  <template v-else-if="item.subExamStatus === 2">
                    缺考，无成绩，需补考
                  </template>
                  <template v-else-if="item.subExamStatus === 3">
                    作弊，无成绩，需补考
                  </template>
                  <template v-else-if="item.subExamStatus === 4">
                    替考，无成绩，需补考
                  </template>
                </template>
              </template>
            </div>
            <div
              class="time"
              v-if="item.serviceStartTime && item.serviceEndTime"
            >
              学习有效期：{{
                $moment(item.serviceStartTime * 1000).format("YYYY年MM月DD日")
              }}
              至
              {{ $moment(item.serviceEndTime * 1000).format("YYYY年MM月DD日") }}
            </div>
          </div>
          <div class="course-item__body clearfix">
            <div class="img">
              <img :src="$tools.splitImgHost(item.coverUrl, true)" alt="" />
            </div>
            <div class="text">
              <div class="title">
                {{ item.goodsName }}
                <div class="note">
                  {{ item.courseNum }}课程 {{ item.secAllNum + item.examNum }}节
                  {{ item.classHours }}学时
                </div>
              </div>
              <div class="progress">
                学习进度
                <el-progress
                  class="progress-line"
                  :stroke-width="16"
                  :format="progressText(item)"
                  :percentage="
                    ((item.stuAllNum + item.recordNum) /
                      (item.secAllNum + item.examNum) || 0) * 100
                  "
                ></el-progress>
              </div>
            </div>
            <div class="btns-wrap">
              <div class="btns">
                <el-button
                  type="primary"
                  class="btn"
                  @click="goCourseDetail(item)"
                  :disabled="
                    (item.interfacePushId > 0 && item.officialStatus != 1) ||
                    sysTime <= item.serviceStartTime ||
                    sysTime >= item.serviceEndTime ||
                    (item.classStartTime && sysTime <= item.classStartTime) ||
                    (item.classEndTime && sysTime >= item.classEndTime) ||
                    item.learningStatus == 2 ||
                    item.classStatus == 0 ||
                    (item.learningStatus == 3 &&
                      sysTime < item.learningTimeStart)
                  "
                  >进入学习</el-button
                >

                <el-button
                  type="primary"
                  class="btn"
                  @click="appointment(item)"
                  v-if="
                    item.applyStatus === 1 &&
                    !(
                      (item.interfacePushId > 0 && item.officialStatus != 1) ||
                      sysTime <= item.serviceStartTime ||
                      sysTime >= item.serviceEndTime ||
                      (item.classStartTime && sysTime <= item.classStartTime) ||
                      (item.classEndTime && sysTime >= item.classEndTime) ||
                      item.learningStatus == 2 ||
                      item.classStatus == 0 ||
                      (item.learningStatus == 3 &&
                        sysTime < item.learningTimeStart)
                    )
                  "
                  >预约考试</el-button
                >

                <div
                  class="btn btn--warm"
                  v-if="
                    item.gradeStatus == 1 &&
                    item.status == 1 &&
                    item.serviceEndTime > sysTime &&
                    item.serviceStartTime < sysTime &&
                    item.classEndTime &&
                    item.classEndTime < sysTime &&
                    (item.periodStatus == 0 || item.periodStatus == -1) &&
                    item.studyCount > 0
                  "
                >
                  选班重学
                </div>
              </div>
            </div>
          </div>
          <div
            class="course-item__footer"
            v-if="
              !(
                sysTime < item.serviceStartTime || sysTime > item.serviceEndTime
              )
            "
          >
            <template
              v-if="
                !(
                  sysTime < item.serviceStartTime ||
                  sysTime > item.serviceEndTime
                )
              "
            >
              <template v-if="item.classEndTime && item.classEndTime < sysTime">
                <span class="text"
                  >班级有效期：{{
                    $tools.timestampToTime(item.classStartTime, true, true)
                  }}
                  -
                  {{
                    $tools.timestampToTime(item.classEndTime, true, true)
                  }}</span
                >
                <span class="text text--red"
                  >班级状态：已过期，有疑问请联系020-87085982</span
                >
              </template>

              <template
                v-else-if="item.classStartTime && item.classStartTime > sysTime"
              >
                <span class="text"
                  >班级有效期：{{
                    $tools.timestampToTime(item.classStartTime, true, true)
                  }}
                  -
                  {{
                    $tools.timestampToTime(item.classEndTime, true, true)
                  }}</span
                >
                <span class="text"
                  >班级状态：未到学习时间，有疑问请联系 020-87085982</span
                >
              </template>
            </template>
          </div>
        </div>
      </div>

      <div class="pagination">
        <el-pagination
          @current-change="currentChange"
          background
          layout="prev, pager, next"
          :total="total"
          :pager-count="5"
        >
        </el-pagination>
      </div>
    </div>

    <el-dialog
      title="选班重学"
      class="select-modal"
      :visible.sync="selectClassModal"
      width="800px"
    >
      <div>
        <el-radio
          v-for="(item, index) in gradeList"
          :key="index"
          class="radio"
          v-model="gradeValue"
        >
          <div>
            {{ item.className }}
            <span v-if="item.classEndTime">
              有效期至：{{
                $tools.timestampToTime(item.classEndTime, true, true)
              }}</span
            >
            <span v-if="item.classEndTime"
              >本班还剩{{
                $tools.GetRTime(item.classEndTime)
              }}天将结束学习</span
            >
          </div>
          <div></div
        ></el-radio>
      </div>
      <span slot="footer" class="dialog-footer">
        <el-button type="primary" @click="selectClassOk">确 定</el-button>
      </span>
    </el-dialog>

    <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">
                如对审核结果有异议，请勿点击确认重学。致电020-87085982咨询
              </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">拍照异常/时间异常</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 {
      showRebuildDetailModal: false,
      gradeList: [],
      gradeValue: -1,
      sysTime: 0,
      activeName: "1",
      param: {
        pageNum: 1,
        pageSize: 10,
      },
      rebuildItems: [],
      rebuildItem: {},
      selectClassModal: false,
      total: 0,
      courseList: [],
      selectItem: {},
    };
  },
  mounted() {
    this.sysTime = this.$tools.timest();
    this.courseGoodsList();
  },
  methods: {
    currentChange(e) {
      this.param.pageNum = e;
      this.courseGoodsList();
    },
    async goCourseDetail(item) {
      if (item.interfaceAccountId > 0) {
        //学习账号已开通

        if (item.learnStatus == 1) {
          //跳转第三方h5
          window.open("http://admin.zhujianpeixun.com/", "_blank");
          return;
        } else {
          this.$message({
            type: "warning",
            message:
              "您的学习账号未开通，请稍后再尝试，有疑问，请联系020-87085982！",
          });
          return;
        }
      }

      //内部系统
      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;
      }

      if (
        item.gradeStatus == 1 &&
        item.status == 1 &&
        item.serviceEndTime > this.sysTime &&
        item.classEndTime &&
        item.classEndTime < this.sysTime &&
        (item.periodStatus == 0 || item.periodStatus == -1) &&
        item.studyCount > 0
      ) {
        this.selectClass(item);
        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) => {
            //有其他端在操作，不能学习
            uni.showToast({
              icon: "none",
              title: res.msg,
              mask: true,
              duration: 3000,
            });
          })
          .catch((err) => {
            //可以学习
            this.$router.push({
              path: `/my-course-detail/${item.goodsId}`,
              query: {
                gradeId: item.gradeId,
                orderGoodsId: item.orderGoodsId,
              },
            });
          });
      } else {
        this.$router.push({
          path: `/my-course-detail/${item.goodsId}`,
          query: {
            gradeId: item.gradeId,
            orderGoodsId: item.orderGoodsId,
          },
        });
      }
    },

    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,
                },
              });
            });
        })
        .catch((_) => {});
    },
    selectClass(item) {
      this.selectClassModal = true;
      this.selectItem = item;
      this.gradeValue = -1;
      this.goodsGradeList(item.goodsId);
    },
    goodsGradeList(id) {
      let self = this;
      this.$request
        .goodsGradeList({
          goodsId: id,
        })
        .then((res) => {
          self.gradeList = res.rows;
          if (self.gradeList.length == 0) {
            let item = {
              className: "系统分班",
              gradeId: 0,
            };
            self.gradeList.push(item);
          } else {
            let isGradeFull = self.gradeList.every(
              (item) =>
                item.studentNum > 0 && item.studentNum == item.studentUpper
            );
            //所有班级都满了
            if (isGradeFull) {
              let item = {
                className: "系统分班",
                gradeId: 0,
              };
              self.gradeList.unshift(item);
            }
          }
        });
    },
    selectClassOk() {
      if (this.gradeValue == -1) {
        this.$message({
          type: "success",
          message: "请选择班级",
        });
        return;
      }
      this.$request
        .changeGrade({
          goodsId: this.selectItem.goodsId,
          gradeId: this.gradeValue,
          oldGradeId: this.selectItem.gradeId,
          orderGoodsId: this.selectItem.orderGoodsId,
          userId: this.selectItem.userId,
        })
        .then((res) => {
          this.courseGoodsList();
          this.selectClassModal = false;
          this.$message({
            type: "success",
            message: "选班成功",
          });
        })
        .catch((err) => {
          this.$message({
            type: "success",
            message: res.msg,
          });
        });
    },
    /**
     * @param {Object} goodsId 商品id
     * 查询商品重修状态
     */
    courseGoodsRebuildStatus(goodsId, gradeId) {
      return new Promise((resolve) => {
        this.$request
          .courseGoodsRebuildStatus({
            goodsId: goodsId,
            gradeId: gradeId,
          })
          .then((res) => {
            resolve(res.data);
          });
      });
    },
    courseGoodsList() {
      this.$request.courseGoodsList(this.param).then((res) => {
        this.courseList = res.rows;
        this.total = res.total;
      });
    },
    progressText(item) {
      return () => {
        return (
          item.stuAllNum +
          item.recordNum +
          "/" +
          (item.secAllNum + item.examNum)
        );
      };
    },

    appointment(item) {
      var data = {
        goodsId: item.goodsId,
        gradeId: item.gradeId,
      };
      this.$request
        .getApplysubscribe(data)
        .then((res) => {
          this.$router.push({
            path: "/person-center/my-classhour/appointment",
            query: {
              goodsId: item.goodsId,
              gradeId: item.gradeId,
              orderGoodsId: item.orderGoodsId,
            },
          });
        })
        .catch((err) => {
          this.$message({
            type: "success",
            message: err.msg,
          });
        });
    },
  },
};
</script>

<!-- Add "scoped" attribute to limit CSS to this component only -->
<style scoped lang="scss">
.my-course {
  &__header {
    /deep/ .el-tabs__header {
      margin-bottom: 0;
    }
  }
  &__body {
    .list {
      .course-item {
        margin-top: 24px;
        background: #fafbfc;
        border-radius: 8px;
        overflow: hidden;

        &__header {
          height: 40px;
          border-bottom: 1px solid #eee;
          padding: 0 18px;

          .state {
            margin-top: 8px;
            float: left;
            font-size: 14px;
            font-family: Microsoft YaHei;
            font-weight: 400;
            color: #666666;

            .red {
              color: #ff3b30;
            }

            .note {
              vertical-align: middle;
              display: inline-block;
              padding: 0 10px;
              height: 24px;
              background: #ffeceb;
              border: 1px solid #ff3b30;
              border-radius: 12px;
              font-size: 14px;
              font-family: Microsoft YaHei;
              font-weight: 400;
              color: #ff3b30;
              text-align: center;
              line-height: 24px;
              margin-right: 10px;

              &--yellow {
                border-color: #ffb001;
                color: #ffb001;
                background: #fff8e8;
              }

              &--green {
                border-color: #56dc68;
                color: #56dc68;
                background: #e6feea;
              }
            }
          }

          .time {
            float: right;
            line-height: 40px;
            text-align: right;
            font-size: 12px;
            font-family: Microsoft YaHei;
            font-weight: 400;
            color: #666666;
          }
        }

        &__body {
          .img {
            float: left;
            width: 160px;
            height: 90px;
            background: #3f8dfd;

            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: bold;
              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: 220px;
                display: inline-block;
              }

              /deep/ .el-progress-bar {
                padding-right: 70px;
                margin-right: -70px;
              }
            }
          }

          .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;
                padding: 0;
                border-radius: 16px;
                display: inline-block;
                text-align: center;
                line-height: 32px;
                color: #fff;

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

        &__footer {
          padding: 20px 40px;
          font-size: 14px;
          color: #333;

          .text {
            margin-right: 20px;

            &--red {
              color: #ff3b30;
            }
          }
        }
      }
    }

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

  .select-modal {
    .radio {
      cursor: pointer;
      margin-right: 24px;
      padding: 0 24px;
      display: flex;
      align-items: center;
      margin-top: 2px;
      min-height: 40px;
      padding-top: 10px;
      padding-bottom: 10px;
      background: #f5f9ff;
      border-radius: 8px;
      box-sizing: border-box;

      &.right {
        background: #37c65b;
      }
      &.wrong {
        background: #ff3a30;
      }
    }
  }

  .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 {
                  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>