caimei-distribution-www/src/views/login/pwlogin.vue

<template>
  <div class="login">
    <div class="login-icon"></div>
    <van-form @submit="submitLogin">
      <van-field
        v-model="form.phone"
        name="validator"
        placeholder="请输入手机号"
        :rules="[{ validator: validatorPhone, message: '请输入正确的手机号' }]"
        label=""
        type="digit"
        maxlength="11"
        left-icon="smile-o"
      />
      <van-field
        v-model="form.password"
        name="validator"
        placeholder="请输入密码"
        :rules="[{ validator: validatorVerification, message: '请输入密码' }]"
        type="digit"
        left-icon="smile-o"
        maxlength="8"
      />
      <div class="pwLogin">
        <div @click="$ApiRouter('/login')">验证码登录</div>
      </div>
      <van-button :class="disabled ? 'login-btn-disable' : 'login-btn'" :disabled="disabled" native-type="submit">登录</van-button>
      <div class="forgotPW" @click="$ApiRouter('/forgotPW')">忘记密码？</div>
    </van-form>
  </div>
</template>

<script>
import { Toast } from 'vant'

export default {
  name: 'login-index',
  data () {
    return {
      form: {
        phone: '',
        password: ''
      },
      disabled: false
    }
  },
  mounted () {
  },
  methods: {
    validatorPhone (val) {
      return /1\d{10}/.test(val)
    },
    validatorVerification (val) {
      return /\d{6}/.test(val)
    },
    onFailed (errorInfo) {
      console.log('failed', errorInfo)
    },
    fetchVerification () {
      Toast.loading('验证码已发送')
      setTimeout(() => {
        Toast.clear()
      }, 1000)
    },
    submitLogin ($event) {
      console.log($event)
    }
  }
}
</script>

<style lang="scss" scoped>
.login {
  height: 100vh;
  width: 100%;
  display: flex;
  flex-direction: column;
  align-items: center;
  background: #fff;
  .login-icon {
    margin: 24.1vw 0 16vw 0;
    width: 37.1vw;
    height: 7vw;
  }
  .van-form {
    width: 80vw;
    .van-cell {
      border-bottom: 1px solid #E1E1E1;
    }
  }
  .pwLogin {
    display: flex;
    flex-direction: row-reverse;
    font-size: 3.2vw;
    color: #FF5B00;
    margin-top: 2.3vw;
    width: 80vw;
  }
  .login-btn-disable {
    margin-top: 16vw;
    width: 80vw;
    background: #FFDCC8;
    color: #fff;
  }
  .login-btn {
    margin-top: 16vw;
    width: 80vw;
    background: #FF5B00;
    color: #fff;
  }
  .forgotPW {
    color: #666666;
    font-size: 3.2vw;
    margin-top: 4.3vw;
    text-align: center;
  }
}
</style>