319 lines
9.8 KiB
JavaScript
319 lines
9.8 KiB
JavaScript
import {
|
|
View,
|
|
Text,
|
|
FlatList,
|
|
Image as NativeImage,
|
|
ActivityIndicator,
|
|
TouchableOpacity,
|
|
} from "react-native";
|
|
import React, {
|
|
useState,
|
|
useEffect,
|
|
useRef,
|
|
useCallback,
|
|
useContext,
|
|
} from "react";
|
|
import { useTailwind } from "tailwind-rn";
|
|
import { useSafeAreaInsets } from "react-native-safe-area-context";
|
|
import AsyncStorage from "@react-native-async-storage/async-storage";
|
|
import { ListItem, Button, Icon } from "@rneui/themed";
|
|
import { Image } from "expo-image";
|
|
import Empty from "../../../components/Empty";
|
|
import { get, remove, save } from "../../../utils/storeInfo";
|
|
import { AuthContext } from "../../../App";
|
|
import baseRequest from "../../../utils/baseRequest";
|
|
import { generateSignature } from "../../../utils/crypto";
|
|
import MyModal from "../../../components/MyModal";
|
|
import Toast from "react-native-toast-message";
|
|
|
|
export default function SwitchAccount({ navigation, route }) {
|
|
const blurhash = "LcKUTa%gOYWBYRt6xuoJo~s8V@fk";
|
|
|
|
const tailwind = useTailwind();
|
|
const insets = useSafeAreaInsets();
|
|
|
|
//退出登陆
|
|
const { signIn, signOut } = useContext(AuthContext);
|
|
|
|
const [accountList, setAccountList] = useState([]);
|
|
useEffect(() => {
|
|
//获取所有可切换账号
|
|
async function getAccountList() {
|
|
try {
|
|
const keys = await AsyncStorage.getAllKeys();
|
|
const accountKeys = keys.filter((key) =>
|
|
key.startsWith(`account_list_`)
|
|
);
|
|
const accountListCache = await AsyncStorage.multiGet(accountKeys);
|
|
const jsonParsedAccountList = accountListCache.map((item) => ({
|
|
key: item[0],
|
|
data: JSON.parse(item[1]),
|
|
}));
|
|
//判断当前账号是否登录并将登陆的账号放到第一位
|
|
const account = await get("account");
|
|
const allAccountList = jsonParsedAccountList
|
|
.map((item) => ({
|
|
...item,
|
|
online: item.data.account.user_id === account.user_id,
|
|
}))
|
|
.sort((a, b) => {
|
|
if (!b.data.login_time && !a.data.login_time) return 0;
|
|
if (!a.data.login_time) return 1;
|
|
if (!b.data.login_time) return -1;
|
|
return b.data.login_time - a.data.login_time;
|
|
});
|
|
//删除没有设置密码且不在线的账号
|
|
const _accountList = allAccountList.filter(
|
|
(item) => item.data?.password !== undefined || item.online === true
|
|
);
|
|
setAccountList(_accountList);
|
|
} catch (error) {
|
|
console.error(error);
|
|
}
|
|
}
|
|
getAccountList();
|
|
}, []);
|
|
|
|
//接口登录
|
|
const signInAccount = async (data) => {
|
|
const apiUrl = process.env.EXPO_PUBLIC_API_URL;
|
|
const base = await baseRequest();
|
|
const signature = await generateSignature({
|
|
mobile_phone: data.mobile_phone,
|
|
region_code: data.region_code,
|
|
password: data.password,
|
|
...base,
|
|
});
|
|
try {
|
|
const _response = await fetch(
|
|
`${apiUrl}/api/login/login_by_pswd?signature=${signature}`,
|
|
{
|
|
method: "POST",
|
|
headers: {
|
|
"Content-Type": "application/json",
|
|
},
|
|
body: JSON.stringify({
|
|
mobile_phone: data.mobile_phone,
|
|
region_code: data.region_code,
|
|
password: data.password,
|
|
...base,
|
|
}),
|
|
}
|
|
);
|
|
const _data = await _response.json();
|
|
if (_data.ret === -1) {
|
|
Toast.show({
|
|
type: "error",
|
|
text1: _data.msg,
|
|
topOffset: 60,
|
|
});
|
|
return;
|
|
}
|
|
//更新登录时间
|
|
await save(`account_list_${data.account.user_id}`, {
|
|
...data,
|
|
login_time: new Date().getTime(),
|
|
});
|
|
signIn(_data, data.mobile_phone_origion, data.region_code);
|
|
setAccountList((pre) =>
|
|
pre.map((item) => ({
|
|
...item,
|
|
online: item.data.account.user_id === data.account.user_id,
|
|
}))
|
|
);
|
|
} catch (error) {
|
|
console.error(error);
|
|
}
|
|
};
|
|
|
|
//切换账号
|
|
const [isSwitching, setIsSwitching] = useState(false);
|
|
const [warnModalVisible, setWarnModalVisible] = useState(false);
|
|
const [warnModalData, setWarnModalData] = useState({});
|
|
const switchAccount = async (data) => {
|
|
const onlineAccount = accountList.filter((item) => item.online === true);
|
|
if (onlineAccount[0].data.account.user_id === data.account.user_id) return;
|
|
if (!onlineAccount[0].data?.password) {
|
|
setWarnModalVisible(true);
|
|
setWarnModalData(data);
|
|
return;
|
|
}
|
|
setIsSwitching(true);
|
|
await signInAccount(data);
|
|
setIsSwitching(false);
|
|
};
|
|
|
|
//从验证码登录的账号进行切换账号
|
|
const switchAccountWithPhoneNumLogin = async (data) => {
|
|
setIsSwitching(true);
|
|
const onlineAccount = accountList.filter((item) => item.online === true);
|
|
setAccountList((pre) =>
|
|
pre.filter(
|
|
(item) =>
|
|
item.data.account.user_id !== onlineAccount[0].data.account.user_id
|
|
)
|
|
);
|
|
await signInAccount(data);
|
|
setIsSwitching(false);
|
|
};
|
|
|
|
//删除账号
|
|
const removeAccount = async (key, online) => {
|
|
await remove(key);
|
|
if (online) {
|
|
signOut();
|
|
return;
|
|
}
|
|
setAccountList((pre) => pre.filter((item) => item.key !== key));
|
|
};
|
|
|
|
//账号卡片组件
|
|
const AccountCard = useCallback(
|
|
({ data, listRef }) => {
|
|
return (
|
|
<ListItem.Swipeable
|
|
onPress={() => switchAccount(data.data)}
|
|
bottomDivider
|
|
onSwipeBegin={() => {
|
|
listRef.current.setNativeProps({
|
|
scrollEnabled: false,
|
|
});
|
|
}}
|
|
onSwipeEnd={() => {
|
|
listRef.current.setNativeProps({
|
|
scrollEnabled: true,
|
|
});
|
|
}}
|
|
containerStyle={tailwind("p-0 bg-[#07050A]")}
|
|
rightContent={(reset) => (
|
|
<Button
|
|
title="删除"
|
|
onPress={() => {
|
|
removeAccount(data.key, data.online);
|
|
reset();
|
|
}}
|
|
icon={{ name: "delete", color: "white" }}
|
|
buttonStyle={{ minHeight: "100%", backgroundColor: "red" }}
|
|
titleStyle={tailwind("text-base")}
|
|
/>
|
|
)}
|
|
>
|
|
<View style={tailwind("flex-1")}>
|
|
<View style={tailwind("flex-row py-3")}>
|
|
<Image
|
|
style={tailwind("w-12 h-12 rounded-full")}
|
|
source={data.data.account.avatar.images[0].urls[0]}
|
|
placeholder={blurhash}
|
|
contentFit="cover"
|
|
transition={1000}
|
|
cachePolicy="disk"
|
|
/>
|
|
<View
|
|
style={tailwind(
|
|
"flex flex-col flex-1 ml-2 justify-around items-start"
|
|
)}
|
|
>
|
|
<Text
|
|
style={tailwind("text-base text-white font-medium")}
|
|
numberOfLines={1}
|
|
ellipsizeMode="tail"
|
|
>
|
|
{data.data.account.name}
|
|
</Text>
|
|
<View
|
|
style={tailwind(
|
|
"flex-row items-center py-0.5 px-2 bg-[#FFFFFF1A] rounded-full"
|
|
)}
|
|
>
|
|
<NativeImage
|
|
source={require("../../../assets/icon/12DP/ID.png")}
|
|
/>
|
|
<Text
|
|
style={tailwind("text-white text-xs font-medium ml-0.5")}
|
|
>
|
|
{data.data.account.user_id}
|
|
</Text>
|
|
</View>
|
|
</View>
|
|
{data.online && (
|
|
<View style={tailwind("flex justify-center")}>
|
|
<Icon
|
|
type="ionicon"
|
|
name="checkmark"
|
|
size={24}
|
|
color="#27F5B7"
|
|
/>
|
|
</View>
|
|
)}
|
|
</View>
|
|
</View>
|
|
</ListItem.Swipeable>
|
|
);
|
|
},
|
|
[accountList]
|
|
);
|
|
|
|
//删除账号的时候禁用FlatList的滑动
|
|
const accountListRef = useRef(null);
|
|
//单个账号卡片
|
|
const renderItem = ({ item }) => (
|
|
<AccountCard data={item} listRef={accountListRef} />
|
|
);
|
|
|
|
return (
|
|
<View
|
|
style={{
|
|
paddingBottom: insets.bottom,
|
|
paddingLeft: insets.left,
|
|
paddingRight: insets.right,
|
|
...tailwind("flex-1"),
|
|
}}
|
|
>
|
|
<View style={tailwind("px-4 flex-1")}>
|
|
<FlatList
|
|
ref={accountListRef}
|
|
data={accountList}
|
|
renderItem={renderItem}
|
|
initialNumToRender={6}
|
|
ListEmptyComponent={<Empty type="nodata" />}
|
|
ListFooterComponent={
|
|
<TouchableOpacity
|
|
onPress={signOut}
|
|
style={tailwind(
|
|
"flex flex-row items-center justify-center py-2 bg-[#FFFFFF1A] rounded-full mt-4"
|
|
)}
|
|
>
|
|
<Icon type="ionicon" name="add-outline" size={24} color="white" />
|
|
<Text style={tailwind("text-white text-base font-medium ml-1")}>
|
|
添加或注册账号
|
|
</Text>
|
|
</TouchableOpacity>
|
|
}
|
|
/>
|
|
</View>
|
|
{isSwitching && (
|
|
<View
|
|
style={tailwind(
|
|
"absolute flex w-full h-full items-center justify-center"
|
|
)}
|
|
>
|
|
<ActivityIndicator size="large" />
|
|
</View>
|
|
)}
|
|
<MyModal
|
|
visible={warnModalVisible}
|
|
setVisible={setWarnModalVisible}
|
|
title="是否继续切换？"
|
|
content="当前账号为验证码登录，切换账号会导致当前登录状态失效，无法快速切换回此账号，需进行一次密码登录方可保存快速切换账号。"
|
|
cancel={() => {
|
|
setWarnModalVisible(false);
|
|
}}
|
|
confirm={() => {
|
|
setWarnModalVisible(false);
|
|
switchAccountWithPhoneNumLogin(warnModalData);
|
|
}}
|
|
/>
|
|
</View>
|
|
);
|
|
}
|