zc_saas_h5/pages5/examAppointList/index.vue

<template>
  <view>
    <nav-bar title="模考预约" class="nav"></nav-bar>
    <view class="tabs">
      <view
        class="tab"
        :class="{ active: index == 1 }"
        data-index="1"
        @click="tab(1)"
      >
        <view>{{ businessName }}</view>
        <u-icon
          class="icon"
          :class="index == 1 ? 'animals' : ''"
          name="arrow-down"
        ></u-icon>
      </view>
      <view class="tab" :class="{ active: index == 2 }" data-index="2">
        <view class="dateRange">
          <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="scroll">
      <scroll-view scroll-x="true" class="scroll-x">
        <view class="content">
          <view
            v-for="(item, index) in sList"
            :key="index"
            class="scroll-tag"
            :class="{ active: param.majorId == item.id }"
            @click="tagSelect(item)"
            >{{ item.categoryName }}</view
          >
        </view>
      </scroll-view>
    </view>

    <view class="record">
      <view class="item" v-for="(item, index) in mockList" :key="index">
        <view class="item__header">{{ item.subjectName }}</view>
        <view class="item__body">
          <view class="title">
            <image
              class="img"
              mode="widthFix"
              src="/pages5/static/time.png"
            ></image>
            <text>考试时间</text>
          </view>
          <view class="desc"
            >{{ $method.timestampToTime(item.examTime) }}
            <view> {{ item.startTime }} - {{ item.endTime }} </view>
          </view>
          <view
            class="btn"
            @click="appoint(item)"
            :class="{ disabled: !canApply(item) || !item.isSubscribe }"
            >{{ item.isSubscribe ? "预约考试" : "已预约" }}</view
          >
        </view>
      </view>
    </view>

    <view class="notice" @click="noticeModal = true">
      <u-icon class="icon" color="#fff" name="info-circle"></u-icon>
      <view class="text">模考说明</view>
    </view>

    <view class="modal" :style="{ top: modalTop + 'px' }" v-if="index == 1">
      <view class="content">
        <scroll-view scroll-y="true" style="height: 100%">
          <view class="list">
            <view
              class="item"
              :class="
                param.businessId == listItem.businessId ? 'activesty' : ''
              "
              v-for="(listItem, listIndex) in businesslist"
              :key="listIndex"
              @click="testClick(listItem)"
            >
              {{ listItem.educationName }}:{{ listItem.businessName }}-{{
                listItem.projectName
              }}
            </view>
          </view>
        </scroll-view>
      </view>
      <view class="modal_wrap" @click="index = 0"></view>
    </view>

    <u-popup
      class="notice__modal"
      v-model="noticeModal"
      mode="center"
      border-radius="24"
      :mask-close-able="false"
    >
      <view class="notice__content">
        <view class="body">
          <scroll-view scroll-y="true" style="height: 700rpx">
            <view class="content">
              <view class="bold text">模拟考试说明</view>

              <view
                >在您注册过程中,您需要完成我们的注册流程并通过点击“同意并继续”的形式在线签署以下协议及政策,请您务必仔细阅读、充分理解协议中的条款内容后再点击同意（尤其是以粗体标识的条款，因为这些条款可能会明确您应履行的义务或对您的权利有所限制）。
              </view>
            </view>
          </scroll-view>
        </view>
        <view class="footer">
          <view class="btn close" @click="noticeModal = false">我知道了</view>
        </view>
      </view>
    </u-popup>

    <view
      class="appoint__modal"
      v-if="appointModal"
      mode="center"
      border-radius="24"
      :mask-close-able="false"
    >
      <view class="appoint__content">
        <view class="body">
          <image
            class="img"
            src="/pages5/static/img-header.png"
            mode="widthFix"
          ></image>
          <view class="content">
            <view class="bold center">模拟考试说明</view>

            <view> 您预约的模拟考试，安排如下： </view>
            <view>
              <text class="bold text">模考场次： </text>
              <text class="text">{{ showItem.applyName }}</text>
            </view>
            <view>
              <text class="bold text">项目： </text>
              <text class="text"
                >{{ showItem.businessName }} {{ showItem.projectName }}</text
              >
            </view>
            <view>
              <text class="bold text">专业：</text>
              <text class="text">{{ showItem.categoryName }}</text>
            </view>
            <view>
              <text class="bold text">科目：</text>
              <text class="text">{{ showItem.subjectName }}</text>
            </view>
            <view>
              <text class="bold text">考试时间：</text>
              <text class="text">
                {{ $method.timestampToTime(showItem.examTime) }}
                {{ showItem.startTime }} - {{ showItem.endTime }}
              </text>
            </view>
            <view>请准时参加考试哦~</view>
          </view>
        </view>
        <view class="footer">
          <view
            class="btn close"
            @click="
              appointModal = false;
              openAppoint = true;
            "
            >我知道了</view
          >
        </view>
      </view>
    </view>

    <u-popup
      class="open__modal"
      v-model="openAppoint"
      mode="center"
      border-radius="24"
      :mask-close-able="false"
    >
      <view class="open__content">
        <view class="body">
          <view class="content">
            <view class="bold center">开考提醒</view>

            <view class="center"> 开考前10分钟提醒入场，不错过实战机会 </view>
          </view>
        </view>
        <view class="footer">
          <view class="btn close" @click="closeNotice()">我知道了</view>
        </view>
      </view>
    </u-popup>
  </view>
</template>

<script>
import { mapGetters, mapActions } from "vuex";
export default {
  computed: {
    ...mapGetters(["userInfo", "sysTime"]),
  },
  data() {
    return {
      tagActive: "",
      openAppoint: false,
      appointModal: false,
      noticeModal: false,
      index: 0,
      list: [],
      list1: [],
      mockList: [],
      businesslist: [],
      param: {
        endTime: "",
        startTime: "",
        pageNum: 1,
        pageSize: 10,
        businessId: "",
        majorId: "",
      },
      isRepeat: false,
      total: 0,
      activeIndex: "",
      typeIndex: 0,
      itemIndex: "",
      modalTop: 0,
      endDate: "",
      businessName: "",
      subscribeId: 0,
      nowTime: "",
      sList: [],
      showItem: {},
    };
  },
  async onLoad(option) {
    this.endDate = this.$method
      .timestampToTime(new Date().getTime() / 1000)
      .replace(/-/g, "/");
    this.nowTime = +this.$method.timest();
    await this.setSystemTime();
    await this.mockApplyListApplyBusiness();

    this.mockApplyListApply();
    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;
              })
              .exec();
          })
          .exec();
      },
    });
  },
  onPullDownRefresh() {
    let that = this;
    this.param.pageNum = 1;
    this.mockApplyListApply();
    setTimeout(function () {
      uni.stopPullDownRefresh();
    }, 500);
  },
  onReachBottom() {
    if (this.mockList.length < this.total) {
      this.param.pageNum++;
      this.mockApplyListApply();
    }
  },
  onShow() {},
  methods: {
    ...mapActions(["setSystemTime"]),
    closeNotice() {
      this.mockSubscribeEdit();
      this.openAppoint = false;
      this.param.pageNum = 1;
      this.mockList = [];
      this.mockApplyListApply();
    },
    canApply(item) {
      console.log(item);
      let startTime = item.applyStartTime;
      let endTime = item.applyEndTime;
      let examTime = item.examTime;

      if (
        this.sysTime >= startTime &&
        this.sysTime <= endTime &&
        this.sysTime < examTime
      ) {
        return true;
      } else {
        return false;
      }
    },
    tagSelect(item) {
      this.param.majorId = item.id;
      this.mockList = [];
      this.mockApplyListApply();
    },
    testClick(item) {
      if (!item) {
        this.param.businessId = "";
        this.businessId = "";
        this.index = 0;
        this.mockList = [];
        this.mockApplyListApply();
        return;
      }
      console.log(item, "item");
      this.param.businessId = item.businessId;
      this.businessName =
        item.educationName + ":" + item.businessName + "-" + item.projectName;
      this.index = 0;
      this.mockList = [];
      this.courseMajorList({
        businessId: item.businessId,
        projectId: item.projectId,
        status: 1,
      });
      this.mockApplyListApply();

      console.log(this.b);
    },
    mockApplyListApplyBusiness() {
      return new Promise((resolve) => {
        this.$api.mockApplyListApplyBusiness().then(async (res) => {
          this.businesslist = res.data.rows;
          this.param.businessId = res.data.rows[0].businessId;
          this.businessName =
            res.data.rows[0].businessName + res.data.rows[0].projectName;
          await this.courseMajorList({
            businessId: res.data.rows[0].businessId,
            projectId: res.data.rows[0].projectId,
            status: 1,
          });
          resolve();
        });
      });
    },
    mockApplyListApply() {
      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);
      }

      this.$api.mockApplyListApply(param).then((res) => {
        this.mockList.push(...res.data.rows);
        this.total = res.data.total;
      });
    },
    refreshByIndex() {},
    courseMajorList(data) {
      return new Promise((resolve) => {
        let self = this;
        this.$api.courseMajorList(data).then((res) => {
          if (res.data.code == 200) {
            self.sList = res.data.rows;
            let allItem = { id: "", categoryName: "全部" };
            self.sList.unshift(allItem);
            this.param.majorId = "";

            resolve();
          }
        });
      });
    },

    appoint(item) {
      let canApply = this.canApply(item);
      console.log(canApply);
    //   if (!canApply) {
    //     uni.showToast({
    //       icon: "none",
    //       title: "不在预约时间范围",
    //     });

    //     return;
    //   }

    //   if (!item.isSubscribe) {
    //     uni.showToast({
    //       icon: "none",
    //       title: "您已预约",
    //     });
    //     return;
    //   }

      this.$api
        .mockSubscribe({
          applySiteExamTime: item.examTime,
          applySiteEndTime: item.endTime,
          applySiteStartTime: item.startTime,
          applyId: item.applyId,
          mockMajorSubjectId: item.mockMajorSubjectId,
          eachExamId: item.eachExamId,
          goodsId: item.goodsId,
          orderGoodsId: item.orderGoodsId,
          // applySiteExamTime:1653899220,
          // applySiteEndTime:"17:27:54",
          // applySiteStartTime:'16:27:54',
          // applyId:26,
          // mockMajorSubjectId:49
        })
        .then((res) => {
          console.log(res);
          if (res.data.code == 200) {
            this.showItem = item;
            this.appointModal = true;
            this.subscribeId = res.data.data;
          } else {
            uni.showToast({
              icon: "none",
              title: res.data.msg,
            });
          }
        })
        .catch((err) => {
          uni.showToast({
            icon: "none",
            title: err.data.msg,
          });
        });
    },
    tab(index) {
      console.log(index, this.index);
      if (this.index == index) {
        this.index = 0;
        return;
      }
      this.index = index;
      console.log(this.index);
    },
    bindDateFromChange(e) {
      this.param.startTime = e.detail.value;
      this.param.pageNum = 1;
      this.mockList = [];
      this.mockApplyListApply();
    },

    mockSubscribeEdit() {
      this.$api
        .mockSubscribeEdit({
          mockRemind: 1,
          subscribeId: this.subscribeId,
        })
        .then((res) => {
          uni.showToast({
            icon: "none",
            title: "开启成功",
          });
        });
    },

    bindDateToChange(e) {
      this.param.endTime = e.detail.value;
      this.param.pageNum = 1;
      this.mockList = [];
      this.mockApplyListApply();
    },
  },
};
</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;
  height: 80rpx;
  z-index: 10;
  .tab {
    padding: 0 18rpx;
    flex: 1;
    display: flex;
    justify-content: space-between;
    height: 80rpx;
    line-height: 80rpx;
    background: #ffffff;
    font-size: 24rpx;
    color: #999999;

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

    .uni-input {
      text-align: center;
      width: 150rpx;
    }

    .dateRange {
      display: flex;
      justify-content: space-between;
    }

    &.active {
      color: #333333;
      .icon {
        transform: rotate(180deg);
      }
    }
  }
}

.scroll {
  width: 100%;
  margin-top: 80rpx;
  .scroll-x {
    .content {
      padding: 16rpx;
      white-space: nowrap;

      .scroll-tag {
        display: inline-block;
        padding: 11rpx 17rpx;
        background: #fff;
        color: #666666;
        margin-right: 16rpx;
        border-radius: 16rpx;

        &.active {
          background: #007aff;
          color: #fff;
        }
      }
    }
  }
}

.record {
  padding: 16rpx 16rpx;
  display: flex;
  flex-wrap: wrap;
  .item {
    margin-bottom: 16rpx;
    width: 351rpx;
    background: #ffffff;
    border-radius: 16rpx;
    position: relative;

    &:nth-of-type(2n) {
      margin-left: 16rpx;
    }

    &__header {
      padding: 24rpx 16rpx;
      background: #f2f6ff;
      font-size: 30rpx;
      color: #007aff;

      &::before {
        content: "";
        display: inline-block;
        width: 4rpx;
        height: 32rpx;
        background: #007aff;
        margin-right: 10rpx;
        vertical-align: middle;
      }
    }

    &__body {
      padding: 16rpx;

      .title {
        font-size: 24rpx;
        color: #666666;
        line-height: 48rpx;

        .img {
          vertical-align: middle;
          width: 32rpx;
        }
      }

      .desc {
        margin-top: 10rpx;
        font-size: 28rpx;
        font-weight: bold;
        color: #666666;
        line-height: 36rpx;
      }

      .btn {
        margin-top: 30rpx;
        background: #ffffff;
        border-radius: 16rpx;
        height: 64rpx;
        line-height: 62rpx;
        text-align: center;
        font-size: 28rpx;

        border: 1px solid #007aff;
        color: #007aff;

        &.disabled {
          border: 1px solid #d9d9d9;
          color: #d9d9d9;
        }
      }
    }
  }
}

.notice {
  position: fixed;
  right: 0;
  top: 50%;
  width: 48rpx;
  height: 200rpx;
  background: #52c41a;
  box-shadow: 0px 3rpx 16rpx 0rpx rgba(44, 121, 7, 0.5);
  border-radius: 24rpx;
  display: flex;
  flex-direction: column;
  align-items: center;
  justify-content: center;
  padding: 10rpx 0;

  .text {
    flex: 1;
    color: #fff;
    text-align: center;
  }
}

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

  .content {
    height: 80%;
    overflow: hidden;
    position: relative;
    z-index: 10;
    background: #fff;
    padding: 8rpx 12rpx 20rpx;
    display: flex;
    flex-wrap: wrap;

    .top {
      margin: 0 auto;
      width: 726rpx;
      height: 80rpx;
      background: #f5f5f5;
      color: #666666;
      border-radius: 16rpx;
      text-align: center;
      line-height: 80rpx;
      font-size: 32rpx;
    }

    .list {
      width: 100%;
      margin-top: 16rpx;
      display: flex;
      flex-wrap: wrap;
      justify-content: space-between;

      .item {
        padding: 25rpx 20rpx;
        width: 49%;
        background: #f5f5f5;
        border-radius: 16rpx;
        font-size: 32rpx;
        color: #666666;
        margin: 8rpx 0;
      }
    }
  }

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

.notice__modal {
  .notice__content {
    width: 640rpx;
    height: 818rpx;
    background: #ffffff;
    display: flex;
    flex-direction: column;

    .body {
      flex: 1;

      .content {
        padding: 30rpx 40rpx 28rpx;
        line-height: 40rpx;
        font-size: 28rpx;
        color: #666;

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

        .center {
          text-align: center;
        }
      }
    }

    .footer {
      height: 140rpx;
      border-top: 1px solid #eeeeee;
      display: flex;
      align-items: center;
      justify-content: center;

      .btn {
        margin: 0 12rpx;
        width: 200rpx;
        height: 80rpx;
        color: #007aff;
        font-size: 30rpx;
        text-align: center;
        line-height: 80rpx;
        background: #f5f5f5;
        border-radius: 40rpx 40rpx 40rpx 40rpx;

        &.close {
          color: #fff;
          width: 560rpx;
          height: 80rpx;
          background: #007aff;
          border-radius: 40rpx 40rpx 40rpx 40rpx;
        }
      }
    }
  }
}

.open__modal {
  .open__content {
    width: 640rpx;
    background: #ffffff;

    .body {
      .content {
        padding: 30rpx 40rpx 28rpx;
        line-height: 40rpx;
        font-size: 28rpx;
        color: #666;

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

        .center {
          text-align: center;
        }
      }
    }

    .footer {
      height: 140rpx;
      border-top: 1px solid #eeeeee;
      display: flex;
      align-items: center;
      justify-content: center;

      .btn {
        margin: 0 12rpx;
        width: 200rpx;
        height: 80rpx;
        color: #007aff;
        font-size: 30rpx;
        text-align: center;
        line-height: 80rpx;
        background: #f5f5f5;
        border-radius: 40rpx 40rpx 40rpx 40rpx;

        &.close {
          color: #fff;
          width: 560rpx;
          height: 80rpx;
          background: #007aff;
          border-radius: 40rpx 40rpx 40rpx 40rpx;
        }
      }
    }
  }
}

.appoint__modal {
  position: fixed;
  left: 0;
  top: 0;
  z-index: 9999;
  width: 100%;
  height: 100%;
  background: rgba(0, 0, 0, 0.3);
  .img {
    width: 280rpx;
    position: absolute;
    left: 50%;
    margin-left: -140rpx;
    top: -70rpx;
  }
  .appoint__content {
    border-radius: 20rpx;
    position: absolute;
    left: 50%;
    top: 50%;
    transform: translate3D(-50%, -50%, 0);
    width: 640rpx;
    height: 867rpx;
    background: #ffffff;

    .body {
      position: relative;

      .content {
        padding: 160rpx 40rpx 28rpx;
        line-height: 60rpx;
        font-size: 28rpx;
        color: #666;

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

        .center {
          text-align: center;
        }

        .text {
          color: #666;
          font-size: 28rpx;
        }
      }
    }

    .footer {
      height: 140rpx;
      border-top: 1px solid #eeeeee;
      display: flex;
      align-items: center;
      justify-content: center;

      .btn {
        margin: 0 12rpx;
        width: 200rpx;
        height: 80rpx;
        color: #007aff;
        font-size: 30rpx;
        text-align: center;
        line-height: 80rpx;
        background: #f5f5f5;
        border-radius: 40rpx 40rpx 40rpx 40rpx;

        &.close {
          color: #fff;
          width: 560rpx;
          height: 80rpx;
          background: #007aff;
          border-radius: 40rpx 40rpx 40rpx 40rpx;
        }
      }
    }
  }
}
.activesty {
  background: #007aff !important;
  color: #fff !important;
}
</style>