You can not select more than 25 topics
Topics must start with a letter or number, can include dashes ('-') and can be up to 35 characters long.
229 lines
6.3 KiB
229 lines
6.3 KiB
1 month ago
|
import {
|
||
|
View,
|
||
|
Text,
|
||
|
StyleSheet,
|
||
|
ScrollView,
|
||
|
TouchableOpacity,
|
||
|
} from "react-native";
|
||
|
import BackIcon from "../../components/BackIcon";
|
||
|
import FileEditIcon from "../../components/FileEditIcon";
|
||
|
import { useNavigation } from "@react-navigation/native";
|
||
|
import { addressApi, AddressItem, } from "../../services/api/addressApi";
|
||
|
import { useState ,useEffect,useCallback} from "react";
|
||
|
import { NativeStackNavigationProp } from "@react-navigation/native-stack";
|
||
|
import { useFocusEffect } from '@react-navigation/native';
|
||
|
import fontSize from "../../utils/fontsizeUtils";
|
||
|
import widthUtils from "../../utils/widthUtils";
|
||
|
export function MyAddress() {
|
||
|
const navigation = useNavigation<NativeStackNavigationProp<any>>();
|
||
|
const [addressList, setAddressList] = useState<AddressItem[]>();
|
||
|
const [address, setAddress] = useState<number>();
|
||
|
const getAddress = async () => {
|
||
|
const response = await addressApi.getAddress();
|
||
|
setAddressList(response.items);
|
||
|
};
|
||
|
useEffect(() => {
|
||
|
getAddress();
|
||
|
}, []);
|
||
|
const deleteAddress = async (address_id: number) => {
|
||
|
setAddressList(addressList?.filter((item) => item.address_id !== address_id));
|
||
|
addressApi.deleteAddress(address_id)
|
||
|
}
|
||
|
useFocusEffect(
|
||
|
useCallback(() => {
|
||
|
getAddress();
|
||
|
}, [])
|
||
|
);
|
||
|
|
||
|
const setAddressId = (address_id: number) => {
|
||
|
setAddress(address_id);
|
||
|
}
|
||
|
return (
|
||
|
<View style={styles.container}>
|
||
|
<View style={styles.header}>
|
||
|
<TouchableOpacity onPress={() => navigation.goBack()}>
|
||
|
<BackIcon />
|
||
|
</TouchableOpacity>
|
||
|
</View>
|
||
|
<ScrollView style={{flex:1}} showsVerticalScrollIndicator={false}>
|
||
|
{
|
||
|
addressList?.map((item) => (
|
||
|
<TouchableOpacity
|
||
|
key={item.address_id}
|
||
|
onPress={() => {
|
||
|
setAddressId(item.address_id);
|
||
|
}}
|
||
|
>
|
||
|
<View
|
||
|
|
||
|
style={[
|
||
|
styles.userCardContainer,
|
||
|
item.address_id === address ? styles.addressItemSelected : styles.addressItemNoSelected
|
||
|
]}
|
||
|
>
|
||
|
<View style={styles.userInfoCard}>
|
||
|
<View style={styles.userCardInfo2}>
|
||
|
<Text
|
||
|
style={styles.userCardInfo}
|
||
|
numberOfLines={1}
|
||
|
ellipsizeMode="tail"
|
||
|
>
|
||
|
{item.receiver_first_name} .{" "}
|
||
|
{item.receiver_last_name}
|
||
|
</Text>
|
||
|
<Text
|
||
|
style={styles.userCardInfo1}
|
||
|
numberOfLines={1}
|
||
|
ellipsizeMode="tail"
|
||
|
>
|
||
|
{item.receiver_phone}
|
||
|
</Text>
|
||
|
<View style={styles.addressEmit}>
|
||
|
<Text>设置默认地址</Text>
|
||
|
<TouchableOpacity
|
||
|
onPress={() => deleteAddress(item.address_id)}
|
||
|
>
|
||
|
<Text>删除</Text>
|
||
|
</TouchableOpacity>
|
||
|
</View>
|
||
|
</View>
|
||
|
{item.is_default === 1 && (
|
||
|
<View style={styles.centeredBoxWithText}>
|
||
|
<Text style={styles.blueHeadingTextStyle}>默认</Text>
|
||
|
</View>
|
||
|
)}
|
||
|
</View>
|
||
|
<TouchableOpacity
|
||
|
onPress={() => {
|
||
|
navigation.navigate("AddRess", {
|
||
|
address: item,
|
||
|
});
|
||
|
}}
|
||
|
>
|
||
|
<View style={styles.svgContainer}>
|
||
|
<FileEditIcon size={24} />
|
||
|
</View>
|
||
|
</TouchableOpacity>
|
||
|
</View>
|
||
|
</TouchableOpacity>
|
||
|
))
|
||
|
}
|
||
|
|
||
|
</ScrollView>
|
||
|
<TouchableOpacity
|
||
|
style={styles.addButton}
|
||
|
onPress={() => navigation.navigate("AddRess")}
|
||
|
>
|
||
|
<Text style={styles.addButtonText}>添加新地址</Text>
|
||
|
</TouchableOpacity>
|
||
|
</View>
|
||
|
);
|
||
|
}
|
||
|
|
||
|
const styles = StyleSheet.create({
|
||
|
container: {
|
||
|
flex: 1,
|
||
|
padding: 16,
|
||
|
backgroundColor: "#f8f8f8",
|
||
|
},
|
||
|
header: {
|
||
|
paddingVertical: 16,
|
||
|
},
|
||
|
userCardContainer1: {
|
||
|
marginTop: 20,
|
||
|
},
|
||
|
addressItemSelected: {
|
||
|
borderColor: "#002fa7",
|
||
|
borderWidth: 2,
|
||
|
},
|
||
|
addressItemNoSelected: {
|
||
|
borderColor: "#d0d0d0",
|
||
|
borderWidth: 2,
|
||
|
},
|
||
|
userCardContainer: {
|
||
|
flexDirection: "row",
|
||
|
gap: 8,
|
||
|
alignItems: "flex-start",
|
||
|
justifyContent: "space-between",
|
||
|
width: "100%",
|
||
|
paddingTop: 15,
|
||
|
paddingRight: 10,
|
||
|
paddingBottom: 10,
|
||
|
paddingLeft: 11,
|
||
|
backgroundColor: "white",
|
||
|
borderRadius: 5,
|
||
|
marginBottom: 10,
|
||
|
},
|
||
|
userInfoCard: {
|
||
|
flexDirection: "row",
|
||
|
alignItems: "flex-start",
|
||
|
justifyContent: "flex-start",
|
||
|
flex: 1,
|
||
|
marginRight: 8,
|
||
|
},
|
||
|
userCardInfo2: {
|
||
|
flex: 1,
|
||
|
marginRight: 8,
|
||
|
},
|
||
|
userCardInfo: {
|
||
|
fontSize: fontSize(18),
|
||
|
lineHeight: 22,
|
||
|
fontFamily: "PingFang SC",
|
||
|
fontWeight: "500",
|
||
|
color: "black",
|
||
|
flex: 1,
|
||
|
},
|
||
|
userCardInfo1: {
|
||
|
fontSize: fontSize(18),
|
||
|
lineHeight: 22,
|
||
|
fontFamily: "PingFang SC",
|
||
|
fontWeight: "500",
|
||
|
color: "#6b7280",
|
||
|
marginTop: 10,
|
||
|
flex: 1,
|
||
|
width: "100%",
|
||
|
},
|
||
|
centeredBoxWithText: {
|
||
|
flexDirection: "column",
|
||
|
alignItems: "stretch",
|
||
|
justifyContent: "center",
|
||
|
height: 26,
|
||
|
paddingRight: 11,
|
||
|
paddingLeft: 11,
|
||
|
marginLeft: 8,
|
||
|
backgroundColor: "#edf3ff",
|
||
|
borderRadius: 5,
|
||
|
},
|
||
|
blueHeadingTextStyle: {
|
||
|
fontSize: fontSize(13),
|
||
|
fontFamily: "PingFang SC",
|
||
|
fontWeight: "500",
|
||
|
color: "#002fa7",
|
||
|
},
|
||
|
svgContainer: {
|
||
|
width: widthUtils(24,24).width,
|
||
|
height: widthUtils(24,24).height,
|
||
|
color: "#0051ff",
|
||
|
marginLeft: "auto",
|
||
|
},
|
||
|
addressEmit: {
|
||
|
paddingTop: 10,
|
||
|
flexDirection: "row",
|
||
|
gap: 10,
|
||
|
},
|
||
|
addButton: {
|
||
|
width: "100%",
|
||
|
height: widthUtils(60,60).height,
|
||
|
backgroundColor: "#002fa7",
|
||
|
justifyContent: "center",
|
||
|
alignItems: "center",
|
||
|
borderRadius: 5,
|
||
|
marginTop: 10,
|
||
|
},
|
||
|
addButtonText: {
|
||
|
color: "white",
|
||
|
fontSize: fontSize(16),
|
||
|
fontWeight: "500",
|
||
|
},
|
||
|
});
|