|
@@ -1,7 +1,7 @@
|
|
|
import { View, Input, Button, Text, Image } from '@tarojs/components'
|
|
import { View, Input, Button, Text, Image } from '@tarojs/components'
|
|
|
-import { useState } from 'react'
|
|
|
|
|
|
|
+import { useState, useEffect } from 'react'
|
|
|
import Taro from '@tarojs/taro'
|
|
import Taro from '@tarojs/taro'
|
|
|
-import { authManager } from '../../utils/auth'
|
|
|
|
|
|
|
+import { useAuth } from '@/utils/auth' // 导入 useAuth Hook
|
|
|
import './index.css'
|
|
import './index.css'
|
|
|
|
|
|
|
|
export default function Register() {
|
|
export default function Register() {
|
|
@@ -9,44 +9,92 @@ export default function Register() {
|
|
|
const [email, setEmail] = useState('')
|
|
const [email, setEmail] = useState('')
|
|
|
const [password, setPassword] = useState('')
|
|
const [password, setPassword] = useState('')
|
|
|
const [confirmPassword, setConfirmPassword] = useState('')
|
|
const [confirmPassword, setConfirmPassword] = useState('')
|
|
|
- const [loading, setLoading] = useState(false)
|
|
|
|
|
|
|
+ const { register, isLoading } = useAuth() // 使用 useAuth 获取注册方法和加载状态
|
|
|
|
|
+
|
|
|
|
|
+ // 设置导航栏标题
|
|
|
|
|
+ useEffect(() => {
|
|
|
|
|
+ Taro.setNavigationBarTitle({
|
|
|
|
|
+ title: '创建账号'
|
|
|
|
|
+ })
|
|
|
|
|
+ }, [])
|
|
|
|
|
|
|
|
const handleRegister = async () => {
|
|
const handleRegister = async () => {
|
|
|
- if (!username || !password) {
|
|
|
|
|
|
|
+ // 输入验证
|
|
|
|
|
+ if (!username.trim()) {
|
|
|
|
|
+ Taro.showToast({
|
|
|
|
|
+ title: '请输入用户名',
|
|
|
|
|
+ icon: 'none',
|
|
|
|
|
+ duration: 2000
|
|
|
|
|
+ })
|
|
|
|
|
+ return
|
|
|
|
|
+ }
|
|
|
|
|
+
|
|
|
|
|
+ if (username.trim().length < 3) {
|
|
|
|
|
+ Taro.showToast({
|
|
|
|
|
+ title: '用户名至少3个字符',
|
|
|
|
|
+ icon: 'none',
|
|
|
|
|
+ duration: 2000
|
|
|
|
|
+ })
|
|
|
|
|
+ return
|
|
|
|
|
+ }
|
|
|
|
|
+
|
|
|
|
|
+ if (!password.trim()) {
|
|
|
|
|
+ Taro.showToast({
|
|
|
|
|
+ title: '请输入密码',
|
|
|
|
|
+ icon: 'none',
|
|
|
|
|
+ duration: 2000
|
|
|
|
|
+ })
|
|
|
|
|
+ return
|
|
|
|
|
+ }
|
|
|
|
|
+
|
|
|
|
|
+ if (password.trim().length < 6) {
|
|
|
Taro.showToast({
|
|
Taro.showToast({
|
|
|
- title: '请输入用户名和密码',
|
|
|
|
|
- icon: 'none'
|
|
|
|
|
|
|
+ title: '密码至少6个字符',
|
|
|
|
|
+ icon: 'none',
|
|
|
|
|
+ duration: 2000
|
|
|
})
|
|
})
|
|
|
return
|
|
return
|
|
|
}
|
|
}
|
|
|
|
|
|
|
|
- if (password !== confirmPassword) {
|
|
|
|
|
|
|
+ if (password.trim() !== confirmPassword.trim()) {
|
|
|
Taro.showToast({
|
|
Taro.showToast({
|
|
|
title: '两次输入的密码不一致',
|
|
title: '两次输入的密码不一致',
|
|
|
- icon: 'none'
|
|
|
|
|
|
|
+ icon: 'none',
|
|
|
|
|
+ duration: 2000
|
|
|
})
|
|
})
|
|
|
return
|
|
return
|
|
|
}
|
|
}
|
|
|
|
|
|
|
|
- if (password.length < 6) {
|
|
|
|
|
|
|
+ // 邮箱格式验证(如果填写了邮箱)
|
|
|
|
|
+ if (email.trim() && !/^[^\s@]+@[^\s@]+\.[^\s@]+$/.test(email.trim())) {
|
|
|
Taro.showToast({
|
|
Taro.showToast({
|
|
|
- title: '密码长度不能少于6位',
|
|
|
|
|
- icon: 'none'
|
|
|
|
|
|
|
+ title: '请输入有效的邮箱地址',
|
|
|
|
|
+ icon: 'none',
|
|
|
|
|
+ duration: 2000
|
|
|
})
|
|
})
|
|
|
return
|
|
return
|
|
|
}
|
|
}
|
|
|
|
|
|
|
|
- setLoading(true)
|
|
|
|
|
try {
|
|
try {
|
|
|
- const user = await authManager.register({
|
|
|
|
|
- username,
|
|
|
|
|
- password,
|
|
|
|
|
- email: email || undefined
|
|
|
|
|
|
|
+ // 显示加载动画
|
|
|
|
|
+ Taro.showLoading({
|
|
|
|
|
+ title: '注册中...',
|
|
|
|
|
+ mask: true
|
|
|
|
|
+ })
|
|
|
|
|
+
|
|
|
|
|
+ // 使用 useAuth 提供的 register 方法
|
|
|
|
|
+ await register({
|
|
|
|
|
+ username: username.trim(),
|
|
|
|
|
+ password: password.trim(),
|
|
|
|
|
+ email: email.trim() || undefined
|
|
|
})
|
|
})
|
|
|
|
|
|
|
|
|
|
+ Taro.hideLoading()
|
|
|
|
|
+
|
|
|
Taro.showToast({
|
|
Taro.showToast({
|
|
|
title: '注册成功',
|
|
title: '注册成功',
|
|
|
- icon: 'success'
|
|
|
|
|
|
|
+ icon: 'success',
|
|
|
|
|
+ duration: 1500
|
|
|
})
|
|
})
|
|
|
|
|
|
|
|
// 注册成功后跳转到首页
|
|
// 注册成功后跳转到首页
|
|
@@ -54,12 +102,14 @@ export default function Register() {
|
|
|
Taro.switchTab({ url: '/pages/index/index' })
|
|
Taro.switchTab({ url: '/pages/index/index' })
|
|
|
}, 1500)
|
|
}, 1500)
|
|
|
} catch (error: any) {
|
|
} catch (error: any) {
|
|
|
|
|
+ Taro.hideLoading()
|
|
|
|
|
+
|
|
|
|
|
+ const errorMessage = error.message || '注册失败,请重试'
|
|
|
Taro.showToast({
|
|
Taro.showToast({
|
|
|
- title: error.message || '注册失败',
|
|
|
|
|
- icon: 'none'
|
|
|
|
|
|
|
+ title: errorMessage,
|
|
|
|
|
+ icon: 'none',
|
|
|
|
|
+ duration: 3000
|
|
|
})
|
|
})
|
|
|
- } finally {
|
|
|
|
|
- setLoading(false)
|
|
|
|
|
}
|
|
}
|
|
|
}
|
|
}
|
|
|
|
|
|
|
@@ -138,12 +188,12 @@ export default function Register() {
|
|
|
</View>
|
|
</View>
|
|
|
|
|
|
|
|
<Button
|
|
<Button
|
|
|
- className={`register-button ${loading ? 'loading' : ''}`}
|
|
|
|
|
- loading={loading}
|
|
|
|
|
|
|
+ className={`register-button ${isLoading ? 'loading' : ''}`}
|
|
|
|
|
+ loading={isLoading}
|
|
|
onClick={handleRegister}
|
|
onClick={handleRegister}
|
|
|
- disabled={loading}
|
|
|
|
|
|
|
+ disabled={isLoading || !username || !password || !confirmPassword}
|
|
|
>
|
|
>
|
|
|
- {loading ? '注册中...' : '立即注册'}
|
|
|
|
|
|
|
+ {isLoading ? '注册中...' : '立即注册'}
|
|
|
</Button>
|
|
</Button>
|
|
|
|
|
|
|
|
<View className="register-footer">
|
|
<View className="register-footer">
|
|
@@ -166,4 +216,5 @@ export default function Register() {
|
|
|
</View>
|
|
</View>
|
|
|
</View>
|
|
</View>
|
|
|
)
|
|
)
|
|
|
-}
|
|
|
|
|
|
|
+}
|
|
|
|
|
+
|