zc_saas_h5/pages/learn/index.vue

<template>
  <view class="learnings">
    <u-navbar
      :is-back="false"
      title="学习中心"
      :border-bottom="false"
      title-color="#333333"
      back-icon-color="#ffffff"
    >
      <view class="slot-wrap">
        <image
          :src="logo"
          style="width: 178rpx; height: 31rpx; margin-left: 30rpx"
        ></image>
      </view>
    </u-navbar>
    <u-line color="#D6D6DB" />
    <view class="contents">
      <!-- <view class="diatance">
				<image class="clock" src="/static/learn/clock.png" mode=""></image>
				<text>
					一级建造师，距离考试还有
				</text>
				<u-count-down :timestamp="leftDays" :show-days="true" separator="zh" 
					:show-hours="false" :show-minutes="false" :show-seconds="false" font-size="28"
					bg-color="#007AFF" separator-color="#fff" color="#fff" separator-size="28">
				</u-count-down>
			</view> -->
      <!-- 有学习的课程 -->
      <view v-if="allCourse" class="had_courses">
        <!-- 直播 -->
        <view v-if="livingLists.length" class="lives">
          <view
            v-for="(live, l_index) in livingLists"
            :key="l_index"
            class="live_item"
            @click="toLiveLook(live)"
          >
            <view class="live_con">
              <view class="live_status">
                <image
                  v-if="bgShow(live.liveStartTime, live.watchStatus)"
                  src="/static/learn/living.png"
                  class="liv_icon"
                ></image>
                <image
                  v-else
                  src="/static/learn/wlive.png"
                  class="liv_icon"
                ></image>
                <text class="status_s">{{
                  live.liveStartTime | liveStatus(live.watchStatus)
                }}</text>
                <view
                  class="look_bt"
                  :class="{
                    living:
                      lookTimeStatus(live.liveStartTime, live.watchStatus) == 1,
                    futuring:
                      lookTimeStatus(live.liveStartTime, live.watchStatus) == 4,
                    curring: [2, 3].includes(
                      lookTimeStatus(live.liveStartTime, live.watchStatus)
                    ),
                  }"
                >
                  <text
                    v-if="
                      lookTimeStatus(live.liveStartTime, live.watchStatus) == 1
                    "
                    >点击观看</text
                  >
                  <text
                    v-if="
                      lookTimeStatus(live.liveStartTime, live.watchStatus) == 2
                    "
                    >即将开播</text
                  >
                  <template
                    v-if="
                      lookTimeStatus(live.liveStartTime, live.watchStatus) == 3
                    "
                  >
                    剩余：
                    <u-count-down
                      :timestamp="curTimeTamp(live.liveStartTime)"
                      :show-days="false"
                      color="#fff"
                      separator-color="#fff"
                      font-size="24"
                      separator-size="24"
                      bg-color="#FFB102"
                    >
                    </u-count-down>
                  </template>
                  <template
                    v-if="
                      lookTimeStatus(live.liveStartTime, live.watchStatus) == 4
                    "
                  >
                    剩余：
                    <u-count-down
                      :timestamp="curTimeTamp(live.liveStartTime)"
                      :show-days="true"
                      separator="zh"
                      color="#fff"
                      separator-color="#fff"
                      bg-color="#007AFF"
                      :show-hours="false"
                      :show-minutes="false"
                      :show-seconds="false"
                      font-size="24"
                      separator-size="24"
                    >
                    </u-count-down>
                    <u-count-down
                      :timestamp="curTimeTamp(live.liveStartTime)"
                      :show-days="false"
                      color="#fff"
                      separator-color="#fff"
                      bg-color="#007AFF"
                      font-size="24"
                      separator-size="24"
                    >
                    </u-count-down>
                  </template>
                </view>
              </view>
              <view class="liv_time">
                <text class="timeR">{{
                  live.liveStartTime | formate("mm月dd日")
                }}</text>
                <text>{{ live.liveStartTime | formate("hh:mm") }}</text>
              </view>
              <view class="liv_title">{{ live.name }}</view>
            </view>
            <image
              v-if="bgShow(live.liveStartTime, live.watchStatus)"
              src="/static/learn/living_bg.png"
              class="my_bg"
            ></image>
            <image
              v-else
              src="/static/learn/wlive_bg.png"
              class="my_bg"
            ></image>
          </view>
        </view>

        <!-- 我的课程 -->
        <view v-if="courseLists.length" class="my_courses">
          <text class="titles">我的课程</text>

          <view
            v-for="(item, index) in courseLists"
            :key="index"
            class="course_item"
          >
            <view
              class="titlews"
              @click="studyIn(item.goodsId, item.gradeId, item, index)"
            >
              <view class="cou_titles">{{ item.goodsName }}</view>
              <view
                v-if="
                  item.serviceStartTime &&
                  item.serviceEndTime &&
                  !item.externalLinkStatus
                "
                class="learn_ranges"
              >
                <image
                  class="l_range"
                  src="/static/learn/learn_range.png"
                ></image>
                学习周期：
                <text class="l_time"
                  >{{ item.serviceStartTime | formate("yyyy.mm.dd") }}-{{
                    item.serviceEndTime | formate("yyyy.mm.dd")
                  }}</text
                >
              </view>
            </view>

            <!-- 状态 -->
            <view
              v-if="item.goodsType == 1"
              class="all_status"
              @click="studyIn(item.goodsId, item.gradeId, item, index)"
            >
              <template v-if="!item.externalLinkStatus">
                <!-- 不在学习服务期 -->
                <template
                  v-if="
                    item.serviceStartTime &&
                    (sysTime < item.serviceStartTime ||
                      sysTime > item.serviceEndTime)
                  "
                >
                  <view
                    class="class-warm"
                    v-if="item.gradeId != 0 && item.gradeStatus == 1"
                  >
                    <view class="class-warm__text">
                      <view class="date"> 不在学习服务期，不可以学习了哦 </view>
                    </view>
                  </view>
                </template>

                <template v-else>
                  <!-- 班级有效期过了 -->
                  <template
                    v-if="item.classEndTime && item.classEndTime < sysTime"
                  >
                    <view class="class-warm">
                      <u-icon
                        class="class-warm__icon"
                        size="30"
                        color="#FF3B30"
                        name="error-circle-fill"
                      >
                      </u-icon>
                      <view class="class-warm__text">
                        <view class="date"
                          >班级有效期：{{
                            $method.timestampToTime(
                              item.classStartTime,
                              true,
                              true
                            )
                          }}
                          -
                          {{
                            $method.timestampToTime(
                              item.classEndTime,
                              true,
                              true
                            )
                          }}</view
                        >
                        <view class="date"
                          >班级状态：已过期，有疑问请联系
                          <text @click="call()">020-87085982</text></view
                        >
                      </view>
                    </view>
                  </template>

                  <!-- 班级有效期之前 -->
                  <template
                    v-else-if="
                      item.classStartTime && item.classStartTime > sysTime
                    "
                  >
                    <view class="class-warm">
                      <u-icon
                        class="class-warm__icon"
                        size="30"
                        color="#FF3B30"
                        name="error-circle-fill"
                      >
                      </u-icon>
                      <view class="class-warm__text">
                        <view class="date"
                          >班级有效期：{{
                            $method.timestampToTime(
                              item.classStartTime,
                              true,
                              true
                            )
                          }}
                          -
                          {{
                            $method.timestampToTime(
                              item.classEndTime,
                              true,
                              true
                            )
                          }}</view
                        >
                        <view class="date"
                          >班级状态：未到学习时间，有疑问请联系
                          <text @click="call()">020-87085982</text></view
                        >
                      </view>
                    </view>
                  </template>

                  <!-- 在班级有效期之间或者没有班级有效期 -->
                  <template v-else>
                    <view
                      class="class-warm"
                      v-if="
                        item.gradeId != 0 &&
                        item.gradeStatus == 1 &&
                        item.classStatus != null
                      "
                    >
                      <view class="class-warm__text">
                        <view class="date">
                          班级状态：
                          <text v-if="item.classStatus == 1">已开班</text>
                          <text v-if="item.classStatus == 0">未开班</text>
                        </view>
                        <view class="date" v-if="item.classStatus == 0"
                          >教务处正在为您开通班级，请耐心等待</view
                        >
                        <view
                          class="date"
                          v-if="
                            item.classStatus == 1 &&
                            item.classStartTime &&
                            item.classEndTime
                          "
                        >
                          班级有效期：{{
                            $method.timestampToTime(
                              item.classStartTime,
                              true,
                              true
                            )
                          }}-{{
                            $method.timestampToTime(
                              item.classEndTime,
                              true,
                              true
                            )
                          }}
                        </view>
                      </view>
                    </view>
                    <!-- 学时审核状态不可审核 -->
                    <template
                      v-if="item.periodStatus == -1 || item.periodStatus == 2"
                    >
                      <view
                        class="class-warm"
                        v-if="
                          item.classStatus == 1 || item.classStatus === null
                        "
                      >
                        <view class="class-warm__text">
                          <view class="date">
                            <template
                              v-if="
                                sysTime >= item.serviceStartTime &&
                                sysTime <= item.serviceEndTime
                              "
                            >
                              学习状态：
                              <text v-if="item.stuAllNum + item.recordNum == 0"
                                >未学习</text
                              >
                              <text
                                v-else-if="
                                  item.stuAllNum + item.recordNum > 0 &&
                                  item.stuAllNum + item.recordNum <
                                    item.secAllNum + item.examNum
                                "
                                >学习中</text
                              >
                              <text
                                v-else-if="
                                  item.stuAllNum + item.recordNum >=
                                  item.secAllNum + item.examNum
                                "
                                >已学完</text
                              >
                            </template>
                            <template v-else>
                              <template v-if="item.serviceStartTime"
                                >已过学习服务期，不可以学习了哦！</template
                              >
                            </template>
                          </view>
                        </view>
                      </view>
                    </template>

                    <!-- 学时审核状态可以审核 -->
                    <template v-if="item.periodStatus != -1">
                      <view class="class-warm">
                        <view class="class-warm__text">
                          <view class="date">
                            <text v-if="item.periodStatus == 0"
                              >机构审核：学时审核不通过</text
                            >
                            <!-- <text v-else-if="item.periodStatus == 2">学时待审核</text> -->
                            <text v-else-if="item.periodStatus == 3"
                              >学时审核中</text
                            >
                            <text v-else-if="item.periodStatus == 1">
                              <text v-if="item.periodPlush > 0"
                                >学时已上报注册中心</text
                              >
                              <text v-else>机构审核：学时审核通过</text>
                            </text>
                          </view>
                        </view>
                      </view>

                      <view
                        class="class-warm"
                        v-if="
                          item.subscribeId != null && item.periodStatus == 1
                        "
                      >
                        <view class="class-warm__text">
                          <view class="date">
                            <view v-if="item.subExamStatus === null"
                              >待预约考试</view
                            >
                            <view
                              v-else-if="
                                item.subExamStatus === 0 &&
                                sysTime <
                                  $method.TimeTotimestamp(
                                    $method.timestampToTime(
                                      item.subApplySiteExamTime,
                                      true
                                    ) +
                                      ' ' +
                                      item.subApplySiteStartTime
                                  )
                              "
                            >
                              待考试，考试时间：
                              {{
                                $method.timestampToTime(
                                  item.subApplySiteExamTime,
                                  true
                                ) +
                                " " +
                                item.subApplySiteStartTime
                              }}
                              -
                              {{
                                $method.timestampToTime(
                                  item.subApplySiteExamTime,
                                  true
                                ) +
                                " " +
                                item.subApplySiteEndTime
                              }}
                            </view>
                            <view v-else-if="item.subExamStatus === 0"
                              >待出考试结果</view
                            >
                            <view v-else-if="item.subExamStatus === 1">
                              <text v-if="item.subResult === null"
                                >待出考试结果</text
                              >
                              <text v-if="item.subResult === 0"
                                >考试结果：不通过，需补考</text
                              >
                              <text v-else-if="item.subResult === 1"
                                >考试结果：通过，考试成绩为{{
                                  item.subPerformance
                                }}</text
                              >
                            </view>
                            <view v-else-if="item.subExamStatus === 2"
                              >缺考，无成绩，需补考</view
                            >
                            <view v-else-if="item.subExamStatus === 3"
                              >作弊，无成绩，需补考</view
                            >
                            <view v-else-if="item.subExamStatus === 4"
                              >替考，无成绩，需补考</view
                            >
                          </view>
                        </view>
                      </view>
                    </template>
                  </template>
                </template>
              </template>
            </view>

            <view
              class="c_downs"
              @click="studyIn(item.goodsId, item.gradeId, item, index)"
            >
              <view class="lefts">
                <image
                  class="lefet_img"
                  :src="$method.splitImgHost(item.coverUrl, true)"
                  mode=""
                ></image>
                <view v-if="item.goodsType == 6" class="live_icon">直播</view>
              </view>
              <view class="rights">
                <template
                  v-if="
                    item.externalLinkStatus ||
                    (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)
                  "
                >
                </template>
                <view v-else class="learn_progress">
                  <view class="progress_up">
                    <!-- 学习进度 (已做试卷+已做节)/(试卷数+节数) -->
                    <view class="classHour">
                      <text
                        >{{
                          item.courseNum || item.courseNum == 0
                            ? item.courseNum
                            : "-"
                        }}课程/</text
                      >
                      <text
                        >{{
                          item.classHours || item.classHours == 0
                            ? item.classHours
                            : "-"
                        }}学时/</text
                      >
                      <text>{{ item.secAllNum + item.examNum || "-" }}节</text>
                    </view>
                    <view class="scheduling">
                      <view class="sche_bar">
                        进度：{{ item.stuAllNum + item.recordNum }}/{{
                          item.secAllNum + item.examNum
                        }}
                      </view>
                      <view class="progress_bar">
                        <u-line-progress
                          :showText="false"
                          height="22"
                          active-color="#ff9900"
                          :show-percent="false"
                          :percent="
                            ((item.stuAllNum + item.recordNum) /
                              (item.secAllNum + item.examNum)) *
                            100
                          "
                        ></u-line-progress>
                      </view>
                    </view>
                  </view>
                </view>
              </view>
            </view>

            <!-- 按钮 -->
            <view class="study_btns">
              <template
                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.userStudyCount > 0
                "
              >
                <view
                  class="exam_word ones"
                  @click.stop="selectClass(item, index)"
                >
                  选班重学
                </view>
              </template>
              <!-- examApplyGoodsList.length -是判断是否关联指定学员 -->
              <view v-else class="exam_btns">
                <view
                  class="box_appoint"
                  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
                    )
                  "
                  @click="appointment(item, appoint)"
                >
                  <view class="exam_word ones">预约考试</view>
                </view>
                <view
                  class="box_appoint"
                  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.goodsId, item)"
                >
                  <view class="exam_word ones">进入刷题</view>
                </view>
              </view>
              <view
                class="box_appoint"
                @click="studyIn(item.goodsId, item.gradeId, item, index)"
              >
                <view class="exam_word intos">进入学习</view>
              </view>
            </view>
          </view>
        </view>
      </view>
      <!-- 没有学习的课程 -->
      <view v-if="!allLoading && !allCourse" class="no_datas">
        <image
          class="courses"
          src="/static/learn/no_course.png"
          mode=""
        ></image>
        <view class="no_learns">您目前没有可学习的课程</view>
        <view class="choose" @click="toChoose()">立即去选购</view>
      </view>
    </view>
    <!-- 弹窗 -->
    <u-popup
      v-model="selectClassModal"
      @close="gradeValue = -1"
      mode="bottom"
      border-radius="40"
    >
      <view class="popup_box">
        <view style="margin-bottom: 20rpx">
          <view class="line1"></view>
          <view class="grade">选择班级</view>
        </view>
        <u-line color="#D6D6DB" />
        <view>
          <scroll-view scroll-y="true" style="height: 500rpx">
            <view>
              <u-radio-group v-model="gradeValue" @change="radioGroupChange">
                <view v-for="(item, index) in gradeList" :key="index">
                  <view
                    style="display: flex; align-items: center; padding: 20rpx"
                  >
                    <view>
                      <u-radio
                        shape="circle"
                        :name="index"
                        :disabled="
                          item.studentNum > 0 &&
                          item.studentNum == item.studentUpper
                        "
                      >
                        <view
                          :class="
                            item.checked ? 'white-box blue-box' : 'white-box'
                          "
                        >
                          <view>
                            <view class="blackTxt">{{ item.className }}</view>
                            <view class="redTxt" v-if="item.classEndTime">
                              有效期至：{{
                                $method.timestampToTime(
                                  item.classEndTime,
                                  true,
                                  true
                                )
                              }}
                            </view>
                            <view class="redTxt" v-if="item.classEndTime">
                              本班还剩{{
                                $method.GetRTime(item.classEndTime)
                              }}天将结束学习</view
                            >
                          </view>
                        </view>
                      </u-radio>
                    </view>
                  </view>
                </view>
              </u-radio-group>
            </view>
          </scroll-view>
        </view>
        <view class="confrim-btn">
          <view class="okBtn" @click="okPopup()">确定</view>
        </view>
      </view>
    </u-popup>

    <u-modal
      v-model="showUserConfirmInfo"
      @confirm="confirmUserConfirm"
      ref="uModal"
      :async-close="true"
      @cancel="cancelUserConfirm"
      :confirm-text="
        '确认' + (confirmCount > 0 ? '(' + confirmCount + ')' : '')
      "
      :confirm-color="confirmCount > 0 ? '#999' : '#2979ff'"
      class="confirm-modal"
      title="实名验证确认"
      cancel="取消"
      :show-cancel-button="true"
    >
      <view class="slot-content">
        <view class="content">
          为避免个人信息不正确导致您的学习时长无效，请认真核对以下信息是否正确，如信息有误请取消当前操作，立刻联系020-38946666

          <view class="msg-list" v-if="userInfo">
            <view class="item">
              <text class="item__left">姓名：</text>
              <text class="item__right">{{ userInfo.realname }}</text>
            </view>
            <view class="item">
              <text class="item__left">手机号：</text>
              <text class="item__right">{{ userInfo.telphone }}</text>
            </view>
            <view class="item">
              <text class="item__left">身份号：</text>
              <text class="item__right">{{ userInfo.idCard }}</text>
            </view>
            <view class="item">
              <u-checkbox v-model="confirmChecked" :label-disabled="false"
                >确认个人信息无误</u-checkbox
              >
            </view>
          </view>
        </view>
      </view>
    </u-modal>

    <!-- 多个预约考试时的弹窗 -->
    <u-popup v-model="appointTestShow" mode="bottom" border-radius="40">
      <view class="popuptest_box">
        <view class="check_head">
          <view class="headers">
            <view class="grade">切换课程</view>
            <u-icon
              name="close"
              color="#9C9C9C"
              size="40"
              @click="closePop()"
            ></u-icon>
          </view>
        </view>
        <view class="check_con">
          <scroll-view scroll-y="true" style="height: 700rpx">
            <view
              class="course_items"
              v-for="(appoint, index) in appointTestList"
              :key="index"
            >
              <view class="course_lefts">
                <view class="course_title">{{ appoint.applyName }}</view>
              </view>
              <view
                class="course_rights"
                @click="jumpTest(appointItemIndex, appoint)"
              >
                <view class="intoStudy">预约</view>
              </view>
            </view>
          </scroll-view>
        </view>
      </view>
    </u-popup>
  </view>
</template>

<script>
var curTime = new Date().getTime(); // 当前时间的时间戳
import { mapGetters, mapActions } from "vuex";
import config from "@/common/config";
export default {
  data() {
    return {
      logo: config.TOP_LOGO,
      leftDays: 0,
      paramC: {
        pageNum: 1,
        pageSize: 10,
      },
      activeItem: {},
      itemIndex: "",
      confirmTimer: null,
      confirmCount: 10,
      confirmChecked: false,
      showUserConfirmInfo: false,
      selectItem: {},
      selectClassModal: false,
      gradeList: [],
      gradeValue: -1,
      sysTime: 0,
      courseLists: [], // 课程列表
      total: 0,
      livingLists: [], // 直播列表
      allLoading: false, // 加载样式
      current: 2,
      appointTestShow: false, //预约考试弹窗
      appointTestList: [],
      appointItemIndex: {}, // 点击了哪项课程
    };
  },
  filters: {
    liveStatus(liveTime, watchStatus) {
      let value = liveTime * 1000;
      if (curTime < value) {
        // 判断当前时间和直播开始时间
        return " 未开播";
      } else {
        return watchStatus == "live" ? "正在直播中" : "即将开播";
      }
    },
  },
  computed: {
    ...mapGetters(["userInfo"]),
    allCourse() {
      return this.courseLists.length || this.livingLists.length ? true : false;
    },
  },
  onLoad() {
    // 1668873600 ，2022.11.20的时间戳
    this.leftDays = 1668873600 - parseInt(curTime / 1000);
    this.sysTime = +this.$method.timest();
  },
  async onShow() {
    uni.pageScrollTo({
      duration: 0,
      scrollTop: 0, // number number number！
    });
    this.getCourseLiveQues();
    // await this.commonSystemTime()
  },
  onPullDownRefresh() {
    this.getCourseLiveQues();
  },
  onReachBottom() {
    if (this.courseLists.length <= this.total) {
      this.paramC.pageNum++;
      this.getCourseList();
    }
  },
  methods: {
    ...mapActions(["getUserInfo"]),
    bgShow(liveTime, watchStatus) {
      let value = liveTime * 1000;
      if (curTime > value) {
        // 判断当前时间和直播开始时间
        return watchStatus == "live" ? true : false;
      }
    },
    lookTimeStatus(liveTime, watchStatus) {
      if (liveTime) {
        let value = new Date(liveTime * 1000);
        var Y = value.getFullYear();
        var M =
          value.getMonth() + 1 < 10
            ? "0" + (value.getMonth() + 1)
            : value.getMonth() + 1;
        var D = value.getDate() < 10 ? "0" + value.getDate() : value.getDate();
        var valZ = Y + "/" + M + "/" + D;
        let curZeroTime = new Date(valZ).getTime(); // 获取开始直播时间当天的零点时间戳
        if (curTime > value) {
          // 判断当前时间和直播开始时间
          if (watchStatus == "live") {
            //
            return 1;
          } else {
            return 2;
          }
        } else {
          if (curZeroTime <= curTime && curTime <= value) {
            //当天
            return 3;
          } else {
            return 4;
          }
        }
      }
    },
    curTimeTamp(liveTime) {
      let min = liveTime - parseInt(curTime / 1000);
      return min;
    },
    toChoose() {
      uni.switchTab({
        url: "/pages/course/index",
      });
    },
    // 查询直播课
    getCourseLiveQues() {
      if (!this.$method.isLogin()) {
        return;
      }
      this.allLoading = true;
      this.paramC.pageNum = 1;
      let arrs = [
        this.$api.listUserVideoLive(this.paramC), // 查询用户拥有视频+直播商品 /goods/listUserVideoLive
        this.$api.getgoodsLiveList({
          pageNum: 1,
          pageSize: 3, // 默认3条
        }),
      ];
      wx.stopPullDownRefresh();
      Promise.all(arrs)
        .then((res) => {
          // if (res.data.code == 200) {
          const [{ data: res1 }, { data: res2 }] = res;
          if (res1.code == 200) {
            this.total = res1.total;
            this.courseLists = res1.rows || [];
          }
          // if (res2.code == 200) {
          // 	this.questionLists = res2.rows || []
          // }
          if (res2.code == 200) {
            this.livingLists = res2.rows || [];
          } else {
            this.$u.toast(res2.msg);
          }
          this.allLoading = false;
          this.sysTime = +this.$method.timest();
          // }
          uni.hideLoading();
        })
        .catch((err) => {
          uni.hideLoading();
          this.allLoading = false;
        });
    },
    getCourseList() {
      this.$api
        .listUserVideoLive(this.paramC)
        .then((res) => {
          this.courseLists.push(...res.data.rows);
        })
        .finally((e) => {
          uni.hideLoading();
        });
    },
    // 看直播
    toLiveLook(item) {
      let moduleId = item.moduleId || 0;
      let chapterId = item.chapterId || 0;
      let sectionId = item.sectionId || item.menuId;
      let uuid = new Date().valueOf() + "";
      // buyCourse 是否购买课程：1是 0否
      let encode = encodeURIComponent(
        config.WEBVIEW_URL +
          "pages/live/index?token=" +
          uni.getStorageSync("token") +
          "&userInfo=" +
          JSON.stringify(this.userInfo) +
          "&channelId=" +
          item.liveUrl +
          "&gradeId=" +
          0 +
          "&courseId=" +
          item.courseId +
          "&goodsId=" +
          item.goodsId +
          "&orderGoodsId=" +
          item.orderGoodsId +
          "&sectionId=" +
          sectionId +
          "&chapterId=" +
          chapterId +
          "&moduleId=" +
          moduleId +
          "&buyCourse=1" +
          "&ident=" +
          uuid +
          "&sectionType=2"
      );
      uni.navigateTo({
        url: `../../pages/webview/index?url=` + encode,
      });
    },
    toLive(item) {
      this.$api
        .courseCourseList({
          pageNum: 1,
          pageSize: 1,
          goodsId: item.goodsId,
          gradeId: 0,
          orderGoodsId: item.orderGoodsId,
        })
        .then((res) => {
          if (res.data.code == 200) {
            if (res.data.total > 1) {
              // uni.navigateTo({
              // 	url:'/pages5/liveDetail/course?orderGoodsId='+item.orderGoodsId+'&goodsId='+item.goodsId+'&gradeId=0'
              // })
              uni.navigateTo({
                url:
                  "/pages3/live/detail?orderGoodsId=" +
                  item.orderGoodsId +
                  "&goodsId=" +
                  item.goodsId +
                  '&gradeId=0&courseId=""',
              });
            } else if (res.data.total == 1) {
              uni.navigateTo({
                url:
                  "/pages3/live/detail?orderGoodsId=" +
                  item.orderGoodsId +
                  "&goodsId=" +
                  item.goodsId +
                  "&gradeId=0&courseId=" +
                  res.data.rows[0].courseId,
              });
            } else {
              uni.showToast({
                icon: "none",
                title: "暂无可观看的直播课程",
              });
            }
          }
        });
    },
    toLink(externalLink) {
      if (!externalLink) {
        uni.showModal({
          showCancel: false,
          content: "链接不存在",
        });
        return;
      }
      // #ifdef MP-WEIXIN
      uni.navigateTo({
        url: `/pages/webview/sdlink?url=` + externalLink,
      });
      // #endif
      // #ifdef H5
      window.location.href = externalLink;
      // #endif
    },
    async studyIn(v, i, item, index) {
      if (item.externalLinkStatus) {
        this.toLink(item.externalLink);
        return
      }
      if (item.goodsType == 6) {
        // 进入直播课
        this.toLive(item);
        return;
      }

      // 进入视频课
      this.activeItem = item;
      if (item.interfaceAccountId > 0) {
        //学习账号已开通

        if (item.learnStatus > 0) {
          //跳转第三方h5
          uni.navigateTo({
            url: `/pages3/polyv/detail?goodsId=${item.goodsId}&orderGoodsId=${item.orderGoodsId}&gradeId=${item.gradeId}&isOther=1`,
          });
          return;
        } else {
          uni.showModal({
            showCancel: false,
            content:
              "您的学习账号未开通，请稍后再尝试，有疑问，请联系020-87085982！",
          });
          return;
        }
        return;
      }

      if (
        item.serviceStartTime &&
        (this.sysTime <= item.serviceStartTime ||
          this.sysTime >= item.serviceEndTime)
      ) {
        uni.showToast({
          icon: "none",
          title: "不在学习服务期，不能进入学习",
        });
        return;
      }

      if (
        (item.classStartTime && this.sysTime <= item.classStartTime) ||
        (item.classEndTime && this.sysTime >= item.classEndTime)
      ) {
        uni.showToast({
          icon: "none",
          title: "不在班级有效期，不能进入学习",
        });
        return;
      }
      // learningStatus： 1即刻，2待定，3不在日期内
      if (item.learningStatus == 2) {
        uni.showToast({
          icon: "none",
          title: "开放学习时间待定，不能进入学习",
        });
        return;
      }

      if (item.classStatus == 0) {
        uni.showToast({
          icon: "none",
          title: "尚未开班，不能进入学习",
        });
        return;
      }
      if (item.learningStatus == 3 && this.sysTime < item.learningTimeStart) {
        uni.showToast({
          icon: "none",
          title: "不在开放学习时间,不能进入学习",
        });
        return;
      }
      uni.showLoading({
        title: "拼命加载中...",
        mask: true,
      });
      var confirmDetail = true;
      if (item.educationName == "继续教育") {
        if (
          item.officialName &&
          item.businessName == "二级" &&
          item.projectName == "建造师"
        ) {
          confirmDetail = await this.userConfirmInfoDetail();
        }
      }

      if (!confirmDetail) {
        return;
      }

      this.itemIndex = index;
      if (
        item.gradeStatus == 1 &&
        item.status == 1 &&
        item.serviceEndTime > this.sysTime &&
        item.classEndTime &&
        item.classEndTime < this.sysTime &&
        (item.periodStatus == 0 || item.periodStatus == -1) &&
        item.studyCount > 0
      ) {
        this.selectClass(item, index, "loading");
        return;
      }

      // /course/goodsRebuildStatus查询用户商品重修状态
      let rebuildStatus = await this.courseGoodsRebuildStatus(
        item.goodsId,
        item.gradeId
      );

      if (rebuildStatus == 0) {
        uni.hideLoading();
        this.$navTo.togo("/pages2/learn/details", {
          gradeId: item.gradeId,
          goodsId: item.goodsId,
          orderGoodsId: item.orderGoodsId,
        });
        return;
      }

      // /lock/lockStatus
      this.$api
        .lockLockStatus({
          action: "jxjy",
          uuid: this.$method.getUuid(),
        })
        .then((res) => {
          if (res.data.code == 200) {
            //有其他端在操作，不能学习
            uni.showToast({
              icon: "none",
              title: res.data.msg,
              mask: true,
              duration: 3000,
            });
          } else if (res.data.code == 500) {
            //可以学习
            this.$http({
              url: "/course/courseList",
              method: "get",
              data: {
                pageNum: 1,
                pageSize: 100,
                goodsId: item.goodsId,
                gradeId: item.gradeId,
                orderGoodsId: item.orderGoodsId,
              },
              noLoading: true,
            }).then((res) => {
              if (res.data.code == 200) {
                if (res.data.total > 1) {
                  // this.$navTo.togo(`/pages2/wd/course?id=${v}&gid=${i}&orderGoodsId=${item.orderGoodsId}`);
                  uni.navigateTo({
                    url: `/pages3/polyv/detail?id=''&goodsId=${item.goodsId}&orderGoodsId=${item.orderGoodsId}&gradeId=${item.gradeId}`,
                  });
                } else if (res.data.total == 1) {
                  uni.navigateTo({
                    url: `/pages3/polyv/detail?id=${res.data.rows[0].courseId}&goodsId=${item.goodsId}&orderGoodsId=${item.orderGoodsId}&gradeId=${item.gradeId}`,
                  });
                } else {
                  uni.showToast({
                    icon: "none",
                    title: "暂无可观看的视频课程",
                  });
                }
              }
            });
            return;
          }
        });
    },
    /**
     * @param {Object} goodsId 商品id
     * 查询商品重修状态
     */
    courseGoodsRebuildStatus(goodsId, gradeId) {
      return new Promise((resolve) => {
        this.$http({
          url: "/course/goodsRebuildStatus",
          method: "get",
          data: {
            goodsId: goodsId,
            gradeId: gradeId,
          },
          noLoading: true,
          compleLoading: true, // 请求成功是否还要继续显示加载中
        }).then((res) => {
          resolve(res.data.data);
        });
      });
    },
    userConfirmInfoDetail() {
      return new Promise((resolve) => {
        this.$http({
          url: "/user/confirm/info/detail",
          method: "get",
          data: { orderGoodsId: this.activeItem.orderGoodsId },
          noLoading: true,
        }).then((res) => {
          if (!res.data.data) {
            clearInterval(this.confirmTimer);
            this.confirmCount = 10;
            this.showUserConfirmInfo = true;
            this.confirmTimer = setInterval(() => {
              if (this.confirmCount > 0) {
                this.confirmCount--;
              } else {
                clearInterval(this.confirmTimer);
              }
            }, 1000);
          } else {
            if (res.data.data.pushInfo) {
              resolve(true);
            } else {
              uni.showModal({
                showCancel: false,
                title: "提示",
                content:
                  "开通信息推送不成功，无法进入学习，请联系020-87085982！",
              });
              resolve(false);
            }
          }
        });
      });
    },
    selectClass(item, index, load) {
      this.itemIndex = index;
      this.selectItem = item;
      this.selectClassModal = true;
      this.goodsGradeList(item.goodsId, load);
    },
    goodsGradeList(id, load) {
      this.$http({
        url: "/grade/grade/list",
        method: "get",
        data: { goodsId: id },
        noLoading: load ? true : false,
      }).then((res) => {
        if (res.data.code == 200) {
          this.gradeList = res.data.rows;
          if (this.gradeList.length == 0) {
            let item = {
              className: "系统分班",
              gradeId: 0,
            };
            this.gradeList.push(item);
          } else {
            let isGradeFull = this.gradeList.every(
              (item) =>
                item.studentNum > 0 && item.studentNum == item.studentUpper
            );
            //所有班级都满了
            if (isGradeFull) {
              let item = {
                className: "系统分班",
                gradeId: 0,
              };
              this.gradeList.unshift(item);
            }
          }
        }
      });
    },
    radioGroupChange(e) {
      // console.log(e)
    },
    okPopup() {
      if (this.gradeValue == -1) {
        uni.showToast({
          icon: "none",
          title: "请选择班级",
        });
        return;
      }
      this.$api
        .changeGrade({
          goodsId: this.selectItem.goodsId,
          gradeId: this.gradeValue,
          oldGradeId: this.selectItem.gradeId,
          orderGoodsId: this.selectItem.orderGoodsId,
          userId: this.selectItem.userId,
        })
        .then((res) => {
          if (res.data.code == 200) {
            if (this.itemIndex !== "") {
              this.refreshByIndex();
            }
            this.selectClassModal = false;
            uni.showToast({
              title: "选班成功",
            });
          } else {
            uni.showToast({
              icon: "none",
              title: res.data.msg,
            });
          }
        });
    },
    /**
     * 返回刷新之前进入的课程数据
     */
    refreshByIndex() {
      this.$api
        .listUserVideoLive({
          pageNum: this.itemIndex + 1,
          pageSize: 1,
        })
        .then((res) => {
          if (res.data.code == 200) {
            this.$set(this.courseLists, this.itemIndex, res.data.rows[0]);
          }
        });
    },
    confirmUserConfirm() {
      this.$refs.uModal.clearLoading();
      if (this.confirmCount <= 0) {
        if (this.confirmChecked) {
          let infoJson = {
            realname: this.userInfo.realname,
            idCard: this.userInfo.idCard,
            telphone: this.userInfo.telphone,
          };
          this.$api
            .userConfirminfo({
              orderGoodsId: this.activeItem.orderGoodsId,
              infoJson: JSON.stringify(infoJson),
            })
            .then((res) => {
              if (res.data.data.pushInfo) {
                uni.showToast({
                  icon: "none",
                  title: "提交成功",
                });
              } else {
                uni.showModal({
                  showCancel: false,
                  title: "提示",
                  content:
                    "开通信息推送不成功，无法进入学习，请联系020-87085982！",
                });
              }
              this.showUserConfirmInfo = false;
            });
        } else {
          uni.showToast({
            icon: "none",
            title: "请勾选确认个人信息无误",
          });
        }
      } else {
        return;
      }
    },
    cancelUserConfirm() {
      clearInterval(this.confirmTimer);
    },
    call() {
      uni.makePhoneCall({
        phoneNumber: "020-87085982", //仅为示例
      });
    },
    closePop() {
      this.appointTestShow = false;
    },
    jumpTest(item, appoint) {
      this.appoint_an(item, appoint);
      this.appointTestShow = false;
    },
    appointment(item, appoint) {
      this.appointItemIndex = item;
      if (item.examApplyGoodsList.length > 1) {
        // 多个考试预约
        this.appointTestList = item.examApplyGoodsList;
        this.appointTestShow = true;
        return;
      }
      let appoint_item = item.examApplyGoodsList[0];
      this.appoint_an(item, appoint_item);
    },
    appoint_an(item, appoint) {
      var data = {
        goodsId: item.goodsId,
        gradeId: item.gradeId,
        applyId: appoint.applyId,
        orderGoodsId: item.orderGoodsId,
      };
      this.$api.getApplysubscribe(data).then((res) => {
        if (res.data.code === 500) {
          uni.showModal({
            showCancel: false,
            content: res.data.msg,
          });
        }
        if (res.data.code === 200) {
          this.$navTo.togo("/pages2/appointment/index", {
            goodsId: item.goodsId,
            gradeId: item.gradeId,
            orderGoodsId: item.orderGoodsId,
            applyId: appoint.applyId,
          });
        }
      });
    },
    // 进入刷题，调整小程序
    appBeforeAddress(goodsId, item) {
      this.$api
        .appBeforeAddress({
          orderGoodsId: item.orderGoodsId,
        })
        .then((res) => {
          if (res.data.code == 200) {
            uni.navigateToMiniProgram({
              appId: res.data.data.url,
              success(res) {
                // 打开成功
              },
            });
          } else {
            uni.showModal({
              title: "提示",
              content: res.data.msg,
              showCancel: false,
            });
          }
        });
    },
  },
};
</script>

<style>
page {
  background: #eaeef1;
}
</style>
<style lang="scss" scoped>
@import "./index.scss";
</style>