349 lines
8.6 KiB
Vue
349 lines
8.6 KiB
Vue
<script lang="ts" setup>
|
||
import type { RegisterAdminForm, RegisterCompanyForm } from '@/types/auth'
|
||
import { ref } from 'vue'
|
||
|
||
import { useRouter } from 'vue-router'
|
||
import AdminForm from './components/AdminForm.vue'
|
||
import CompanyForm from './components/CompanyForm.vue'
|
||
import ConfirmForm from './components/ConfirmForm.vue'
|
||
import ResultForm from './components/ResultForm.vue'
|
||
|
||
const router = useRouter()
|
||
|
||
const carouselList = [
|
||
{
|
||
title: '值得信赖',
|
||
company: '恒星科技有限公司',
|
||
content: '我们已经连续三年使用该平台，数据处理稳定高效，团队协作体验非常顺畅。',
|
||
},
|
||
{
|
||
title: '安全 · 高效',
|
||
company: '博越信息技术',
|
||
content: '平台的权限管理做得很好，操作简单清晰，极大提升了内部管理效率。',
|
||
},
|
||
{
|
||
title: '稳定可靠',
|
||
company: '远航供应链集团',
|
||
content: '系统运行非常稳定，几乎没有出现过宕机情况，客服响应速度也很快。',
|
||
},
|
||
{
|
||
title: '智能化体验',
|
||
company: '蓝海数据服务中心',
|
||
content: '智能报表和自动化功能非常实用，减少了大量人工整理数据的时间。',
|
||
},
|
||
{
|
||
title: '灵活易用',
|
||
company: '中联创投有限公司',
|
||
content: 'UI设计简洁友好，新员工上手很快，各项业务流程也能灵活配置。',
|
||
},
|
||
]
|
||
|
||
const activeStep = ref(0)
|
||
|
||
const adminForm = ref<RegisterAdminForm>({
|
||
name: '',
|
||
phone: '',
|
||
email: '',
|
||
emailCode: '',
|
||
|
||
password: '',
|
||
confirmPassword: '',
|
||
position: '',
|
||
})
|
||
const companyForm = ref<RegisterCompanyForm>({
|
||
name: '',
|
||
industry: '',
|
||
address: '',
|
||
phone: '',
|
||
email: '',
|
||
profile: '',
|
||
})
|
||
|
||
function handleNextStep() {
|
||
activeStep.value += 1
|
||
}
|
||
|
||
function handlePrevStep() {
|
||
if (activeStep.value > 0) {
|
||
activeStep.value -= 1
|
||
}
|
||
}
|
||
function navigateTo(path: string) {
|
||
router.push(path)
|
||
}
|
||
</script>
|
||
|
||
<template>
|
||
<div class="auth-wrapper">
|
||
<div class="auth-bg">
|
||
<img src="/auth-bg.jpg">
|
||
<div class="bg-content">
|
||
<el-carousel
|
||
height="150px"
|
||
indicator-position="none"
|
||
>
|
||
<el-carousel-item v-for="(item, index) in carouselList" :key="index">
|
||
<div class="carousel-item">
|
||
<h2 class="title">
|
||
{{ item.title }}
|
||
</h2>
|
||
|
||
<span class="content">{{ item.content }}</span>
|
||
|
||
<span class="company"> - {{ item.company }}</span>
|
||
</div>
|
||
</el-carousel-item>
|
||
</el-carousel>
|
||
</div>
|
||
</div>
|
||
|
||
<div class="auth-container">
|
||
<div class="form-container">
|
||
<div>
|
||
<img src="/logo.png" class="logo">
|
||
<el-steps finish-status="success" :active="activeStep" align-center>
|
||
<el-step title="公司信息" />
|
||
<el-step title="管理员信息" />
|
||
<el-step title="确认信息" />
|
||
</el-steps>
|
||
</div>
|
||
|
||
<CompanyForm v-show="activeStep === 0" @submit="handleNextStep" />
|
||
<AdminForm v-show="activeStep === 1" @submit="handleNextStep" @prev="handlePrevStep()" />
|
||
<ConfirmForm v-show="activeStep === 2" :admin="adminForm" :company="companyForm" @prev="handlePrevStep()" @submit="handleNextStep()" />
|
||
<ResultForm v-show="activeStep === 3" />
|
||
|
||
<div class="footer">
|
||
已有账号？前去
|
||
<span class="back" @click="navigateTo('/auth/login')">登录</span>
|
||
</div>
|
||
</div>
|
||
<div class="info-sidebar">
|
||
<div class="info-header">
|
||
<h1 class="page-title">
|
||
link56 注册说明
|
||
</h1>
|
||
<p class="page-description">
|
||
请填写公司信息并创建超级管理员账户以完成系统初始化设置
|
||
</p>
|
||
</div>
|
||
|
||
<ul class="info-list">
|
||
<li class="info-item">
|
||
<div class="info-item-header">
|
||
<i-ri:building-fill />
|
||
<div class="info-title">
|
||
公司信息
|
||
</div>
|
||
</div>
|
||
<div class="info-content">
|
||
请填写公司的法定全称、地址和联系方式，确保信息真实有效，这将用于系统备案和官方文件。
|
||
</div>
|
||
</li>
|
||
|
||
<li class="info-item">
|
||
<div class="info-item-header">
|
||
<i-fa7-solid:user-shield />
|
||
<div class="info-title">
|
||
超级管理员
|
||
</div>
|
||
</div>
|
||
<div class="info-content">
|
||
超级管理员拥有系统的最高权限，可以创建和管理其他用户，分配角色和权限，请妥善保管账户信息。
|
||
</div>
|
||
</li>
|
||
|
||
<li class="info-item">
|
||
<div class="info-item-header">
|
||
<i-material-symbols:lock-open-right-sharp />
|
||
<div class="info-title">
|
||
账户安全
|
||
</div>
|
||
</div>
|
||
<div class="info-content">
|
||
请设置强密码（至少8位，包含字母和数字），建议定期更换密码，不要将账户信息透露给他人。
|
||
</div>
|
||
</li>
|
||
|
||
<li class="info-item">
|
||
<div class="info-item-header">
|
||
<i-ic:twotone-headphones />
|
||
<div class="info-title">
|
||
技术支持
|
||
</div>
|
||
</div>
|
||
<div class="info-content">
|
||
如果在注册过程中遇到问题，请联系我们的技术支持团队：<br>
|
||
电话：400-123-4567<br>
|
||
邮箱：support@example.com
|
||
</div>
|
||
</li>
|
||
</ul>
|
||
</div>
|
||
</div>
|
||
</div>
|
||
</template>
|
||
|
||
<style lang="scss" scoped>
|
||
.auth-wrapper {
|
||
display: flex;
|
||
align-items: center;
|
||
justify-content: center;
|
||
height: 100vh;
|
||
width: 100%;
|
||
overflow: hidden;
|
||
|
||
.auth-bg {
|
||
width: 40%;
|
||
height: 100%;
|
||
position: relative;
|
||
|
||
img {
|
||
width: 100%;
|
||
height: 100%;
|
||
object-fit: cover;
|
||
}
|
||
|
||
.bg-content {
|
||
position: absolute;
|
||
left: 50%;
|
||
bottom: 10%;
|
||
transform: translateX(-50%);
|
||
text-align: center;
|
||
color: #fff;
|
||
width: 600px;
|
||
|
||
.carousel-item {
|
||
display: flex;
|
||
flex-direction: column;
|
||
.title {
|
||
font-size: 28px;
|
||
line-height: 28px;
|
||
margin-bottom: 16px;
|
||
}
|
||
.content {
|
||
margin-bottom: 8px;
|
||
}
|
||
.company {
|
||
font-size: 14px;
|
||
}
|
||
}
|
||
}
|
||
}
|
||
|
||
.auth-container {
|
||
border: 1px solid #ddd;
|
||
background-color: #fff;
|
||
display: flex;
|
||
height: 100%;
|
||
width: 60%;
|
||
|
||
.form-container {
|
||
display: flex;
|
||
flex-direction: column;
|
||
flex: 1;
|
||
padding: 36px;
|
||
border-right: 1px solid #e4e4e7;
|
||
|
||
.logo {
|
||
height: 70px;
|
||
width: 160px;
|
||
cursor: pointer;
|
||
margin-bottom: 16px;
|
||
}
|
||
.section-area {
|
||
margin-top: 16px;
|
||
overflow-y: auto;
|
||
overflow-x: hidden;
|
||
.section-title {
|
||
font-size: 17px;
|
||
font-weight: 600;
|
||
margin-bottom: 10px;
|
||
padding-bottom: 10px;
|
||
border-bottom: 1px solid #e4e4e7;
|
||
}
|
||
.section-subtitle {
|
||
color: #71717a;
|
||
font-size: 13px;
|
||
margin-bottom: 10px;
|
||
}
|
||
|
||
.button-group {
|
||
display: flex;
|
||
justify-content: space-between;
|
||
margin-top: 29px;
|
||
}
|
||
}
|
||
}
|
||
|
||
.info-sidebar {
|
||
width: 350px;
|
||
padding: 28px;
|
||
display: flex;
|
||
flex-direction: column;
|
||
background-color: #fafafa;
|
||
|
||
.info-header {
|
||
margin-bottom: 24px;
|
||
}
|
||
|
||
.page-title {
|
||
font-size: 26px;
|
||
font-weight: 700;
|
||
letter-spacing: -0.022em;
|
||
margin-bottom: 6px;
|
||
color: #09090b;
|
||
}
|
||
.page-description {
|
||
font-size: 14px;
|
||
line-height: 1.55;
|
||
color: #71717a;
|
||
}
|
||
|
||
.info-list {
|
||
list-style: none;
|
||
flex-grow: 1;
|
||
|
||
.info-item {
|
||
padding: 16px 0;
|
||
border-bottom: 1px solid #e4e4e7;
|
||
}
|
||
.info-item:last-child {
|
||
border-bottom: none;
|
||
}
|
||
|
||
.info-item-header {
|
||
display: flex;
|
||
align-items: center;
|
||
gap: 10px;
|
||
margin-bottom: 9px;
|
||
}
|
||
|
||
.info-title {
|
||
font-size: 14px;
|
||
font-weight: 600;
|
||
color: #09090b;
|
||
}
|
||
|
||
.info-content {
|
||
color: #71717a;
|
||
font-size: 13px;
|
||
line-height: 1.5;
|
||
}
|
||
}
|
||
}
|
||
|
||
.footer {
|
||
font-size: 18px;
|
||
color: #999;
|
||
text-align: center;
|
||
|
||
.back {
|
||
color: #0f6fec;
|
||
cursor: pointer;
|
||
}
|
||
}
|
||
}
|
||
}
|
||
</style>
|