From 4ee18058f14cd489179109eedc9f83343ae11834 Mon Sep 17 00:00:00 2001
From: wangqing <250543222@qq.com>
Date: Tue, 1 Jun 2021 23:29:21 +0800
Subject: [PATCH] add phonenumber valdiate

---
 .../form/PhoneVerification/index.vue          | 43 +++++++++++++------
 src/components/generator/config.js            | 19 ++++++++
 src/components/render/render.js               |  4 +-
 src/views/test.vue                            |  4 ++
 4 files changed, 56 insertions(+), 14 deletions(-)

diff --git a/src/components/form/PhoneVerification/index.vue b/src/components/form/PhoneVerification/index.vue
index 79a2466..4da9a43 100644
--- a/src/components/form/PhoneVerification/index.vue
+++ b/src/components/form/PhoneVerification/index.vue
@@ -1,25 +1,26 @@
 <template>
-    <div>
+    <div class="phone-number-container">
         <el-input
             v-model="inputValue"
+            class="input-with-select"
             maxlength="11"
-            readonly
-            placeholder="点击验证手机号" class="input-with-select" @click="open=true"
+            placeholder="点击验证手机号" readonly @click.native="openDialogHandle"
         >
             <i slot="prefix" class="el-input__icon el-icon-mobile" />
-            <el-button slot="append" icon="el-icon-message" @click="open=true" />
+            <el-button slot="append" icon="el-icon-message" @click="openDialogHandle" />
         </el-input>
-        <el-dialog title="手机号验证" :visible.sync="open">
-            <el-form ref="form" :model="phoneValidateForm" label-width="80px" :rules="rules">
+        <el-dialog :visible.sync="open" title="手机号验证">
+            <el-form ref="form" :model="phoneValidateForm" :rules="rules" label-width="80px">
                 <el-form-item label="手机号" prop="phoneNumber">
-                    <el-input v-model="phoneValidateForm.phoneNumber" maxlength="11" show-word-limit
-                              prefix-icon=" el-icon-mobile "
+                    <el-input v-model="phoneValidateForm.phoneNumber" maxlength="11" prefix-icon=" el-icon-mobile "
+                              show-word-limit
                     />
                 </el-form-item>
                 <el-form-item label="验证码" prop="code">
-                    <el-input v-model="validateCode" prefix-icon="el-icon-message" class="width80" />
-                    <el-button type="primary"
-                               :disabled="phoneValidateCodeBtn"
+                    <el-input v-model="phoneValidateForm.code" style="width: 85%;" prefix-icon="el-icon-message" />
+                    <el-button :disabled="phoneValidateCodeBtn"
+                               style="width: 10%;"
+                               type="primary"
                                @click="sendValidateMsgHandle"
                     >
                         {{ phoneValidateCodeBtnText }}
@@ -44,7 +45,6 @@ export default {
         return {
             phoneValidateCodeBtnText: '发送验证码',
             phoneValidateCodeBtn: false,
-            validateCode: '',
             open: false,
             inputValue: null,
             phoneValidateForm: {
@@ -64,10 +64,22 @@ export default {
         }
     },
     methods: {
+        openDialogHandle() {
+            this.open = true
+            this.phoneValidateForm = {
+                phoneNumber: '',
+                code: ''
+            }
+        },
         validateCodeHandle() {
             this.$refs['form'].validate(valid => {
                 if (valid) {
                     // 调接口 验证成功
+                    this.$api.post('/project/phone/code/check', this.phoneValidateForm).then(res => {
+                        this.inputValue = res.data
+                        this.open = false
+                        this.$emit('input', res.data)
+                    })
                 } else {
                     return false
                 }
@@ -77,7 +89,7 @@ export default {
             this.$refs['form'].validateField('phoneNumber', err => {
                 if (!err) {
                     this.phoneValidateCodeBtn = true
-                    this.$api.get(`/register/phone/code?phoneNumber=${this.inputPhoneNumber}`).then(() => {
+                    this.$api.get(`/project/phone/code?phoneNumber=${this.phoneValidateForm.phoneNumber}`).then(() => {
                         this.msgSuccess('验证码发送成功，5分钟内有效')
                         this.phoneValidateCodeBtn = true
                         let count = 60
@@ -98,3 +110,8 @@ export default {
 }
 </script>
 
+<style lang="scss" scoped>
+.phone-number-container {
+    display: flex;
+}
+</style>
diff --git a/src/components/generator/config.js b/src/components/generator/config.js
index 9a20785..3fd4600 100644
--- a/src/components/generator/config.js
+++ b/src/components/generator/config.js
@@ -818,5 +818,24 @@ export const personalInfoComponents = [
         },
         placeholder: '请选择位置',
         style: {width: '100%'}
+    },
+    {
+        typeId: 'PHONE_VERIFICATION',
+        __config__: {
+            label: '手机号验证',
+            labelWidth: null,
+            showLabel: true,
+            changeTag: false,
+            tag: 'phone-verification',
+            tagIcon: 'input',
+            defaultValue: undefined,
+            required: true,
+            layout: 'colFormItem',
+            span: 24,
+            showRegList: false,
+            document: 'https://element.eleme.cn/#/zh-CN/component/input'
+        },
+        placeholder: '请验证手机号',
+        style: {width: '100%'}
     }
 ]
diff --git a/src/components/render/render.js b/src/components/render/render.js
index f05fb80..4deeaa4 100644
--- a/src/components/render/render.js
+++ b/src/components/render/render.js
@@ -1,5 +1,6 @@
 import {deepClone} from '@/utils/index'
 import SignPad from '@/components/form/SignPad/index'
+import PhoneVerification from '@/components/form/PhoneVerification/index'
 
 const componentChild = {}
 /**
@@ -127,7 +128,8 @@ function makeDataObject() {
 
 export default {
     components: {
-        SignPad
+        SignPad,
+        PhoneVerification
     },
     props: {
         conf: {
diff --git a/src/views/test.vue b/src/views/test.vue
index e5f3f55..2ce2328 100644
--- a/src/views/test.vue
+++ b/src/views/test.vue
@@ -4,6 +4,7 @@
         <pagination />
         <province-city />
         <input-map />
+        <phone-verification />
     </div>
 </template>
 
@@ -13,10 +14,13 @@ import pagination from '../components/form/pagination'
 import ProvinceCity from '@/components/form/ProvinceCity'
 
 import InputMap from '@/components/form/InputMap/index'
+import PhoneVerification from '@/components/form/PhoneVerification/index'
+
 export default {
     name: 'App',
     components: {
         ProvinceCity,
+        PhoneVerification,
         SignPad,
         pagination,
         InputMap