Blame view

ant-design-vue-jeecg/src/components/tools/TwoStepCaptcha.vue 2.31 KB
肖超群 authored
1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
<template>
  <!-- 两步验证 -->
  <a-modal
    centered
    v-model="visible"
    @cancel="handleCancel"
    :maskClosable="false"
  >
    <div slot="title" :style="{ textAlign: 'center' }">两步验证</div>
    <template slot="footer">
      <div :style="{ textAlign: 'center' }">
        <a-button key="back" @click="handleCancel">返回</a-button>
        <a-button key="submit" type="primary" :loading="stepLoading" @click="handleStepOk">
          继续
        </a-button>
      </div>
    </template>

    <a-spin :spinning="stepLoading">
      <a-form layout="vertical" :auto-form-create="(form)=>{this.form = form}">
        <div class="step-form-wrapper">
肖超群 authored
22
          <p style="text-align: center" v-if="!stepLoading">请在手机中打开 Google Authenticator 或两步验证 APP<br/>输入 6 位动态码</p>
肖超群 authored
23
24
25
26
27
28
29
          <p style="text-align: center" v-else>正在验证..<br/>请稍后</p>
          <a-form-item
            :style="{ textAlign: 'center' }"
            hasFeedback
            fieldDecoratorId="stepCode"
            :fieldDecoratorOptions="{rules: [{ required: true, message: '请输入 6 位动态码!', pattern: /^\d{6}$/, len: 6 }]}"
          >
肖超群 authored
30
            <a-input :style="{ textAlign: 'center' }" @keyup.enter.native="handleStepOk" placeholder="000000"/>
肖超群 authored
31
32
33
34
35
36
37
38
39
40
41
42
43
44
45
46
47
48
49
50
51
52
53
54
55
56
57
58
59
60
61
62
          </a-form-item>
          <p style="text-align: center">
            <a @click="onForgeStepCode">遗失手机?</a>
          </p>
        </div>
      </a-form>
    </a-spin>
  </a-modal>
</template>

<script>
export default {
  props: {
    visible: {
      type: Boolean,
      default: false
    }
  },
  data() {
    return {
      stepLoading: false,

      form: null
    };
  },
  methods: {
    handleStepOk() {
      const vm = this
      this.stepLoading = true
      this.form.validateFields((err, values) => {
        if (!err) {
          console.log('values', values)
肖超群 authored
63
          setTimeout(() => {
肖超群 authored
64
            vm.stepLoading = false
肖超群 authored
65
            vm.$emit('success', {values})
肖超群 authored
66
67
68
69
          }, 2000)
          return;
        }
        this.stepLoading = false
肖超群 authored
70
        this.$emit('error', {err})
肖超群 authored
71
72
      })
    },
肖超群 authored
73
    handleCancel() {
肖超群 authored
74
75
76
77
      this.visible = false
      this.$emit('cancel')
    },
    onForgeStepCode() {
肖超群 authored
78
肖超群 authored
79
80
81
82
83
    }
  }
};
</script>
<style lang="less" scoped>
肖超群 authored
84
85
86
87
88
.step-form-wrapper {
  margin: 0 auto;
  width: 80%;
  max-width: 400px;
}
肖超群 authored
89
</style>