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.
534 lines
14 KiB
534 lines
14 KiB
import React from "react"; |
|
import { View, Text, Image, StyleSheet, ImageBackground,TouchableOpacity } from "react-native"; |
|
import SettingsIcon from "../components/SettingsIcon"; |
|
import fontSize from "../utils/fontsizeUtils"; |
|
import { useNavigation } from "@react-navigation/native"; |
|
import { NativeStackNavigationProp } from "@react-navigation/native-stack"; |
|
import { userApi } from '../services/api/userApi'; |
|
import { settingApi } from '../services/api/setting'; |
|
import AsyncStorage from '@react-native-async-storage/async-storage'; |
|
type RootStackParamList = { |
|
SettingList: undefined; |
|
Home: undefined; |
|
}; |
|
|
|
export const ProfileScreen = () => { |
|
const handleLogin = async () => { |
|
const data = settingApi.postFirstLogin(221) |
|
console.log(data); |
|
|
|
const params = { |
|
grant_type:'password', |
|
username:'test', |
|
password:'string', |
|
client_id:'2', |
|
client_secret:'', |
|
scope:'', |
|
} |
|
const res = await userApi.login(params); |
|
const token = res.token_type + ' ' + res.access_token; |
|
await AsyncStorage.setItem('token', token); |
|
navigation.navigate('Home'); |
|
} |
|
|
|
const navigation = useNavigation<NativeStackNavigationProp<RootStackParamList>>(); |
|
return ( |
|
<View style={styles.flexColumnContainer1}> |
|
<ImageBackground |
|
source={require("../../assets/img/image_8e319050.png")} |
|
style={styles.timecardWidget} |
|
resizeMode="cover" |
|
> |
|
<View style={styles.flexColumnContainer}> |
|
<View style={styles.flexContainerWithImageAndText}> |
|
<View style={styles.flexRowWithContent}> |
|
<Image |
|
source={require("../../assets/img/image_94051480.jpeg")} |
|
style={styles.profileImageCircle} |
|
/> |
|
<View style={styles.customerInfoPanel}> |
|
<View> |
|
<Text style={styles.uniqueHeaderTextStyle}>Bellael</Text> |
|
<Text style={styles.elegantText}>ID: 11</Text> |
|
</View> |
|
<View style={styles.transactionSummaryBox}> |
|
<View style={styles.svgContainer}> |
|
{/* SVG would be replaced with a React Native SVG component or an image */} |
|
</View> |
|
<Text style={styles.soldeTextDisplayStyle}>Solde</Text> |
|
</View> |
|
</View> |
|
</View> |
|
<View style={styles.flexRowWithContent}> |
|
<Image |
|
source={require("../../assets/img/image_d9d8fe1f.png")} |
|
style={styles.imageContainerWithText} |
|
/> |
|
<View style={styles.financialInfoContainer}> |
|
<Text style={styles.whiteTextHeading}>FCFA</Text> |
|
<TouchableOpacity onPress={() => navigation.navigate("SettingList")}> |
|
<View style={styles.svgContainer1}> |
|
<SettingsIcon size={fontSize(24)} color="white" /> |
|
</View> |
|
</TouchableOpacity> |
|
</View> |
|
</View> |
|
</View> |
|
<View style={styles.gradientCardContainer}> |
|
<ImageBackground |
|
source={require("../../assets/img/image_7dbf30dc.png")} |
|
style={styles.promoCardContainer2} |
|
resizeMode="cover" |
|
> |
|
<View style={styles.promoCardContainer2}> |
|
<View style={styles.flexRowWithContent}> |
|
<View style={styles.productInfoContainer}> |
|
<Image |
|
source={require("../../assets/img/image_7263ddf4.png")} |
|
style={styles.imageWithTextRatio} |
|
/> |
|
<Text style={styles.goldenItalicHeading}>2</Text> |
|
</View> |
|
<View style={styles.discountSectionContainer}> |
|
<View style={styles.nestedContentContainer}> |
|
{/* <Image |
|
source={require('../../assets/img/image_124ce882.png')} |
|
style={[styles.negativeMarginTop1, styles.imgStyleF62]} |
|
/> |
|
<View style={styles.negativeMarginTop2}> |
|
<Image |
|
source={require('../../assets/img/image_124ce882.png')} |
|
style={styles.imageContainer2} |
|
/> |
|
</View> */} |
|
{/* <View style={styles.negativeMarginTop2}> |
|
<Image |
|
source={require('../../assets/img/image_124ce882.png')} |
|
style={styles.imageContainer2} |
|
/> |
|
</View> |
|
<View style={styles.negativeMarginTop2}> |
|
<Image |
|
source={require('../../assets/img/image_124ce882.png')} |
|
style={styles.imageContainer2} |
|
/> |
|
</View> */} |
|
{/* <View style={styles.negativeMarginTop2}> |
|
<Image |
|
source={require('../../assets/img/image_124ce882.png')} |
|
style={styles.imageContainer2} |
|
/> |
|
</View> */} |
|
</View> |
|
</View> |
|
<View style={styles.productSummaryBlock}> |
|
<Text style={styles.goldenTextHeading}>40000/50000</Text> |
|
<View style={styles.negativeMarginTop}></View> |
|
</View> |
|
</View> |
|
<View style={styles.promoCardContainer}></View> |
|
</View> |
|
</ImageBackground> |
|
</View> |
|
</View> |
|
</ImageBackground> |
|
<View style={styles.verticalCenterImageGallery}> |
|
<TouchableOpacity onPress={handleLogin}> |
|
<Text>登录</Text> |
|
</TouchableOpacity> |
|
</View> |
|
</View> |
|
); |
|
}; |
|
|
|
const styles = StyleSheet.create({ |
|
flexColumnContainer1: { |
|
display: "flex", |
|
flexDirection: "column", |
|
alignItems: "stretch", |
|
justifyContent: "flex-start", |
|
backgroundColor: "#f0f0f0", |
|
width: "100%", |
|
}, |
|
timecardWidget: { |
|
display: "flex", |
|
flexDirection: "column", |
|
alignItems: "stretch", |
|
justifyContent: "flex-start", |
|
height: 273, |
|
}, |
|
timeContainer1: { |
|
display: "flex", |
|
flexDirection: "column", |
|
alignItems: "flex-start", |
|
justifyContent: "flex-start", |
|
height: 43, |
|
paddingTop: 21, |
|
}, |
|
timeContainer2: { |
|
display: "flex", |
|
flexDirection: "row", |
|
alignItems: "center", |
|
alignSelf: "stretch", |
|
justifyContent: "space-between", |
|
}, |
|
timeContainer: { |
|
display: "flex", |
|
flex: 1, |
|
flexDirection: "row", |
|
gap: 10, |
|
alignItems: "center", |
|
justifyContent: "center", |
|
minWidth: 153, |
|
paddingRight: 6, |
|
paddingLeft: 16, |
|
}, |
|
timeDisplayStyle: { |
|
padding: 0, |
|
margin: 0, |
|
fontSize: 17, |
|
fontWeight: "600", |
|
fontFamily: |
|
"SF Pro, -apple-system, system-ui, BlinkMacSystemFont, sans-serif", |
|
color: "white", |
|
}, |
|
timeDisplayContainer: { |
|
width: 124, |
|
height: 10, |
|
}, |
|
timeDisplayContainer1: { |
|
flex: 1, |
|
width: 153, |
|
height: 13, |
|
}, |
|
flexColumnContainer: { |
|
display: "flex", |
|
flexDirection: "column", |
|
alignItems: "stretch", |
|
justifyContent: "flex-start", |
|
paddingVertical: 12, |
|
paddingHorizontal: 20, |
|
paddingBottom: 3.5, |
|
}, |
|
flexContainerWithImageAndText: { |
|
display: "flex", |
|
flexDirection: "row", |
|
gap: 8, |
|
alignItems: "flex-start", |
|
justifyContent: "space-between", |
|
}, |
|
flexRowWithContent: { |
|
display: "flex", |
|
flexDirection: "row", |
|
alignItems: "center", |
|
justifyContent: "flex-start", |
|
}, |
|
profileImageCircle: { |
|
width: 70, |
|
height: 70, |
|
borderWidth: 0, |
|
borderRadius: 35, |
|
resizeMode: "cover", |
|
}, |
|
customerInfoPanel: { |
|
marginLeft: 15, |
|
}, |
|
uniqueHeaderTextStyle: { |
|
padding: 0, |
|
margin: 0, |
|
fontSize: 20, |
|
fontWeight: "400", |
|
fontFamily: "Archivo Black, sans-serif", |
|
color: "white", |
|
}, |
|
elegantText: { |
|
padding: 0, |
|
margin: 0, |
|
marginTop: 6.75, |
|
fontSize: 16, |
|
fontWeight: "500", |
|
fontFamily: "PingFang SC", |
|
lineHeight: 22, |
|
color: "white", |
|
}, |
|
transactionSummaryBox: { |
|
display: "flex", |
|
flexDirection: "row", |
|
alignItems: "center", |
|
justifyContent: "flex-start", |
|
marginTop: 8, |
|
}, |
|
svgContainer: { |
|
display: "flex", |
|
width: 24, |
|
height: 24, |
|
color: "#ffffff", |
|
}, |
|
soldeTextDisplayStyle: { |
|
padding: 0, |
|
margin: 0, |
|
marginLeft: 3, |
|
fontSize: 16, |
|
fontWeight: "500", |
|
fontFamily: "PingFang SC", |
|
lineHeight: 22, |
|
color: "white", |
|
}, |
|
imageContainerWithText: { |
|
width: 24, |
|
height: 16, |
|
borderWidth: 0, |
|
resizeMode: "cover", |
|
}, |
|
financialInfoContainer: { |
|
display: "flex", |
|
flexDirection: "row", |
|
alignItems: "center", |
|
justifyContent: "flex-start", |
|
marginLeft: 3, |
|
}, |
|
whiteTextHeading: { |
|
padding: 0, |
|
margin: 0, |
|
fontSize: 16, |
|
fontWeight: "500", |
|
fontFamily: "PingFang SC", |
|
lineHeight: 22, |
|
color: "white", |
|
}, |
|
svgContainer1: { |
|
display: "flex", |
|
width: 24, |
|
height: 24, |
|
marginLeft: 11, |
|
color: "#ffffff", |
|
}, |
|
gradientCardContainer: { |
|
marginTop: 10, |
|
backgroundColor: "#3A3128", |
|
borderRadius: 10, |
|
}, |
|
promoCardContainer2: { |
|
display: "flex", |
|
flexDirection: "column", |
|
alignItems: "stretch", |
|
justifyContent: "flex-start", |
|
height: 99, |
|
paddingTop: 8, |
|
paddingRight: 9.5, |
|
paddingBottom: 15, |
|
paddingLeft: 9, |
|
}, |
|
productInfoContainer: { |
|
flexDirection: "row", |
|
alignItems: "flex-start", |
|
justifyContent: "flex-start", |
|
}, |
|
imageWithTextRatio: { |
|
width: 56, |
|
height: 23.5, |
|
}, |
|
goldenItalicHeading: { |
|
padding: 0, |
|
paddingBottom: 2.75, |
|
margin: 0, |
|
marginLeft: 1, |
|
fontSize: 34, |
|
fontWeight: "900", |
|
fontStyle: "italic", |
|
fontFamily: "Segoe UI", |
|
lineHeight: 22, |
|
color: "#f8cb7a", |
|
}, |
|
discountSectionContainer: { |
|
display: "flex", |
|
flexDirection: "column", |
|
alignItems: "stretch", |
|
justifyContent: "flex-start", |
|
marginLeft: 4, |
|
}, |
|
discountAmountContainer: { |
|
display: "flex", |
|
flexDirection: "column", |
|
alignItems: "center", |
|
justifyContent: "flex-start", |
|
}, |
|
discountPercentageTextStyle: { |
|
padding: 0, |
|
margin: 0, |
|
fontSize: 12, |
|
fontWeight: "900", |
|
fontStyle: "italic", |
|
fontFamily: "Segoe UI", |
|
color: "#4e2000", |
|
}, |
|
negativeMarginTopDiscountPercentage: { |
|
marginTop: -22, |
|
}, |
|
nestedContentContainer: { |
|
marginTop: -25, |
|
}, |
|
negativeMarginTop2: { |
|
marginTop: -36, |
|
}, |
|
imageContainer2: { |
|
width: 36, |
|
height: 36, |
|
}, |
|
negativeMarginTop1: { |
|
marginTop: -36, |
|
}, |
|
imgStyleF62: { |
|
width: "100%", |
|
height: 36, |
|
}, |
|
discountStatusContainer: { |
|
paddingRight: 7, |
|
paddingLeft: 7, |
|
marginTop: -23, |
|
}, |
|
discountStatusLabel: { |
|
padding: 0, |
|
margin: 0, |
|
fontSize: 10, |
|
fontWeight: "600", |
|
fontStyle: "italic", |
|
fontFamily: "Segoe UI", |
|
color: "#4e2000", |
|
}, |
|
productSummaryBlock: { |
|
paddingTop: 4, |
|
paddingBottom: 6.5, |
|
marginLeft: 16, |
|
}, |
|
goldenTextHeading: { |
|
padding: 0, |
|
margin: 0, |
|
fontSize: 13, |
|
fontWeight: "600", |
|
fontFamily: "PingFang SC", |
|
color: "#f8cb7a", |
|
}, |
|
negativeMarginTop: { |
|
marginTop: -0.5, |
|
}, |
|
horizontalLineWidget: { |
|
width: 235, |
|
height: 4, |
|
}, |
|
promoCardContainer: { |
|
display: "flex", |
|
flexDirection: "row", |
|
alignItems: "stretch", |
|
justifyContent: "flex-start", |
|
height: 34, |
|
marginTop: 6, |
|
}, |
|
promoCardContainer1: { |
|
display: "flex", |
|
flexDirection: "column", |
|
alignItems: "stretch", |
|
justifyContent: "flex-end", |
|
}, |
|
pingfangScTextWhite: { |
|
padding: 0, |
|
margin: 0, |
|
fontSize: 11, |
|
fontWeight: "400", |
|
fontFamily: "PingFang SC", |
|
lineHeight: 17, |
|
color: "white", |
|
textAlign: "left", |
|
letterSpacing: -0.1, |
|
}, |
|
promoDetailsContainer: { |
|
display: "flex", |
|
flexDirection: "row", |
|
alignItems: "center", |
|
justifyContent: "flex-start", |
|
marginTop: -17, |
|
}, |
|
goldenLabel: { |
|
width: "30%", |
|
padding: 0, |
|
margin: 0, |
|
fontSize: 12, |
|
fontWeight: "900", |
|
fontFamily: "MiSans", |
|
lineHeight: 15, |
|
color: "#f5c164", |
|
}, |
|
goldenText: { |
|
width: "70%", |
|
padding: 0, |
|
paddingRight: 24, |
|
paddingLeft: 37, |
|
margin: 0, |
|
fontSize: 12, |
|
fontWeight: "900", |
|
fontFamily: "MiSans", |
|
lineHeight: 15, |
|
color: "#f5c164", |
|
}, |
|
goldenGradientBox: { |
|
display: "flex", |
|
flexDirection: "column", |
|
alignItems: "center", |
|
justifyContent: "center", |
|
paddingRight: 6, |
|
paddingLeft: 6, |
|
marginLeft: 11, |
|
backgroundColor: "#F5C164", |
|
borderRadius: 50, |
|
}, |
|
featuredText: { |
|
padding: 0, |
|
margin: 0, |
|
fontSize: 11, |
|
fontWeight: "700", |
|
fontFamily: "Source Han Sans CN", |
|
color: "#473c30", |
|
}, |
|
verticalCenterImageGallery: { |
|
display: "flex", |
|
flexDirection: "column", |
|
alignItems: "stretch", |
|
justifyContent: "center", |
|
paddingTop: 21.5, |
|
paddingRight: 20, |
|
paddingBottom: 118, |
|
paddingLeft: 20, |
|
}, |
|
cardContainer1: { |
|
display: "flex", |
|
flexDirection: "column", |
|
alignItems: "stretch", |
|
justifyContent: "flex-start", |
|
paddingTop: 14, |
|
paddingRight: 9, |
|
paddingBottom: 14, |
|
paddingLeft: 10, |
|
backgroundColor: "white", |
|
borderRadius: 10, |
|
}, |
|
imageContainer: { |
|
height: 212, |
|
borderWidth: 0, |
|
resizeMode: "cover", |
|
}, |
|
cardContainer: { |
|
paddingTop: 15, |
|
paddingRight: 11, |
|
paddingBottom: 17, |
|
paddingLeft: 11, |
|
marginTop: 20, |
|
backgroundColor: "white", |
|
borderRadius: 10, |
|
}, |
|
imageContainer1: { |
|
width: "100%", |
|
height: 228, |
|
borderWidth: 0, |
|
resizeMode: "cover", |
|
}, |
|
});
|
|
|