zc_saas_h5/pages5/examCount/index.vue

<template>
  <view class="safeArea">
    <nav-bar title="模拟考试-一级建造师-管理"></nav-bar>
    <view class="examWrap">
      <view class="title">距离管理开考还有</view>
      <view class="circle">
        <u-circle-progress
          class="img"
          width="448"
          bg-color="rgba(0,0,0,0)"
          type="primary"
          :percent="percent"
        ></u-circle-progress>
        <view class="time">{{ timeText }}</view>
      </view>

      <view v-if="mockActivity == 1" class="btn" @click="examBank()"
        >开始考试</view
      >
      <view
        v-else
        class="btn"
        @click="examBank()"
        :class="{ disabled: !(nowTime > start && nowTime < end) }"
        >开始考试</view
      >
    </view>
  </view>
</template>

<script>
import { mapGetters } from "vuex";
export default {
  components: {},
  data() {
    return {
      mockName: "",
      state: 1,
      start: 0,
      timer: null,
      timeText: "",
      nowTime: 0,
      timeLimit: 0,
      examId: 0,
      eachExamId: 0,
      subscribeId: 0,
      end: 0,
      percent: 0,
      examEndTime: 0,
      mockActivity: 0,
      goodsId: "",
      orderGoodsId: "",
    };
  },
  onLoad(option) {
    this.examEndTime = option.examEndTime;
    this.mockName = option.mockName || "";
    this.subscribeId = option.subscribeId;
    this.eachExamId = option.eachExamId;
    this.examId = option.examId;
    this.timeLimit = +option.limit || 0;
    this.start = +option.start;
    this.mockActivity = option.mockActivity;
    this.end = this.timeLimit * 60 + this.start;
	this.goodsId = option.goodsId
	this.orderGoodsId = option.orderGoodsId
    this.timer = setInterval(() => {
      this.timeText = this.getDuring();
    }, 1000);
  },
  onShow() {
    clearInterval(this.timer);
    this.timer = setInterval(() => {
      this.timeText = this.getDuring();
    }, 1000);
  },
  onUnload() {
    clearInterval(this.timer);
  },
  methods: {
    getDuring() {
      this.nowTime = +this.$method.timest();
      let during = this.start - this.nowTime;
      console.log("during", during);
      this.percent =
        during <= 0 ? 100 : during >= 600 ? 0 : ((600 - during) / 600) * 100;
      if (during <= 0) {
        return "00:00";
      }
      let minutes =
        parseInt(during / 60) >= 10
          ? "0" + parseInt(during / 60)
          : parseInt(during / 60);
      let seconds = during % 60 >= 10 ? during % 60 : "0" + (during % 60);

      return minutes + ":" + seconds;
    },
    canTest() {},
    examBank() {
      if (this.mockActivity == 1) {
        uni.redirectTo({
          url:
            "../examBank/index?examId=" +
            this.examId +
            "&eachExamId=" +
            this.eachExamId +
            "&subscribeId=" +
            this.subscribeId +
            "&examEndTime=" +
            this.examEndTime +
            "&examStartTime=" +
            this.start +
            "&goodsId=" +
            this.goodsId +
            "&orderGoodsId=" +
            this.orderGoodsId,
        });
      } else {
        if (this.nowTime > this.start && this.nowTime < this.end) {
          uni.redirectTo({
            url:
              "../examBank/index?examId=" +
              this.examId +
              "&eachExamId=" +
              this.eachExamId +
              "&subscribeId=" +
              this.subscribeId +
              "&examEndTime=" +
              this.examEndTime +
              "&examStartTime=" +
              this.start +
              "&goodsId=" +
              this.goodsId +
              "&orderGoodsId=" +
              this.orderGoodsId,
          });
        } else {
          uni.showToast({
            icon: "none",
            title: "不在考试时间",
          });
        }
      }
    },
  },
  onReachBottom() {},
  computed: { ...mapGetters(["userInfo"]) },
};
</script>
<style>
page {
  background: #eaeef1;
}
</style>
<style scoped lang="scss">
.examWrap {
  padding: 16rpx;

  .title {
    margin-top: 70rpx;
    font-size: 32rpx;
    color: #666666;
    line-height: 48rpx;
    text-align: center;
  }

  .circle {
    margin: 60rpx auto 0;
    width: 480rpx;
    height: 480rpx;
    position: relative;
    background: #fff;
    border-radius: 50%;

    .img {
      position: absolute;
      left: 50%;
      top: 50%;
      transform: translate3D(-50%, -50%, 0);
    }

    .time {
      width: 100%;
      height: 100%;
      display: flex;
      align-items: center;
      justify-content: center;
      position: relative;
      z-index: 999;
      font-size: 80rpx;
      text-align: center;
      font-weight: bold;
      color: #333333;
    }
  }

  .btn {
    margin: 330rpx auto 0;
    width: 528rpx;
    height: 80rpx;
    background: #007aff;
    border-radius: 40rpx;
    text-align: center;
    line-height: 80rpx;
    color: #fff;

    &.disabled {
      background: #ccc;
    }
  }
}
</style>