yecai_client/src/views/user/alteration/Step2.vue

<template>
  <div>
    <a-form-model ref="form" :model="model" :rules="validatorRules" class="password-retrieval-form" @keyup.enter.native="nextStep">
      <a-form-model-item label="手机" required prop="phone" :labelCol="{span: 5}" :wrapperCol="{span: 19}">
        <a-input v-model="model.phone" type="text" autocomplete="false" placeholder="请输入手机号">
          <a-icon slot="prefix" type="phone" :style="{ color: 'rgba(0,0,0,.25)'}"/>
        </a-input>
      </a-form-model-item>
      <a-form-model-item v-if="show" required prop="captcha" label="验证码" :labelCol="{span: 5}" :wrapperCol="{span: 19}">
        <a-row :gutter="16">
          <a-col class="gutter-row" :span="12">
            <a-input @change="captchaChange" v-model="model.captcha" type="text" placeholder="手机短信验证码">
              <a-icon slot="prefix" type="code" :style="{ color: 'rgba(0,0,0,.25)'}"/>
            </a-input>
          </a-col>
          <a-col class="gutter-row" :span="8">
            <a-button
              tabindex="-1"
              size="default"
              :disabled="state.smsSendBtn"
              @click.stop.prevent="getCaptcha"
              v-text="!state.smsSendBtn && '获取验证码' || (state.time+' s')"></a-button>
          </a-col>
        </a-row>
      </a-form-model-item>
      <a-form-model-item :wrapperCol="{span: 19, offset: 5}">
        <router-link style="float: left;line-height: 40px;" :to="{ name: 'login' }">使用已有账户登录</router-link>
        <a-button type="primary" @click="nextStep" style="margin-left: 20px">下一步</a-button>
      </a-form-model-item>
    </a-form-model>
  </div>
</template>

<script>
  import {postAction} from '@/api/manage'

  export default {
    name: "Step2",
    props: ['userList'],
    data() {
      return {
        model: {},
        loading: false,
        // accountName: this.userList.username,
        dropList: "0",
        captcha: "",
        show: true,
        state: {
          time: 60,
          smsSendBtn: false,
        },
        formLogin: {
          captcha: "",
          mobile: "",
        },
        validatorRules: {
          phone: [
            { required: true, message: '请输入手机号码!' },
            { validator: this.validatePhone }
          ],
          captcha: [
            { required: true, message: '请输入短信验证码!' }
          ]
        },
      }
    },
    computed: {
    },
    methods: {
      nextStep() {
        let that = this
        that.loading = true
        this.$refs['form'].validate((success) => {
          if(success==true){
            let params = {
              phone: this.model.phone,
              smscode: this.model.captcha
            }
            postAction("/sys/user/phoneVerification", params).then((res) => {
              if (res.success) {
                console.log(res);
                let userList = {
                  username: res.result.username,
                  phone: params.phone,
                  smscode: res.result.smscode
                };
                setTimeout(function () {
                  that.$emit('nextStep', userList)
                }, 0)
              } else {
                this.cmsFailed(res.message);
              }
            });
          }

        })
      },
      getCaptcha(e) {
        e.preventDefault();
        const that = this
        that.$refs['form'].validateField('phone', err=>{
          if(!err){
            that.state.smsSendBtn = true;
            let interval = window.setInterval(() => {
              if (that.state.time-- <= 0) {
                that.state.time = 60;
                that.state.smsSendBtn = false;
                window.clearInterval(interval);
              }
            }, 1000);
            const hide = that.$message.loading('验证码发送中..', 0);
            let smsParams = {
              mobile: that.model.phone,
              smsmode: "2"
            };
            postAction("/sys/sms", smsParams).then(res => {
              if (!res.success) {
                setTimeout(hide, 1);
                that.cmsFailed(res.message);
              }
              setTimeout(hide, 500);
            })
          }else{
            that.cmsFailed(err);
          }
        })
      },
      cmsFailed(err) {
        this.$notification['error']({
          message: "验证错误",
          description: err,
          duration: 4,
        });
      },
      handleChangeSelect(value) {
        var that = this;
        console.log(value);
        if (value == 0) {
          that.dropList = "0";
          that.show = true;
        } else {
          that.dropList = "1";
          that.show = false;
        }
      },
      validatePhone(rule,value,callback){
          if(value){
            var myreg=/^[1][3,4,5,7,8][0-9]{9}$/;
            if(!myreg.test(value)){
              callback("请输入正确的手机号")
            }else{
              callback();
            }
          }else{
            callback()
          }
      },
      //手机号改变事件
      captchaChange(val){
        this.$refs['form'].validateField("captcha")
      }
    }

  }
</script>

<style lang="less" scoped>
  .stepFormText {
    margin-bottom: 24px;
  }

  .ant-form-item-label,
  .ant-form-item-control {
    line-height: 22px;
  }

  .getCaptcha {
    display: block;
    width: 100%;
    height: 40px;
  }
</style>