saas_pc/src/pages/person-center/my-course/courseData.vue

<template>
  <div id="courseData">
    <el-dialog title="切换科目" :visible.sync="dialogVisible" width="1100px">
      <div class="my-course">
        <div class="my-course__header">
          <el-tabs :value="activeName" @tab-click="tabChange">
            <el-tab-pane
              v-for="(tab, tabIndex) in tabList"
              :key="tabIndex"
              :label="tab.educationName"
              :name="tab.id"
            ></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="time"
                  v-if="item.serviceStartTime && item.serviceEndTime"
                >
                  学习服务期：{{
                    $tools.timestampToTime(item.serviceStartTime, false)
                  }}
                  至
                  {{ $tools.timestampToTime(item.serviceEndTime, false) }}
                </div>

                <div class="state">
                  <template
                    v-if="
                      item.serviceStartTime &&
                      (sysTime < item.serviceStartTime ||
                        sysTime > item.serviceEndTime)
                    "
                  >
                    <div class="red">不在学习服务期，不可以学习了哦</div>
                  </template>

                  <template v-else>
                    <template
                      v-if="
                        !(item.classEndTime && item.classEndTime < sysTime) &&
                        !(item.classStartTime && item.classStartTime > sysTime)
                      "
                    >
                      <template
                        v-if="item.periodStatus == -1 || item.periodStatus == 2"
                      >
                        <template
                          v-if="
                            item.classStatus == 1 || item.classStatus === null
                          "
                        >
                          <template
                            v-if="
                              sysTime >= item.serviceStartTime &&
                              sysTime <= item.serviceEndTime
                            "
                          >
                            学习状态：
                            <div
                              class="note"
                              v-if="item.stuAllNum + item.recordNum == 0"
                            >
                              未学习
                            </div>
                            <div
                              class="note note--yellow"
                              v-else-if="
                                item.stuAllNum + item.recordNum > 0 &&
                                item.stuAllNum + item.recordNum <
                                  item.secAllNum + item.examNum
                              "
                            >
                              学习中
                            </div>
                            <div
                              class="note note--green"
                              v-else-if="
                                item.stuAllNum + item.recordNum >=
                                item.secAllNum + item.examNum
                              "
                            >
                              已学完
                            </div>
                          </template>

                          <template v-else>
                            <span class="red" v-if="item.serviceStartTime">
                              已过学习服务期，不可以学习了哦！</span
                            >
                          </template>
                        </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>

                      <!-- 学时审核状态可以审核 -->
                      <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 <
                                $tools.TimeTotimestamp(
                                  $tools.timestampToTime(
                                    item.subApplySiteExamTime,
                                    true
                                  ) +
                                    ' ' +
                                    item.subApplySiteStartTime
                                )
                            "
                          >
                            待考试，考试时间：{{
                              $tools.timestampToTime(
                                item.subApplySiteExamTime,
                                true
                              ) +
                              " " +
                              item.subApplySiteStartTime
                            }}
                            -
                            {{
                              $tools.timestampToTime(
                                item.subApplySiteExamTime,
                                true
                              ) +
                              " " +
                              item.subApplySiteEndTime
                            }}
                          </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>
                    </template>
                  </template>
                </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 btn--normal"
                      :class="{
                        disabled:
                          (item.serviceStartTime &&
                            (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),
                      }"
                      @click="goCourseDetail(item)"
                      >进入学习</el-button
                    >

                    <el-button
                      type="primary"
                      class="btn"
                      @click="appointment(item)"
                      v-if="
                        item.applyStatus === 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="danger"
                      class="btn btn--warm"
                      @click="selectClass(item)"
                      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
                      "
                    >
                      选班重学
                    </el-button>
                    <el-button
                      type="primary"
                      class="btn"
                      v-if="
                        item.beforeStatus === 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)
                        )
                      "
                      @click="appBeforeAddress(item)"
                      >进入刷题</el-button
                    >
                  </div>
                </div>
              </div>
              <template
                v-if="
                  !(
                    sysTime < item.serviceStartTime ||
                    sysTime > item.serviceEndTime
                  )
                "
              >
                <div
                  class="course-item__footer"
                  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
                  >
                </div>

                <div
                  class="course-item__footer"
                  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
                  >
                </div>

                <template v-else>
                  <div
                    class="course-item__footer"
                    v-if="
                      item.gradeId != 0 &&
                      item.gradeStatus == 1 &&
                      item.classStatus != null
                    "
                  >
                    <span class="text"
                      >班级状态：
                      {{
                        item.classStatus == 1
                          ? "已开班"
                          : item.classStatus == 0
                          ? "未开班"
                          : ""
                      }}
                    </span>
                    <span class="text"
                      >班级有效期：{{
                        $tools.timestampToTime(item.classStartTime, true, true)
                      }}-{{
                        $tools.timestampToTime(item.classEndTime, true, true)
                      }}</span
                    >
                  </div>
                  <div class="course-item__footer" v-if="item.classStatus == 0">
                    <span class="text">教务处正在为您开通班级，请耐心等待</span>
                  </div>
                </template>
              </template>
            </div>
          </div>

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

        <el-dialog
          title="实名验证确认"
          :visible.sync="showConfirm"
          width="600px"
          class="showconfirm"
          :close-on-click-modal="false"
          :close-on-press-escape="false"
          :show-close="false"
        >
          <div class="showconfirm__content">
            <div class="text">
              为避免个人信息不正确导致您的学习时长无效，请认真核对以下信息是否正确，如信息有误请取消当前操作，立刻联系020-38946666
            </div>
            <el-descriptions :column="1">
              <el-descriptions-item label="姓名">{{
                userInfo && userInfo.realname
              }}</el-descriptions-item>
              <el-descriptions-item label="手机号">{{
                userInfo && userInfo.telphone
              }}</el-descriptions-item>
              <el-descriptions-item label="身份证号">{{
                userInfo && userInfo.idCard
              }}</el-descriptions-item>
            </el-descriptions>

            <div class="">
              <el-checkbox v-model="confirmChecked"
                >确认个人信息无误</el-checkbox
              >
            </div>
          </div>
          <span slot="footer" class="dialog-footer">
            <el-button @click="showConfirm = false">取 消</el-button>
            <el-button
              type="primary"
              @click="confirmUser"
              :disabled="confirmCount > 0"
              :loading="confirmLoading"
              >{{
                confirmCount > 0 ? "确 定(" + confirmCount + ")" : "确 定"
              }}</el-button
            >
          </span>
        </el-dialog>

        <el-dialog
          title="预约考试"
          :visible.sync="appointModal"
          width="600px"
          class="appoint-modal"
          :close-on-click-modal="false"
          :close-on-press-escape="false"
        >
          <div class="appoint-modal__content">
            <el-radio
              v-for="(
                appointChild, appointIndex
              ) in appointItem.examApplyGoodsList"
              v-model="applyId"
              :key="appointIndex"
              :label="appointChild.applyId"
              >{{ appointChild.applyName }}</el-radio
            >
          </div>
          <span slot="footer" class="dialog-footer">
            <el-button @click="appointModal = false">取 消</el-button>
            <el-button type="primary" @click="confirmAppoint"
              >立即预约</el-button
            >
          </span>
        </el-dialog>

        <SelectClassModal
          ref="selectClassModal"
          @selectClassOk="selectClassOk"
        ></SelectClassModal>

        <RebuildModal
          ref="rebuildModal"
          @rebuildSubmit="rebuildSubmit($event)"
        ></RebuildModal>

        <ExercisesModal ref="exercisesModal"></ExercisesModal>
      </div>
    </el-dialog>
  </div>
</template>


<script>
import { mapGetters, mapActions } from "vuex";
import SelectClassModal from "@/components/selectClassModal";
import RebuildModal from "@/components/rebuildModal";
import ExercisesModal from "@/components/exercisesModal";
import * as baseUrls from "@/axios.js";
export default {
  name: "MyCourse",
  components: {
    SelectClassModal,
    RebuildModal,
    ExercisesModal,
  },
  data() {
    return {
      dialogVisible: false,
      appointItem: {},
      applyId: "",
      appointModal: false,
      activeItem: {},
      confirmChecked: false,
      confirmTimer: null,
      confirmLoading: false,
      confirmCount: 10,
      showConfirm: false,
      tabList: [],
      sysTime: 0,
      activeName: "-1",
      param: {
        pageNum: 1,
        pageSize: 10,
      },

      total: 0,
      courseList: [],
      loading: null,
      showExercisesModal: false,
    };
  },
  computed: {
    ...mapGetters(["userInfo"]),
  },
  async mounted() {
    this.getUserInfo();
    this.sysTime = this.$tools.timest();
    // await this.orderUserEduList();
    this.courseGoodsList();
  },
  methods: {
    ...mapActions(["getUserInfo"]),
    openBoxs(data) {
        console.log(data)
      this.dialogVisible = true;
    },
    activeFunc() {},
    tabChange(e) {
      if (this.activeName == e.name) {
        return;
      }

      this.activeName = e.name;
      this.courseGoodsList();
    },
    confirmUser() {
      if (!this.confirmChecked) {
        this.$message.warning("请勾选确认个人信息无误");
        return;
      }
      this.confirmLoading = true;
      let infoJson = {
        realname: this.userInfo.realname,
        idCard: this.userInfo.idCard,
        telphone: this.userInfo.telphone,
      };
      this.$request
        .userConfirminfo({
          infoJson: JSON.stringify(infoJson),
          orderGoodsId: this.activeItem.orderGoodsId,
        })
        .then((res) => {
          if (res.data.pushInfo) {
            this.$message.success("提交成功");
          } else {
            this.$confirm(
              "开通信息推送不成功，无法进入学习，请联系020-87085982！",
              "提示",
              {
                confirmButtonText: "确定",
                closeOnClickModal: false,
                closeOnPressEscape: false,
                distinguishCancelAndClose: false,
                showClose: false,
                showCancelButton: false,
              }
            )
              .then((_) => {})
              .catch((_) => {});
          }
          this.showConfirm = false;
          this.confirmLoading = false;
        });
    },
    orderUserEduList() {
      return new Promise((resolve) => {
        this.$request
          .orderUserEduList({
            goodsType: 1,
          })
          .then((res) => {
            res.rows.forEach((row) => {
              row.id = row.id + "";
            });
            this.tabList.push(
              {
                educationName: "全部课程",
                id: "-1",
              },
              ...res.rows
            );

            resolve();
          });
      });
    },

    currentChange(e) {
      this.param.pageNum = e;
      this.courseGoodsList();
    },
    async goCourseDetail(item) {
      this.activeItem = item;
      if (item.interfaceAccountId > 0) {
        //学习账号已开通

        if (item.learnStatus == 1) {
          //跳转第三方h5

          this.$router.push({
            path: `/my-course-detail/${item.goodsId}`,
            query: {
              gradeId: item.gradeId,
              orderGoodsId: item.orderGoodsId,
              isOther: 1,
            },
          });
          return;
        } else {
          this.$message({
            type: "warning",
            message:
              "您的学习账号未开通，请稍后再尝试，有疑问，请联系020-87085982！",
          });
          return;
        }
      }

      if (
        (item.serviceStartTime && this.sysTime <= item.serviceStartTime) ||
        (item.serviceEndTime && 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;
      }

      var confirmDetail = true;
      if (item.educationName == "继续教育") {
        if (
          item.officialName &&
          item.businessName == "二级" &&
          item.projectName == "建造师"
        ) {
          confirmDetail = await this.userConfirmInfoDetail();
        }
      }

      // //内部系统
      // if (item.interfacePushId > 0 && item.officialStatus != 1) {
      //   this.$message({
      //     type: "warning",
      //     message: "机构正在为您报名中，请耐心等待，有疑问请联系020-87085982！",
      //   });
      //   return;
      // }

      if (!confirmDetail) {
        return;
      }

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

      if (rebuildStatus == 0) {
        this.$refs.rebuildModal.showModal(item);
        return;
      }

      // if (item.educationName == "继续教育") {
      this.$request
        .lockLockStatus({
          action: "jxjy",
          uuid: sessionStorage.getItem("uuid"),
        })
        .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) {
                // if (
                //   item.officialName &&
                //   item.businessName == "二级" &&
                //   item.projectName == "建造师"
                // ) {
                //   this.userConfirmInfoDetail().then((res) => {
                //     this.$router.push({
                //       path: `/my-course-detail/${item.goodsId}`,
                //       query: {
                //         gradeId: item.gradeId,
                //         orderGoodsId: item.orderGoodsId,
                //         courseId: res.rows[0].courseId || "",
                //       },
                //     });
                //   });
                // } else {
                    this.$emit("backData",item)
                    this.dialogVisible = false
                    return
                this.$router.push({
                  path: `/my-course-detail/${item.goodsId}`,
                  query: {
                    gradeId: item.gradeId,
                    orderGoodsId: item.orderGoodsId,
                    courseId: res.rows[0].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.$router.push({
      //           path: `/my-course-detail/${item.goodsId}`,
      //           query: {
      //             gradeId: item.gradeId,
      //             orderGoodsId: item.orderGoodsId,
      //             courseId: res.rows[0].courseId || "",
      //           },
      //         });
      //       } else {
      //         this.$message({
      //           type: "warning",
      //           message: "课程内暂无可以学习的科目",
      //         });
      //       }
      //     });
      // }
    },

    userConfirmInfoDetail() {
      return new Promise((resolve) => {
        this.$request
          .userConfirmInfoDetail({
            orderGoodsId: this.activeItem.orderGoodsId,
          })
          .then((res) => {
            if (!res.data) {
              clearInterval(this.confirmTimer);
              this.confirmCount = 10;
              this.showConfirm = true;
              this.confirmTimer = setInterval(() => {
                if (this.confirmCount > 0) {
                  this.confirmCount--;
                } else {
                  clearInterval(this.confirmTimer);
                }
              }, 1000);
            } else {
              if (res.data.pushInfo) {
                resolve(true);
              } else {
                this.$confirm(
                  "开通信息推送不成功，无法进入学习，请联系020-87085982！",
                  "提示",
                  {
                    confirmButtonText: "确定",
                    closeOnClickModal: false,
                    closeOnPressEscape: false,
                    distinguishCancelAndClose: false,
                    showClose: false,
                    showCancelButton: false,
                  }
                )
                  .then((_) => {})
                  .catch((_) => {});
                resolve(false);
              }
            }
          });
      });
    },

    appBeforeAddress(item) {
      this.$refs.exercisesModal.showModal(item);
    },

    rebuildSubmit(item) {
      this.$router.push({
        path: `/my-course-detail/${item.goodsId}`,
        query: {
          gradeId: item.gradeId,
          orderGoodsId: item.orderGoodsId,
          rebuild: 1,
        },
      });
    },
    selectClass(item) {
      this.$refs.selectClassModal.showModal(item);
    },

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

    courseGoodsList() {
      let param = JSON.parse(JSON.stringify(this.param));

      if (this.activeName == "-1") {
        param.educationTypeId = "";
      } else {
        param.educationTypeId = this.activeName;
      }
      this.$request.courseGoodsList(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) {
      this.applyId = "";
      this.appointItem = item;
      this.appointModal = true;
    },

    confirmAppoint() {
      if (!this.applyId) {
        this.$message.warning("请选择要预约的考试");
        return;
      }
      var data = {
        goodsId: this.appointItem.goodsId,
        gradeId: this.appointItem.gradeId,
        applyId: this.applyId,
        orderGoodsId: this.appointItem.orderGoodsId,
      };
      this.$request
        .getApplysubscribe(data)
        .then((res) => {
          this.$router.push({
            path: "/person-center/my-classhour/appointment",
            query: {
              goodsId: this.appointItem.goodsId,
              gradeId: this.appointItem.gradeId,
              orderGoodsId: this.appointItem.orderGoodsId,
              applyId: this.applyId,
            },
          });
        })
        .catch((err) => {
          this.$message({
            type: "warning",
            message: err.msg,
          });
        });
    },
  },
};
</script>

<!-- Add "scoped" attribute to limit CSS to this component only -->
<style scoped lang="scss">
/deep/ .el-dialog{
    margin-top: 6vh!important;
}
.my-course {
    max-height: 80vh;
    overflow: auto;
  &__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;

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

        &__body {
          .img {
            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: 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;

                &--normal {
                  &.disabled {
                    background: rgb(101, 164, 253);
                    border-color: rgb(101, 164, 253);
                  }
                }

                &--warm {
                  background: #ff3b30;

                  &:hover {
                    background: #f56c6c;
                  }
                }
              }
            }
          }
        }

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

          .text {
            margin-right: 20px;

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

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

  .exercises-modal {
    &__content {
      > div {
        font-size: 16px;
        line-height: 30px;
        text-align: center;

        img {
          display: inline;
        }
      }
    }
  }

  .appoint-modal {
    &__content {
      .el-radio {
        display: block;
        margin: 10px 30px 10px 0;
      }
    }
  }
}
</style>