update

src/pages/login/Register.vue

@@ -1,11 +1,12 @@
 <script setup>
-import {reactive} from 'vue';
+import {reactive, useTemplateRef} from 'vue';
 import VerificationCode from "../../components/VerificationCode/index.vue";
 import Api from "../../api/index.js";
 import {Message} from "@arco-design/web-vue";
 import {toPath} from "../../utils/index.js";
 
-const from = reactive({
+const formRef = useTemplateRef('formRef');
+const form = reactive({
     wechat: null,
     mobile: null,
     password: null,
@@ -13,9 +14,35 @@ const from = reactive({
     invite: null,
 });
 
+const rules = {
+    wechat: [{
+        required: true,
+        message: '微信号不能为空',
+    }],
+    mobile: [{
+        required: true,
+        message: '手机号不能为空',
+    }],
+    password: [{
+        required: true,
+        message: '密码不能为空',
+    }],
+    captcha: [{
+        required: true,
+        message: '验证码不能为空',
+    }],
+}
+
 const register = async () => {
-    const {msg} = await Api.merchant.register(from);
-    Message.success(msg);
+    formRef.value.validate().then(async (res) => {
+        if (res) {
+            const firstKey = Object.keys(res)[0];
+            Message.warning(res[firstKey].message);
+        } else {
+            const {msg} = await Api.merchant.register(form);
+            Message.success(msg);
+        }
+    });
 }
 </script>
 
@@ -23,26 +50,30 @@ const register = async () => {
     <div class="p-[50px] rounded-[12px] bg-white w-[460px] box-border card">
         <div class="text-[24px] text-center text2">账号注册</div>
         <div class="mt-[30px] flex flex-col gap-[20px]">
-            <a-form layout="vertical">
-                <a-form-item label="微信号">
-                    <a-input v-model:model-value="from.wechat" placeholder="请输入微信号"></a-input>
+            <a-form
+                ref="formRef"
+                :model="form"
+                :rules="rules"
+                layout="vertical">
+                <a-form-item label="微信号" field="wechat">
+                    <a-input v-model:model-value="form.wechat" placeholder="请输入微信号"></a-input>
                 </a-form-item>
-                <a-form-item label="手机号">
-                    <a-input v-model:model-value="from.mobile" placeholder="请输入手机号"></a-input>
+                <a-form-item label="手机号" field="mobile">
+                    <a-input v-model:model-value="form.mobile" placeholder="请输入手机号"></a-input>
                 </a-form-item>
-                <a-form-item label="验证码">
+                <a-form-item label="验证码" field="captcha">
                     <VerificationCode
                         :type="1"
                         :api="Api.merchant.sendSms"
-                        :mobile="from.mobile"
-                        v-model:verification-code="from.captcha">
+                        :mobile="form.mobile"
+                        v-model:verification-code="form.captcha">
                     </VerificationCode>
                 </a-form-item>
-                <a-form-item label="登陆密码">
-                    <a-input v-model:model-value="from.password" placeholder="请输入登陆密码"></a-input>
+                <a-form-item label="登陆密码" field="password">
+                    <a-input v-model:model-value="form.password" placeholder="请输入登陆密码"></a-input>
                 </a-form-item>
                 <a-form-item label="邀请码（选填）">
-                    <a-input v-model:model-value="from.invite" placeholder="请输入邀请码"></a-input>
+                    <a-input v-model:model-value="form.invite" placeholder="请输入邀请码"></a-input>
                 </a-form-item>
             </a-form>
         </div>