kevin/ops2
1
0
Fork 0
Code Issues Pull Requests Actions Packages Projects Releases Wiki Activity

up

Browse Source
This commit is contained in:
kevin
2026-04-14 21:17:45 +08:00
parent 2953172227
commit 9ecab34b15
11 changed files with 449 additions and 922 deletions
Download Patch File Download Diff File Expand all files Collapse all files
frontend/ops_uniapp/pages/register/register.vue
+45 -167
View File
@@ -1,78 +1,84 @@
<template>
<view class="register-container">
<view class="min-h-screen bg-gradient-to-br from-purple-500 to-purple-800 px-6" :style="{ paddingTop: statusBarHeight + 'px' }">
<!-- 语言切换 -->
<view class="lang-switch">
<view class="flex justify-center items-center py-4">
<text
class="lang-btn"
:class="{ active: locale === 'zh' }"
class="text-sm px-2"
:class="locale === 'zh' ? 'text-white font-semibold' : 'text-white/60'"
@click="switchLang('zh')"
>中文</text>
<text class="lang-divider">|</text>
<text class="text-white/40 mx-1">|</text>
<text
class="lang-btn"
:class="{ active: locale === 'en' }"
class="text-sm px-2"
:class="locale === 'en' ? 'text-white font-semibold' : 'text-white/60'"
@click="switchLang('en')"
>EN</text>
</view>
<!-- 返回按钮 -->
<view class="back-btn" @click="goBack">
<text>← {{ t('common.back') }}</text>
<view class="mb-8 py-3" @click="goBack">
<text class="text-lg text-white">← {{ t('common.back') }}</text>
</view>
<view class="form-section">
<text class="title">{{ t('register.title') }}</text>
<!-- 注册表单 -->
<view class="bg-white rounded-3xl p-8 shadow-xl">
<text class="block text-3xl font-bold text-center mb-8" style="color: #1f2937">{{ t('register.title') }}</text>
<view class="input-group">
<text class="input-label">{{ t('register.username') }}</text>
<view class="mb-5">
<text class="block text-sm font-medium mb-3" style="color: #1f2937">{{ t('register.username') }}</text>
<input
class="input-field"
class="w-full h-11 rounded-xl px-4 text-base"
style="background: #f3f4f6; color: #1f2937"
type="text"
v-model="form.username"
:placeholder="t('register.usernamePlaceholder')"
placeholder-class="placeholder"
placeholder-class="placeholder-gray"
/>
</view>
<view class="input-group">
<text class="input-label">{{ t('register.email') }}</text>
<view class="mb-5">
<text class="block text-sm font-medium mb-3" style="color: #1f2937">{{ t('register.email') }}</text>
<input
class="input-field"
class="w-full h-11 rounded-xl px-4 text-base"
style="background: #f3f4f6; color: #1f2937"
type="email"
v-model="form.email"
:placeholder="t('register.emailPlaceholder')"
placeholder-class="placeholder"
placeholder-class="placeholder-gray"
/>
</view>
<view class="input-group">
<text class="input-label">{{ t('register.password') }}</text>
<view class="mb-5">
<text class="block text-sm font-medium mb-3" style="color: #1f2937">{{ t('register.password') }}</text>
<input
class="input-field"
class="w-full h-11 rounded-xl px-4 text-base"
style="background: #f3f4f6; color: #1f2937"
:type="showPassword ? 'text' : 'password'"
v-model="form.password"
:placeholder="t('register.passwordPlaceholder')"
placeholder-class="placeholder"
placeholder-class="placeholder-gray"
/>
</view>
<view class="input-group">
<text class="input-label">{{ t('register.confirmPassword') }}</text>
<view class="mb-5">
<text class="block text-sm font-medium mb-3" style="color: #1f2937">{{ t('register.confirmPassword') }}</text>
<input
class="input-field"
class="w-full h-11 rounded-xl px-4 text-base"
style="background: #f3f4f6; color: #1f2937"
:type="showPassword ? 'text' : 'password'"
v-model="form.confirmPassword"
:placeholder="t('register.confirmPlaceholder')"
placeholder-class="placeholder"
placeholder-class="placeholder-gray"
/>
</view>
<view class="password-toggle" @click="showPassword = !showPassword">
<text>{{ showPassword ? '👁️ ' : '👁️‍🗨️ ' }}{{ showPassword ? t('register.showPassword') : t('register.hidePassword') }}</text>
<view class="mb-6" @click="showPassword = !showPassword">
<text class="text-sm" style="color: #6b7280">{{ showPassword ? '👁️ ' : '👁️‍🗨️ ' }}{{ showPassword ? t('register.showPassword') : t('register.hidePassword') }}</text>
</view>
<button
class="register-btn"
class="w-full h-12 rounded-full flex items-center justify-center font-semibold text-lg"
:style="{ background: 'linear-gradient(to right, #667eea, #764ba2)', color: '#fff' }"
:loading="loading"
:disabled="loading"
@click="handleRegister"
@@ -80,8 +86,8 @@
{{ loading ? t('register.registering') : t('register.registerBtn') }}
</button>
<view class="error-tip" v-if="errorMsg">
<text>{{ errorMsg }}</text>
<view class="mt-4 p-4 rounded-xl text-center" style="background: #fef2f2" v-if="errorMsg">
<text class="text-sm" style="color: #ef4444">{{ errorMsg }}</text>
</view>
</view>
</view>
@@ -94,7 +100,7 @@ import { setLocale, getCurrentLocale } from '../../locales/index.js'
const { t, locale } = useI18n()
// 响应式数据
const statusBarHeight = ref(20)
const form = reactive({
username: '',
email: '',
@@ -106,18 +112,15 @@ const showPassword = ref(false)
const loading = ref(false)
const errorMsg = ref('')
// 切换语言
const switchLang = (lang) => {
setLocale(lang)
locale.value = lang
}
// 返回上一页
const goBack = () => {
uni.navigateBack()
}
// 表单验证
const validate = () => {
if (!form.username.trim()) {
errorMsg.value = t('register.usernameRequired')
@@ -127,7 +130,6 @@ const validate = () => {
errorMsg.value = t('register.emailRequired')
return false
}
// 简单邮箱验证
const emailRegex = /^[^\s@]+@[^\s@]+\.[^\s@]+$/
if (!emailRegex.test(form.email)) {
errorMsg.value = t('register.emailInvalid')
@@ -149,7 +151,6 @@ const validate = () => {
return true
}
// 注册处理
const handleRegister = () => {
if (!validate()) return
@@ -197,8 +198,10 @@ const handleRegister = () => {
})
}
// 生命周期
onMounted(() => {
const systemInfo = uni.getSystemInfoSync()
statusBarHeight.value = systemInfo.statusBarHeight || 20
locale.value = getCurrentLocale()
uni.$on('localeChanged', (lang) => {
@@ -211,133 +214,8 @@ onUnmounted(() => {
})
</script>
<style lang="scss" scoped>
.register-container {
min-height: 100vh;
background: linear-gradient(135deg, #667eea 0%, #764ba2 100%);
padding: 40rpx 60rpx;
}
.lang-switch {
display: flex;
justify-content: center;
align-items: center;
padding: 20rpx;
}
.lang-btn {
font-size: 28rpx;
color: rgba(255, 255, 255, 0.6);
padding: 8rpx 16rpx;
&.active {
color: #fff;
font-weight: 600;
}
}
.lang-divider {
color: rgba(255, 255, 255, 0.4);
margin: 0 8rpx;
}
.back-btn {
margin-bottom: 40rpx;
padding: 16rpx 0;
text {
color: #fff;
font-size: 32rpx;
}
}
.form-section {
background-color: #fff;
border-radius: 24rpx;
padding: 48rpx 40rpx;
box-shadow: 0 16rpx 48rpx rgba(0, 0, 0, 0.15);
}
.title {
display: block;
font-size: 44rpx;
font-weight: 700;
color: #333;
text-align: center;
margin-bottom: 48rpx;
}
.input-group {
margin-bottom: 28rpx;
}
.input-label {
display: block;
font-size: 28rpx;
color: #333;
font-weight: 500;
margin-bottom: 16rpx;
}
.input-field {
width: 100%;
height: 88rpx;
background-color: #f5f5f5;
border-radius: 16rpx;
padding: 0 32rpx;
font-size: 30rpx;
color: #333;
}
.placeholder {
color: #999;
}
.password-toggle {
margin-bottom: 32rpx;
text {
color: #666;
font-size: 26rpx;
}
}
.register-btn {
width: 100%;
height: 96rpx;
background: linear-gradient(135deg, #667eea 0%, #764ba2 100%);
color: #fff;
font-size: 34rpx;
font-weight: 600;
border-radius: 48rpx;
display: flex;
align-items: center;
justify-content: center;
border: none;
&::after {
border: none;
}
&:active {
opacity: 0.9;
}
&[disabled] {
opacity: 0.6;
}
}
.error-tip {
margin-top: 24rpx;
padding: 20rpx;
background-color: #fff5f5;
border-radius: 12rpx;
text-align: center;
text {
color: #e53935;
font-size: 26rpx;
}
<style>
.placeholder-gray {
color: #9ca3af;
}
</style>