zc_saas_h5/pages2/appointment/index.vue

<template>
  <view class="safeArea">
    <nav-bar title="预约考试"></nav-bar>
    <view class="appointment">
      <view class="appointmentItem appointmentHead">
        <view class="imgBox"
          ><image
            :src="$method.splitImgHost(listData.applyUrl)"
            mode="widthFix"
          ></image
        ></view>
        <u-line color="#EEEEEE" />
        <view class="title">{{ listData.applyName }}</view>
      </view>
      <view class="appointmentItem appointmentTime">
        <view class="item">
          <view class="labelName">报名时间：</view>
          <view class="valName"
            >{{ $method.timestampToTime(listData.applyStartTime) }} ~
            {{ $method.timestampToTime(listData.applyEndTime) }}</view
          >
        </view>
        <u-line color="#EEEEEE" />
        <view class="item">
          <view class="labelName">温馨提示：</view>
          <text class="valName">{{ listData.applyIntroduce || "" }}</text>
        </view>
      </view>
      <view class="appointmentItem appointmentMajor">
        <view class="top">
          <view class="labelName">报考专业：</view>
          <view class="valName">{{ listData.major || "" }}</view>
        </view>
      </view>
      <view class="appointmentItem appointmentInfo">
        <view class="item">
          <text class="labelName">
            姓
            <text style="opacity: 0">姓</text>
            名：
          </text>
          {{ listData.realname }}
        </view>
        <u-line color="#EEEEEE" />
        <view class="item">
          <text class="labelName">身份证：</text>
          {{ listData.idCard }}
        </view>
      </view>
      <view class="appointmentItem appointmentType">
        <view class="item">
          <view class="labelName">学员类型：</view>
          <u-radio-group placement="column" v-model="radioInfo">
            <u-radio
              :customStyle="{ marginBottom: '8px' }"
              v-for="(item, index) in radiolist"
              :key="index"
              :name="item.name"
              v-if="listData.applyStatus.indexOf(item.name) !== -1"
            >
              {{ item.label }}
            </u-radio>
          </u-radio-group>
        </view>
      </view>
      <view class="btn" @click="next">下一步</view>
    </view>
    <!-- 弹框-->
    <u-popup v-model="showTip" mode="center" class="tipModel">
      <view class="tipBox">
        <view class="title">温馨提示</view>
        <view class="main">
          <view class="item">您所报考的{{ listData.major || "" }}专业，</view>
          <view class="item">考试次数已经用完。</view>
          <view class="item">需要预约考试的补考学员，</view>
          <view class="item">请先购买补考机会。</view>
        </view>
        <view class="btn">
          <view class="btn1 cancel" @click="showTip = false">知道了</view>
          <view class="btn1 submit" @click="submit">马上缴费</view>
        </view>
      </view>
    </u-popup>
  </view>
</template>

<script>
import { mapGetters } from "vuex";
export default {
  data() {
    return {
      showTip: false,
      radiolist: [
        { name: "1", label: "非补考学员" },
        { name: "2", label: "补考学员" },
      ],
      goodsId: 0,
      gradeId: 0,
      orderGoodsId: "",
      applyStatus: "",
      applyId: 0,
      listData: {
        applyStatus: [],
      }, //页面数据
      radioInfo: "",
      goodsIdBK: null, //补考商品ID
      reportStatus: 0, // 是否线上签署疫情防控承诺书， 1是，0否
    };
  },
  onLoad(option) {
    this.applyId = option.applyId || '';
    this.goodsId = Number(option.goodsId);
    this.gradeId = Number(option.gradeId);
    this.orderGoodsId = Number(option.orderGoodsId) || "";
    
  },
  onShow() {
    if (this.$method.isGoLogin()) { // 从公众号消息进来的没登录需要跳到登录页，登录后返回
			return;
		}
    if (this.applyId) {
      this.getInfo();
    } else {
      this.getAppoint()
    }
  },
  methods: {
    getAppoint() {
      this.$http({
        url: '/user/subscribe/listSubscribe',
        methods: 'get',
        data: {
          orderGoodsId: this.orderGoodsId,
          goodsId: this.goodsId,
        }
      }).then((res) => {
        console.log('----listSubscribe-', res)
        if (res.data.code == 200) {
          this.applyId = res.data.data.applyId
          this.getInfo()
        }
      })
    },
    getInfo() {
      var data = {
        goodsId: this.goodsId,
        gradeId: this.gradeId,
        orderGoodsId: this.orderGoodsId,
        applyId: this.applyId,
      };
      // /apply/subscribe
      this.$api.getApplysubscribe(data).then((res) => {
        if (res.data.data.applyStatus) {
          res.data.data.applyStatus = res.data.data.applyStatus.split(",");
        }
        this.listData = res.data.data;
        this.reportStatus = res.data.data.reportStatus
        console.log('reportStatus', this.reportStatus)
      });
    },
    next() {
      if (!this.radioInfo) {
        uni.showToast({
          title: "请选择您的考试身份",
          icon: "none",
        });
        return;
      }
      let data = {
        applyId: this.listData.applyId,
        applyStatus: this.radioInfo,
        goodsId: this.goodsId,
        applyId: this.applyId,
        gradeId: this.gradeId,
        orderGoodsId: this.orderGoodsId,
      };
      this.$api.getApplysubscribeNext(data).then((res) => {
        if (res.data.code === 500) {
          uni.showModal({
            content: res.data.msg,
            showCancel: false,
          });
        } else {
          if (res.data.data === 1 || res.data.data === 2) {
            this.$navTo.togo("/pages2/appointment/order", {
              applyId: this.listData.applyId,
              applyStatus: this.radioInfo,
              goodsId: this.goodsId,
              dataId: res.data.data,
              applyId: this.applyId,
              orderGoodsId: this.orderGoodsId,
              reportStatus: this.reportStatus,
            });
          }
          if (res.data.data === 3) {
            this.$api
              .goodsList({
                makeGoodsId: this.goodsId,
                goodsType: 3,
                orderGoodsId: this.orderGoodsId,
              })
              .then((res) => {
                if (res.data.code === 200) {
                  if (res.data.rows.length) {
                    console.log(res.data.rows[0].goodsId);
                    this.goodsIdBK = res.data.rows[0].goodsId;
                  }
                }
              });
            this.showTip = true;
          }
        }
      });
    },
    submit() {
      if (!this.goodsIdBK) {
        uni.showModal({
          showCancel: false,
          content: "请联系管理员配置补考商品",
        });
      } else {
        this.showTip = false;
        this.$store.commit("updateBackApplyData", {
          goodsId: this.goodsId,
          orderGoodsId: this.orderGoodsId,
          gradeId: this.gradeId,
          applyId: this.applyId,
        });
        this.$navTo.togo("/pages2/order/confirm_list", {
          id: this.goodsIdBK,
          isBK: "1",
          orderGoodsId: this.orderGoodsId,
        });
      }
    },
  },
};
</script>
<style>
page {
  background-color: #eaeef1;
}
.appointmentType .u-radio__label {
  margin-left: 16rpx !important;
  margin-right: 116rpx !important;
}
.tipModel .u-mode-center-box {
  background-color: transparent !important;
}
</style>
<style scoped lang="scss">
.appointment {
  padding: 16rpx;
  .appointmentItem {
    background: #ffffff;
    border-radius: 16rpx;
    margin-bottom: 16rpx;
    .item {
      padding: 24rpx 0;
    }
    .labelName {
      font-size: 28rpx;
      font-family: PingFang SC;
      font-weight: 500;
      color: #999999;
      margin-bottom: 16rpx;
      line-height: 1;
    }
    .valName {
      font-size: 30rpx;
      font-family: PingFang SC;
      font-weight: 500;
      color: #333333;
    }
  }
  .appointmentHead {
    padding: 16rpx;
    .imgBox {
      overflow: hidden;

      image {
        border-radius: 24rpx;
        display: block;
        width: 100%;
      }
    }
    .title {
      padding: 24rpx 28rpx 31rpx 31rpx;
      font-size: 30rpx;
      font-weight: bold;
      font-family: PingFang SC;
      color: #333333;
    }
  }
  .appointmentTime {
    padding: 10rpx 30rpx 0;
  }
  .appointmentMajor {
    padding: 34rpx 30rpx 24rpx;
  }
  .appointmentInfo {
    padding: 8rpx 30rpx;
  }
  .appointmentType {
    padding: 8rpx 30rpx 4rpx;
    .u-radio__label {
      margin-left: 16rpx;
      margin-right: 116rpx;
    }
  }
  .btn {
    width: 526rpx;
    height: 80rpx;
    line-height: 80rpx;
    background: #007aff;
    border-radius: 40rpx;
    font-size: 30rpx;
    font-family: PingFang SC;
    font-weight: bold;
    color: #ffffff;
    margin: 40rpx auto;
    text-align: center;
  }
}
.tipBox {
  width: 640rpx;
  padding: 30rpx 36rpx 40rpx;
  background: #ffffff;
  border-radius: 24rpx;
  font-family: PingFang SC;
  .title {
    text-align: center;
    font-size: 30rpx;
    font-weight: bold;
    color: #333333;
    margin-bottom: 40rpx;
  }
  .main {
    font-size: 30rpx;
    font-weight: 500;
    color: #666666;
    line-height: 48rpx;
    margin-bottom: 40rpx;
  }
  .btn {
    display: flex;
    justify-content: center;
    .btn1 {
      width: 200rpx;
      height: 80rpx;
      line-height: 80rpx;
      text-align: center;
      background: #f5f5f5;
      border-radius: 40px;
      font-size: 30rpx;
      font-weight: bold;
      color: #007aff;
      margin: 0 20rpx;
      &.submit {
        background: #007aff;
        color: #fff;
      }
    }
  }
}
</style>