From 0434d12416ec823399e1540e031d05e578c42b9c Mon Sep 17 00:00:00 2001
From: JiangQiming <291854119@qq.com>
Date: Tue, 10 Jan 2023 10:27:40 +0800
Subject: [PATCH] =?UTF-8?q?feat:=20=E6=96=B0=E5=A2=9E=E8=A1=A8=E5=8D=95?=
 =?UTF-8?q?=E9=AA=8C=E8=AF=81?=
MIME-Version: 1.0
Content-Type: text/plain; charset=UTF-8
Content-Transfer-Encoding: 8bit

---
 src/views/account/Center/bind/index.vue | 82 +++++++++++++++++++++++--
 1 file changed, 76 insertions(+), 6 deletions(-)

diff --git a/src/views/account/Center/bind/index.vue b/src/views/account/Center/bind/index.vue
index af74d127..35797b18 100644
--- a/src/views/account/Center/bind/index.vue
+++ b/src/views/account/Center/bind/index.vue
@@ -53,29 +53,46 @@
                         你已通过微信授权,完善以下登录信息即可以完成绑定
                     </div>
                     <div class="login-form">
-                        <a-form layout="vertical" :model="formData">
-                            <a-form-item label="账户">
+                        <a-form layout="vertical">
+                            <a-form-item
+                                label="账户"
+                                v-bind="validateInfos.username"
+                            >
                                 <a-input
                                     v-model:value="formData.username"
                                     placeholder="请输入账户"
                                 />
                             </a-form-item>
-                            <a-form-item label="密码">
+                            <a-form-item
+                                label="密码"
+                                v-bind="validateInfos.password"
+                            >
                                 <a-input-password
                                     v-model:value="formData.password"
                                     placeholder="请输入密码"
                                 />
                             </a-form-item>
-                            <a-form-item label="验证码">
+                            <a-form-item
+                                label="验证码"
+                                v-bind="validateInfos.captcha"
+                            >
                                 <a-input
                                     v-model:value="formData.captcha"
                                     placeholder="请输入验证码"
                                 >
-                                    <template #addonAfter>图形验证码</template>
+                                    <template #addonAfter>
+                                        <span style="cursor: pointer">
+                                            图形验证码
+                                        </span>
+                                    </template>
                                 </a-input>
                             </a-form-item>
                             <a-form-item>
-                                <a-button type="primary" style="width: 100%">
+                                <a-button
+                                    type="primary"
+                                    @click="handleSubmit"
+                                    style="width: 100%"
+                                >
                                     登录并绑定账户
                                 </a-button>
                             </a-form-item>
@@ -89,6 +106,9 @@
 
 <script setup lang="ts">
 import { getImage } from '@/utils/comm';
+import { Form } from 'ant-design-vue';
+
+const useForm = Form.useForm;
 
 interface formData {
     username: string;
@@ -100,9 +120,59 @@ const formData = ref<formData>({
     password: '',
     captcha: '',
 });
+const formRules = ref({
+    username: [
+        {
+            required: true,
+            message: '请输入账户',
+        },
+    ],
+    password: [
+        {
+            required: true,
+            message: '请输入密码',
+        },
+    ],
+    captcha: [
+        {
+            required: true,
+            message: '请输入验证码',
+        },
+    ],
+});
+
+const { resetFields, validate, validateInfos } = useForm(
+    formData.value,
+    formRules.value,
+);
+
+/**
+ * 登录并绑定账户
+ */
+const handleSubmit = () => {
+    validate()
+        .then(() => {
+            console.log('toRaw:', toRaw(formData.value));
+            console.log('formData.value:', formData.value);
+        })
+        .catch((err) => {
+            console.log('error', err);
+        });
+};
 </script>
 
 <style lang="less" scoped>
+.page-container:deep {
+    .ant-form-item-label
+        > label.ant-form-item-required:not(
+            .ant-form-item-required-mark-optional
+        )::before {
+        display: none;
+    }
+    .ant-form-item-label > label {
+        font-weight: bold;
+    }
+}
 .page-container {
     width: 100%;
     height: 100vh;