saas_miniprogram/pages/learn/index.vue

<template>
  <view class="learnings">
    <nav-logo title="学习中心"></nav-logo>
    <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="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">
                <view class="learn_progress">
                  <view class="progress_up">
                    <view class="cou_titles line2">{{ item.goodsName }}</view>
                    <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>
                </view>
              </view>
            </view>
            <view class="course_item_info" v-if="item.goodsType !== 6">
              <view>
                <text>学习状态：</text>
                <view
                  style="display: inline-block; font-size: 24rpx"
                  v-html="backLearStatusText(item)"
                ></view>
              </view>
              <view>
                <text>学习进度：</text>
                <text>
                  {{ item.stuAllNum + item.recordNum }}/{{
                    item.secAllNum + item.examNum
                  }}
                </text>
              </view>
              <view>
                <text>学习服务：</text>
                <text>
                  {{
                    $method.formDate(item.serviceStartTime, "yyyy/mm/dd")
                  }}至{{
                    $method.formDate(item.serviceEndTime, "yyyy/mm/dd")
                  }}</text
                >
              </view>
              <view>
                <text>班级状态：</text>
                <text>
                  {{ classStatusCompt(item, sysTime) }}
                </text>
              </view>
              <view>
                <text>班级有效：</text>
                <template v-if="item.classEndTime">
                  <text>
                    {{ $method.formDate(item.classEndTime, "yyyy/mm/dd") }}
                  </text>
                  <text class="eb"
                    >（剩余{{
                      $method.GetRTime(item.classEndTime) > 0
                        ? $method.GetRTime(item.classEndTime)
                        : 0
                    }}天）</text
                  >
                </template>
                <text v-else>——</text>
              </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>
            </view>
            <view class="study_tips">
              <div
                v-if="
                  item.erJianErZao && !item.classEndTime && !item.classStartTime
                "
              >
                温馨提示：当前班级正在申请中，正式开班后方可进行学习，请耐心等待
              </div>
              <div
                v-if="
                  $method.GetRTime(item.serviceEndTime) <= 20 &&
                  $method.GetRTime(item.serviceEndTime) >= 0 &&
                  (item.periodStatus == 0 || item.periodStatus == -1)
                "
              >
                温馨提示：当前学习服务期至{{
                  $method.timestampToTime(item.serviceEndTime)
                }}，超期学时无效，为防审核异常请于{{
                  $method.timestampToTime(item.serviceEndTime - 864000, false)
                }}
                前完成学习，当前剩余有效学习时间为{{
                  $method.GetRTime(item.serviceEndTime) < 0
                    ? 0
                    : $method.GetRTime(item.serviceEndTime)
                }}天。
              </div>
              <div
                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
                  >温馨提示：班级已过期，您的重学次数已用完，如有疑问请联系{{
                    eduPhone
                  }}</span
                >
              </div>
              <div v-if="item.serviceEndTime && item.serviceEndTime < sysTime">
                温馨提示：学习服务期已截至，如有疑问请联系：{{ eduPhone }}
              </div>
              <div v-if="item.periodStatus === 2">
                温馨提示：您已完成本课程所有学时学习，我校将对学时进行审核，审核及推送时长预估15个工作日，如有疑问请联系：{{
                  eduPhone
                }}，学时查询网址：http://gdzczx.gdcic.net
              </div>
              <div v-if="item.periodStatus === 1">
                温馨提示：您的班级学习初审已通过，待广东省建设信息中心归集学时，归集完成即为完成本次继续教育学习。归集学时需约10-15个工作日，具体以广东省建设执业资格注册服务平台的“继续教育学时查询”公布学时记录为准，学时查询网址：http://gdzczx.gdcic.net
              </div>
            </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 -是判断是否关联指定学员 -->
              <!-- 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
                    ) -->
              <view v-else class="exam_btns">
                <view
                  class="box_appoint"
                  v-if="item.examApplyGoodsList"
                  @click="appointment(item)"
                >
                  <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(appoint)">
                <view
                  class="intoStudy"
                  v-if="appointItemIndex.subscribeSign !== 2"
                  >预约</view
                >
              </view>
            </view>
          </scroll-view>
        </view>
      </view>
    </u-popup>
    <!-- 考前须知 -->
    <u-modal
      v-model="showTip"
      title="考前须知"
      :show-cancel-button="true"
      @confirm="confirmTip"
    >
      <view class="slot-content ql-editor" style="white-space: pre-wrap">
        <rich-text :nodes="nodesCcontent | formatRichText"></rich-text>
      </view>
    </u-modal>
  </view>
</template>

<script>
var curTime = new Date().getTime(); // 当前时间的时间戳
import { mapGetters, mapActions } from "vuex";
import filters from "../../filters/index";
export default {
  data() {
    return {
      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: {}, // 点击了哪项课程
      appoint: {},
      imgwidth: 0,
      imgheight: 0,
      showTip: false,
      nodesCcontent: "",
    };
  },
  filters: {
    liveStatus(liveTime, watchStatus) {
      let value = liveTime * 1000;
      if (curTime < value) {
        // 判断当前时间和直播开始时间
        return " 未开播";
      } else {
        return watchStatus == "live" ? "正在直播中" : "即将开播";
      }
    },
    formatRichText: filters.formatRichText,
  },
  computed: {
    ...mapGetters(["userInfo", "config"]),
    allCourse() {
      return this.courseLists.length || this.livingLists.length ? true : false;
    },
    eduPhone() {
      return this.userInfo.eduPhone;
    },
    backLearStatusText() {
      return ({
        periodStatus,
        stuAllNum,
        recordNum,
        secAllNum,
        examNum,
        periodPlush,
      }) => {
        let text = "";
        let color = "";
        if (periodStatus === -1) {
          const stuAll = stuAllNum + recordNum;
          const secAll = secAllNum + examNum;
          let index = 0;
          if (stuAll == 0) {
            index = 0;
          } else if (stuAll > 0 && stuAll < secAll) {
            index = 1;
          } else if (stuAll >= secAll) {
            index = 2;
          }
          text = ["未开始", "学习中", "已学完"][index];
          color = ["#EB5757", "#498AFE", "#498AFE"][index];
        } else {
          text = [
            "审核不通过",
            periodPlush > 0 ? "学时已上报信息中心" : "学时审核通过",
            "待审核",
            "初审完成",
          ][periodStatus];
          color = ["#EB5757", "#F67205", "#F67205", "#F67205"][periodStatus];
        }
        return `<span style='color: ${color}'>${text}</span>`;
      };
    },
    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;
      };
    },
  },
  onLoad() {
    // 1668873600 ，2022.11.20的时间戳
    this.leftDays = 1668873600 - parseInt(curTime / 1000);
    this.sysTime = +this.$method.timest();
    if (this.$method.isLogin()) {
      !this.userInfo && this.$api.refreshUserInfo();
    }
  },
  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 || [];
            const goods = this.courseLists.find(
              (e) => e.subscribeSign == 1 || e.subscribeSign == 3
            );
            if (goods) {
              let { goodsName, subscribeSign } = goods;
              let text =
                `您七大员新考【${goodsName}】课程` +
                (subscribeSign == 1
                  ? "已学完，可以预约考试了！"
                  : "课程考试未通过，请重新预约考试！");
              uni.showModal({
                title: "提示",
                content: text,
                success: (res) => {
                  if (res.confirm) {
                    this.appointment(goods);
                  }
                },
              });
            }
          }
          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(
        this.config.hostLive +
          "/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: "暂无可观看的直播课程",
              });
            }
          }
        });
    },
    async studyIn(v, i, item, index) {
      if (item.externalLinkStatus) {
        this.$method.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 {
          const text = this.eduPhone ? "，有疑问，请联系" + this.eduPhone : "";
          uni.showModal({
            showCancel: false,
            content: "您的学习账号未开通，请稍后再尝试" + text,
          });
          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;
      }

      this.$method.checkLock().then(() => {
        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
                }&periodWaitTime=${item.periodWaitTime ? 1 : ""}`,
              });
            } 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}&periodWaitTime=${
                  item.periodWaitTime ? "" : 1
                }`,
              });
            } else {
              uni.showToast({
                icon: "none",
                title: "暂无可观看的视频课程",
              });
            }
          }
        });
      });
    },
    toDetail() {
      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
              }&periodWaitTime=${item.periodWaitTime ? 1 : ""}`,
            });
          } 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}&periodWaitTime=${
                item.periodWaitTime ? "" : 1
              }`,
            });
          } else {
            uni.showToast({
              icon: "none",
              title: "暂无可观看的视频课程",
            });
          }
        }
      });
    },
    /**
     * @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 {
              const text = this.eduPhone
                ? "，有疑问，请联系" + this.eduPhone
                : "";
              uni.showModal({
                showCancel: false,
                title: "提示",
                content: "开通信息推送不成功，无法进入学习" + text,
              });
              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.code != 200) {
                this.showUserConfirmInfo = false;
                uni.showToast({
                  icon: "none",
                  title: res.data.msg,
                });
                return;
              }
              if (res.data.data.pushInfo) {
                uni.showToast({
                  icon: "none",
                  title: "提交成功",
                });
              } else {
                const text = this.eduPhone
                  ? "，有疑问，请联系" + this.eduPhone
                  : "";
                uni.showModal({
                  showCancel: false,
                  title: "提示",
                  content: "开通信息推送不成功，无法进入学！" + text,
                });
              }
              this.showUserConfirmInfo = false;
            });
        } else {
          uni.showToast({
            icon: "none",
            title: "请勾选确认个人信息无误",
          });
        }
      } else {
        return;
      }
    },
    cancelUserConfirm() {
      clearInterval(this.confirmTimer);
    },
    call() {
      // #ifdef MP-WEIXIN
      uni.makePhoneCall({
        phoneNumber: "020-87085982", //仅为示例
      });
      // #endif
    },
    closePop() {
      this.appointTestShow = false;
    },
    jumpTest(appoint) {
      this.$api
        .getExamTip()
        .then((res) => {
          this.nodesCcontent = res.data.data.value;
          this.appoint = appoint;
          this.showTip = true;
        })
        .catch(() => {
          this.appoint_an(appoint);
          this.appointTestShow = false;
        });
    },
    confirmTip() {
      this.showTip = false;
      this.appointTestShow = false;
      this.appoint_an(this.appoint);
    },
    appointment(item) {
      this.appointItemIndex = item;
      this.appointTestList = item.examApplyGoodsList;
      this.appointTestShow = true;
      // 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(appoint) {
      const { goodsId, gradeId, orderGoodsId } = this.appointItemIndex;
      var data = {
        goodsId,
        gradeId,
        applyId: appoint.applyId,
        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,
            gradeId,
            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";
@import "./quill.core";
</style>