135 lines
6.0 KiB
TypeScript
135 lines
6.0 KiB
TypeScript
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
|
|
}}
|
|
>
|
|
<svg width="79" height="8" viewBox="0 0 79 8" fill="none" xmlns="http://www.w3.org/2000/svg" style={{
|
|
transform: 'scale(0.8)'
|
|
}}>
|
|
<ellipse cx="9.76846" cy="3.89687" rx="9.76846" ry="3.89687" transform="matrix(1 0 0 -1 59.3115 7.79376)" fill="#FFD38D" />
|
|
<ellipse cx="9.76865" cy="3.89689" rx="9.76846" ry="3.89687" transform="rotate(-180 9.76865 3.89689)" fill="#FFD38D" />
|
|
</svg>
|
|
</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>
|
|
{
|
|
status === 'signUp'
|
|
?
|
|
<SignUp
|
|
updateUrlParam={updateUrlParam}
|
|
setError={setError}
|
|
setShowPassword={setShowPassword}
|
|
showPassword={showPassword}
|
|
/>
|
|
:
|
|
status === 'forgetPwd' ?
|
|
<ForgetPwd
|
|
updateUrlParam={updateUrlParam}
|
|
setError={setError}
|
|
/>
|
|
: <PhoneLogin
|
|
// setShowPassword={setShowPassword}
|
|
// showPassword={showPassword}
|
|
updateUrlParam={updateUrlParam}
|
|
setError={setError}
|
|
/>
|
|
}
|
|
{status == 'login' &&
|
|
<View className="flex-row justify-center mt-2">
|
|
<ThemedText className="text-sm !text-textPrimary">
|
|
{status === 'login' ? 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 |