520 lines
13 KiB
Vue
520 lines
13 KiB
Vue
<template>
|
||
<div class="register-container" :class="{'dark-mode': isDarkMode}">
|
||
<div class="register-form-container">
|
||
<div class="register-type-tabs">
|
||
<div
|
||
v-for="(item, index) in registerTypes"
|
||
:key="item.type"
|
||
class="register-type-tab"
|
||
:class="{
|
||
'register-type-tab--active': currentType === item.type,
|
||
'register-type-tab--margin': index + 1 !== registerTypes.length
|
||
}"
|
||
@click="currentType = item.type"
|
||
>
|
||
{{ item.title }}
|
||
</div>
|
||
</div>
|
||
|
||
<el-form
|
||
:model="formData"
|
||
ref="formRef"
|
||
:rules="formRules"
|
||
:validate-on-rule-change="false"
|
||
class="register-form"
|
||
>
|
||
<!-- 用户名注册 -->
|
||
<div v-show="currentType === 'username'" class="register-form-section">
|
||
<el-form-item prop="username" class="form-item">
|
||
<div class="input-container">
|
||
<el-input
|
||
v-model="formData.username"
|
||
:placeholder="t('username_placeholder')"
|
||
clearable
|
||
:inline-message="true"
|
||
:readonly="realNameInput"
|
||
@click="realNameInput = false"
|
||
@blur="realNameInput = true"
|
||
class="register-input"
|
||
>
|
||
<template #prefix>
|
||
<Icon
|
||
name="el-icon-User"
|
||
:color="isDarkMode ? '#ffffff' : '#000000'"
|
||
class="input-prefix-icon"
|
||
/>
|
||
</template>
|
||
</el-input>
|
||
</div>
|
||
</el-form-item>
|
||
|
||
<el-form-item prop="password" class="form-item">
|
||
<div class="input-container">
|
||
<el-input
|
||
v-model="formData.password"
|
||
:placeholder="t('password_placeholder')"
|
||
type="password"
|
||
clearable
|
||
show-password
|
||
class="register-input"
|
||
>
|
||
<template #prefix>
|
||
<Icon
|
||
name="el-icon-Lock"
|
||
:color="isDarkMode ? '#ffffff' : '#000000'"
|
||
class="input-prefix-icon"
|
||
/>
|
||
</template>
|
||
</el-input>
|
||
</div>
|
||
</el-form-item>
|
||
|
||
<el-form-item prop="confirmPassword" class="form-item">
|
||
<div class="input-container">
|
||
<el-input
|
||
v-model="formData.confirmPassword"
|
||
:placeholder="t('confirm_password_placeholder')"
|
||
type="password"
|
||
clearable
|
||
show-password
|
||
class="register-input"
|
||
>
|
||
<template #prefix>
|
||
<Icon
|
||
name="el-icon-Lock"
|
||
:color="isDarkMode ? '#ffffff' : '#000000'"
|
||
class="input-prefix-icon"
|
||
/>
|
||
</template>
|
||
</el-input>
|
||
</div>
|
||
</el-form-item>
|
||
|
||
<el-form-item prop="captchaCode" class="form-item">
|
||
<div class="input-container">
|
||
<el-input
|
||
v-model="formData.captchaCode"
|
||
:placeholder="t('captcha_placeholder')"
|
||
class="register-input"
|
||
>
|
||
<template #prefix>
|
||
<Icon
|
||
name="local-verify"
|
||
:color="isDarkMode ? '#ffffff' : '#000000'"
|
||
class="input-prefix-icon"
|
||
/>
|
||
</template>
|
||
<template #suffix>
|
||
<div class="captcha-image-container">
|
||
<el-image
|
||
:src="captcha.image.value"
|
||
class="captcha-image"
|
||
@click="captcha.refresh()"
|
||
></el-image>
|
||
</div>
|
||
</template>
|
||
</el-input>
|
||
</div>
|
||
</el-form-item>
|
||
</div>
|
||
|
||
<!-- 手机号注册 -->
|
||
<div v-show="currentType === 'mobile' || configStore.login.is_bind_mobile" class="register-form-section">
|
||
<el-form-item prop="mobile" class="form-item">
|
||
<div class="input-container">
|
||
<el-input
|
||
v-model="formData.mobile"
|
||
:placeholder="t('mobile_placeholder')"
|
||
clearable
|
||
class="register-input"
|
||
>
|
||
<template #prefix>
|
||
<Icon
|
||
name="el-icon-Phone"
|
||
:color="isDarkMode ? '#ffffff' : '#000000'"
|
||
class="input-prefix-icon"
|
||
/>
|
||
</template>
|
||
</el-input>
|
||
</div>
|
||
</el-form-item>
|
||
|
||
<el-form-item prop="mobileCode" class="form-item">
|
||
<div class="input-container">
|
||
<el-input
|
||
v-model="formData.mobileCode"
|
||
:placeholder="t('code_placeholder')"
|
||
class="register-input"
|
||
>
|
||
<template #prefix>
|
||
<Icon
|
||
name="el-icon-Key"
|
||
:color="isDarkMode ? '#ffffff' : '#000000'"
|
||
class="input-prefix-icon"
|
||
/>
|
||
</template>
|
||
<template #suffix>
|
||
<sms-code
|
||
:mobile="formData.mobile"
|
||
type="login"
|
||
v-model="formData.mobileKey"
|
||
@click="sendSmsCode"
|
||
ref="smsCodeRef"
|
||
></sms-code>
|
||
</template>
|
||
</el-input>
|
||
</div>
|
||
</el-form-item>
|
||
</div>
|
||
|
||
<!-- 登录链接 -->
|
||
<div class="form-actions">
|
||
<el-button type="primary" link @click="switchToLogin" class="login-link">
|
||
{{ t('have_account') }}，{{ t('to_login') }}
|
||
</el-button>
|
||
</div>
|
||
|
||
<!-- 注册按钮 -->
|
||
<div class="register-button-container">
|
||
<el-button
|
||
type="primary"
|
||
class="register-button"
|
||
size="large"
|
||
@click="handleRegister"
|
||
:loading="isLoading"
|
||
>
|
||
{{ isLoading ? t('registering') : t('register') }}
|
||
</el-button>
|
||
</div>
|
||
|
||
<!-- 协议同意 -->
|
||
<div
|
||
v-if="configStore.login.agreement_show"
|
||
class="agreement-container"
|
||
>
|
||
<span
|
||
class="iconfont agreement-checkbox"
|
||
:class="isAgreeChecked ? 'icon-xuanze1' : 'icon-checkbox_nol'"
|
||
@click="toggleAgreement"
|
||
></span>
|
||
{{ t('register_agree_tips') }}
|
||
<NuxtLink :to="protocolUrls.service" target="_blank">
|
||
<span class="agreement-link">{{ t('user_agreement') }}</span>
|
||
</NuxtLink>
|
||
{{ t('and') }}
|
||
<NuxtLink :to="protocolUrls.privacy" target="_blank">
|
||
<span class="agreement-link">{{ t('privacy_agreement') }}</span>
|
||
</NuxtLink>
|
||
</div>
|
||
</el-form>
|
||
</div>
|
||
</div>
|
||
</template>
|
||
|
||
<script lang="ts" setup>
|
||
import { ref, reactive, computed } from 'vue'
|
||
import { registerUser, registerWithMobile } from '@/api/auth'
|
||
import useConfigStore from '@/stores/config'
|
||
import type { FormInstance } from 'element-plus'
|
||
|
||
// 状态管理
|
||
const memberStore = useMemberStore()
|
||
const configStore = useConfigStore()
|
||
|
||
// 暗黑模式状态
|
||
const isDarkMode = computed(() => {
|
||
return configStore.isDarkMode
|
||
})
|
||
|
||
// 初始化配置
|
||
configStore.getLoginConfig()
|
||
|
||
// 协议链接配置
|
||
const protocolUrls = computed(() => {
|
||
const basePath = location.pathname.includes('web') ? '/web' : ''
|
||
return {
|
||
service: `${basePath}/auth/agreement?key=service`,
|
||
privacy: `${basePath}/auth/agreement?key=privacy`
|
||
}
|
||
})
|
||
|
||
// 注册类型配置
|
||
const currentType = ref('')
|
||
const registerTypes = computed(() => {
|
||
const types = []
|
||
if (configStore.login.is_username) {
|
||
types.push({ type: 'username', title: t('username_register') })
|
||
}
|
||
if (configStore.login.is_mobile && !configStore.login.is_bind_mobile) {
|
||
types.push({ type: 'mobile', title: t('mobile_register') })
|
||
}
|
||
currentType.value = types[0]?.type || ''
|
||
return types
|
||
})
|
||
|
||
// 表单数据
|
||
const isLoading = ref(false)
|
||
const formData = reactive({
|
||
username: '',
|
||
password: '',
|
||
confirmPassword: '',
|
||
mobile: '',
|
||
mobileCode: '',
|
||
mobileKey: '',
|
||
captchaKey: '',
|
||
captchaCode: ''
|
||
})
|
||
|
||
// 表单验证规则
|
||
const formRef = ref<FormInstance>()
|
||
const formRules = computed(() => ({
|
||
username: {
|
||
type: 'string',
|
||
required: currentType.value === 'username',
|
||
message: t('username_placeholder'),
|
||
trigger: ['blur', 'change'],
|
||
},
|
||
password: {
|
||
type: 'string',
|
||
required: currentType.value === 'username',
|
||
message: t('password_placeholder'),
|
||
trigger: ['blur', 'change']
|
||
},
|
||
confirmPassword: [
|
||
{
|
||
type: 'string',
|
||
required: currentType.value === 'username',
|
||
message: t('confirm_password_placeholder'),
|
||
trigger: ['blur', 'change']
|
||
},
|
||
{
|
||
validator(rule: any, value: string, callback: any) {
|
||
return value === formData.password
|
||
},
|
||
message: t('confirm_password_error'),
|
||
trigger: ['change', 'blur'],
|
||
}
|
||
],
|
||
mobile: [
|
||
{
|
||
type: 'string',
|
||
required: currentType.value === 'mobile' || configStore.login.is_bind_mobile,
|
||
message: t('mobile_placeholder'),
|
||
trigger: ['blur', 'change'],
|
||
},
|
||
{
|
||
validator(rule: any, value: string, callback: any) {
|
||
if (currentType.value !== 'mobile' && !configStore.login.is_bind_mobile) return true
|
||
return validate.mobile(value)
|
||
},
|
||
message: t('mobile_error'),
|
||
trigger: ['change', 'blur'],
|
||
}
|
||
],
|
||
mobileCode: {
|
||
type: 'string',
|
||
required: currentType.value === 'mobile' || configStore.login.is_bind_mobile,
|
||
message: t('code_placeholder'),
|
||
trigger: ['blur', 'change']
|
||
},
|
||
captchaCode: {
|
||
type: 'string',
|
||
required: currentType.value === 'username',
|
||
message: t('captcha_placeholder'),
|
||
trigger: ['blur', 'change'],
|
||
}
|
||
}))
|
||
|
||
// 协议同意状态
|
||
const isAgreeChecked = ref(false)
|
||
const toggleAgreement = () => {
|
||
isAgreeChecked.value = !isAgreeChecked.value
|
||
}
|
||
|
||
// 注册处理
|
||
const handleRegister = async () => {
|
||
await formRef.value?.validate(async (valid) => {
|
||
if (!valid) return
|
||
|
||
// 检查协议同意
|
||
if (configStore.login.agreement_show && !isAgreeChecked.value) {
|
||
ElMessage.error(t('is_agree_tips'))
|
||
return
|
||
}
|
||
|
||
if (isLoading.value) return
|
||
isLoading.value = true
|
||
|
||
try {
|
||
const registerApi = currentType.value === 'username' ? registerUser : registerWithMobile
|
||
const res = await registerApi(formData)
|
||
memberStore.setToken(res.data.token)
|
||
memberStore.logClose()
|
||
} catch (error) {
|
||
isLoading.value = false
|
||
captcha.refresh()
|
||
}
|
||
})
|
||
}
|
||
|
||
// 验证码功能
|
||
const captcha = useCaptcha(formData)
|
||
captcha.refresh()
|
||
|
||
// 短信验证码
|
||
const smsCodeRef = ref<AnyObject | null>(null)
|
||
const sendSmsCode = async () => {
|
||
await formRef.value?.validateField('mobile', (valid) => {
|
||
if (valid) {
|
||
smsCodeRef.value?.send()
|
||
}
|
||
})
|
||
}
|
||
|
||
// 切换到登录
|
||
const emit = defineEmits(['typeChange'])
|
||
const switchToLogin = () => {
|
||
emit('typeChange', 'login')
|
||
}
|
||
|
||
// 输入框状态
|
||
const realNameInput = ref(true)
|
||
</script>
|
||
|
||
<style lang="scss" scoped>
|
||
.register-container {
|
||
width: 100%;
|
||
|
||
&.dark-mode {
|
||
background: var(--el-bg-color);
|
||
color: var(--el-text-color-primary);
|
||
}
|
||
}
|
||
|
||
.register-form-container {
|
||
background: var(--el-bg-color);
|
||
width: 100%;
|
||
padding: 60px 30px;
|
||
border-radius: var(--rounded-big);
|
||
}
|
||
|
||
.register-type-tabs {
|
||
display: flex;
|
||
align-items: flex-end;
|
||
justify-content: center;
|
||
margin-bottom: 30px;
|
||
}
|
||
|
||
.register-type-tab {
|
||
font-size: 18px;
|
||
cursor: pointer;
|
||
color: var(--el-text-color-secondary);
|
||
line-height: 24px;
|
||
font-family: 'OppoSans-R';
|
||
|
||
&--active {
|
||
color: var(--el-text-color-primary);
|
||
font-weight: 600;
|
||
}
|
||
|
||
&--margin {
|
||
margin-right: 70px;
|
||
}
|
||
}
|
||
|
||
.register-form {
|
||
width: 100%;
|
||
}
|
||
|
||
.form-item {
|
||
margin-bottom: 20px;
|
||
}
|
||
|
||
.input-container {
|
||
flex: 1;
|
||
height: 50px;
|
||
border: 1px solid var(--el-border-color);
|
||
border-radius: 8px;
|
||
display: flex;
|
||
align-items: center;
|
||
background: var(--el-bg-color);
|
||
}
|
||
|
||
.register-input {
|
||
width: 100%;
|
||
border: none;
|
||
|
||
:deep(.el-input__wrapper) {
|
||
box-shadow: none;
|
||
background: transparent;
|
||
|
||
.el-input__inner {
|
||
color: var(--el-text-color-primary);
|
||
|
||
&::placeholder {
|
||
color: var(--el-text-color-placeholder);
|
||
}
|
||
}
|
||
}
|
||
}
|
||
|
||
.input-prefix-icon {
|
||
margin-right: 14px;
|
||
}
|
||
|
||
.captcha-image-container {
|
||
padding: 0;
|
||
line-height: 1;
|
||
}
|
||
|
||
.captcha-image {
|
||
height: 30px;
|
||
cursor: pointer;
|
||
}
|
||
|
||
.form-actions {
|
||
display: flex;
|
||
justify-content: flex-end;
|
||
margin-bottom: 20px;
|
||
}
|
||
|
||
.login-link {
|
||
font-size: 12px;
|
||
}
|
||
|
||
.register-button-container {
|
||
margin-top: 20px;
|
||
}
|
||
|
||
.register-button {
|
||
width: 100%;
|
||
height: 50px;
|
||
border-radius: 8px;
|
||
font-family: 'OppoSans-M';
|
||
}
|
||
|
||
.agreement-container {
|
||
font-size: 12px;
|
||
line-height: 24px;
|
||
display: flex;
|
||
align-items: center;
|
||
width: 100%;
|
||
margin-top: 20px;
|
||
color: var(--el-text-color-secondary);
|
||
}
|
||
|
||
.agreement-checkbox {
|
||
color: var(--el-color-primary);
|
||
margin-right: 5px;
|
||
cursor: pointer;
|
||
}
|
||
|
||
.agreement-link {
|
||
color: var(--el-color-primary);
|
||
margin: 0 4px;
|
||
|
||
&:hover {
|
||
color: var(--el-color-primary-light-3);
|
||
}
|
||
}
|
||
</style> |