feat: IAgree

src/views/Components/Form/DefaultForm.vue

@@ -1785,6 +1785,25 @@ const schema = reactive<FormSchema[]>([
     component: 'IconPicker',
     label: t('formDemo.default'),
     value: 'tdesign:archway'
+  },
+  {
+    field: 'field89',
+    component: 'Divider',
+    label: t('formDemo.iAgree')
+  },
+  {
+    field: 'field90',
+    component: 'IAgree',
+    label: t('formDemo.default'),
+    componentProps: {
+      text: '我同意《用户协议》',
+      link: [
+        {
+          text: '《用户协议》',
+          url: 'https://element-plus.org/'
+        }
+      ]
+    }
   }
 ])
 </script>

src/views/Components/IAgree.vue

@@ -0,0 +1,21 @@
+<script setup lang="ts">
+import { ContentWrap } from '@/components/ContentWrap'
+import { useI18n } from '@/hooks/web/useI18n'
+import { IAgree } from '@/components/IAgree'
+
+const { t } = useI18n()
+</script>
+
+<template>
+  <ContentWrap :title="t('router.iAgree')">
+    <IAgree
+      :link="[
+        {
+          text: '《隐私政策》',
+          url: 'https://www.baidu.com'
+        }
+      ]"
+      text="我同意《隐私政策》"
+    />
+  </ContentWrap>
+</template>

src/views/Login/components/RegisterForm.vue

@@ -1,11 +1,12 @@
 <script setup lang="tsx">
 import { Form, FormSchema } from '@/components/Form'
-import { reactive, ref } from 'vue'
+import { reactive, ref, unref } from 'vue'
 import { useI18n } from '@/hooks/web/useI18n'
 import { useForm } from '@/hooks/web/useForm'
 import { ElInput, FormRules } from 'element-plus'
 import { useValidator } from '@/hooks/web/useValidator'
 import { BaseButton } from '@/components/Button'
+import { IAgree } from '@/components/IAgree'
 
 const emit = defineEmits(['to-login'])
 
@@ -14,7 +15,21 @@ const { getElFormExpose } = formMethods
 
 const { t } = useI18n()
 
-const { required } = useValidator()
+const { required, check } = useValidator()
+
+const getCodeTime = ref(60)
+const getCodeLoading = ref(false)
+const getCode = () => {
+  getCodeLoading.value = true
+  const timer = setInterval(() => {
+    getCodeTime.value--
+    if (getCodeTime.value <= 0) {
+      clearInterval(timer)
+      getCodeTime.value = 60
+      getCodeLoading.value = false
+    }
+  }, 1000)
+}
 
 const schema = reactive<FormSchema[]>([
   {
@@ -86,12 +101,48 @@ const schema = reactive<FormSchema[]>([
           return (
             <div class="w-[100%] flex">
               <ElInput v-model={formData.code} placeholder={t('login.codePlaceholder')} />
+              <BaseButton
+                type="primary"
+                disabled={unref(getCodeLoading)}
+                class="ml-10px"
+                onClick={getCode}
+              >
+                {t('login.getCode')}
+                {unref(getCodeLoading) ? `(${unref(getCodeTime)})` : ''}
+              </BaseButton>
             </div>
           )
         }
       }
     }
   },
+
+  {
+    field: 'iAgree',
+    colProps: {
+      span: 24
+    },
+    formItemProps: {
+      slots: {
+        default: (formData: any) => {
+          return (
+            <>
+              <IAgree
+                v-model={formData.iAgree}
+                text="我同意《用户协议》"
+                link={[
+                  {
+                    text: '《用户协议》',
+                    url: 'https://element-plus.org/'
+                  }
+                ]}
+              />
+            </>
+          )
+        }
+      }
+    }
+  },
   {
     field: 'register',
     colProps: {
@@ -129,7 +180,8 @@ const rules: FormRules = {
   username: [required()],
   password: [required()],
   check_password: [required()],
-  code: [required()]
+  code: [required()],
+  iAgree: [required(), check()]
 }
 
 const toLogin = () => {