update: 注册添加字段

src/locales/login.ts

@@ -8,8 +8,8 @@ export default {
     loginBtnText: '登录',
     regist: '申请成为供应商',
     errors: {
-      name: '请输入姓名',
-      password: '请输入密码',
+      name: '请填写姓名',
+      password: '请填写密码',
     },
   },
   ko: {
@@ -21,8 +21,8 @@ export default {
     loginBtnText: '登录',
     regist: '申请成为供应商',
     errors: {
-      name: '请输入姓名',
-      password: '请输入密码',
+      name: '请填写姓名',
+      password: '请填写密码',
     },
   },
 };

src/locales/register.ts

@@ -2,7 +2,12 @@ export default {
   cn: {
     tabs: ['① 提交基础信息', '② 申请成功'],
     title: '填写企业信息，申请成为供应商！',
-    placeholder: {enterprise: '填写企业名称', phone: '填写手机联系方式'},
+    placeholder: {
+      enterprise: '填写企业名称',
+      phone: '填写手机联系方式',
+      email: '填写电子邮箱',
+      name: '填写法人姓名',
+    },
     idcard: {title: '上传法人身份证'},
     license: {title: '上传营业执照'},
     maxSizeTip: '单张图片体积不超过20MB',
@@ -15,10 +20,13 @@ export default {
     successSubtitle: '审核结果将在5个工作日以内发送至您的邮箱，请您耐心等待～',
     notifyButtonText: '通知企业审核',
     errors: {
-      enterprise: '请输入企业名称',
-      phone: '请输入手机联系方式',
+      enterprise: '请填写企业名称',
+      phone: '请填写手机联系方式',
       idcard: '请上传法人身份证',
       licenseImage: '请上传营业执照',
+      email: '请填写电子邮箱',
+      emailType: '请填写正确的邮箱地址',
+      name: '请填写法人姓名',
     },
   },
   ko: {},

src/pages/register/content/index.css

@@ -1,4 +1,5 @@
 .title {
+  margin: 16px 0;
   font-size: 18px;
   font-weight: 500;
   color: #333;
@@ -16,7 +17,7 @@
   display: flex;
   gap: 40px;
   justify-content: space-between;
-  margin-top: 30px;
+  padding-top: 24px;
 }
 
 .form-item {

src/pages/register/content/index.vue

@@ -3,6 +3,8 @@ import {Button, LoginField, LoginUpload} from '@components';
 import {useI18n} from 'vue-i18n';
 import enterpriseIcon from '@assets/images/login/enterprise.webp';
 import phoneIcon from '@assets/images/register/phoneIcon.webp';
+import userIcon from '@assets/images/register/user.svg';
+import emailIcon from '@assets/images/register/email.svg';
 
 defineOptions({name: 'RegisterContent'});
 
@@ -11,8 +13,6 @@ const {t} = useI18n();
 
 <template>
   <div class="content-info">
-    <h2 v-t="'register.title'" class="title" />
-
     <div class="form-group">
       <div class="form-item">
         <LoginField
@@ -24,6 +24,15 @@ const {t} = useI18n();
           </template>
         </LoginField>
 
+        <LoginField
+          name="name"
+          :placeholder="t('register.placeholder.name')"
+        >
+          <template #prefix>
+            <img :src="userIcon" class="input-icon" />
+          </template>
+        </LoginField>
+
         <LoginUpload
           class="upload"
           :title="t('register.idcard.title')" name="idCardImage"
@@ -39,6 +48,15 @@ const {t} = useI18n();
           </template>
         </LoginField>
 
+        <LoginField
+          name="email"
+          :placeholder="t('register.placeholder.email')"
+        >
+          <template #prefix>
+            <img :src="emailIcon" class="input-icon" />
+          </template>
+        </LoginField>
+
         <LoginUpload
           class="upload"
           :title="t('register.license.title')" name="licenseImage"

src/pages/register/hooks.ts

@@ -9,31 +9,42 @@ type FormState = {
   phone: string;
   idCardImage: string;
   licenseImage: string;
+  email: string;
+  name: string;
 };
 
+const validate = object({
+  enterprise: string(formatValidateError('register.errors.enterprise'))
+    .min(1, 'register.errors.enterprise'),
+  phone: string(formatValidateError('register.errors.phone'))
+    .min(1, 'register.errors.phone'),
+  idCardImage: string(formatValidateError('register.errors.idcard'))
+    .min(1, 'register.errors.idcard'),
+  licenseImage: string(formatValidateError('register.errors.licenseImage'))
+    .min(1, 'register.errors.licenseImage'),
+  email: string(formatValidateError('register.errors.email'))
+    .min(1, 'register.errors.email')
+    .email('register.errors.emailType'),
+  name: string(formatValidateError('register.errors.name'))
+    .min(1, 'register.errors.name'),
+});
+
 export function useFormState(isSuccess: Ref<boolean>) {
-  const {handleSubmit, handleReset} = useForm<FormState>({
+  const {handleSubmit, handleReset, values} = useForm<FormState>({
     initialValues: {
       enterprise: '',
       phone: '',
       idCardImage: '',
       licenseImage: '',
+      email: '',
+      name: '',
     },
-    validationSchema: toTypedSchema(object({
-      enterprise: string(formatValidateError('register.errors.enterprise'))
-        .min(1, 'register.errors.enterprise'),
-      phone: string(formatValidateError('register.errors.phone'))
-        .min(1, 'register.errors.phone'),
-      idCardImage: string(formatValidateError('register.errors.idcard'))
-        .min(1, 'register.errors.idcard'),
-      licenseImage: string(formatValidateError('register.errors.licenseImage'))
-        .min(1, 'register.errors.licenseImage'),
-    })),
+    validationSchema: toTypedSchema(validate),
   });
 
   const onSubmit = handleSubmit(function(value) {
     isSuccess.value = true;
   });
 
-  return {onSubmit, handleReset};
+  return [{values}, {onSubmit, handleReset}] as const;
 }

src/pages/register/index.css

@@ -91,7 +91,6 @@ main {
 
 .content {
   flex: 1;
-  margin-top: 50px;
 
   & form {
     height: 100%;

src/pages/register/index.vue

@@ -11,7 +11,7 @@ defineOptions({name: 'Register'});
 const [isSuccess] = useToggle();
 const {t} = useI18n();
 
-const {onSubmit, handleReset} = useFormState(isSuccess);
+const [{values}, {onSubmit, handleReset}] = useFormState(isSuccess);
 
 </script>
 
@@ -35,7 +35,7 @@ const {onSubmit, handleReset} = useFormState(isSuccess);
           <RegisterContent />
         </form>
 
-        <Success v-show="isSuccess" />
+        <Success v-show="isSuccess" :email="values.email" />
       </section>
     </div>
   </main>

src/pages/register/success/index.css

@@ -4,7 +4,6 @@
   align-items: center;
   justify-content: center;
   height: 100%;
-  padding-bottom: 130px;
 }
 
 .result {
@@ -28,5 +27,5 @@
 .notify-btn {
   width: 180px;
   height: 42px;
-  margin-top: auto;
+  margin-top: 80px;
 }

src/pages/register/success/index.vue

@@ -6,6 +6,7 @@ import {useI18n} from 'vue-i18n';
 defineOptions({name: 'RegisterSuccess'});
 
 const {t} = useI18n();
+const props = defineProps<{email: string}>();
 </script>
 
 <template>
@@ -13,7 +14,7 @@ const {t} = useI18n();
     <img :src="successIcon" />
     <p v-t="'register.successTitle'" class="result" />
     <p v-t="'register.successSubtitle'" class="subtitle" />
-    <p class="email">1234@163.com</p>
+    <p class="email">{{props.email}}</p>
     <Button class="notify-btn">{{t('register.notifyButtonText')}}</Button>
   </div>
 </template>