Skip to content

Commit

Permalink
fix: optimize qrcode login logic
Browse files Browse the repository at this point in the history
  • Loading branch information
@klxiaoniu
klxiaoniu committed Jan 20, 2025
1 parent ae64514 commit 0f75555
Show file tree
Hide file tree
Showing 2 changed files with 74 additions and 76 deletions.
4 changes: 2 additions & 2 deletions app/(guest)/unified-auth-login.tsx
View file
Original file line number Diff line number Diff line change
Expand Up @@ -68,8 +68,8 @@ const UnifiedLoginPage: React.FC = () => {

console.log('登录成功:', name, accessToken);

// 跳转到一码通页面
router.push('/qrcode');
// 跳转到上一页
router.back();
} catch (error: any) {
console.error(error);
Alert.alert('登录失败', error.message);
Expand Down
146 changes: 72 additions & 74 deletions app/(root)/(tabs)/qrcode.tsx
View file
Original file line number Diff line number Diff line change
Expand Up @@ -4,8 +4,8 @@ import { Tabs, TabsContent, TabsList, TabsTrigger } from '@/components/ui/tabs';
import { Text } from '@/components/ui/text';
import YMTLogin, { IdentifyRespData, PayCodeRespData } from '@/lib/ymt-login';
import AsyncStorage from '@react-native-async-storage/async-storage';
import { router } from 'expo-router';
import { useCallback, useEffect, useMemo, useState } from 'react';
import { router, useFocusEffect } from 'expo-router';
import { useCallback, useMemo, useState } from 'react';
import { Alert, View } from 'react-native';
import QRCode from 'react-native-qrcode-svg';
export default function YiMaTongPage() {
Expand Down Expand Up @@ -33,51 +33,40 @@ export default function YiMaTongPage() {
}
}, [accessToken, ymtLogin]);

// 初始化时读取本地数据
useEffect(() => {
// 读取本地数据
async function getLocalData() {
try {
const storedAccessToken = await AsyncStorage.getItem('accessToken');
const storedName = await AsyncStorage.getItem('name');
// 获取焦点时读取本地数据（初始化时，Tab切换时，登录页返回时）
useFocusEffect(
useCallback(() => {
// 读取本地数据
async function getLocalData() {
try {
const storedAccessToken = await AsyncStorage.getItem('accessToken');
const storedName = await AsyncStorage.getItem('name');

setAccessToken(storedAccessToken);
setName(storedName);
setAccessToken(storedAccessToken);
setName(storedName);

console.log('读取本地数据成功:', storedAccessToken);
refresh();
} catch (error) {
console.error('读取本地数据失败:', error);
await AsyncStorage.removeItem('accessToken');
}
}
getLocalData();
// 设置刷新和时间间隔
const refreshInterval = setInterval(() => {
if (accessToken) {
refresh();
console.log('读取本地数据成功:', storedAccessToken);
refresh();
} catch (error) {
console.error('读取本地数据失败:', error);
await AsyncStorage.removeItem('accessToken');
}
}
}, 50000);
const timeInterval = setInterval(() => setCurrentTime(new Date()), 1000);
getLocalData();
// 设置刷新和时间间隔
const refreshInterval = setInterval(() => {
if (accessToken) {
refresh();
}
}, 50000);
const timeInterval = setInterval(() => setCurrentTime(new Date()), 1000);

return () => {
clearInterval(refreshInterval);
clearInterval(timeInterval);
};
}, [accessToken, refresh]);

// accessToken 变化时自动刷新
useEffect(() => {
const checkLoginStatus = async () => {
const token = await AsyncStorage.getItem('accessToken');
if (!token) {
// 未登录，跳转到登录页面
router.push('/(guest)/unified-auth-login');
}
};
checkLoginStatus();
refresh();
}, [refresh, accessToken]);
return () => {
clearInterval(refreshInterval);
clearInterval(timeInterval);
};
}, [accessToken, refresh]),
);

async function logout() {
Alert.alert(
Expand Down Expand Up @@ -120,7 +109,7 @@ export default function YiMaTongPage() {
<Button onPress={logout} className="width-full flex-5">
<Text>登出</Text>
</Button>
<Button onPress={refresh} className="width-full flex-1 bg-blue-500">
<Button onPress={refresh} className="width-full flex-1">
<Text>刷新</Text>
</Button>
</CardFooter>
Expand All @@ -130,38 +119,47 @@ export default function YiMaTongPage() {
return (
<View className="flex-1">
{/* Tabs 组件 */}
<Tabs
value={currentTab}
onValueChange={setCurrentTab}
className="flex-1" // 让 Tabs 占满父容器
>
{/* Tabs 内容区域 */}
<View className="flex-1">
<TabsContent
value="消费码"
className="flex-1 items-center justify-center" // 让内容居中并占满空间
>
{PayCodes && renderQRCodeCard('消费码', PayCodes[0].prePayId, '#000000')}
</TabsContent>
{accessToken && (
<Tabs
value={currentTab}
onValueChange={setCurrentTab}
className="flex-1" // 让 Tabs 占满父容器
>
{/* Tabs 内容区域 */}
<View className="flex-1">
<TabsContent
value="消费码"
className="flex-1 items-center justify-center" // 让内容居中并占满空间
>
{PayCodes && renderQRCodeCard('消费码', PayCodes[0].prePayId, '#000000')}
</TabsContent>

<TabsContent
value="认证码"
className="flex-1 items-center justify-center" // 让内容居中并占满空间
>
{IdentifyCode && renderQRCodeCard('认证码', IdentifyCode.content, IdentifyCode.color)}
</TabsContent>
</View>
<TabsContent value="认证码" className="flex-1 items-center justify-center">
{IdentifyCode && renderQRCodeCard('认证码', IdentifyCode.content, IdentifyCode.color)}
</TabsContent>
</View>

{/* Tabs 切换按钮 */}
<TabsList className="w-full flex-row">
<TabsTrigger value="消费码" className="flex-1">
<Text className="text-center">消费码</Text>
</TabsTrigger>
<TabsTrigger value="认证码" className="flex-1">
<Text className="text-center">认证码</Text>
</TabsTrigger>
</TabsList>
</Tabs>
)}

{/* Tabs 切换按钮 */}
<TabsList className="w-full flex-row">
<TabsTrigger value="消费码" className="flex-1">
<Text className="text-center">消费码</Text>
</TabsTrigger>
<TabsTrigger value="认证码" className="flex-1">
<Text className="text-center">认证码</Text>
</TabsTrigger>
</TabsList>
</Tabs>
{/* 登录提示 */}
{!accessToken && (
<View className="flex-1 items-center justify-center gap-10">
<Text className="text-lg">登录统一身份认证平台，享受一码通服务</Text>
<Button className="w-1/2" onPress={() => router.push('/(guest)/unified-auth-login')}>
<Text>前往登录</Text>
</Button>
</View>
)}
</View>
);
}

0 comments on commit 0f75555

Please sign in to comment.