zc_saas_h5/pages5/examList/index.vue

<template>
  <view>
    <nav-bar title="模考预约" class="nav"></nav-bar>
    <view class="tabs">
      <view
        class="tab"
        :class="{ active: param.mockStatus == 0 }"
        data-index="1"
        @click="tab(0)"
      >
        <view>未考试</view>
      </view>
      <view
        class="tab"
        :class="{ active: param.mockStatus == 1 }"
        data-index="2"
        @click="tab(1)"
      >
        <view>已结束</view>
      </view>
      <view class="sort" @click="showSort = true"> 筛选 </view>
    </view>

    <view class="record">
      <template v-if="param.mockStatus == 0">
        <view v-if="recordList.length">
          <view
            class="examList"
            v-for="(item, index) in recordList"
            :key="index"
          >
            <view class="main">
              <view class="top" @click="showDetails(item)">
                <view class="subject">{{ item.applyName }}</view>
              </view>
              <view class="item">
                <view class="left">项目</view>
                <view class="right"
                  >{{ item.businessName }} {{ item.projectName }}</view
                >
              </view>
              <view class="item">
                <view class="left">专业</view>
                <view class="right">{{ item.categoryName }}</view>
              </view>
              <view class="item">
                <view class="left">科目</view>
                <view class="right">{{ item.subjectName }}</view>
              </view>
              <view class="item">
                <view class="left">考试时间</view>
                <view v-if="item.mockActivity == 0" class="right">
                  {{ $method.timestampToTime(item.applySiteExamTime) }}
                  {{ item.applySiteStartTime }} - {{ item.applySiteEndTime }}
                </view>
              </view>
              <view class="btn-wrap">
                <view class="btn-line">
                  <!-- mockActivity 1是活动模考，0否 && (!item.handStatus || item.handStatus == 0)-->
                  <view
                    v-if="
                      item.mockActivity == 1 &&
                      (!item.handStatus || item.handStatus == 0)
                    "
                    class="btn"
                    :class="{
                      'test-disabled': !(item.activityStartTime < nowTime),
                    }"
                    @click="goExamCount(item, index)"
                    >去考试</view
                  >
                  <view v-else>
                    <view
                      class="btn test-disabled"
                      v-if="goTest(item)"
                      @click="goExamCount(item, index)"
                      >去考试</view
                    >
                    <view class="btn test-disabled" v-else-if="item.handStatus"
                      >已考试</view
                    >
                    <view class="btn" v-else @click="goExamCount(item, index)"
                      >去考试</view
                    >
                  </view>
                </view>
              </view>
            </view>
          </view>
        </view>
        <view v-else class="nodata">暂无相关数据</view>
      </template>

      <template v-if="param.mockStatus == 1">
        <view v-if="recordList.length">
          <view
            class="examList"
            v-for="(item, index) in recordList"
            :key="index"
          >
            <view class="main">
              <view class="top" @click="showDetails(item)">
                <view class="subject">{{ item.applyName }}</view>
              </view>
              <view class="item">
                <view class="left">项目</view>
                <view class="right"
                  >{{ item.businessName }} {{ item.projectName }}</view
                >
              </view>
              <view class="item">
                <view class="left">专业</view>
                <view class="right">{{ item.categoryName }}</view>
              </view>
              <view class="item">
                <view class="left">科目</view>
                <view class="right">{{ item.subjectName }}</view>
              </view>
              <view class="item">
                <view class="left">考试时间</view>
                <view class="right">
                  {{ $method.timestampToTime(item.applySiteExamTime) }}
                  {{ item.applySiteStartTime }} - {{ item.applySiteEndTime }}
                </view>
              </view>
              <view class="btn-wrap">
                <view class="btn-line" v-if="item.reSubscribe == 1">
                  <view class="btn border" @click="reApply(item)"
                    >重新预约</view
                  >
                </view>
                <template v-else>
                  <view class="btn-line">
                    <view class="text" v-if="item.handStatus"
                      >当前报告含主观题需人工阅卷，阅卷完成后显示完整报告</view
                    >
                    <view class="text" v-if="!item.handStatus"
                      >由于未按时参加考试，主观题将不会提交至后台进行人工阅卷</view
                    >
                    <view
                      class="btn border"
                      :class="{
                        disabled: item.canDo === 0,
                        'btn--half': item.handStatus,
                      }"
                      @click="doQuestion(item)"
                      >去做题</view
                    >
                    <view
                      class="btn btn--half border"
                      @click="report(item)"
                      v-if="item.handStatus"
                      >查看报告</view
                    >
                  </view>
                  <view
                    class="btn-line"
                    v-if="
                      item.liveEndTime && item.liveStartTime && item.liveUrl
                    "
                  >
                    <view class="text-half">
                      <view>模考讲解直播时间</view>
                      <view
                        >{{
                          $method.timestampToTime(item.liveStartTime, false)
                        }}
                        -
                        {{
                          $method.timestampToTime(item.liveEndTime, false)
                        }}</view
                      >
                    </view>
                    <view class="btn btn--half border" @click="goLive(item)"
                      >去查看</view
                    >
                  </view>
                </template>
              </view>
            </view>
          </view>
        </view>
        <view v-else class="nodata">暂无相关数据</view>
      </template>
    </view>

    <view class="modal" :style="{ top: modalTop + 'px' }" v-if="showSort">
      <view class="content">
        <view class="item">
          <view class="item__title">考试时间</view>
          <view class="item__box">
            <view class="text">
              <picker
                mode="date"
                :value="param.startTime"
                :end="endDate"
                @change="bindDateFromChange"
              >
                <view class="uni-input">{{
                  param.startTime || "开始时间"
                }}</view>
              </picker>
              -
              <picker
                mode="date"
                :value="param.endTime"
                :end="endDate"
                @change="bindDateToChange"
              >
                <view class="uni-input">{{ param.endTime || "结束时间" }}</view>
              </picker>
            </view>
            <u-icon class="icon" name="calendar"></u-icon>
          </view>
        </view>

        <view class="item">
          <view class="item__title">考试标题</view>
          <view class="item__box">
            <picker
              class="picker"
              mode="selector"
              :range="listApplyName"
              range-key="applyName"
              :value="param.applyName"
              @change="bindTitleChange"
            >
              <view style="width: 650rpx; height: 40rpx">{{
                param.applyName
              }}</view>
            </picker>
            <u-icon class="icon" name="arrow-down"></u-icon>
          </view>
        </view>
      </view>
      <view class="modal_wrap" @click="showSort = false"></view>
    </view>
  </view>
</template>

<script>
import { mapGetters } from "vuex";
import config from "@/common/config";
export default {
  data() {
    return {
      showSort: false,
      index: 0,
      list: [],
      list1: [],
      recordList: [],
      goodsData: {},
      param: {
        pageNum: 1,
        pageSize: 10,
        mockStatus: 0,
        endTime: "",
        startTime: "",
        applyName: "",
      },
      nowTime: 0,
      sysTime: Date.now(),
      dateFrom: "",
      dateTo: "",
      isRepeat: false,
      total: 0,
      activeIndex: 0,
      typeIndex: 0,
      itemIndex: "",
      modalTop: 0,
      endDate: "",
      titleName: 3,
      listApplyName: [],
    };
  },
  computed: {
    ...mapGetters(["userInfo"]),
  },
  onLoad(option) {
    this.param.mockStatus = option.state || 0;

    this.endDate = this.$method
      .timestampToTime(new Date().getTime() / 1000)
      .replace(/-/g, "/");

    // this.mockSubscribeListSubscribe();
    uni.getSystemInfo({
      success: (e) => {
        let info = uni.createSelectorQuery().select(".nav");
        info
          .boundingClientRect((navData) => {
            //data - 各种参数

            let info = uni.createSelectorQuery().select(".tabs");
            info
              .boundingClientRect((tabData) => {
                //data - 各种参数
                this.modalTop = navData.height + tabData.height;
                console.log(navData); // 获取元素宽度
                console.log(tabData); // 获取元素宽度
              })
              .exec();
          })
          .exec();
      },
    });
  },
  onPullDownRefresh() {
    let that = this;
    this.param.pageNum = 1;
    this.mockSubscribeListSubscribe();
    setTimeout(function () {
      uni.stopPullDownRefresh();
    }, 500);
  },
  onReachBottom() {
    console.log(this.total, "total");
    console.log(this.recordList.length, "length");
    if (this.recordList.length < this.total) {
      this.param.pageNum++;
      this.mockSubscribeListSubscribe();
    }
  },
  onShow() {
    this.nowTime = +this.$method.timest();
    // if(this.itemIndex !== '') {
    // 	this.refreshByIndex();
    // }
    this.recordList = [];
    this.mockSubscribeListSubscribe();
  },
  methods: {
    mockApplyListApplyName() {
      let param = JSON.parse(JSON.stringify(this.param));
      if (param.endTime) {
        param.endTime = this.$method.TimeTotimestamp(param.endTime);
      }

      if (param.startTime) {
        param.startTime = this.$method.TimeTotimestamp(param.startTime);
      }
      console.log(param, "param");
      this.$api.mockApplyListApplyName(param).then((res) => {
        this.listApplyName = res.data.rows;
        console.log(this.listApplyName, "listApplyName");
        this.param.applyName = "";
        this.mockSubscribeListSubscribe();
      });
    },
    reApply(item) {
      uni.redirectTo({
        url: "/pages5/examAppointList/index",
      });
    },
    report(item) {
      uni.navigateTo({
        url:
          "/pages5/examReport/index?&examId=" +
          item.examId +
          "&id=" +
          item.recordId +
          "&eachExamId=" +
          item.eachExamId +
          "&subscribeId=" +
          item.subscribeId,
      });
    },
    doQuestion(item) {
      if (item.canDo === 0) {
        uni.showToast({
          icon: "none",
          msg: "请等待所有科目考试结束后再进入刷题",
        });
        return;
      }

      uni.navigateTo({
        url:
          "../examBank/index?examId=" +
          item.examId +
          "&eachExamId=" +
          item.eachExamId +
          "&subscribeId=" +
          item.subscribeId,
      });
    },
    goTest(item) {
      if (item.mockActivity && item.mockActivity == 1) {
        return false;
      }
      let startTime = this.$method.TimeTotimestamp(
        this.$method.timestampToTime(item.applySiteExamTime) +
          " " +
          item.applySiteStartTime
      );
      let canGo =
        startTime - this.nowTime <= 600 &&
        startTime - this.nowTime >= (-(item.timeLimit * 60) || 0);

      return !canGo;
    },
    isStart(item) {
      let startTime = this.$method.TimeTotimestamp(
        this.$method.timestampToTime(item.applySiteExamTime) +
          " " +
          item.applySiteStartTime
      );

      return startTime - this.nowTime <= 600;
    },
    mockSubscribeListSubscribe() {
      let param = JSON.parse(JSON.stringify(this.param));
      if (param.endTime) {
        param.endTime = this.$method.TimeTotimestamp(param.endTime);
      }

      if (param.startTime) {
        param.startTime = this.$method.TimeTotimestamp(param.startTime);
      }
      // mock/subscribe/listSubscribe
      this.$api.mockSubscribeListSubscribe(param).then((res) => {
        this.recordList.push(...res.data.rows);
        this.total = res.data.total;
      });
    },
    refreshByIndex() {
      let param = JSON.parse(JSON.stringify(this.param));
      if (param.endTime) {
        param.endTime = this.$method.TimeTotimestamp(param.endTime);
      }

      if (param.startTime) {
        param.startTime = this.$method.TimeTotimestamp(param.startTime);
      }
      param.pageNum = this.itemIndex + 1;
      param.pageSize = 1;
      this.$api.mockSubscribeListSubscribe(param).then((res) => {
        console.log("res.data.rows[0]", res.data.rows[0]);
        this.$set(this.recordList, this.itemIndex, res.data.rows[0]);
        this.itemIndex = "";
      });
    },

    goLive(item) {
      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 +
          "&buyCourse=1" +
          "&ident=" +
          uuid
      );
      uni.navigateTo({
        url: `../../pages/webview/index?url=` + encode,
      });
    },
    async goExamCount(item, index) {
      if (item.mockActivity && item.mockActivity == 1) {
        if (!(item.activityStartTime < this.nowTime)) {
          return;
        }
        await this.$http({
          url: "/mock/apply/addMockTime",
          method: "post",
          data: {
            applyId: item.applyId,
            duration: item.duration,
            majorId: item.majorId,
            subjectId: item.subjectId,
            mockMajorSubjectId: item.mockMajorSubjectId,
          },
        }).then((res) => {
          if (res.data.code == 200) {
            const { examTime, startTime, endTime, eachExamId, mockActivity } =
              res.data.data;
            let o_item = {
              ...item,
              applySiteExamTime: examTime,
              applySiteStartTime: startTime,
              applySiteEndTime: endTime,
              eachExamId: eachExamId,
              mockActivity: mockActivity,
            };
            // item.applySiteExamTime = examTime // 当前时间的时间戳
            // item.applySiteStartTime = startTime
            // item.applySiteEndTime = endTime
            // item.eachExamId = eachExamId
            this.toJump(o_item, index);
          } else {
            this.$u.toast(res.data.msg);
            return;
          }
        });
      } else {
        this.toJump(item, index);
      }
    },
    toJump(item, index) {
        if (this.goTest(item)) {
          uni.showToast({
            icon: "none",
            title: "不在考试时间",
          });
          return;
        }
      this.itemIndex = index;
      uni.navigateTo({
        url:
          "../examCount/index?start=" +
          this.$method.TimeTotimestamp(
            this.$method.timestampToTime(item.applySiteExamTime) +
              " " +
              item.applySiteStartTime
          ) +
          "&limit=" +
          item.timeLimit +
          "&examId=" +
          item.examId +
          "&eachExamId=" +
          item.eachExamId +
          "&subscribeId=" +
          item.subscribeId +
          "&mockName=" +
          item.applyName +
          "&examEndTime=" +
          this.$method.TimeTotimestamp(
            this.$method.timestampToTime(item.applySiteExamTime) +
              " " +
              item.applySiteEndTime
          ) +
          "&mockActivity=" +
          item.mockActivity +
          "&goodsId=" +
          (item.goodsId || "") +
          "&orderGoodsId=" +
          (item.orderGoodsId || ""),
      });
    },

    sort() {},

    appoint(item) {
      this.appointModal = true;
    },
    tab(state) {
      if (this.param.mockStatus == state) {
        return;
      }
      this.recordList = [];
      this.param.endTime = "";
      this.param.startTime = "";
      this.param.applyName = "";
      this.param.pageNum = 1;
      this.param.mockStatus = state;
      this.mockSubscribeListSubscribe();
    },
    bindDateFromChange(e) {
      this.param.startTime = e.detail.value;
      this.param.pageNum = 1;
      this.param.applyName = "";
      this.recordList = [];
      this.mockApplyListApplyName();
    },

    bindDateToChange(e) {
      this.param.endTime = e.detail.value;
      this.param.pageNum = 1;
      this.param.applyName = "";
      this.recordList = [];
      this.mockApplyListApplyName();
    },

    bindTitleChange(e) {
      if (this.listApplyName.length) {
        let index = e.detail.value;
        this.param.applyName = this.listApplyName[index].applyName;
      } else {
        this.param.applyName = "";
      }
      this.param.pageNum = 1;
      this.recordList = [];
      this.mockSubscribeListSubscribe();
    },
  },
};
</script>
<style>
page {
  background: #eaeef1;
}
</style>
<style lang="scss" scope>
.animals {
  transition: all 0.3s;
  transform: rotate(180deg);
}
.tabs {
  position: fixed;
  left: 0;
  width: 100%;
  display: flex;
  z-index: 10;
  background: #ffffff;
  padding: 18rpx 0;
  border-bottom: 1px solid #eee;
  .tab {
    padding: 0 18rpx;
    flex: 1;
    background: #ffffff;
    font-size: 32rpx;
    color: #999999;
    text-align: center;
    position: relative;

    &:nth-of-type(2) {
      border-right: 1px solid #eeeeee;
    }

    &.active {
      color: #333333;

      &::before {
        content: "";
        position: absolute;
        width: 24px;
        height: 4px;
        background: #007aff;
        border-radius: 2px;
        left: 50%;
        margin-left: -12px;
        bottom: -18rpx;
      }
    }
  }

  .sort {
    width: 160rpx;
    text-align: center;
    font-size: 32rpx;
    font-weight: 500;
    color: #999999;
  }
}

.record {
  margin-top: 80rpx;
  padding: 16rpx 16rpx;
  .examList {
    .main {
      background: #ffffff;
      border-radius: 16rpx;
      margin: 20rpx 0;
    }
    .top {
      height: 80rpx;
      text-align: center;
      line-height: 80rpx;
      font-size: 30rpx;
      color: #333333;
      font-weight: bold;
      border-bottom: 1px solid #eeeeee;
    }
    .item {
      display: flex;
      justify-content: space-between;
      align-items: center;
      margin-left: 31rpx;
      height: 80rpx;
      padding-right: 24rpx;
      border-bottom: 1px solid #eeeeee;
      font-size: 24rpx;
      color: #666666;
      .right {
        font-size: 28rpx;
      }
    }

    .btn-wrap {
      padding: 24rpx 16rpx;
      border-bottom: 1px solid #eeeeee;

      .btn-line {
        display: flex;
        align-items: center;
        justify-content: center;
        flex-wrap: wrap;
      }

      .text {
        width: 100%;
        color: #f5222d;
        font-size: 24rpx;
        text-align: center;
      }

      .text-half {
        color: #666666;
        font-size: 24rpx;
        width: 320rpx;
        margin: 8rpx;
      }

      .btn {
        margin: 8rpx;
        width: 528rpx;
        height: 64rpx;
        background: #007aff;
        border-radius: 16rpx;
        text-align: center;
        line-height: 64rpx;
        color: #fff;

        &--half {
          width: 320rpx;
        }

        &.border {
          background: #fff;
          color: #007aff;
          border: 1px solid #007aff;
        }

        &.disabled {
          color: #d9d9d9;
          border-color: #d9d9d9;
        }

        &.test-disabled {
          color: #fff;
          background: #d9d9d9;
        }
      }
    }
  }
}

.modal {
  bottom: 0;
  z-index: 199999999;
  position: fixed;
  left: 0;
  width: 100%;

  .content {
    overflow: hidden;
    position: relative;
    z-index: 10;
    background: #fff;
    padding: 20rpx 12rpx 16rpx;

    .item {
      &__title {
        padding: 16rpx 0;
        font-size: 28rpx;
        color: #999999;
      }

      &__box {
        padding: 0 16rpx;
        display: flex;
        width: 718rpx;
        height: 80rpx;
        background: #ffffff;
        border: 1px solid #eeeeee;
        border-radius: 16rpx;
        align-items: center;

        .text {
          flex: 1;
          display: flex;
          align-items: center;
        }
      }
    }
  }

  .modal_wrap {
    position: absolute;
    left: 0;
    width: 100%;
    top: 0;
    height: 100%;
    background: rgba(0, 0, 0, 0.3);
  }
}

.activesty {
  background: #007aff !important;
  color: #fff !important;
}
.nodata {
  text-align: center;
  margin-top: 100rpx;
  font-size: 32rpx;
  color: #222;
}
</style>