优化构架

2026-08-03 18:52:21 +08:00
parent 3e347dd7a5
commit 35c713a7ca
51 changed files with 0 additions and 0 deletions
@@ -0,0 +1,137 @@
+<script setup lang="ts">
+import { reactive, ref } from 'vue'
+import { useRouter } from 'vue-router'
+import { ElMessage, type FormInstance, type FormRules } from 'element-plus'
+import { ArrowLeft, Building2, CheckCircle2, Mail, Phone } from '@lucide/vue'
+import baiyueLogoDark from '@/assets/brand/baiyue-logo-dark.png'
+import { registerMerchant } from '@/api/auth'
+
+interface RegisterForm {
+  username: string
+  companyName: string
+  displayName: string
+  legalPerson: string
+  legalPhone: string
+  contactEmail: string
+  countryCode: string
+  address: string
+  password: string
+  agreement: boolean
+}
+
+const router = useRouter()
+const formRef = ref<FormInstance>()
+const submitting = ref(false)
+const submitted = ref(false)
+const submittedAt = ref('')
+const form = reactive<RegisterForm>({ username: '', companyName: '', displayName: '', legalPerson: '', legalPhone: '', contactEmail: '', countryCode: 'CN', address: '', password: '', agreement: false })
+
+const rules: FormRules<RegisterForm> = {
+  username: [
+    { required: true, message: '请输入登录用户名', trigger: 'blur' },
+    { pattern: /^[A-Za-z0-9_]{4,64}$/, message: '用户名为 4–64 位字母、数字或下划线', trigger: 'blur' },
+  ],
+  companyName: [
+    { required: true, message: '请输入企业名称', trigger: 'blur' },
+    { min: 2, max: 100, message: '企业名称长度应为 2–100 个字符', trigger: 'blur' },
+  ],
+  displayName: [
+    { required: true, message: '请输入联系人姓名', trigger: 'blur' },
+    { max: 64, message: '联系人姓名最多 64 个字符', trigger: 'blur' },
+  ],
+  legalPerson: [
+    { required: true, message: '请输入法定代表人', trigger: 'blur' },
+    { max: 64, message: '法定代表人最多 64 个字符', trigger: 'blur' },
+  ],
+  contactEmail: [
+    { type: 'email', message: '请输入有效的邮箱地址', trigger: 'blur' },
+  ],
+  legalPhone: [
+    { required: true, message: '请输入手机号', trigger: 'blur' },
+    { pattern: /^1\d{10}$/, message: '请输入有效的 11 位手机号', trigger: 'blur' },
+  ],
+  password: [
+    { required: true, message: '请设置登录密码', trigger: 'blur' },
+    { min: 8, max: 72, message: '密码长度应为 8–72 位', trigger: 'blur' },
+  ],
+  agreement: [{ validator: (_rule, value, callback) => value ? callback() : callback(new Error('请先阅读并同意服务协议和隐私政策')), trigger: 'change' }],
+}
+
+async function submit() {
+  if (!formRef.value || submitting.value) return
+  const valid = await formRef.value.validate().catch(() => false)
+  if (!valid) return
+
+  submitting.value = true
+  try {
+    await registerMerchant({
+      username: form.username.trim(),
+      password: form.password,
+      displayName: form.displayName.trim(),
+      companyName: form.companyName.trim(),
+      legalPerson: form.legalPerson.trim(),
+      legalPhone: form.legalPhone.trim(),
+      contactEmail: form.contactEmail.trim() || undefined,
+      countryCode: form.countryCode,
+      address: form.address.trim() || undefined,
+    })
+    submittedAt.value = new Intl.DateTimeFormat('zh-CN', {
+      year: 'numeric', month: '2-digit', day: '2-digit', hour: '2-digit', minute: '2-digit', hour12: false,
+    }).format(new Date())
+    submitted.value = true
+    ElMessage.success('企业账号注册成功')
+  } catch (error) {
+    ElMessage.error(error instanceof Error ? error.message : '注册失败，请检查信息后重试')
+  } finally {
+    submitting.value = false
+  }
+}
+
+function showDocument(name: string) {
+  ElMessage.info(`${name}将在正式接入前由业务方确认内容`)
+}
+</script>
+
+<template>
+  <div class="register-page">
+    <header class="register-header">
+      <RouterLink to="/login"><ArrowLeft :size="18" /> 返回登录</RouterLink>
+      <div class="auth-brand"><img class="auth-brand-logo" :src="baiyueLogoDark" alt="柏悦物流" /></div>
+    </header>
+    <main class="register-main">
+      <template v-if="!submitted">
+        <div class="register-title"><div><Building2 :size="22" /></div><span><h1>企业注册</h1><p>注册成功后即可登录并使用客户工作台，提交订单前需完成企业资料审核。</p></span></div>
+        <el-form ref="formRef" :model="form" :rules="rules" class="register-form" label-position="top" size="large" @submit.prevent="submit">
+          <div class="form-grid">
+            <el-form-item label="登录用户名" prop="username" required><el-input v-model="form.username" autocomplete="username" maxlength="64" placeholder="4–64 位字母、数字或下划线" /></el-form-item>
+            <el-form-item label="企业名称" prop="companyName" required><el-input v-model="form.companyName" maxlength="100" placeholder="请输入企业营业执照上的名称" /></el-form-item>
+            <el-form-item label="联系人" prop="displayName" required><el-input v-model="form.displayName" maxlength="64" placeholder="请输入联系人姓名" /></el-form-item>
+            <el-form-item label="法定代表人" prop="legalPerson" required><el-input v-model="form.legalPerson" maxlength="64" placeholder="请输入营业执照法定代表人" /></el-form-item>
+            <el-form-item label="法人手机号" prop="legalPhone" required><el-input v-model="form.legalPhone" type="tel" autocomplete="tel" inputmode="numeric" maxlength="11" placeholder="请输入手机号" :prefix-icon="Phone" /></el-form-item>
+            <el-form-item label="联系邮箱" prop="contactEmail"><el-input v-model="form.contactEmail" type="email" autocomplete="email" maxlength="128" placeholder="选填，用于接收业务通知" :prefix-icon="Mail" /></el-form-item>
+            <el-form-item label="国家/地区" prop="countryCode"><el-select v-model="form.countryCode"><el-option label="中国大陆（CN）" value="CN" /></el-select></el-form-item>
+            <el-form-item label="企业地址" prop="address" class="full-row"><el-input v-model="form.address" maxlength="255" placeholder="选填，最多 255 个字符" /></el-form-item>
+            <el-form-item label="登录密码" prop="password" required><el-input v-model="form.password" type="password" autocomplete="new-password" maxlength="72" show-password placeholder="请设置 8–72 位密码" /></el-form-item>
+          </div>
+          <el-form-item prop="agreement" class="agreement-item">
+            <div class="agreement-control">
+              <el-checkbox v-model="form.agreement"><span class="agreement-required" aria-hidden="true">*</span>我已阅读并同意</el-checkbox>
+              <span><button type="button" @click="showDocument('《用户服务协议》')">《用户服务协议》</button> 和 <button type="button" @click="showDocument('《隐私政策》')">《隐私政策》</button></span>
+            </div>
+          </el-form-item>
+          <p class="register-security-note">注册成功后账号可立即登录；首次登录需上传营业执照并等待平台审核，审核通过后才能提交订单。</p>
+          <div class="register-actions"><el-button @click="$router.push('/login')">取消</el-button><el-button native-type="submit" type="primary" :loading="submitting">注册企业账号</el-button></div>
+        </el-form>
+      </template>
+
+      <section v-else class="registration-result" aria-live="polite">
+        <CheckCircle2 :size="42" />
+        <h1>企业账号注册成功</h1>
+        <p><strong>{{ form.username }}</strong> 现在可以直接登录客户工作台，无需等待注册审核。</p>
+        <dl><div><dt>企业名称</dt><dd>{{ form.companyName }}</dd></div><div><dt>登录账号</dt><dd>{{ form.username }}</dd></div><div><dt>注册时间</dt><dd>{{ submittedAt }}</dd></div><div><dt>账号状态</dt><dd><el-tag type="success" effect="light">可登录</el-tag></dd></div></dl>
+        <div class="registration-next-step" role="note"><strong>提交订单前还需完成一步</strong><span>登录后请在“企业资料”补充公司和资质信息，等待平台人工审核通过。审核期间仍可维护资料、成员和订单草稿。</span></div>
+        <div class="registration-result-actions"><el-button type="primary" @click="router.push({ path: '/login', query: { account: form.username } })">立即登录</el-button></div>
+      </section>
+    </main>
+  </div>
+</template>