zc_saas_h5/pages2/wd/class.vue

<template>
  <view style="padding: 0 30rpx 30rpx">
    <nav-bar title="我的网课"></nav-bar>
    <view class="class" v-for="(item, index) in goodsList" :key="index">
      <view
        class="class_item"
        @click.stop="studyIn(item.goodsId, item.gradeId, item, index)"
      >
        <image
          :src="$method.splitImgHost(item.coverUrl, true)"
          class="class_img"
        ></image>
        <view class="class_text">
          <view class="class_title">{{ item.goodsName }}</view>
          <view class="content_box">
            <image src="/static/icon/wk_icon1.png" class="wk_icon"></image>
            共
            <text class="content">{{ item.courseNum }}</text>
            课程
            <text class="content">{{ item.secAllNum + item.examNum }}</text>
            节
            <text class="content">{{ item.classHours || "-" }}</text>
            学时
          </view>
          <view
            class="content_box"
            v-if="item.serviceStartTime && item.serviceEndTime"
          >
            <image src="/static/icon/wk_icon2.png" class="wk_icon"></image>
            学习服务期：
            <text class="content"
              >{{ $method.timestampToTime(item.serviceStartTime, true, true) }}
              -
              {{
                $method.timestampToTime(item.serviceEndTime, true, true)
              }}</text
            >
          </view>
        </view>

        <!-- 不在学习服务期 -->
        <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="state">班级状态：已过期</view>
                <!-- <view class="state"
                  >班级状态：已过期，有疑问请联系
                  <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="state">班级状态：未到学习时间</view>
                <!-- <view class="state"
                  >班级状态：未到学习时间，有疑问请联系
                  <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="state" v-if="item.classStatus == 0"
                  >教务处正在为您开通班级，请耐心等待</view
                >
                <view
                  class="state"
                  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>

              <!-- <view class="class-warm" v-if="item.profileTpStatus == 1">
								<view class="class-warm__text">
									<view class="date">
										资料审核状态：
										<text v-if="item.profileStatus == null">未提交资料</text>
										<text v-else-if="item.profileStatus == 1">已通过</text>
										<text v-else-if="item.profileStatus == 2">审核中</text>
										<text v-else-if="item.profileStatus == 3">待完善</text>
									</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>
      </view>

      <view class="bottomBox">
        <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.studyCount > 0
          "
        >
          <view class="restart" @click.stop="selectClass(item, index)">
            选班重学
          </view>
        </template>

        <template v-else>
          <view class="content_box">
            <image src="/static/icon/wk_icon3.png" class="wk_icon"></image>
            学习进度：{{ item.stuAllNum + item.recordNum }}/{{
              item.secAllNum + item.examNum
            }}
          </view>
          <view class="box_progress">
            <view style="width: 60%">
              <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>
              <u-button
                :class="{
                  disabled:
                    (item.serviceStartTime &&
                      (sysTime <= item.serviceStartTime ||
                        sysTime >= item.serviceEndTime)) ||
                    (item.classStartTime && sysTime <= item.classStartTime) ||
                    (item.classEndTime && sysTime >= item.classEndTime) ||
                    item.learningStatus == 2 ||
                    item.classStatus == 0 ||
                    (item.learningStatus == 3 &&
                      sysTime < item.learningTimeStart),
                }"
                type="warning"
                size="mini"
                @click.stop="studyIn(item.goodsId, item.gradeId, item, index)"
              >
                进入学习</u-button
              >
            </view>
          </view>
          <template v-for="(appoint, appointIndex) in item.examApplyGoodsList">
            <view
              class="box_progress"
              :key="appointIndex"
              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)
                )
              "
            >
              <view style="flex: 1; margin-right: 10rpx">
                <text style="color: #333333">{{ appoint.applyName }}</text>
              </view>
              <view>
                <u-button
                  :plain="true"
                  type="primary"
                  size="mini"
                  @click.stop="appointment(item, appoint)"
                  >预约考试
                </u-button>
              </view>
            </view>
          </template>
          <view
            class="box_progress"
            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)
              )
            "
          >
            <view style="flex: 1; margin-right: 10rpx">
              <text style="color: #2979ff">{{ item.beforeName }}</text>
            </view>
            <view>
              <u-button
                type="primary"
                size="mini"
                @click="appBeforeAddress(item.goodsId, item)"
                >进入刷题</u-button
              >
            </view>
          </view>
        </template>
      </view>
    </view>

    <view v-if="goodsList.length == 0">
      <u-empty text="暂无网课" margin-top="500" mode="list"></u-empty>
    </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">选择班级1</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>
                            <Class-time-tip :classInfo="item"></Class-time-tip>
                          </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="showMark"
      title="提示"
      @confirm="markConfirm"
      confirm-text="复制学习网址"
      :show-cancel-button="true"
      cancel-text="关闭"
    >
      <view class="slot-content">
        <view>您的学习账号已经开通，请按照步骤操作，进行学习。</view>
        <view>1.复制学习地址:{{ markContent }}</view>
        <view>2.在【浏览器中】打开复制的学习网址</view>
        <view>3.打开学习网址后，选择【个人用户】进行登录</view>
        <view>(1)账号：您个人的身份证号码</view>
        <view>(2)密码：身份证号码，再加111111</view>
      </view>
    </u-modal>

    <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">
            <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>
  </view>
</template>

<script>
import { mapGetters, mapActions } from "vuex";
import ClassTimeTip from "../../components/common/ClassTimeTip.vue";
export default {
  computed: {
    ...mapGetters(["userInfo"]),
  },
  data() {
    return {
      activeItem: {},
      confirmTimer: null,
      confirmCount: 10,
      confirmChecked: false,
      showUserConfirmInfo: false,
      showMark: false,
      list: [1, 2, 3],
      goodsList: [],
      selectClassModal: false,
      gradeList: [],
      gradeValue: -1,
      param: {
        pageNum: 1,
        pageSize: 10,
      },
      total: 0,
      sysTime: 0,
      itemIndex: "",
      selectItem: {},
    };
  },
  onLoad(option) {
    // this.sysTime = +this.$method.timest();
    this.courseGoodsList();
  },
  async onShow() {
    this.getUserInfo();
    if (this.itemIndex !== "") {
      this.refreshByIndex();
    }
    await this.commonSystemTime();
    this.sysTime = +this.$method.timest();
  },
  onReachBottom() {
    if (this.goodsList.length < this.total) {
      this.param.pageNum++;
      this.courseGoodsList();
    }
  },
  methods: {
    ...mapActions(["getUserInfo"]),
    /**
     * 复制网址
     */
    markConfirm() {
      uni.setClipboardData({
        data: this.markContent,
        success: function () {
          console.log("success");
        },
      });
    },
    /**
     * 返回刷新之前进入的课程数据
     */
    refreshByIndex() {
      let self = this;
      this.$api
        .courseGoodsList({
          pageNum: this.itemIndex + 1,
          pageSize: 1,
        })
        .then((res) => {
          if (res.data.code == 200) {
            this.$set(this.goodsList, this.itemIndex, res.data.rows[0]);
          }
        });
    },
    commonSystemTime() {
      return new Promise((resolve) => {
        this.$api.commonSystemTime().then((res) => {
          this.sysTime = res.data.data;
        });
      });
    },
    selectClass(item, index) {
      console.log(item);
      this.itemIndex = index;
      this.selectItem = item;
      this.selectClassModal = true;
      this.goodsGradeList(item.goodsId);
    },
    radioGroupChange(e) {
      console.log(e);
    },
    userConfirmInfoDetail() {
      return new Promise((resolve) => {
        this.$api
          .userConfirmInfoDetail({
            orderGoodsId: this.activeItem.orderGoodsId,
          })
          .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 {
                // ，请联系020-87085982
                uni.showModal({
                  showCancel: false,
                  title: "提示",
                  content: "开通信息推送不成功，无法进入学习！",
                });
                resolve(false);
              }
            }
          });
      });
    },
    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 {
                // ，请联系020-87085982
                uni.showModal({
                  showCancel: false,
                  title: "提示",
                  content: "开通信息推送不成功，无法进入学习！",
                });
              }
              this.showUserConfirmInfo = false;
            });
        } else {
          uni.showToast({
            icon: "none",
            title: "请勾选确认个人信息无误",
          });
        }
      } else {
        return;
      }
    },

    cancelUserConfirm() {
      clearInterval(this.confirmTimer);
    },
    goodsGradeList(id) {
      let self = this;
      this.$api
        .goodsGradeList({
          goodsId: id,
        })
        .then((res) => {
          if (res.data.code == 200) {
            self.gradeList = res.data.rows;
            if (self.gradeList.length == 0) {
              let item = {
                className: "系统分班",
                gradeId: 0,
              };
              self.gradeList.push(item);
            } else {
              let isGradeFull = self.gradeList.every(
                (item) =>
                  item.studentNum > 0 && item.studentNum == item.studentUpper
              );
              //所有班级都满了
              if (isGradeFull) {
                let item = {
                  className: "系统分班",
                  gradeId: 0,
                };
                self.gradeList.unshift(item);
              }
            }
          }
        });
    },
    appBeforeAddress(goodsId, item) {
      this.$api
        .appBeforeAddress({
          // goodsId,
          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,
            });
          }
        });
    },
    courseGoodsList() {
      let self = this;
      // /course/goodsList 查询用户拥有的商品
      this.$api.courseGoodsList(this.param).then((res) => {
        if (res.data.code == 200) {
          self.goodsList.push.apply(self.goodsList, res.data.rows);
          self.total = res.data.total;
        }
      });
    },
    async studyIn(v, i, item, index) {
      this.activeItem = item;
      if (item.interfaceAccountId > 0) {
        //学习账号已开通

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

      if (item.learningStatus == 2) {
        uni.showToast({
          icon: "none",
          title: "开放学习时间待定，不能进入学习",
        });
        return;
      }

      if (item.classStatus == 0) {
        uni.showToast({
          icon: "none",
          title: "尚未开班，不能进入学习",
        });
        return;
      }
      console.log(this.sysTime, item.learningTimeStart);
      console.log(this.sysTime < item.learningTimeStart);
      if (item.learningStatus == 3 && this.sysTime < item.learningTimeStart) {
        uni.showToast({
          icon: "none",
          title: "不在开放学习时间,不能进入学习",
        });
        return;
      }

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

      if (!confirmDetail) {
        return;
      }

      // //内部系统
      // if (item.interfacePushId > 0 && item.officialStatus != 1) {
      // 	uni.showModal({
      // 		showCancel: false,
      // 		content: '机构正在为您报名中，请耐心等待，有疑问请联系020-87085982！'
      // 	});
      // 	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);
        return;
      }

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

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

      // if (item.educationName == '继续教育') {
      this.$method.checkLock("jxjy").then((res) => {
        //可以学习
        if (item.courseNum == 1) {
          this.$api
            .courseCourseList({
              pageNum: 1,
              pageSize: 1,
              goodsId: item.goodsId,
              gradeId: item.gradeId,
              orderGoodsId: item.orderGoodsId,
            })
            .then((res) => {
              if (res.data.code == 200) {
                uni.navigateTo({
                  url: `/pages3/polyv/detail?id=${res.data.rows[0].courseId}&goodsId=${item.goodsId}&orderGoodsId=${item.orderGoodsId}`,
                });
              }
            });
          return;
        }
        this.$navTo.togo(
          `/pages2/wd/course?id=${v}&gid=${i}&orderGoodsId=${item.orderGoodsId}`
        );
      });
    },
    /**
     * @param {Object} goodsId 商品id
     * 查询商品重修状态
     */
    courseGoodsRebuildStatus(goodsId, gradeId) {
      return new Promise((resolve) => {
        this.$api
          .courseGoodsRebuildStatus({
            goodsId: goodsId,
            gradeId: gradeId,
          })
          .then((res) => {
            resolve(res.data.data);
          });
      });
    },
    appointment(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,
          });
        }
      });
    },
    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,
            });
          }
        });
    },
    call() {
      uni.makePhoneCall({
        phoneNumber: "020-87085982", //仅为示例
      });
    },
  },
  components: { ClassTimeTip },
};
</script>
<style>
page {
  background: #eaeef1;
}
</style>
<style scope lang="scss">
.box_progress {
  display: flex;
  justify-content: space-between;
  align-items: center;
  margin-top: 20rpx;

  .disabled {
    opacity: 0.6;
  }
}

.bottomBox {
  background: #ffffff;
  width: 94%;
  border-bottom-left-radius: 24rpx;
  border-bottom-right-radius: 24rpx;
  margin: 0 auto;
  padding: 20rpx;

  .restart {
    margin: 0 auto;
    text-align: center;
    line-height: 80rpx;
    color: #fff;
    font-size: 30rpx;
    width: 440rpx;
    height: 80rpx;
    background: #ff0000;
    border-radius: 40rpx 40rpx 40rpx 40rpx;
  }
}

.content_box {
  font-size: 24rpx;
  display: flex;
  align-items: center;
  color: #999999;
  margin-top: 8rpx;
}

.content {
  color: #000000;
  margin: 0 8rpx;
}

.wk_icon {
  width: 24rpx;
  height: 24rpx;
  margin-right: 8rpx;
}

.class {
  margin-bottom: 30rpx;

  .class_item {
    width: 100%;
    background: #ffffff;
    box-shadow: 0rpx 10rpx 9rpx 1rpx rgba(165, 196, 239, 0.1);
    border-radius: 24rpx;
    padding: 20rpx;
    z-index: 999;
    position: relative;

    .class_img {
      height: 367rpx;
      width: 100%;
      border-radius: 24rpx;
    }

    .class_text {
      padding: 0 20rpx;

      .class_title {
        color: #333333;
        font-weight: bold;
        font-size: 32rpx;
      }
    }

    .class-warm {
      padding: 10rpx 20rpx;
      display: flex;
      align-items: flex-start;

      &__icon {
        margin-right: 10rpx;
      }

      &__text {
        .date {
          font-size: 24rpx;
          font-weight: bold;
          color: #ff3b30;
        }

        .state {
          margin-top: 15rpx;
          font-size: 24rpx;
          font-weight: bold;
          color: #ff3b30;
        }
      }
    }
  }
}

.popup_box {
  height: 700rpx;
  box-shadow: 0rpx 0rpx 16rpx 4rpx rgba(145, 156, 178, 0.1);
  border-radius: 32rpx 32rpx 0rpx 0rpx;

  .line1 {
    width: 80rpx;
    height: 8rpx;
    background: #999999;
    border-radius: 4rpx;
    margin: 0 auto;
    margin-top: 15rpx;
  }

  .grade {
    height: 23rpx;
    font-size: 24rpx;
    color: #999999;
    margin: 0 auto;
    margin-top: 15rpx;
    text-align: center;
  }

  .confrim-btn {
    height: 98rpx;
    width: 100%;
    display: flex;
    align-items: center;
    justify-content: center;

    .okBtn {
      width: 200rpx;
      height: 64rpx;
      background: linear-gradient(0deg, #015eea, #00c0fa);
      border-radius: 32rpx;
      color: #ffffff;
      text-align: center;
      line-height: 64rpx;
    }
  }
}

.slot-content {
  padding: 0 20rpx;
}

.confirm-modal {
  .slot-content {
    padding: 0 20rpx;
    .content {
      color: red;

      .msg-list {
        .item {
          padding: 20rpx 0;

          &__left {
            color: #666;
            margin-right: 20rpx;
          }

          &__right {
            color: #333;
          }
        }
      }
    }
  }
}
</style>