inleft
2022-08-02 70097d968795fcc872095c42f7b7bba618baaaf9
commit | author | age
9bcb19 1 <template>
I 2   <!-- 两步验证 -->
3   <a-modal
4     centered
5     v-model="visible"
6     @cancel="handleCancel"
7     :maskClosable="false"
8   >
9     <div slot="title" :style="{ textAlign: 'center' }">两步验证</div>
10     <template slot="footer">
11       <div :style="{ textAlign: 'center' }">
12         <a-button key="back" @click="handleCancel">返回</a-button>
13         <a-button key="submit" type="primary" :loading="stepLoading" @click="handleStepOk">
14           继续
15         </a-button>
16       </div>
17     </template>
18
19     <a-spin :spinning="stepLoading">
20       <a-form layout="vertical" :auto-form-create="(form)=>{this.form = form}">
21         <div class="step-form-wrapper">
22           <p style="text-align: center" v-if="!stepLoading">请在手机中打开 Google Authenticator 或两步验证 APP<br />输入 6 位动态码</p>
23           <p style="text-align: center" v-else>正在验证..<br/>请稍后</p>
24           <a-form-item
25             :style="{ textAlign: 'center' }"
26             hasFeedback
27             fieldDecoratorId="stepCode"
28             :fieldDecoratorOptions="{rules: [{ required: true, message: '请输入 6 位动态码!', pattern: /^\d{6}$/, len: 6 }]}"
29           >
30             <a-input :style="{ textAlign: 'center' }" @keyup.enter.native="handleStepOk" placeholder="000000" />
31           </a-form-item>
32           <p style="text-align: center">
33             <a @click="onForgeStepCode">遗失手机?</a>
34           </p>
35         </div>
36       </a-form>
37     </a-spin>
38   </a-modal>
39 </template>
40
41 <script>
42 export default {
43   props: {
44     visible: {
45       type: Boolean,
46       default: false
47     }
48   },
49   data () {
50     return {
51       stepLoading: false,
52
53       form: null
54     }
55   },
56   methods: {
57     handleStepOk () {
58       const vm = this
59       this.stepLoading = true
60       this.form.validateFields((err, values) => {
61         if (!err) {
62           console.log('values', values)
63           setTimeout(() => {
64             vm.stepLoading = false
65             vm.$emit('success', { values })
66           }, 2000)
67           return
68         }
69         this.stepLoading = false
70         this.$emit('error', { err })
71       })
72     },
73     handleCancel () {
74       this.visible = false
75       this.$emit('cancel')
76     },
77     onForgeStepCode () {
78
79     }
80   }
81 }
82 </script>
83 <style lang="less" scoped>
84   .step-form-wrapper {
85     margin: 0 auto;
86     width: 80%;
87     max-width: 400px;
88   }
89 </style>