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

<template>
  <div id="courseData">
    <div class="my-course">
      <div style="padding-top: 14px">
        <strong style="font-size: 18px">我的课程</strong>
        <el-divider></el-divider>
      </div>
      <div>
        <span>学习进度：</span>
        <el-button
          :disabled="loading"
          size="small"
          v-for="(item, index) in studyStatusList"
          :key="index"
          :type="activeStudyStatus == item.value ? 'primary' : null"
          @click="studyStatusFunc(item.value)"
          >{{ item.label }}</el-button
        >
      </div>
      <div style="padding-top: 14px">
        <span>教育类型：</span>
        <el-button
          :disabled="loading"
          size="small"
          v-for="(tab, tabIndex) in tabList"
          :key="tabIndex"
          :type="activeName == tab.id ? 'primary' : null"
          @click="tabChange(tab.id)"
          >{{ tab.educationName }}</el-button
        >
      </div>
      <div
        v-if="
          $store.state.TENANT_NANE == '867735392558919680' &&
          oldPageJumpData &&
          oldPageJumpData.goodsNames.length > 0
        "
        class="oldPageJump"
      >
        <template>
          <h4>因系统升级，您的部分课程：</h4>
          <ul>
            <li
              v-for="(items, indexs) in oldPageJumpData.goodsNames"
              :key="indexs"
            >
              {{ items }}
            </li>
          </ul>
          <p>
            需进入旧系统学习，给您带来不便敬请谅解！我们正在加快完成系统升级合并中！
          </p>
        </template>
        <p style="font-weight: bold; color: #409eff">
          请问是否现在进入旧系统学习：
        </p>
        <el-button @click="goPage(oldPageJumpData.pcUrl)" type="primary"
          >点击进入</el-button
        >
      </div>
      <div class="my-course__body">
        <el-main class="list" v-loading="loading">
          <el-empty
            description="请前往购买商品"
            v-if="courseList.length === 0"
          ></el-empty>
          <div
            class="course-item"
            v-for="(item, index) in courseList"
            :key="index"
          >
            <div class="course-item__header"></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" style="margin-bottom: 14px">
                  {{ item.goodsName }}
                  <div class="note">
                    {{ item.courseNum }}课程
                    {{ item.secAllNum + item.examNum }}节
                    {{ item.classHours }}学时
                  </div>
                  <div class="note" v-if="item.orderYear">
                    {{ item.orderYear }}年
                  </div>
                </div>

                <div class="state" style="margin-bottom: 14px">
                  <template v-if="item.periodStatus == -1 || item.educationName == '考前培训'">
                    学习状态：
                    <div class="note" v-if="item.studyStatus == 1">未学习</div>
                    <div
                      class="note note--blue"
                      v-else-if="item.stuAllNum + item.recordNum < item.secAllNum + item.examNum"
                    >
                      学习中
                    </div>
                    <div
                      class="note note--green"
                      v-else
                    >
                      已学完
                    </div>
                  </template>
                  <!-- v-else -->
                  <template v-if="item.educationName != '考前培训'">
                    学习状态：
                    <div class="note" v-if="item.periodStatus == 0">
                      学时审核不通过
                    </div>
                    <div
                      class="note note--yellow"
                      v-else-if="item.periodStatus == 2"
                    >
                      学时待审核
                    </div>
                    <div
                      class="note note--yellow"
                      v-else-if="item.periodStatus == 3"
                    >
                      审核中
                      <!-- 初审已通过 -->
                    </div>
                    <template v-else-if="item.periodStatus == 1">
                      <div class="note note--green" v-if="item.periodPlush > 0">
                        初审完成
                      </div>
                      <div v-else 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
                    v-if="
                      false &&
                      !(item.classEndTime && item.classEndTime < sysTime) &&
                      !(item.classStartTime && item.classStartTime > sysTime)
                    "
                  >
                    <!-- 学时审核状态可以审核 -->
                    <template
                      v-if="
                        item.periodStatus != -1 &&
                        item.educationName != '考前培训'
                      "
                    >
                      <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 v-else>
                      <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>
                  </template>
                </div>
                <div class="progress" style="margin-bottom: 14px">
                  学习进度：
                  <span class="class_btn">{{ progressText(item) }}</span>
                  <span
                    v-if="
                      item.serviceStartTime &&
                      item.serviceEndTime &&
                      item.educationName != '继续教育'
                    "
                  >
                    学习服务期：<span
                      :style="
                        sysTime <= item.serviceStartTime ||
                        sysTime >= item.serviceEndTime
                          ? 'text-decoration:line-through'
                          : null
                      "
                    >
                      {{ $tools.timestampToTime(item.serviceStartTime, false) }}
                      至
                      {{ $tools.timestampToTime(item.serviceEndTime, false) }}
                    </span>
                    <span
                      v-if="
                        item.serviceStartTime &&
                        item.serviceEndTime &&
                        $tools.GetRTime(item.serviceEndTime) <= 15
                      "
                      style="color: red"
                    >
                      （剩余{{
                        $tools.GetRTime(item.serviceEndTime) > 0
                          ? $tools.GetRTime(item.serviceEndTime)
                          : 0
                      }}天）
                    </span>
                  </span>
                </div>
                <div
                  v-if="item.educationName != '考前培训'"
                  class="class_style"
                  style="margin-bottom: 14px"
                >
                  班级状态：
                  <span class="class_btn">{{
                    classStatusCompt(item, sysTime)
                  }}</span>
                  班级有效期：
                  <span
                    style="text-decoration: line-through"
                    v-if="item.classEndTime && item.classEndTime < sysTime"
                  >
                    {{ $tools.timestampToTime(item.classStartTime, false) }}
                    至
                    {{ $tools.timestampToTime(item.classEndTime, false) }}
                  </span>
                  <span
                    v-else-if="
                      item.classStartTime && item.classStartTime > sysTime
                    "
                  >
                    {{ $tools.timestampToTime(item.classStartTime, false) }}
                    至
                    {{ $tools.timestampToTime(item.classEndTime, false) }}
                  </span>
                  <span
                    v-else-if="
                      item.gradeId != 0 &&
                      item.gradeStatus == 1 &&
                      item.classStatus != null &&
                      item.classStatus != 0
                    "
                  >
                    <span
                      >{{ $tools.timestampToTime(item.classStartTime, false) }}
                      至
                      {{
                        $tools.timestampToTime(item.classEndTime, false)
                      }}</span
                    >
                  </span>
                  <span v-else>——</span>
                  <span
                    v-if="
                      item.classStartTime &&
                      item.classEndTime &&
                      $tools.GetRTime(item.classEndTime) <= 15
                    "
                    style="color: red"
                    >（剩余{{
                      $tools.GetRTime(item.classEndTime) > 0
                        ? $tools.GetRTime(item.classEndTime)
                        : 0
                    }}天）</span
                  >
                </div>
              </div>
              <div class="btns-wrap">
                <div class="btns">
                  <el-button
                    :type="
                      item.externalLinkStatus == 1
                        ? 'primary'
                        : computedStudyStatus(item, sysTime)
                        ? 'info'
                        : 'primary'
                    "
                    class="btn btn--normal"
                    @click="
                      item.externalLinkStatus == 1
                        ? jumpLink(item)
                        : goCourseDetail(item)
                    "
                    >进入学习
                  </el-button>
                  <!-- 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) ||
                          !item.examApplyGoodsList.length
                        )
                    " -->
                  <el-button
                    v-if="
                      item.examApplyGoodsList &&
                      item.examApplyGoodsList.length > 0 &&
                      item.subscribeSign != 0
                    "
                    type="primary"
                    class="btn"
                    @click="appointment(item)"
                    >{{ item.subscribeSign == 1 ? "预约考试" : "预约记录" }}
                  </el-button>
                  <el-button
                    v-if="item.openQuestion == 1 && false"
                    type="primary"
                    class="btn"
                    @click="buyAutoBank(item)"
                    >购买题库</el-button
                  >
                  <el-button
                    v-if="
                      ((item.profileChangeStatus == 1 &&
                        (item.profileStatus == 1 || item.profileStatus == 2)) ||
                        (item.profileChangeStatus == 2 &&
                          item.profileStatus != -1)) &&
                      item.educationName == '考前培训' &&
                      item.projectName == '施工现场专业人员'
                    "
                    type="primary"
                    class="btn"
                    @click="dataReview(item)"
                    >学员资料</el-button
                  >
                  <el-button
                    v-if="
                      item.periodStatus == 1 &&
                      !(item.periodPlush > 0) &&
                      item.educationName == '继续教育' &&
                      item.projectName == '专业技术人员' &&
                      item.businessName == '职称继续教育'
                    "
                    type="primary"
                    class="btn"
                    @click="go('/person-center/my-classhour')"
                    >学习凭证</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>

            <div
              class="course-item__footer"
              style="color: red"
              v-if="
                (item.erJianErZao || sevenFunc(item)) &&
                !item.classStartTime &&
                !item.classEndTime
              "
            >
              温馨提示：当前班级正在申请中，正式开班后方可进行学习，请耐心等待
            </div>
            <div
              class="course-item__footer"
              style="color: red"
              v-if="item.officialStatus != 1 && false"
            >
              推送失败原因：{{ item.pushFailReason || "请先完善个人信息" }}
            </div>

            <!-- $tools.GetRTime(item.serviceEndTime) <= 20 &&
                 ↓↓-->
            <!-- <div
              class="course-item__footer"
              style="color: red;"
              v-if="item.periodStatus == 0 || item.periodStatus == -1"
            >
              <span v-if="$tools.GetRTime(item.classEndTime) >= 0">
                温馨提示：当前学习有效期至{{
                  $tools.timestampToTime(item.classEndTime)
                }}，超期学时无效，为防审核异常请于{{
                  $tools.timestampToTime(item.classEndTime - 864000, false)
                }}
                前完成学习，当前剩余有效学习时间为{{
                  $tools.GetRTime(item.classEndTime) < 0
                    ? 0
                    : $tools.GetRTime(item.classEndTime)
                }}天。
              </span>
              <span v-else-if="$tools.GetRTime(item.serviceEndTime) >= 0">
                温馨提示：当前学习有效期至{{
                  $tools.timestampToTime(item.serviceEndTime)
                }}，超期学时无效，为防审核异常请于{{
                  $tools.timestampToTime(item.serviceEndTime - 864000, false)
                }}
                前完成学习，当前剩余有效学习时间为{{
                  $tools.GetRTime(item.serviceEndTime) < 0
                    ? 0
                    : $tools.GetRTime(item.serviceEndTime)
                }}天。
              </span>
            </div> -->
            <!-- 关于二建继教提示 -->
            <div
              class="course-item__footer"
              style="color: red"
              v-if="item.periodStatus == 0 || item.periodStatus == -1"
            >
              <span
                v-if="
                  $tools.GetRTime(item.classEndTime) >= 0 &&
                  $tools.GetRTime(item.classEndTime) <= 15 && 
                  item.educationName != '考前培训'
                "
              >
                温馨提示：您当前的课程班级有效期还剩
                {{
                  $tools.GetRTime(item.classEndTime) > 0
                    ? $tools.GetRTime(item.classEndTime)
                    : 0
                }}
                天, 请在{{
                  $tools.timestampToTime(item.classEndTime - 864000, false)
                }}
                前完成学习及考试，到期未完成学时将清零，需重新学习。
              </span>
              <span
                v-else-if="
                  $tools.GetRTime(item.serviceEndTime) >= 0 &&
                  $tools.GetRTime(item.serviceEndTime) <= 15 &&
                  item.educationName != '继续教育'
                "
              >
                温馨提示：您当前的课程学习服务期还剩
                {{
                  $tools.GetRTime(item.serviceEndTime) > 0
                    ? $tools.GetRTime(item.serviceEndTime)
                    : 0
                }}
                天, 请在{{
                  $tools.timestampToTime(item.serviceEndTime - 864000, false)
                }}
                前完成学习，避免课程过期作废，无法学习给您带来不便。
              </span>
            </div>
            <!-- 公路工程专业提示 -->
            <div
              class="course-item__footer"
              style="color: red"
              v-if="isTwoEducation(item)"
            >
              <span v-if="item.sevenPushReason === '培训周期时间未到'">
                温馨提示：您{{
                  item.orderYear
                }}年公路工程专业培训周期还没到，请在{{ $tools.timestampToTime(item.sevenPushDate - 864000) }}后再进行继教。
              </span>
              <span v-if="item.sevenPushReason === '无相关专业专书'">
                温馨提示：您当前的课程{{
                  item.orderYear
                }}年公路工程专业，未能匹配到可继教证书，可前往住建证书官网查询。
                <span
                  style="color: #2f9aff; cursor: pointer"
                  @click="copy('https://rcgz.mohurd.gov.cn/Login/NetworkingSearch?type=2') "
                >
                  复制官网链接
                </span>
              </span>
              <span v-if="item.sevenPushReason === '无需2024继续教育'">
                温馨提示：您{{
                  item.orderYear
                }}年公路工程专业已完成继教，无需重复继教，可前往住建证书官网查询。
                <span
                  style="color: #2f9aff; cursor: pointer"
                  @click="copy('https://rcgz.mohurd.gov.cn/Login/NetworkingSearch?type=2')"
                >
                  复制官网链接
                </span>
              </span>
            </div>
            <div
              class="course-item__footer"
              style="color: red"
              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)
              "
            >
              <span v-if="item.studyCount > 0"
                >温馨提示：班级已过期，如需重新学习，请点击右侧“选班重学”按钮。</span
              >
              <span v-else
                >温馨提示：班级已过期，您的重学次数已用完，如有疑问请联系{{
                  $store.state.userInfo.eduPhone
                }}</span
              >
            </div>
            <div
              class="course-item__footer"
              style="color: red"
              v-if="item.serviceEndTime && item.serviceEndTime < sysTime"
            >
              温馨提示：学习服务期已截至，如有疑问请联系：{{
                $store.state.userInfo.eduPhone
              }}
            </div>
            <!-- 关于二建继教通过提示 -->
            <div
              class="course-item__footer"
              style="color: red"
              v-if="item.periodStatus === 1 && isTwoEducation(item)"
            >
              温馨提示：您的学时{{
                $tools.timestampToTime(item.periodTime)
              }}机构已审核通过，
              需等待信息中心约15个工作日复审通过后即可获得继续教育学时，届时请前往信息中心官网查看学时及申请证书延期。
              <span
                style="color: #2f9aff; cursor: pointer"
                @click="copy('http://gdzczx.gdcic.net/')"
              >
                复制官网链接
              </span>
            </div>
            <!-- <div
              class="course-item__footer"
              style="color: red;"
              v-if="item.periodStatus === 2 && !sevenFunc(item)"
            >
              温馨提示：您已完成本课程所有学时学习，我校将对学时进行审核，审核及推送时长预估15个工作日，如有疑问请联系：{{
                $store.state.userInfo.eduPhone
              }}，学时查询网址：http://gdzczx.gdcic.net
            </div> -->
            <!-- <div
              class="course-item__footer"
              style="color: red;"
              v-if="item.periodStatus === 1 && !sevenFunc(item)"
            >
              温馨提示：您的班级学习初审已通过，待广东省建设信息中心归集学时，归集完成即为完成本次继续教育学习。归集学时需约10-15个工作日，具体以广东省建设执业资格注册服务平台的“继续教育学时查询”公布学时记录为准，学时查询网址：http://gdzczx.gdcic.net
            </div> -->
          </div>
        </el-main>

        <div class="pagination" v-if="total > 0">
          <el-pagination
            @current-change="currentChange"
            background
            layout="prev, pager, next"
            :total="total"
            :pager-count="5"
            :current-page.sync="param.pageNum"
            :page-size="param.pageSize"
          >
          </el-pagination>
        </div>
      </div>
    </div>
    <!-- 预约考试弹窗 -->
    <appoint-test
      :appointModal.sync="appointModal"
      :appointItem="appointItem"
      ref="appoint"
    ></appoint-test>

    <!-- 选班重学弹窗 -->
    <SelectClassModal
      ref="selectClassModal"
      @selectClassOk="selectClassOk"
    ></SelectClassModal>

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

    <ExercisesModal ref="exercisesModal"></ExercisesModal>
    <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="applyBeforeKnow"
      width="800px"
      class="showconfirm"
      :close-on-click-modal="false"
      :close-on-press-escape="false"
      ><div
        class="ql-editor"
        style="white-space: pre-wrap"
        v-html="applyBeforeKnowValue"
      ></div>
      <span slot="footer" class="dialog-footer">
        <el-button @click="applyBeforeKnow = false">取 消</el-button>
        <el-button type="primary" @click="appointmentYes()">确 定</el-button>
      </span></el-dialog
    >
    <dataReview ref="dataReview" @callbackDataReview="courseGoodsList()" />
  </div>
</template>

<script>
import { Loading } from "element-ui";
import { mapGetters, mapActions } from "vuex";
import SelectClassModal from "@/components/selectClassModal";
import RebuildModal from "@/components/rebuildModal";
import ExercisesModal from "@/components/exercisesModal";
import dataReview from "@/components/dataReview";
import AppointTest from "./components/AppointTest.vue";
import * as baseUrls from "@/axios.js";
export default {
  name: "MyCourse",
  components: {
    SelectClassModal,
    RebuildModal,
    ExercisesModal,
    dataReview,
    AppointTest,
  },
  data() {
    return {
      applyBeforeKnow: false,
      applyBeforeKnowValue: "",
      studyStatusList: [
        {
          label: "全部",
          value: "-1",
        },
        {
          label: "未开始",
          value: 1,
        },
        {
          label: "未完成",
          value: 2,
        },
        {
          label: "已完成",
          value: 3,
        },
      ],
      activeStudyStatus: "-1",
      appointItem: {},
      applyId: "",
      appointModal: false,
      activeItem: {},
      confirmChecked: false,
      confirmTimer: null,
      confirmLoading: false,
      confirmCount: 10,
      showConfirm: false,
      tabList: [],
      sysTime: 0,
      activeName: "-1",
      param: {
        pageNum: 1,
        pageSize: 5,
      },

      total: 0,
      courseList: [],
      loading: false,
      oldPageJumpData: null,
    };
  },
  computed: {
    ...mapGetters(["userInfo"]),
    computedStudyStatus: function () {
      return function (item, sysTime) {
        var bool = false;
        if (
          (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)
        ) {
          bool = true;
        }
        return bool;
      };
    },
    classStatusCompt: function () {
      return function (item, sysTime) {
        var str = "未开班";
        if (item.classEndTime && item.classEndTime < sysTime) {
          str = "已过期";
        } else if (item.classStartTime && item.classStartTime > sysTime) {
          str = "未开始";
        } else if (
          item.gradeId &&
          item.gradeStatus == 1 &&
          item.classStatus === 1
        ) {
          str = "已开班";
        } else if (
          item.gradeId &&
          item.gradeStatus == 1 &&
          item.classStatus === 0
        ) {
          str = "未开班";
        }
        return str;
      };
    },
    // 二建继教提示判断
    isTwoEducation() {
      return function(item) {
        return (
          item.educationName + item.businessName + item.projectName ===
          "继续教育二级建造师"
        );
      }
    },
  },
  async mounted() {
    this.getUserInfo();
    this.sysTime = this.$tools.timest();
    await this.orderUserEduList();
    this.courseGoodsList();
    this.$bus.$on("getNewGoodsList", () => {
      this.courseGoodsList();
    });
    this.$request.courseoldgoodslist().then((res) => {
      if (res.data && res.data.goodsNames.length > 3) {
        res.data.goodsNames.splice(3, res.data.goodsNames.length, "...");
      }
      this.oldPageJumpData = res.data || null;
    });
  },
  methods: {
    ...mapActions(["getUserInfo"]),
    //进入外链
    sevenFunc(item) {
      return (
        item.educationName == "继续教育" &&
        item.projectName == "施工现场专业人员"
      );
    },
    jumpLink(item) {
      if (item.externalLink == "/outsideChain") {
        this.$router.push({
          path: "/outsideChain",
          query: {
            goodsId: item.goodsId,
          },
        });
        // window.open(item.externalLink + "?goodsId=" + item.goodsId, "_self");
      } else {
        this.goPage(item.externalLink);
      }
    },
    goPage(url) {
      window.open(url, "_blank");
    },
    //购买山东题库
    buyAutoBank(item) {
      this.$request.goodsDetail(item.questionGoodsId).then((res) => {
        res.data.relevanceId = item.orderGoodsId;
        this.goPayment(res.data);
      });
    },
    goPayment(data) {
      if (!Array.isArray(data)) {
        data = [data];
      }
      let selectGoodsList = JSON.parse(JSON.stringify(data));
      localStorage.setItem("checkGoodsList", JSON.stringify(selectGoodsList));
      this.$router.push({
        path: "/payment",
      });
    },
    //学员资料
    dataReview(item) {
      this.$refs.dataReview.init(item, true);
    },
    studyStatusFunc(e) {
      if (this.activeStudyStatus == e) {
        return;
      }
      this.activeStudyStatus = e;
      this.param.pageNum = 1;
      this.param.pageSize = 5;
      this.courseGoodsList();
    },
    tabChange(e) {
      if (this.activeName == e) {
        return;
      }
      this.activeName = e;
      this.param.pageNum = 1;
      this.param.pageSize = 5;
      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(
              `您的信息正在推送中，请稍后再进入学习！`,
              "提示",
              {
                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;
      document.body.scrollTop = 0;
      document.documentElement.scrollTop = 0;
      this.courseGoodsList();
    },
    checkFuncA(item) {
      if (item.interfaceAccountId > 0 && item.learnStatus > 0) {
        const confirmText = [
          "您的学习账号已经开通，请按照步骤操作，进行学习。",
          "1.点击【跳转学习网址】按钮",
          "2.打开学习网址后，选择【个人用户】进行登录",
          "(1)账号：您个人的身份证号码",
          "(2)密码：身份证号码，再加111111",
        ];
        const newDatas = [];
        const h = this.$createElement;
        for (const i in confirmText) {
          newDatas.push(h("p", null, confirmText[i]));
        }
        this.$confirm(h("div", null, newDatas), "温馨提示", {
          beforeClose: (type, y, done) => {
            if (type == "confirm") {
              window.open("http://admin.zhujianpeixun.com/", "_blank");
            } else if (type == "cancel") {
              // this.$router.back(-1);
              done();
            }
          },
          confirmButtonText: "跳转学习网址",
          cancelButtonText: "关闭",
          closeOnClickModal: false,
          closeOnPressEscape: false,
          distinguishCancelAndClose: false,
          showClose: false,
        }).catch(() => {});
        return;
      }
    },
    checkFuncB(item) {
      let time = this.$tools.timest();
      let {
        interfaceAccountId,
        learnStatus,
        serviceStartTime,
        serviceEndTime,
        classStartTime,
        classEndTime,
        classStatus,
        learningStatus,
        learningTimeStart,
      } = item;
      console.log(interfaceAccountId, learnStatus, "xzx");
      if (interfaceAccountId > 0) {
        learnStatus == 1
          ? this.rebuildSubmit(item)
          : this.$message({
              type: "warning",
              message: `您的学习账号未开通，请稍后再尝试，有疑问，请联系${this.$store.state.userInfo.eduPhone}！`,
            });
        return false;
      }
      let index = [
        time <= serviceStartTime || time >= serviceEndTime,
        (classStartTime && time <= classStartTime) ||
          (classEndTime && time >= classEndTime),
        learningStatus == 2,
        classStatus == 0,
        learningStatus == 3 && time < learningTimeStart,
      ].findIndex((e) => e);
      if (index !== -1) {
        this.$message({
          type: "warning",
          message:
            [
              "不在学习服务期",
              "不在班级有效期",
              "开放学习时间待定",
              "尚未开班",
              "不在开放学习时间,",
            ][index] + "，不能进入学习",
        });
      }
      return index === -1;
    },

    // 新增用户视频学习日志
    studyLog(item, studyItem) {
      this.$axios({
        url: "/user/study/log",
        method: "post",
        data: {
          goodsId: item.goodsId,
          courseId: studyItem.courseId,
          moduleId: studyItem.moduleId || 0,
          chapterId: studyItem.chapterId || 0,
          sectionId: studyItem.sectionId || 0,
          fromPlat: 2, //来源平台 1小程序 2PC网站
          goodsType: 1, // 商品类型 1视频2题库 3补考 4前培 5虚拟赠送题库 6直播
          orderGoodsId: item.orderGoodsId,
        },
      }).then((res) => {
        console.log("直播的用户学习日志:", res);
      });
    },
    bankRecordDoNum(item, studyItem) {
      return new Promise((resolve) => {
        this.$request
          .bankRecordDoNum({
            goodsId: item.goodsId,
            gradeId: item.gradeId,
            chapterId: studyItem.chapterId,
            courseId: studyItem.courseId,
            moduleId: studyItem.moduleId,
            examId: studyItem.examId,
          })
          .then((res) => {
            resolve(res.data);
          });
      });
    },
    //重修
    rebuildSubmit(item) {
      //待检查-可能有误
      this.courseGoodsList();
    },
    RequiredCourse(item) {
      return new Promise((resolve) => {
        // if (item.categoryName !== "必修") {
        this.$request
          .goodsGradeCheckFinishRequiredCourse({
            businessId: item.businessId,
            goodsId: item.goodsId,
          })
          .then((res) => {
            if (res.data > 0) {
              this.$message.warning("请先学习必修商品");
              resolve(false);
            } else {
              resolve(true);
            }
          })
          .catch((err) => {
            this.$message.error(err.msg);
          });
        // }
      });
    },
    async goCourseDetail(item) {
      //-----------------七大员是否允许学习
      try {
        await this.$request.orderstudycheck(item.orderGoodsId);
      } catch (error) {
        this.$message.error(error.msg);
        return;
      }
      //-----------------学习开通状态
      this.checkFuncA(item);
      //-----------------检测服务期
      if (!this.checkFuncB(item)) {
        return false;
      }
      //-----------------检测必修
      if (!item.periodWaitTime) {
        if (item.educationName == "继续教育") {
          if (
            item.officialName &&
            item.businessName == "二级" &&
            (item.projectName == "建造师" || item.projectName == "造价师")
          ) {
            if (!(await this.RequiredCourse(item))) {
              return;
            }
          }
        }
      }
      //-----------------检测重修
      let rebuildStatus = await this.courseGoodsRebuildStatus(
        item.goodsId,
        item.gradeId
      );

      if (rebuildStatus == 0) {
        this.$refs.rebuildModal.showModal(item);
        return;
      }
      //-----------------E
      this.$request
        .lockLockStatus({
          action: "jxjy",
          uuid: sessionStorage.getItem("uuid"),
        })
        .then((res) => {
          //有其他端在操作，不能学习

          this.$confirm("有其他端在操作，是否将该用户踢下线？", "提示", {
            confirmButtonText: "确定",
            cancelButtonText: "取消",
            type: "warning",
          })
            .then(() => {
              this.$request.appuseroffline().then((r) => {
                this.goCourseDetail(item);
              });
            })
            .catch(() => {});
        })
        .catch((err) => {
          this.$router.push({
            path: `/my-course-detail/${item.goodsId}`,
            query: {
              gradeId: item.gradeId,
              orderGoodsId: item.orderGoodsId,
            },
          });
        });
    },
    go(item) {
      this.$router.push({
        path: `/person-center/my-classhour`,
      });
    },
    appBeforeAddress(item) {
      this.$refs.exercisesModal.showModal(item);
    },

    selectClass(item) {
      this.$confirm(
        `上次有效期内未能完成学习，还剩${item.studyCount}次学习机会，是否使用新学习机会，重选班级学习？`,
        "提示",
        {
          confirmButtonText: "确定",
          cancelButtonText: "取消",
          type: "warning",
        }
      )
        .then(() => {
          this.$refs.selectClassModal.showModal(item);
        })
        .catch(() => {});
    },

    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() {
      this.loading = true;
      let param = JSON.parse(JSON.stringify(this.param));
      if (this.activeName == "-1") {
        param.educationTypeId = "";
      } else {
        param.educationTypeId = this.activeName;
      }
      if (this.activeStudyStatus == "-1") {
        param.studyStatus = "";
      } else {
        param.studyStatus = this.activeStudyStatus;
      }
      param.querySign = 1;
      this.$request
        .courseGoodsList(param)
        .then((res) => {
          this.courseList = res.rows;
          this.total = res.total;
          //判断是否有商品可以预约考试
          this.getGoodsApply(res.rows);
        })
        .finally(() => {
          this.loading = false;
        });
    },
    getGoodsApply(array) {
      const Goods = array.find(
        (i) => i.subscribeSign == 1 || i.subscribeSign == 3
      );
      if (Goods) {
        this.$confirm(
          Goods.subscribeSign == 1
            ? `您七大员新考【${Goods.goodsName}】课程已学完，可以预约考试了！`
            : `您七大员新考【${Goods.goodsName}】课程考试未通过，请重新预约考试！`,
          "提示",
          {
            confirmButtonText: "前往",
            cancelButtonText: "关闭",
            type: "warning",
          }
        )
          .then(() => {
            this.appointment(Goods);
          })
          .catch(() => {});
      }
    },
    progressText(item) {
      return (
        item.stuAllNum + item.recordNum + "/" + (item.secAllNum + item.examNum)
      );
    },
    async appointment(item) {
      const result = await this.$request.courseoldgoodsredirect();
      if (result.data) {
        window.open(result.data.pcUrl);
        return;
      }
      if (item.subscribeSign !== 1) {
        this.$router.push({
          path: "/person-center/my-examination/index",
        });
        return;
      }
      this.appointItem = item;
      this.$request.applybeforeknow().then((res) => {
        if (res.data.type == "Y") {
          this.applyBeforeKnow = true;
          if (res.data.value) {
            res.data.value =
              res.data.value &&
              res.data.value.replace(
                /<img/gi,
                '<img style="max-width:100%;height:100%;display:block;margin:0px auto;"'
              );
          }
          this.applyBeforeKnowValue = res.data.value;
        } else {
          this.appointmentYes();
        }
      });
    },
    appointmentYes() {
      this.applyBeforeKnow = false;
      this.applyId = "";
      this.appointModal = true;
      this.$refs.appoint.openBoxs();
    },
    // 复制操作
    copy(text) {
      if (navigator.clipboard) {
        navigator.clipboard
          .writeText(text)
          .then(() => this.$message.success("复制成功~"))
          .catch(() => this.$message.success("复制失败"));
        return;
      }
      var copyInput = document.createElement("input");
      copyInput.setAttribute("value", text);
      document.body.appendChild(copyInput);
      copyInput.select();
      try {
        var copyed = document.execCommand("copy");
        if (copyed) {
          document.body.removeChild(copyInput);
          this.$message.success("复制成功");
        }
      } catch (err) {
        this.$message.error("复制失败，请检查浏览器兼容");
      }
    },
  },
  /**
   * 销毁公交
   */
  beforeDestroy() {
    this.$bus.$off("getNewGoodsList");
  },
};
</script>

<!-- Add "scoped" attribute to limit CSS to this component only -->
<style scoped lang="scss">
.oldPageJump {
  margin-top: 20px;
  border: 1px solid #eee;
  border-left: none;
  border-right: none;
  padding: 20px;
  & > h4 {
    margin-bottom: 10px;
    font-weight: 400;
  }
  ul > li {
    margin-bottom: 10px;
    font-weight: bold;
  }
  p {
    margin-bottom: 10px;
  }
}
.class_style {
  color: #666;
}
.class_btn {
  display: inline-block;
  background-color: rgb(235, 238, 245);
  color: #666;
  border-radius: 12px;
  text-align: center;
  margin-right: 10px;
  font-size: 14px;
  width: 64px;
  vertical-align: middle;
  border: 1px solid rgb(235, 238, 245);
}
/deep/ .el-dialog {
  margin-top: 6vh !important;
}
.my-course {
  &__body {
    .list {
      overflow: unset;
      padding: 20px 0px;
      .course-item {
        margin-top: 24px;
        background: #fafbfc;
        border-radius: 8px;
        overflow: hidden;
        padding: 30px;
        border: 1px solid transparent;
        transition: all 0.2s;
        &:hover {
          border: 1px solid #409eff;
          // box-shadow: 0px 1px 6px 1px rgba(0,0,0,.3);
        }
        &__body {
          display: flex;
          .img {
            float: left;
            width: 250px;
            height: 140px;

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

          .text {
            flex: 1;
            float: left;
            margin-left: 12px;
            .title {
              margin-bottom: 4px;
              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;
              }
            }

            .state {
              margin-bottom: 4px;
              font-size: 14px;
              font-family: Microsoft YaHei;
              font-weight: 400;
              color: #666666;

              .red {
                color: #ff3b30;
              }

              .note {
                vertical-align: middle;
                display: inline-block;
                padding: 0px 10px;
                background: #ffeceb;
                border: 1px solid #eb5757;
                border-radius: 12px;
                font-size: 14px;
                font-family: Microsoft YaHei;
                font-weight: 400;
                color: #eb5757;
                text-align: center;
                margin-right: 10px;
                &--blue {
                  border-color: #498afe;
                  color: #498afe;
                  background: #ecf5ff;
                }
                &--yellow {
                  border-color: #f67205;
                  color: #f67205;
                  background: #fff8e8;
                }

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

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

              &--red {
                color: #ff3b30;
              }
            }
            .progress {
              margin-bottom: 4px;
              font-size: 14px;
              font-family: Microsoft YaHei;
              font-weight: 400;
              color: #666;

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

              /deep/ .el-progress-bar {
                padding-right: 70px;
                margin-right: -70px;
              }
              /deep/ .el-progress-bar__outer {
                height: 12px !important;
              }
              /deep/ .el-progress__text {
                font-size: 14px !important;
              }
            }
          }

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

            .btns {
              display: table-cell;
              vertical-align: middle;
              text-align: center;
              .el-button {
                margin-bottom: 20px !important;
              }
              .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;
      }
    }
  }
}
.course-items {
  margin-top: 10px;
  background: #fafbfc;
  border-radius: 8px;
  overflow: hidden;
  padding-bottom: 24px;
  margin-bottom: 24px;
  border-bottom: 2px solid #eee;
  &__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 {
        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;
      }
    }
  }
}
</style>