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

<template>
  <div class="forgotPW">
    <nav-bar title="修改密码" @click-left="$router.back()"/>
    <van-form @submit="changePW">
      <van-field
        placeholder="请输入手机号"
        v-model="formData.phone"
        :rules="[{ required: true, message: '请输入手机号' }]"
      />
      <van-field
        v-model="formData.code"
        name="validator"
        placeholder="请输入短信验证码"
        :rules="[{ validator: validatorVerification, message: '请输入6位数验证码' }]"
        type="digit"
        maxlength="6"
      >
        <template #button>
          <van-button size="small" type="primary" color="#FF5B00" @click="fetchVerification">获取验证码</van-button>
        </template>
      </van-field>
      <van-field
        type="password"
        placeholder="请输入密码"
        v-model="formData.password"
        :rules="[{ required: true, message: '请填写密码' }]"
      />
      <van-field
        type="password"
        placeholder="请确认密码"
        v-model="formData.newPassword"
        :rules="[{ required: true, message: '请确认密码' }]"
      />
      <div class="change-btn">
        <van-button :class="disabled ? 'login-btn-disable' : 'login-btn'" :disabled="disabled" native-type="submit">修改密码</van-button>
      </div>
    </van-form>
  </div>
</template>

<script>
export default {
  data () {
    return {
      formData: {
        phone: '',
        code: '',
        password: '',
        newPassword: ''
      },
      disabled: true
    }
  },
  methods: {
    changePW () {},
    validatorVerification (val) {
      return /\d{6}/.test(val)
    },
    fetchVerification () {}
  }
}
</script>

<style lang="scss" scoped>
.forgotPW {
  width: 100%;
  height: 100vh;
  background: #fff;
}
.login-btn-disable {
  margin-top: 16vw;
  width: 80vw;
  background: #FFDCC8;
  color: #fff;
}
.login-btn {
  margin-top: 16vw;
  width: 80vw;
  background: #FF5B00;
  color: #fff;
}
.change-btn {
  display: flex;
  justify-content: center;
}
</style>