wctdreamlandwebsite-front/components/order.vue

<template>
  <OutMask :bg="bg">
    <div v-if="!orderSuccess" class="orderContent" :class="bg ? 'mobile' : ''">
      <div class="title" :class="bg ? '' : 'color'">请选择预约方式</div>
      <div class="typeList">
        <div
          v-for="item in typeList"
          :key="item.id"
          class="type_item"
          :class="`${activeType === item.id ? 'activeType' : ''} ${
            bg ? '' : 'color'
          }`"
          @click="checkType(item.id)"
        >
          {{ item.txt }}
        </div>
      </div>
      <div class="formData">
        <div class="formItem">
          <span v-if="!bg" class="label color">手机号码</span>
          <div class="tipsBox">
            <input
              v-model="tel_number"
              type="text"
              class="tel"
              placeholder="输入手机号码"
              @blur="telBlur"
              @focus="telFocus"
            />
            <div v-if="telError" class="error">{{ telErrorTip }}</div>
          </div>
        </div>
        <div class="formItem">
          <span v-if="!bg" class="label codeLabel color">验证码</span>
          <div class="tipsBox">
            <input
              v-model="code"
              type="text"
              class="code"
              placeholder="输入验证码"
              @focus="codeFocus"
              @blur="codeBlur"
            />
            <div v-if="codeError" class="error">{{ codeTips }}</div>
          </div>
          <span
            class="codeText"
            :class="`${send ? 'send' : ''} ${bg ? '' : 'color'}`"
            @click="sendCode"
            >{{ codeText }}</span
          >
        </div>
      </div>
      <div class="orderBtn" @click="orderFn"></div>
      <div
        :class="bg ? 'm_close_btn' : 'close_btn'"
        @click="closeOrder()"
      ></div>
    </div>
    <div v-else class="success">
      <div class="successTitle color">恭喜您预约成功！</div>
      <div v-if="!bg" class="successTxt color">
        关注官方微博 @欢迎来到梦乐园 ，获取更多资讯。
      </div>
      <div v-else class="successTxt">
        <p class="color">关注官方微博 @欢迎来到梦乐园 ，</p>
        <p class="color">获取更多资讯。</p>
      </div>
      <div
        :class="bg ? 'm_close_btn' : 'close_btn'"
        @click="closeOrder()"
      ></div>
    </div>
  </OutMask>
</template>

<script>
import { appointment, getCode } from "../api/data.js";
// import { getCode } from "../api/data.js";

export default {
  components: {
    OutMask: () => import("./outMask.vue"),
  },
  props: {
    bg: {
      type: String,
      default: "",
    },
  },
  data() {
    return {
      activeType: 1,
      typeList: [
        {
          id: 1,
          txt: "IOS",
        },
        {
          id: 2,
          txt: "安卓",
        },
      ],
      tel_number: "",
      code: "",
      telError: false,
      telErrorTip: "请输入正确的手机号",
      codeText: "获取验证码",
      codeTips: "验证码错误",
      codeError: false,
      send: false,
      second: 20,
      orderSuccess: false,
      codeBtnType: 0,
      timerLife: 0,
      blur: false,
      ip: "",
    };
    // 60s后重新发送
  },
  watch: {
    codeBtnType() {
      if (this.codeBtnType === 1) {
        const lstTime = localStorage.getItem("CodeRequestTime")
          ? parseInt(localStorage.getItem("CodeRequestTime"))
          : 0;
        const curTime = Date.parse(new Date()) / 1000;
        if (curTime - lstTime < 60 && curTime !== lstTime)
          this.timerLife = 60 - curTime + lstTime;
        else this.timerLife = 60;
        this.codeTip = this.timerLife + "s后可重新发送";
        window.setTimeout(this.codeTick, 1000);
      }
    },
  },
  mounted() {
    this.ip = this.$store.state.storageData.headers["x-real-ip"];
  },
  methods: {
    checkType(id) {
      this.activeType = id;
    },
    telBlur() {
      document.body.scrollTop = 0;
      const regTel = /^(13[0-9]|14[01456879]|15[0-35-9]|16[2567]|17[0-8]|18[0-9]|19[0-35-9])\d{8}$/; // 11位手机号码正则
      if (this.tel_number === "" || !regTel.test(this.tel_number)) {
        this.telError = true;
        // alert("没有手机号");
        if (this.bg) {
          setTimeout(() => {
            this.telError = false;
          }, 2000);
        }
        return false;
      } else {
        this.telError = false;
        return true;
      }
    },
    telFocus() {
      this.telError = false;
      this.blur = false;
    },
    codeFocus() {
      this.blur = false;

      // alert('可恶的验证码')
    },
    codeBlur() {
      this.blur = true;
    },
    // 获取验证码
    sendCode() {
      if (this.codeBtnType === 1) return;

      if (!this.telBlur()) {
        return;
      }
      const source = this.$route.query.source;

      getCode({
        mobile: this.tel_number,
        source,
        ip: this.ip,
      })
        .then((response) => {
          if (response.code === 200) {
            this.dueCodeSuccessSend();
          }else if(response.code === 10000){
            this.telError = true;
            this.telErrorTip = response.msg;
            if (this.bg) {
              setTimeout(() => {
                this.telError = false;
              }, 3000);
            }
          }
        })
        .catch((err) => {
          if (!err.data.data || !err.data.data.msg) return;
          this.telError = true;
          this.telErrorTip = err.data.msg;
          if (this.bg) {
            setTimeout(() => {
              this.telError = false;
            }, 3000);
          }
        });
      // this.send = true;
      // this.codeText = this.second + "s后重新发送";
      // setTimeout(() => {
      //   this.sendTxt();
      // }, 1000);
    },
    codeTick() {
      this.timerLife -= 1;
      const intelVal = this.timerLife;
      if (intelVal === 0) {
        this.codeBtnType = 0;
        this.codeText = "获取验证码";
      } else {
        this.codeText = intelVal + "s后可重新发送";
        window.setTimeout(this.codeTick, 1000);
      }
    },
    dueCodeSuccessSend() {
      localStorage.setItem(
        "CodeRequestTime",
        (Date.parse(new Date()) / 1000).toString()
      );
      this.codeBtnType = 1;
    },
    // 提交预约
    orderFn() {
      if (!this.telBlur()) return;
      // alert("没有手机号2");
      // if (this.mobileType === "") {
      //   this.showMtips = true;
      //   this.mobileTypeTips = "请选择手机类型";
      //   return;
      // }
      if (this.code === "") {
        this.codeError = true;
        if (this.bg) {
          setTimeout(() => {
            this.codeError = false;
          }, 3000);
        }
        // this.codeTips = "验证码不正确";
        return;
      }

      // this.showMtips = false;
      this.telError = false;
      this.codeError = false;

      // this.orderSuccess = true;
      // console.log(appointment);
      const source = this.$route.query.source;

      appointment({
        mobile: this.tel_number,
        phone_type: this.activeType,
        code: this.code,
        source,
        ip: this.ip,
      })
        .then((res) => {
          // this.orderSuccess = true;
          if (res.code === 200) {
            this.orderSuccess = true;
          }else if (res.code === 1002) {
            this.codeError = true;
            this.codeTips = res.msg;
            if (this.bg) {
              setTimeout(() => {
                this.codeError = false;
              }, 3000);
            }
          } else if (res.code === 1001 || res.code === 10000) {
            this.telError = true;
            this.telErrorTip = res.msg;
            if (this.bg) {
              setTimeout(() => {
                this.telError = false;
              }, 3000);
            }
          }
        })
        .catch((err) => {
            this.codeError = true;
            this.codeTips = err.data.msg;
            if (this.bg) {
              setTimeout(() => {
                this.codeError = false;
              }, 3000);
            }
        });
    },
    // sendTxt() {
    //   if (this.second === 0) {
    //     this.codeText = "获取验证码";
    //     this.send = false;
    //     return;
    //   }
    //   this.second--;
    //   this.codeText = this.second + "s后重新发送";
    //   setTimeout(() => {
    //     this.sendTxt();
    //   }, 1000);
    // },
    closeOrder() {
      this.$emit("closeOrder");
    },
  },
};
</script>

<style lang="scss">
@import "../assets/scss/order.scss";
</style>