lcoco/pages/my/set/chang-phone.vue

<template>
  <view class="chang-phone-box">
    <en-nav title="修改绑定手机" :title-color="'#333'"  ></en-nav>
    <view class="chang-phone-from">
      <view class="from-text"  :class="{'apply-shake':phoneShake}">
        <input type="tel" class="from-input sys-color-gray-3" max="11" v-model="phone" placeholder="请输入手机号"></input>
      </view>
      <view class="from-code" :class="{'apply-shake':codeShake}">
        <view class="from-text">
          <input type="tel" class="from-input sys-color-gray-3" v-model="code" placeholder="请输入验证码"></input>
        </view>
        <view class="code-text sys-background-yellow">
          <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="chang-phone-but sys-color-white sys-background-black sys-selected-but" @click="setPhone" :class="{'sys-unselected-but':!isLogin}">完成</view>
  </view>
</template>

<script>
import EnNav from "@/components/en-utils/en-nav/en-nav";
import tools from "@/service/tools";
export default {
  components: {EnNav},
  data() {
    return {
      navHeight:40,
      isLogin:false,
      phoneShake:false,
      codeShake:false,
      phone:'',
      code:'',
      time:0
    }
  },
  watch:{
    'phone':function (){
      this.verifyIsLogin()
    },
    'code':function (){
      this.verifyIsLogin()
    },

  },
  methods: {
    setPhone(){
      if(this.phone.length !== 11){
        tools.error('请输入手机号码')
        this.setShake(1)
        tools.vibrate()
        return false
      }
      if(this.code ===''){
        tools.error('请输入验证码')
        this.setShake(2)
        tools.vibrate()
        return false
      }

      uni.redirectTo({
        'url':'/pages/my/set'
      })
    },
    setShake(type){
      if(type===1){
        this.phoneShake=true
      }else if(type===3){
        this.passwordShake=true
      }else {
        this.codeShake=true
      }
      setTimeout(()=>{
        this.phoneShake=false
        this.passwordShake=false
        this.codeShake=false
      },500)
    },
    setNavHeight(navHeight){
      this.navHeight=navHeight
    },
    verifyIsLogin(){
      this.isLogin = this.phone.length === 11 && this.code !== '';
    },
    senCode(){
      if(this.phone.length !== 11){
        tools.error('请输入手机号码')
        this.setShake(2)
        tools.vibrate()
        return false
      }
      this.time=60
      let timeServe=setInterval(()=>{
        --this.time
        if(this.time<=0){
          clearInterval(timeServe)
        }
      },1000)
    },
  }
}
</script>

<style scoped lang="scss">
.chang-phone-box{
  padding: 0 32rpx;
  box-sizing: border-box;
  position: relative;
  min-height: 100vh;
  .chang-phone-from{
    margin-top: 40rpx;
    .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: 48rpx;
      display: flex;
      justify-content: space-between;
      align-items: center;
      .from-text{
        width: 344rpx;
      }
      .code-text{
        padding: 0 16rpx;
        border-radius: 200rpx;
        width: 180rpx;
        height: 60rpx;
        line-height: 60rpx;
        text-align: center;
        text{
          font-size: 32rpx;
        }
      }
    }
    .from-item{
      margin-top: 60rpx;
    }
  }
  .chang-phone-but{
    position: absolute;
    bottom:calc(50rpx + env(safe-area-inset-bottom));
    left: 32rpx;
    width:calc(100vw - 64rpx);
  }

}

</style>