zhuishuyun_ios_wap_front/src/view/Login.vue

<template>
  <div>
    <x-header />
    <div class="Login">
      <div class="Login_message">
        <div class="Login_message_phone">绑定手机号</div>
        <div class="Login_message_notfiy">
          已绑定过的手机号将自动同步原有账号记录
        </div>
      </div>
      <div class="Login_form">
        <div class="Login_form_item">
          <input
            placeholder="请输入你的手机号"
            v-model="phone"
            type="number"
            class="login_form_input"
            oninput="if(value.length>11)value=value.slice(0,11);if(value<0)value=0"
          />
        </div>
        <div class="Login_form_item">
          <input
            v-model="code"
            type="number"
            placeholder="请输入你的验证码"
            class="login_form_input"
            oninput="if(value.length>6)value=value.slice(0,6);if(value<0)value=0"
          />
          <div
            class="getCode_phone_wrong"
            v-if="isPhoneCurrect == 0"
            @click="getCodePhoneWrong"
          >
            获取验证码
          </div>
          <div class="getCode" @click="getCode" v-if="isPhoneCurrect == 1">
            获取验证码
          </div>
          <div class="getCode_count_down" v-if="isPhoneCurrect == 3">
            {{ countTime }}秒后重发
          </div>
        </div>

        <div class="agree_item">
          <input type="radio" v-model="isAgree" @click="isAgreeChange" />
          我已阅读并同意<span @click="goToUserPage">用户协议</span>和<span
            @click="goToPrivatePage"
            >隐私政策</span
          >
        </div>
        <div class="login_btn" @click="goToLogin" v-if="isGoToLogin">
          点击绑定
        </div>
        <div class="login_btn_wrong" v-if="!isGoToLogin">点击绑定</div>
      </div>
    </div>
    <mt-popup v-model="popupVisible" popup-transition="popup-fade">
      <img src="../assets/login_success.png" alt="" />
      <div class="login_success">
        绑定成功
      </div>
      <div class="go_back_btn" @click="goBackRouter">返回</div>
    </mt-popup>
  </div>
</template>
<script>
import { Login } from "./namespace.js";
export default {
  name: Login.name,
  data() {
    return {
      //是否同意隐私政策
      isAgree: true,
      //二维码
      code: "",
      //手机号
      phone: "",
      popupVisible: false,
      isPhoneCurrect: 0,
      countTime: "",
      isGoToLogin: false
    };
  },
  methods: {
    //当手机号未填时
    getCodePhoneWrong() {
      this.$Toast("请填写正确的手机号码");
    },
    //点击获取二维码
    getCode() {
      console.log("获取验证码");
      this.isPhoneCurrect = 3;
      this.countTime = 60;
      //验证码倒计时
      const timer = setInterval(() => {
        if (this.countTime == 0) {
          clearTimeout(timer);
          this.isPhoneCurrect = 1;
        } else {
          this.countTime--;
        }
      }, 1000);
    },
    isAgreeChange() {
      this.isAgree = !this.isAgree;
      console.log(this.isAgree);
    },
    //登入操作
    goToLogin() {
      //验证手机号
      let myreg = /^[1][3,4,5,7,8,9][0-9]{9}$/;
      if (!myreg.test(this.phone)) {
        this.$Toast("请填写正确的手机号码");
        return;
      }
      //验证码填写
      if (!this.code) {
        this.$Toast("请填写验证码");
        return;
      }
      //隐私协议是否勾选
      if (this.isAgree) {
        this.$Toast("请先阅读用户协议、隐私政策");
        return;
      }
      //弹出框
      this.popupVisible = !this.popupVisible;
      console.log("goToLogin");
    },
    //返回上级路由
    goBackRouter() {
      this.$router.back();
    },
    phoneChange() {
      console.log(1);
    },
    //跳转到用户页面
    goToUserPage() {
      this.$router.push("/Useragreement");
      localStorage.setItem("isUseragreement", "1");
    },
    //跳转到隐私页面
    goToPrivatePage() {
      this.$router.push("/Useragreement");
      localStorage.setItem("isUseragreement", "2");
    }
    //
  },
  watch: {
    //监听手机号的长度
    phone(val) {
      let myreg = /^[1][3,4,5,7,8,9][0-9]{9}$/;
      if (!myreg.test(val)) {
        this.isPhoneCurrect = 0;
      } else {
        this.isPhoneCurrect = 1;
      }
    },
    //监听手机验证码两个值
    address(val) {
      console.log(val);
      if (val.phone && val.code) {
        this.isGoToLogin = true;
      } else {
        this.isGoToLogin = false;
      }
    }
  },
  computed: {
    //监听手机验证码两个值
    address() {
      const { phone, code } = this;
      return {
        phone,
        code
      };
    }
  }
};
</script>
<style lang="scss" scoped>
.Login {
  padding: 0 0.3rem;
  .Login_message {
    margin: 1rem 0 1.2rem 0;
    .Login_message_phone {
      font-size: 17px;
      font-weight: 600;
    }
    .Login_message_notfiy {
      margin-top: 15px;
      font-size: 14px;
      font-weight: 400;
      color: #999999;
    }
  }
  .Login_form {
    width: 100%;
    .Login_form_item {
      margin-bottom: 0.5rem;
      display: flex;
      border-bottom: 1px #ccc solid;
      padding: 3px;
      .login_form_input {
        font-size: 0.3rem;
        height: 0.5rem;
        border: none;
        width: 100%;
      }
      .login_form_input:focus {
        outline: none;
      }
    }
    .agree_item {
      margin-bottom: 0.7rem;
      span {
        color: #3ba3fc;
      }
    }
  }
  .getCode {
    color: #333333;
    font-size: 12px;
    height: 0.5rem;
    width: 1.8rem;
    line-height: 0.5rem;
    text-align: center;
    border-radius: 0.5rem;
    border: 1px #e5e5e5 solid;
  }
  .getCode_phone_wrong {
    color: white;
    font-size: 12px;
    height: 0.5rem;
    width: 1.8rem;
    line-height: 0.5rem;
    text-align: center;
    border-radius: 0.5rem;
    border: 1px #e5e5e5 solid;
    background-color: gray;
  }
  .getCode_count_down {
    color: white;
    font-size: 12px;
    height: 0.5rem;
    width: 1.8rem;
    line-height: 0.5rem;
    text-align: center;
    border-radius: 0.5rem;
    border: 1px #e5e5e5 solid;
    background-color: gray;
  }
  .login_btn {
    height: 0.7rem;
    line-height: 0.7rem;
    width: 6rem;
    background: #3ba3fc;
    text-align: center;
    color: white;
    border-radius: 0.5rem;
    margin-top: 1rem;
    margin: 0 auto;
  }
  .login_btn_wrong {
    height: 0.7rem;
    line-height: 0.7rem;
    width: 6rem;
    background: #ccc;
    text-align: center;
    color: white;
    border-radius: 0.5rem;
    margin-top: 1rem;
    margin: 0 auto;
  }
}
/deep/.mint-popup {
  padding: 1rem;
  border-radius: 0.2rem;
  position: fixed;
  background: #fff;
  top: 40%;
  left: 50%;
  -webkit-transform: translate3d(-50%, -50%, 0);
  transform: translate3d(-50%, -50%, 0);
  -webkit-backface-visibility: hidden;
  backface-visibility: hidden;
  -webkit-transition: 0.2s ease-out;
  transition: 0.2s ease-out;
  .login_success {
    margin-top: 10px;
    text-align: center;
    font-size: 18px;
    color: #333;
    font-weight: 600;
    margin-bottom: 20px;
  }
  .go_back_btn {
    height: 0.7rem;
    line-height: 0.7rem;
    background: #3ba3fc;
    text-align: center;
    color: white;
    border-radius: 0.5rem;
    margin: 0 auto;
  }
}
input::-webkit-outer-spin-button,
input::-webkit-inner-spin-button {
  -webkit-appearance: none;
}
input[type="number"] {
  -moz-appearance: textfield;
}
</style>