JEECG-BOOT 2.0.2版本发布

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

@@ -0,0 +1,194 @@
+<template>
+  <div>
+    <a-form :form="form"  style="max-width: 500px; margin: 40px auto 0;">
+    <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'}"
+        placeholder="请输入手机号"
+        :value="phone"
+        disabled>
+        <a-icon slot="prefix" type="phone" :style="{ color: 'rgba(0,0,0,.25)'}" />
+      </a-input>
+    </a-form-item>
+      <a-form-item
+        :labelCol="{span: 5}"
+        :wrapperCol="{span: 19}"
+       style="margin-left:106px"
+        v-if="show">
+          <a-row :gutter="16" >
+            <a-col class="gutter-row" :span="16">
+                <a-input
+                  v-decorator="['captcha',validatorRules.captcha]"
+                  type="text"
+                  placeholder="请输入验证码" >
+                </a-input>
+            </a-col>
+            <a-col class="gutter-row" :span="8" >
+              <a-button
+                class="getCaptcha"
+                tabindex="-1"
+                :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,
+        phone:this.userList.phone,
+        dropList:"0",
+        captcha: "",
+        show:true,
+        state: {
+          time: 60,
+          smsSendBtn: false,
+        },
+        formLogin: {
+          captcha: "",
+          mobile: "",
+        },
+        validatorRules:{
+          captcha:{rule: [{ required: true, message: '请输入短信验证码!'},{validator:this.validateCaptcha}]},
+        },
+      }
+    },
+    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="scss" scoped>
+  .stepFormText {
+    margin-bottom: 24px;
+  }
+    .ant-form-item-label,
+    .ant-form-item-control {
+      line-height: 22px;
+    }
+
+  .getCaptcha {
+    display: block;
+    width: 100%;
+    height: 40px;
+  }
+</style>