zc_saas_h5/pages2/appointment/order.vue

<template>
  <view class="safeArea">
    <nav-bar title="预约考试"></nav-bar>
    <view class="appointment">
      <view class="appointmentItem">
        <view class="title">考试地点：</view>
        <view class="place" @click="showAddress">
          <view class="name">{{ addressName }}</view>
          <view
            ><u-icon name="arrow-right" color="#999999" size="28"></u-icon
          ></view>
        </view>
      </view>
      <view class="appointmentItem" v-if="activeList.length">
        <view class="title">考试时间：</view>
        <view class="main">
          <view
            v-for="(item, index) in activeList"
            class="item"
            :key="index"
            @click="choItem(index)"
          >
            <view class="checkbox"
              ><u-checkbox
                v-if="item.status === 0"
                v-model="item.checked"
                shape="circle"
              ></u-checkbox
            ></view>
            <view class="box">
              <view
                :class="[
                  'time',
                  { active: item.checked },
                  { no: item.status !== 0 },
                ]"
                >{{
                  item.dataTime + " " + item.startTime + " ~ " + item.endTime
                }}</view
              >
              <view class="statusInfo" v-if="item.status !== 0">
                <template v-if="item.status === 2"> 预约名额已满 </template>
                <template v-if="item.status === 1">
                  此时段您已经有其他考试预约
                </template>
              </view>
            </view>
            <view class="num"
              >已报：{{ item.registration }}/{{ item.num }}</view
            >
          </view>
        </view>
      </view>
      <view v-else class="appointmentItem">
        <view class="title">
          <text v-if="addressName && addressName != '请选择'">
            该考试地点暂无考试时间，建议重新选择考试地点
          </text>
          <!-- <text v-else>
						当前考培地点无考前培训时间点
					</text> -->
        </view>
      </view>
      <view class="btnMain">
        <view class="return" @click="backPage">上一步</view>
        <view class="sure" @click="sureOppoint">{{
          dataId === 1 ? "下一步" : dataId === 2 ? "确定预约" : "异常"
        }}</view>
      </view>
    </view>
    <!-- 弹框-->
    <u-popup v-model="address_show" mode="bottom" class="addModel">
      <view class="tipBox safeArea">
        <view class="line"></view>
        <view class="title">温馨提示</view>
        <u-line color="#EEEEEE" />
        <scroll-view class="addressList" :scroll-y="true">
          <view
            class="item"
            v-for="(item, index) in listData"
            :key="index"
            @click="choAddress(index)"
          >
            <u-checkbox
              class="checkbox"
              v-model="item.checked"
              shape="circle"
            ></u-checkbox>
            <view :class="['address', { active: item.checked }]">{{
              item.siteAddress
            }}</view>
          </view>
        </scroll-view>
        <u-line color="#EEEEEE" />
        <view class="btn" @click="sureAddress">确认</view>
      </view>
    </u-popup>
  </view>
</template>

<script>
import { mapGetters } from "vuex";
export default {
  data() {
    return {
      orderGoodsId: 0,
      address_show: false,
      addressName: "请选择",
      addressId: null, //当前选中考试点ID
      listData: [], //考试地点数据
      activeList: [], //选中考试地点列表
      applyId: null, //考试计划ID
      goodsId: null, //商品ID
      applyStatus: null, //学员状态ID
      sysTime: 0,
      dataId: null, //跳转拷贝
    };
  },
  async onLoad(option) {
    this.applyId = Number(option.applyId);
    this.goodsId = Number(option.goodsId);
    this.applyStatus = Number(option.applyStatus);
    this.dataId = Number(option.dataId);
    this.orderGoodsId = Number(option.orderGoodsId);
    await this.commonSystemTime();
    this.getInfo();
  },
  methods: {
    commonSystemTime() {
      return new Promise((resolve) => {
        this.$api.commonSystemTime().then((res) => {
          this.sysTime = res.data.data;

          resolve();
        });
      });
    },
    //获取考试地点
    getInfo() {
      this.$api
        .getApplysubscribeApplySite({ applyId: this.applyId })
        .then((res) => {
          if (res.data.code === 200) {
            res.data.data.forEach((item, index) => {
              item.checked = false;
            });
            this.listData = res.data.data;
          }
        });
    },
    showAddress() {
      this.address_show = true;
    },
    choAddress(index) {
      this.listData.forEach((item, idx) => {
        this.$set(item, "checked", false);
        if (idx === index) {
          this.$set(item, "checked", true);
        }
      });
    },
    sureAddress() {
      var self = this;
      const index = this.listData.findIndex((item) => item.checked);
      if (index === -1) {
        uni.showToast({
          title: "请选择考试地点",
          icon: "none",
        });
        return;
      }
      if (this.addressId === this.listData[index].id) {
        this.address_show = false;
        return;
      }
      this.addressName = this.listData[index].siteAddress;
      this.addressId = this.listData[index].id;
      var arrays = [];
      this.listData[index].examUserApplySiteTime.forEach((item) => {
        item.examApplySiteTimeTwoVo.forEach((items) => {
          arrays.push({
            examTime: item.examTime,
            startTimeC: items.startTime,
            endTimeC: items.endTime,
            dataTime: self.$method
              .timestampToTime(item.examTime)
              .replace(/-/g, "/"),
            startTime: items.startTime,
            endTime: items.endTime,
            num: items.num,
            registration: items.registration,
            checked: false,
            status:
              items.status === 1
                ? items.status
                : items.registration >= items.num
                ? 2
                : items.status,
          });
        });
      });
      this.activeList = arrays.filter((item, index) => {
        console.log(item);
        // const newTime = parseInt(new Date().getTime() / 1000)
        console.log(
          item.dataTime.replace(/-/g, "/") + "" + item.startTime + ":00"
        );
        const liTime = parseInt(
          new Date(
            item.dataTime.replace(/-/g, "/") + "" + item.startTime + ":00"
          ).getTime() / 1000
        );
        console.log(liTime, "liTime");
        console.log(this.sysTime, "newTime");
        if (liTime > this.sysTime) {
          return item;
        }
      });

      console.log(this.activeList);
      this.address_show = false;
    },
    choItem(index) {
      const item = this.activeList[index];
      if (item.status !== 0) {
        return;
      }
      this.activeList.forEach((item, idx) => {
        item.checked = false;
        if (idx === index) {
          item.checked = true;
        }
      });
    },
    sureOppoint() {
      var self = this;
      if (self.addressId) {
        var ast = self.activeList.some((item) => {
          return item.checked === true;
        });
        if (ast) {
          var copyData = JSON.parse(JSON.stringify(self.activeList));
          const index = copyData.findIndex((item) => item.checked);
          var data = {
            applyId: self.applyId,
            goodsId: self.goodsId,
            studentType: self.applyStatus,
            applySiteAddress: self.addressName,
            applySiteExamTime: copyData[index].examTime,
            applySiteStartTime: copyData[index].startTimeC,
            applySiteEndTime: copyData[index].endTimeC,
            orderGoodsId: self.orderGoodsId,
          };
          if (self.dataId === 1) {
            self.$store.commit("updateApplyData", data);
            self.$navTo.togo("/pages2/appointment/kporder", {
              applyId: self.applyId,
              applyStatus: self.applyStatus,
              goodsId: self.goodsId,
              orderGoodsId: self.orderGoodsId,
            });
          }
          if (self.dataId === 2) {
            self.$api.addApply(data).then((res) => {
              if (res.data.code === 200) {
                uni.reLaunch({
                  url: `/pages2/appointment/appointment_success?subscribeId=${res.data.data}`,
                });
              } else {
                uni.showToast({
                  icon: "none",
                  title: res.data.msg,
                });
              }
            });
          }
        } else {
          uni.showToast({
            title: "请选择考试时间",
            icon: "none",
          });
        }
      } else {
        uni.showToast({
          title: "请选择考试地点",
          icon: "none",
        });
      }
    },
    backPage() {
      uni.navigateBack({
        delta: 1,
      });
    },
  },
};
</script>
<style>
page {
  background-color: #eaeef1;
}
.addModel .u-drawer-bottom {
  box-shadow: 0px 0px 16px 4px rgba(145, 156, 178, 0.1);
  border-radius: 32rpx 32rpx 0px 0px;
}
</style>
<style scoped lang="scss">
.appointment {
  padding: 0 8rpx;
  .appointmentItem {
    margin: 24rpx 0 40rpx;
    .title {
      font-size: 30rpx;
      font-family: PingFang SC;
      font-weight: 500;
      color: #333333;
      line-height: 1;
      margin-bottom: 16rpx;
      padding-left: 24rpx;
    }
    .place {
      height: 80rpx;
      background: #ffffff;
      border-radius: 16rpx;
      display: flex;
      justify-content: space-between;
      align-items: center;
      padding: 0 24rpx;
    }
  }
  .main {
    background: #ffffff;
    border-radius: 16rpx;
    padding: 32rpx 16rpx;
    .item {
      display: flex;
      align-items: center;
      margin-bottom: 16rpx;
      font-size: 28rpx;
      font-family: PingFang SC;
      font-weight: 500;
      color: #333333;
      .statusInfo {
        font-size: 24rpx;
        font-family: PingFang SC;
        font-weight: 500;
        color: #ff3b30;
        padding-left: 24rpx;
      }
      .checkbox {
        width: 32rpx;
        height: 32rpx;
        display: flex;
        align-items: center;
      }
      .time {
        width: 430rpx;
        height: 80rpx;
        line-height: 80rpx;
        background: #f5f5f5;
        border: 2rpx solid #f5f5f5;
        border-radius: 16rpx;
        font-size: 30rpx;
        font-family: PingFang SC;
        font-weight: bold;
        text-align: center;
        color: #333333;
        margin: 0 18rpx 0 8rpx;
        &.active {
          background: #ebf5ff;
          border: 2rpx solid #007aff;
        }
        &.no {
          background: #ffdddb;
          border: 2rpx solid #ffdddb;
        }
      }
    }
  }
  .btnMain {
    display: flex;
    justify-content: center;
    text-align: center;
    .return {
      width: 200rpx;
      height: 80rpx;
      line-height: 80rpx;
      background: #f5f5f5;
      border-radius: 40rpx;
      font-size: 30rpx;
      font-family: PingFang SC;
      font-weight: bold;
      color: #007aff;
    }
    .sure {
      width: 438rpx;
      height: 80rpx;
      line-height: 80rpx;
      background: #007aff;
      border-radius: 40rpx;
      font-size: 30rpx;
      font-family: PingFang SC;
      font-weight: bold;
      color: #ffffff;
      margin-left: 24rpx;
    }
  }
}
.tipBox {
  width: 100%;
  font-family: PingFang SC;
  .line {
    width: 80rpx;
    height: 8rpx;
    background: #999999;
    border-radius: 4rpx;
    margin: 8rpx auto;
  }
  .title {
    text-align: center;
    font-size: 24rpx;
    font-family: PingFang SC;
    font-weight: 500;
    color: #999999;
    margin: 15rpx 0;
  }
  .main {
    font-size: 30rpx;
    font-weight: 500;
    color: #666666;
    line-height: 48rpx;
    margin-bottom: 40rpx;
  }
  .addressList {
    height: 500rpx;
    padding-top: 24rpx;
    .item {
      display: flex;
      align-items: center;
      padding: 0 24rpx;
      margin-bottom: 24rpx;
      .checkbox {
        width: 32rpx;
        height: 32rpx;
        display: flex;
        align-items: center;
        margin-right: 8rpx;
      }
      .address {
        width: 654rpx;
        height: 80rpx;
        line-height: 80rpx;
        background: #f5f5f5;
        border-radius: 16rpx;
        font-size: 30rpx;
        font-family: PingFang SC;
        font-weight: bold;
        color: #333333;
        padding: 0 24rpx;
        &.active {
          background: #ebf5ff;
          border: 2rpx solid #007aff;
        }
      }
    }
  }
  .btn {
    width: 200rpx;
    height: 64rpx;
    line-height: 64rpx;
    background: linear-gradient(0deg, #015eea, #00c0fa);
    border-radius: 32rpx;
    margin: 17rpx auto;
    font-size: 30rpx;
    font-family: PingFang SC;
    font-weight: 500;
    text-align: center;
    color: #ffffff;
  }
}
</style>