lcoco/pages/login/otherPhoneLogin.vue

<template>
  <view class="other-box">
    <en-nav @navHeight="setNavHeight" ></en-nav>
    <view class="login-box" :style="{'height':'calc(100vh - '+navHeight+'px)'}">
      <view class="login-top">
        <view class="login-title">
          <text class="title-item sys-color-black sys-weight-600">验证登录</text>
        </view>
        <view class="login-from">
          <view class="from-text">
            <input type="tel" class="from-input sys-color-gray-3" v-model="phone" placeholder="请输入手机号"></input>
          </view>
          <view class="from-code">
            <view class="from-text">
              <input type="tel" class="from-input sys-color-gray-3" v-model="code" placeholder="请输入手机号"></input>
            </view>
            <view class="code-text">
              <text class="sys-color-gray-3" v-if="time<=0" @click="senCode">获取验证码</text>
              <text class="sys-color-gray-3" v-else>{{time}} s</text>
            </view>
          </view>
        </view>
        <view class="login-but sys-color-white sys-background-black" :class="{'login-but-no':!isLogin}">登录</view>
        <view  class="local-txt sys-color-gray-9">若长时间未收到验证码，请使用以下方式快速登录</view>
      </view>
    </view>
    <view class="login-bottom">
      <other-login></other-login>
    </view>
  </view>
</template>

<script>
import EnNav from "@/components/en-utils/en-nav/en-nav";
import tools from "@/service/tools";
import OtherLogin from "@/pages/login/model/otherLogin";
export default {
  name:'otherPhoneLogin',
  components: {OtherLogin, EnNav},
  data() {
    return {
      navHeight:40,
      isLogin:false,
      phone:'',
      code:'',
      time:0
    }
  },
  watch:{
    'phone':function (){
      this.verifyIsLogin()
    },
    'code':function (){
      this.verifyIsLogin()
    },
  },
  methods: {
    setNavHeight(navHeight){
      this.navHeight=navHeight
    },
    verifyIsLogin(){
      this.isLogin = this.phone.length === 11 && this.code !== '';
    },
    senCode(){
      if(this.phone.length !== 11){
        tools.error('请输入手机号码')
        return false
      }
      this.time=60
     let timeServe=setInterval(()=>{
        --this.time
       if(this.time<=0){
         clearInterval(timeServe)
       }
      },1000)
    }
  }
}
</script>

<style scoped lang="scss">
.other-box{
  padding: 82rpx 80rpx 0 80rpx;
  box-sizing: border-box;
  position: relative;
  .login-top{
    .login-title{
      padding-bottom: 60rpx;
      .title-item{
        font-size: 48rpx;
      }
    }
    .login-from{
      .from-text{
        width: 100%;
        padding-bottom: 40rpx;
        border-bottom: 1rpx solid #E0E0E0;
        .from-input{
            font-size: 32rpx;
          height: 44rpx;
          line-height: 44rpx;
        }
        .from-input::placeholder{
          color: #999999;
        }
      }
      .from-code{
        margin-top: 60rpx;
        display: flex;
        justify-content: space-between;
        .from-text{
          width: 344rpx;
        }
        .code-text{
          width: 180rpx;
          height: 44rpx;
          line-height: 44rpx;
          text-align: center;
          text{
            font-size: 32rpx;
          }
        }

      }

    }

    .login-but{
      margin-top: 120rpx;
      border-radius: 200rpx;
      height: 88rpx;
      line-height: 88rpx;
      text-align: center;
      transition: .5s ease;
    }
    .login-but-no{
      opacity: 0.1;
      transition: .5s ease;
    }
    .local-txt{
      padding-top: 32rpx;
      font-size: 24rpx;
      text-align: center;
    }
  }
  .login-bottom{
    padding-bottom: calc(186rpx + env(safe-area-inset-bottom));
    position: absolute;
    bottom: 0;
    left: 80rpx;
    width:calc(100vw - 160rpx);
  }
}

</style>