图形验证码

src/main/comos/src/views/account/Register.vue

@@ -23,6 +23,20 @@
                     <img :src="require('@assets/svgs/login_icon_zhanghao.svg')" class="icon" />
                 </template>
             </van-field>
+            <van-field
+                name="图形验证码"
+                placeholder="请输入图形验证码"
+                v-model="form.captcha"
+                :maxlength="6"
+                :rules="[{ required: true, message: '请输入图形验证码' }]"
+            >
+                <template #left-icon>
+                    <img :src="require('@assets/svgs/login_icon_code.svg')" class="icon" />
+                </template>
+                <template #button>
+                    <van-image @click="getCode" :src="codeImg" width="68" height="32" fit="contain" />
+                </template>
+            </van-field>
 
             <van-field
                 type="digit"
@@ -48,20 +62,6 @@
                     </van-button>
                 </template>
             </van-field>
-            <van-field
-                name="图形验证码"
-                placeholder="请输入图形验证码"
-                v-model="form.captcha"
-                :maxlength="6"
-                :rules="[{ required: true, message: '请输入图形验证码' }]"
-            >
-                <template #left-icon>
-                    <img :src="require('@assets/svgs/login_icon_code.svg')" class="icon" />
-                </template>
-                <template #button>
-                    <van-image @click="getCode" :src="codeImg" width="68" height="32" fit="contain" />
-                </template>
-            </van-field>
 
             <van-field
                 type="password"
@@ -176,8 +176,24 @@ export default {
             });
         },
         sendPhone() {
-            this.$refs.form.validate('手机号码').then(() => {
-                this.sendMsg(this.form.phone);
+            this.$refs.form.validate(['手机号码', '图形验证码']).then(() => {
+                // this.sendMsg(this.form.phone);
+                this.$http
+                    .get('/sms/sendCaptchaVerify', {
+                        phone: this.form.phone,
+                        captchaKey: this.form.captchaKey,
+                        captcha: this.form.captcha
+                    })
+                    .then(res => {
+                        this.isSend = true;
+                        this.setTime(60);
+                        this.msgCode = res;
+                        this.$toast.success('发送成功');
+                    })
+                    .catch(e => {
+                        this.$toast(e.error);
+                        this.setTime(0);
+                    });
             });
         },
         submit() {