117 lines
3.2 KiB
TypeScript
117 lines
3.2 KiB
TypeScript
import { useState } from 'react'
|
|
import { Image, Text, View } from 'react-native'
|
|
import { AButton, ACheckbox, AForm, AFormItem, AInput } from '@/components/common/ao'
|
|
import { IconQq, IconWeixin, IconZhiwen } from '@/components/iconfont'
|
|
import { Divider } from '@/components/ui/divider'
|
|
import useFormValidation from '@/hooks/useFormValidation'
|
|
import alovaInstance from '@/request'
|
|
import { toast } from '@/utils/toast'
|
|
|
|
interface LoginForm {
|
|
username: string
|
|
password: string
|
|
rememberMe: boolean
|
|
socialType?: 'qq' | 'weixin' | 'fingerprint'
|
|
}
|
|
|
|
export default function AuthLogin() {
|
|
const [form, setForm] = useState<LoginForm>({
|
|
username: '',
|
|
password: '',
|
|
rememberMe: true,
|
|
})
|
|
|
|
const handleInputChange = (field: keyof LoginForm, value: string) => {
|
|
setForm(prev => ({ ...prev, [field]: value }))
|
|
}
|
|
|
|
// 验证规则
|
|
const rules = {
|
|
username: { required: true, message: '账号是必填项' },
|
|
password: { required: true, message: '密码是必填项' },
|
|
}
|
|
|
|
const { isValid } = useFormValidation(form, rules)
|
|
|
|
const loginDefault = () => {
|
|
alovaInstance.Post('/auth/test', {
|
|
title: 'foo',
|
|
body: 'bar',
|
|
userId: 1,
|
|
})
|
|
.then((res) => {
|
|
console.log('成功返回:', res)
|
|
})
|
|
.catch((err) => {
|
|
console.log('请求失败或未授权:', err)
|
|
})
|
|
}
|
|
|
|
const loginQq = () => {
|
|
toast.show({ title: '功能待开发，请稍等. . .' })
|
|
}
|
|
const loginWx = () => {
|
|
toast.show({ title: '功能待开发，请稍等. . .' })
|
|
}
|
|
const loginZhiwen = () => {
|
|
toast.show({ title: '功能待开发，请稍等. . .' })
|
|
}
|
|
|
|
return (
|
|
<View className="flex flex-col items-center px-6 h-full">
|
|
<Image
|
|
source={require('@/static/images/logo.png')}
|
|
style={{ width: 120, height: 120 }}
|
|
className="my-12"
|
|
/>
|
|
|
|
<AForm form={form}>
|
|
<AFormItem label="账号">
|
|
<AInput
|
|
value={form.username}
|
|
onChange={text => handleInputChange('username', text)}
|
|
/>
|
|
</AFormItem>
|
|
|
|
<AFormItem label="密码">
|
|
<AInput
|
|
isPassword
|
|
value={form.password}
|
|
onChange={text => handleInputChange('password', text)}
|
|
/>
|
|
</AFormItem>
|
|
</AForm>
|
|
|
|
<View className="w-full flex-row justify-between items-center mb-6">
|
|
<ACheckbox
|
|
isChecked={form.rememberMe}
|
|
onChange={checked => setForm(prev => ({ ...prev, rememberMe: checked }))}
|
|
label="记住我"
|
|
/>
|
|
|
|
<Text className="text-blue-500">忘记密码?</Text>
|
|
</View>
|
|
|
|
<AButton className="w-full" onPress={loginDefault} disabled={!isValid}>
|
|
登录
|
|
</AButton>
|
|
|
|
<View className="flex-row items-center my-8 w-full">
|
|
<View className="flex-1">
|
|
<Divider />
|
|
</View>
|
|
<Text className="mx-3 text-gray-500 text-sm">社交账号</Text>
|
|
<View className="flex-1">
|
|
<Divider />
|
|
</View>
|
|
</View>
|
|
|
|
<View className="w-full flex-row justify-between items-center">
|
|
<IconQq size={32} onPress={loginQq} />
|
|
<IconWeixin size={32} onPress={loginWx} />
|
|
<IconZhiwen size={32} onPress={loginZhiwen} />
|
|
</View>
|
|
</View>
|
|
)
|
|
}
|