wctdreamlandwebsite-front/components/land.vue

<template>
  <OutMask :bg="bg">
    <!-- 未登录 -->
    <div
      v-if="!landSuccess"
      class="landContent"
      :class="bg ? 'mobileLand' : ''"
    >
      <div class="title" :class="bg ? '' : 'color'">
        <span>星线网络</span>
      </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>
      <p class="tipsText org">本页面将于9月1日 15:00关闭</p>

      <div :class="bg ? 'm_close_btn' : 'close_btn'" @click="closeLand()"></div>
    </div>
    <!-- 登陆成功 -->
    <div v-else class="landSuccess">
      <div class="title" :class="bg ? '' : 'color'">星线网络</div>
      <!-- 有中奖信息 -->
      <div v-if="getSuccess" class="getSuccess">
        <a download :href="downloadUrl" class="orderBtn"></a>
        <div class="tipsBox">
          <p class="tipsText">
            为了便于您的测试，请尽量加入官方Q群：
          </p>
          <p class="tipsText dan">
            719204884
          </p>
          <p class="tipsText org">本页面将于9月1日 15:00关闭</p>
        </div>
      </div>
      <!-- 没有中奖信息 -->
      <div v-else class="failBox">
        <p class="getFailed">未查询到资格中奖信息。</p>
        <p class="tipsText org">
          如有疑问请联系Q群管理员，管理员QQ:1546365016
        </p>
      </div>
      <div :class="bg ? 'm_close_btn' : 'close_btn'" @click="closeLand()"></div>
    </div>
  </OutMask>
</template>

<script>
import { tapLogin, 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 {
      tel_number: "",
      code: "",
      telError: false,
      telErrorTip: "请输入正确的手机号",
      codeText: "获取验证码",
      codeTips: "验证码错误",
      codeError: false,
      send: false,
      second: 20,
      landSuccess: false,
      getSuccess: true,
      getLink: true,
      codeBtnType: 0,
      timerLife: 0,
      blur: false,
      ip: "",
      downloadUrl: "",
    };
    // 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"];
    const token = this.$cookies.get("token");
    this.downloadUrl = this.$cookies.get("download_url");
    console.log(this.downloadUrl);
    if (token) {
      this.landSuccess = true;
    }
    if (this.downloadUrl) {
      this.getLink = true;
    } else {
      this.getLink = false;
    }
  },
  methods: {
    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();
          }
        })
        .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;
      if (this.code === "") {
        this.codeError = true;
        if (this.bg) {
          setTimeout(() => {
            this.codeError = false;
          }, 3000);
        }
        return;
      }

      this.telError = false;
      this.codeError = false;
      // const source = this.$route.query.source;

      tapLogin({
        mobile: this.tel_number,
        code: this.code,
      })
        .then((res) => {
          const { code, msg, data } = res;
          if (code === 200) {
            // 有资格
            const millisecond = new Date().getTime();
            const expiresTime = new Date(millisecond + 60 * 1000 * 5);
            this.landSuccess = true;
            if (data.download_url) {
              // 能下载
              this.downloadUrl = data.download_url;
              this.getLink = true;
              this.getSuccess = true;
              this.$cookies.set("download_url", data.download_url, {
                path: "/",
                expires: expiresTime,
              });
            } else {
              // 不能下载
              this.getLink = false;
            }
            this.$cookies.set("token", this.tel_number, {
              path: "/",
              expires: expiresTime,
            });
          }
          if (code === 1002) {
            // 验证码错误
            this.codeError = true;
            this.codeTips = msg;
            if (this.bg) {
              setTimeout(() => {
                this.codeError = false;
              }, 3000);
            }
          } else if (code === 1003) {
            // 没有资格
            this.landSuccess = true;
            this.getSuccess = false;
          }
        })
        .catch((err) => {
          console.log(err);
          // if (!err.data.msg) return;
          // if (err.data.code === 1406) {
          //   console.log(1);
          // } else if (err.data.code === 1407) {
          //   this.landSuccess = false;
          //   this.getSuccess = false;
          //   if (this.bg) {
          //     setTimeout(() => {
          //       this.telError = false;
          //     }, 3000);
          //   }
          // }
        });
    },

    closeLand() {
      this.$emit("closeLand");
    },
  },
};
</script>

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