136 lines
5.5 KiB
TypeScript
136 lines
5.5 KiB
TypeScript
import Handers from '@/assets/icons/svg/handers.svg';
|
|
import LoginIP1 from '@/assets/icons/svg/loginIp1.svg';
|
|
import LoginIP2 from '@/assets/icons/svg/loginIp2.svg';
|
|
import ForgetPwd from '@/components/login/forgetPwd';
|
|
import PhoneLogin from '@/components/login/phoneLogin';
|
|
import SignUp from '@/components/login/signUp';
|
|
import { ThemedText } from '@/components/ThemedText';
|
|
import { ThemedView } from '@/components/ThemedView';
|
|
import { useLocalSearchParams, useRouter } from 'expo-router';
|
|
import React, { useEffect, useState } from 'react';
|
|
import { useTranslation } from 'react-i18next';
|
|
import { LayoutChangeEvent, TouchableOpacity, View, ViewStyle, useWindowDimensions } from 'react-native';
|
|
|
|
const LoginScreen = () => {
|
|
const router = useRouter();
|
|
const { t } = useTranslation();
|
|
const { status } = useLocalSearchParams();
|
|
const [error, setError] = useState<string>('123');
|
|
const [containerHeight, setContainerHeight] = useState(0);
|
|
const { height: windowHeight } = useWindowDimensions();
|
|
// 密码可视
|
|
const [showPassword, setShowPassword] = useState(false);
|
|
const handleLayout = (event: LayoutChangeEvent) => {
|
|
const { height } = event.nativeEvent.layout;
|
|
setContainerHeight(height);
|
|
};
|
|
|
|
// 更新URL参数而不刷新页面
|
|
const updateUrlParam = (key: string, value: string) => {
|
|
router.setParams({ [key]: value });
|
|
}
|
|
|
|
// 初始化
|
|
useEffect(() => {
|
|
setError('123')
|
|
}, [])
|
|
|
|
return (
|
|
<ThemedView className="flex-1 bg-bgPrimary justify-end">
|
|
<View className="flex-1">
|
|
<View
|
|
className="absolute left-1/2 z-10"
|
|
style={{
|
|
top: containerHeight > 0 ? windowHeight - containerHeight - 210 : 0,
|
|
transform: [{ translateX: -200 }]
|
|
}}
|
|
>
|
|
{
|
|
showPassword
|
|
?
|
|
<LoginIP2 />
|
|
:
|
|
<LoginIP1 />
|
|
}
|
|
</View>
|
|
<View
|
|
className="absolute left-1/2 z-[1000] -translate-x-[39.5px] -translate-y-[4px]"
|
|
style={{
|
|
top: containerHeight > 0 ? windowHeight - containerHeight - 1 : 0
|
|
}}
|
|
>
|
|
<Handers />
|
|
</View>
|
|
</View>
|
|
<ThemedView
|
|
className="w-full bg-white pt-12 px-6 relative z-20 shadow-lg pb-5"
|
|
style={{
|
|
borderTopLeftRadius: 24,
|
|
borderTopRightRadius: 24,
|
|
shadowColor: '#000',
|
|
shadowOffset: { width: 0, height: 2 },
|
|
shadowOpacity: 0.1,
|
|
shadowRadius: 8,
|
|
elevation: 5
|
|
} as ViewStyle}
|
|
onLayout={handleLayout}
|
|
>
|
|
{/* 错误提示 */}
|
|
<View className={`${error !== "123" ? 'opacity-100' : 'opacity-0'} w-full flex justify-center items-center text-primary-500 text-sm`}>
|
|
<ThemedText className="text-sm !text-textPrimary">
|
|
{error}
|
|
</ThemedText>
|
|
</View>
|
|
{(() => {
|
|
const commonProps = {
|
|
updateUrlParam,
|
|
setError,
|
|
};
|
|
|
|
const components = {
|
|
signUp: (
|
|
<SignUp
|
|
{...commonProps}
|
|
setShowPassword={setShowPassword}
|
|
showPassword={showPassword}
|
|
/>
|
|
),
|
|
forgetPwd: (
|
|
<ForgetPwd
|
|
{...commonProps}
|
|
/>
|
|
),
|
|
login: (
|
|
<PhoneLogin />
|
|
)
|
|
};
|
|
|
|
return components[status as keyof typeof components] || components.login;
|
|
})()}
|
|
|
|
{status == 'login' || !status &&
|
|
<View className="flex-row justify-center mt-2">
|
|
<ThemedText className="text-sm !text-textPrimary">
|
|
{status === 'login' || !status ? t('auth.agree.logintext', { ns: 'login' }) : t('auth.agree.singupText', { ns: 'login' })}
|
|
</ThemedText>
|
|
<TouchableOpacity onPress={() => { }}>
|
|
<ThemedText className="text-sm font-semibold ml-1 !text-textPrimary underline">
|
|
{t('auth.agree.terms', { ns: 'login' })}
|
|
</ThemedText>
|
|
</TouchableOpacity>
|
|
<ThemedText className="text-sm !text-textPrimary">
|
|
{t('auth.agree.join', { ns: 'login' })}
|
|
</ThemedText>
|
|
<TouchableOpacity onPress={() => { }}>
|
|
<ThemedText className="!text-textPrimary underline text-sm font-semibold ml-1">
|
|
{t('auth.agree.privacyPolicy', { ns: 'login' })}
|
|
</ThemedText>
|
|
</TouchableOpacity>
|
|
</View>
|
|
}
|
|
</ThemedView>
|
|
</ThemedView>
|
|
);
|
|
}
|
|
|
|
export default LoginScreen |