lcoco/pages/my/set/change-pass.vue

<template>
  <view class="change-pass-box">
    <en-nav title="实名认证" :title-color="'#333'"  ></en-nav>
    <view class="change-pass-data">
      <view class="phone-data">
        <view class="phone-text sys-color-black sys-weight-600 ">+1888****4188</view>
        <view class="phone-but sys-color-black sys-background-yellow">获取验证码</view>
      </view>
      <view class="from-text from-item">
        <input type="number" class="from-input sys-color-black" v-model="code" placeholder="请输入验证码"></input>
      </view>
      <view class="from-text from-item">
        <input type="password" class="from-input sys-color-black" v-model="password" placeholder="请设置密码"></input>
      </view>
      <view class="warn-text sys-color-gray-9">
        请输入至少6个数字，字母和符号组成的密码
      </view>
    </view>
    <view class="login-bottom">
      <view class="login-but sys-color-white sys-background-black sys-selected-but" @click="setNextStep" :class="{'sys-unselected-but':!isOK,'apply-shake':isShakeBut}">下一步</view>
    </view>

  </view>
</template>

<script>
import EnNav from "@/components/en-utils/en-nav/en-nav";
import tools from "@/service/tools";
export default {
  name: "change-pass",
  components: {EnNav},
  props: {},
  data() {
    return {
      code:'',
      password:'',
      isOK:false,
      isShakeBut:false,
    }
  },
  watch: {
    'code':function (){
      this.verifyIsOK()
    },
    'password':function (){
      this.verifyIsOK()
    },
  },
  mounted() {

  },
  methods: {
    verifyIsOK(){
      this.isOK = this.code!=='' && this.password.length>=6;
    },
    setNextStep(){
      if(this.isOK){
        uni.redirectTo({
          'url':'/pages/my/set'
        })
      }else {
        tools.error('请完善信息')
        this.isShakeBut=true
        setTimeout(()=>{
          this.isShakeBut=false
        },500)
      }
    },
  }
}
</script>

<style scoped lang="scss">
.change-pass-box{
min-height: 100vh;
  .change-pass-data{
    padding: 0 32rpx;
    .phone-data{
      margin-top: 48rpx;
      display: flex;
      justify-content: space-between;
      .phone-text{
        font-size: 44rpx;
        height: 60rpx;
        line-height: 60rpx;
      }
      .phone-but{
        height: 60rpx;
        border-radius: 200rpx;
        padding:  0 16rpx;
        line-height: 60rpx;
      }
    }
    .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-item{
      margin-top: 60rpx;
    }
    .warn-text{
      margin-top: 24rpx;
      font-size: 24rpx;
    }

  }
  .login-bottom{
    padding-bottom: calc(58rpx + env(safe-area-inset-bottom));
    position: absolute;
    bottom: 0;
    left: 68rpx;
    width:calc(100vw - 136rpx);
    .login-but{
      margin-top: 120rpx;
    }
  }

}
</style>