JeecgBoot/ant-design-vue-jeecg/src/views/user/Step2.vue

<template>
  <div>
    <a-form :form="form" style="max-width: 500px; margin: 40px auto 0;" @keyup.enter.native="nextStep">
      <a-form-item
        label="账号名"
        :labelCol="{span: 5}"
        :wrapperCol="{span: 19}"
      >
        <a-input
          type="text"
          autocomplete="false"
          :style="{width:'310px'}"
          :value="accountName"
          disabled>
        </a-input>
      </a-form-item>
      <a-form-item
        label="手机"
        :labelCol="{span: 5}"
        :wrapperCol="{span: 19}"
      >
        <a-input
          type="text"
          autocomplete="false"
          :style="{width:'310px'}"
          v-decorator="['phone',{initialValue: defaultPhone, rules: validatorRules.phone.rule}]"
          placeholder="请输入手机号">
          <a-icon slot="prefix" type="phone" :style="{ color: 'rgba(0,0,0,.25)'}"/>
        </a-input>
      </a-form-item>
      <a-form-item
        label="验证码"
        :labelCol="{span: 5}"
        :wrapperCol="{span: 19}"
        v-if="show">
        <a-row :gutter="16" style="margin-left: 2px">
          <a-col class="gutter-row" :span="12">
            <a-input
              v-decorator="['captcha',validatorRules.captcha]"
              type="text"
              placeholder="手机短信验证码">
            </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-item>
      <a-form-item :wrapperCol="{span: 19, offset: 5}">
        <a-button style="margin-left: 8px" @click="prevStep">上一步</a-button>
        <a-button type="primary" @click="nextStep" style="margin-left: 20px">下一步</a-button>
      </a-form-item>

    </a-form>
  </div>
</template>

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

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

              }
            }


          }
        })
      },
      prevStep() {
        this.$emit('prevStep', this.userList);
      },
      getCaptcha(e) {
        e.preventDefault();
        let that = this;
        this.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 = this.$message.loading('验证码发送中..', 0);
        let smsParams = {
          mobile: this.userList.phone,
          smsmode: "2"
        };
        postAction("/sys/sms", smsParams).then(res => {
          if (!res.success) {
            setTimeout(hide, 1);
            this.cmsFailed(res.message);
          }
          setTimeout(hide, 500);
        })
      },
      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;
        }
      },
    }

  }
</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>