<template>
  <!-- 登录页 -->
  <div class="login">
    <!-- 头部 -->
    <div class="headerBlack">
      <!-- 盒子 -->
      <div class="boxContent">
        <!-- 图标 -->
        <van-icon class="iconImg" name="label-o" size="40" color="#FFFFFF" />
        <!-- 字体 -->
        <p>输入短信验证码 查询盲盒订单</p>
      </div>
    </div>
    <!-- 填写手机号 -->
    <div class="fillInPhone">
      <!-- 手机号 -->
      <div class="phone">
        <!-- 提示 -->
        <div class="phoneTips">
          <van-icon class="" name="phone" size="25" />
          <p>手机号</p>
        </div>
        <!-- 手机号输入框 -->
        <input
          type="type"
          v-model="phone"
          placeholder="请输入您的购买手机号"
          class="phoneInput"
        />
      </div>
      <!-- 验证码 -->
      <div class="code">
        <!-- 提示 -->
        <div class="codeTips">
          <van-icon name="lock" size="25" />
          <p>验证码</p>
        </div>
        <!-- 验证码输入框 -->
        <input
          type="type"
          v-model="code"
          placeholder="请输入短信验证码"
          class="codeInput"
        />
        <!-- 获取验证码 -->
        <div class="codebtn" v-if="codeShow" @click="startFn">获取验证码</div>
        <van-count-down
          ref="countDown"
          millisecond
          :time="3000"
          :auto-start="false"
          format="ss:SSS"
          v-if="!codeShow"
          @finish="finish"
        />
      </div>
      <!-- 查询按钮 -->
      <div class="seeBtn" @click="navOrder">查询订单</div>
    </div>
  </div>
</template>

<script>
export default {
  name: "Login",
  data() {
    return {
      // 手机号
      phone: "",
      //验证码
      code: "",
      //验证码显示
      codeShow: true,
    };
  },
  methods: {
    //隐藏发送验证码，开始倒计时
    startFn() {
      this.codeShow = !this.codeShow;
      setTimeout(() => {
        this.$refs.countDown.start();
      }, 0);
    },
    finish(){
       this.codeShow = !this.codeShow;
    },
    //跳转订单页
    navOrder() {
      this.$router.push({
        name: "Order",
      });
    },
  },
};
</script>

<style lang="scss" scoped>
// 适配函数计算
@function vw($px) {
  @return 100 * $px/720 + vw;
}
* {
  margin: 0;
  padding: 0;
}
// 登录
.login {
  width: vw(720);
  display: flex;
  flex-direction: column;
  align-items: center;
  //   头部
  .headerBlack {
    width: vw(720);
    height: vw(180);
    display: flex;
    align-items: center;
    justify-content: center;
    background: url("../image/black.png") 0 0 /100% no-repeat;
    // 盒子
    .boxContent {
      width: vw(670);
      height: vw(80);
      display: flex;
      align-items: center;
      justify-content: flex-start;
      // 图标
      .iconImg {
        width: vw(80);
        height: vw(80);
        margin: 0 vw(20);
      }
      p {
        color: white;
        font-size: vw(36);
      }
    }
  }
  // 填写手机号
  .fillInPhone {
    width: vw(686);
    display: flex;
    flex-direction: column;
    align-items: center;
    // 手机号
    .phone {
      width: vw(686);
      height: vw(150);
      display: flex;
      align-items: center;
      border-bottom: 1px solid rgb(220, 220, 220);
      // 提示
      .phoneTips {
        width: vw(160);
        display: flex;
        align-items: center;
        justify-content: space-between;
        margin: 0 vw(30);
      }
      // 手机号输入框
      .phoneInput {
        width: vw(350);
        height: vw(100);
        outline: none;
        border: none;
        font-size: vw(33);
      }
    }

    //验证码
    .code {
      width: vw(686);
      height: vw(150);
      display: flex;
      align-items: center;
      border-bottom: 1px solid rgb(220, 220, 220);
      //提示
      .codeTips {
        width: vw(160);
        display: flex;
        align-items: center;
        justify-content: space-between;
        margin: 0 vw(30);
      }
      // 验证码输入框
      // 输入框
      .codeInput {
        width: vw(270);
        height: vw(100);
        outline: none;
        border: none;
        font-size: vw(33);
        margin-right: vw(15);
      }
      //获取验证码
      .codebtn {
        width: vw(160);
        height: vw(60);
        font-size: vw(24);
        border: vw(1) solid black;
        border-radius: vw(30);
        text-align: center;
        line-height: vw(60);
      }
    }

    //查询按钮
    .seeBtn {
      width: vw(660);
      height: vw(106);
      margin-top: vw(60);
      text-align: center;
      color: white;
      line-height: vw(95);
      font-weight: 600;
      font-size: vw(40);
      background: url("../image/onceMore.png") 0 0 /100% 95% no-repeat;
    }
  }
}
</style>