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.
712 lines
18 KiB
712 lines
18 KiB
import React,{useState} from "react"; |
|
import { |
|
View, |
|
Text, |
|
Image, |
|
StyleSheet, |
|
TouchableOpacity, |
|
TextInput, |
|
KeyboardAvoidingView, |
|
Platform, |
|
ScrollView |
|
} from "react-native"; |
|
import BackIcon from "../../components/BackIcon"; |
|
import fontSize from "../../utils/fontsizeUtils"; |
|
import { LinearGradient } from "expo-linear-gradient"; |
|
import widthUtils from "../../utils/widthUtils"; |
|
import TrapezoidIcon from "../../components/TrapezoidIcon"; |
|
|
|
|
|
export const InquiryScreen = () => { |
|
const [searchImg, setSearchImg] = useState(''); |
|
const updataImg = () => { |
|
setSearchImg("updataImg"); |
|
}; |
|
return ( |
|
<KeyboardAvoidingView |
|
behavior={Platform.OS === "ios" ? "padding" : "height"} |
|
style={styles.container} |
|
keyboardVerticalOffset={Platform.OS === "ios" ? 100 : 0} |
|
> |
|
<ScrollView |
|
contentContainerStyle={styles.scrollContent} |
|
keyboardShouldPersistTaps="handled" |
|
showsVerticalScrollIndicator={false} |
|
> |
|
<View style={styles.productInquirySection1}> |
|
<LinearGradient |
|
colors={["#C8DFFF", "#ECF5FF"]} |
|
style={styles.headerGradient} |
|
start={{ x: 0, y: 0 }} |
|
end={{ x: 0, y: 1 }} |
|
> |
|
<View> |
|
<View style={styles.titleContainer}> |
|
<View style={styles.title}> |
|
<BackIcon size={fontSize(24)}></BackIcon> |
|
</View> |
|
<View style={styles.titleText}> |
|
<Text style={styles.titleText}>图片询盘</Text> |
|
</View> |
|
</View> |
|
|
|
<View style={styles.heardContainer}> |
|
<View> |
|
<Text style={styles.heardContainer1Text}> |
|
通过上传图片，{"\n"}即可获取产品报价 |
|
</Text> |
|
</View> |
|
<View> |
|
<Text style={styles.heardContainer1Img}> |
|
<Image |
|
source={require("../../../assets/img/image_7a9fbefc.png")} |
|
style={styles.heardContainer1Img} |
|
></Image> |
|
</Text> |
|
</View> |
|
</View> |
|
</View> |
|
</LinearGradient> |
|
|
|
<View style={styles.productQuoteSection}> |
|
<View style={styles.label}> |
|
<View style={styles.labelItem}> |
|
<View style={styles.labelItemBox}> |
|
<TrapezoidIcon color={"#006be5"} /> |
|
<Text style={styles.labelItemText}>Demander un devis</Text> |
|
</View> |
|
</View> |
|
<View style={styles.labelItemTow}> |
|
<Text style={styles.labelItemTextTow}>Devisen cours</Text> |
|
</View> |
|
<View style={styles.labelItemThree}> |
|
<Text style={styles.labelItemTextThree}>Terminé</Text> |
|
</View> |
|
</View> |
|
|
|
{ |
|
searchImg ? <View style={styles.container}> |
|
<View style={styles.cardContainerWithButtons}> |
|
<View style={styles.productCardContainer}> |
|
<View style={styles.productCardContainer1}> |
|
<Image |
|
source={require("../../../assets/img/image_8f3bf967.png")} |
|
style={styles.articleThumbnailContainer} |
|
/> |
|
<View style={styles.articleTitleContainer}> |
|
<Text style={styles.elegantText}>Nom d'article</Text> |
|
<TextInput style={styles.articleTitleContainer1} /> |
|
</View> |
|
</View> |
|
<View style={styles.flexRowWithContent}> |
|
<View style={styles.centerColumnWithText}> |
|
<Text style={styles.quantityLabelTextStyle}> |
|
<Text style={styles.highlightedText}>*</Text> |
|
<Text>Quantité</Text> |
|
</Text> |
|
<TextInput style={styles.quantityContainer} /> |
|
</View> |
|
<View style={styles.matiereContainer}> |
|
<Text style={styles.quantityLabelTextStyle}>Matière</Text> |
|
<TextInput style={styles.quantityContainer} /> |
|
</View> |
|
</View> |
|
<View style={styles.linkContainer}> |
|
<Text style={styles.elegantText}>Lien</Text> |
|
<TextInput style={styles.contentWrapper} multiline={true} /> |
|
</View> |
|
<View style={styles.linkContainer}> |
|
<Text style={styles.elegantText}>Remarque</Text> |
|
<TextInput style={styles.contentWrapper} multiline={true} /> |
|
</View> |
|
</View> |
|
<View style={styles.buttonGroupConfirmation}> |
|
<TouchableOpacity style={styles.cancelButtonStyle}> |
|
<Text style={styles.cancelButtonText}>Cancel</Text> |
|
</TouchableOpacity> |
|
<TouchableOpacity style={styles.confirmButtonStyle}> |
|
<Text style={styles.confirmButtonText}>Confirm</Text> |
|
</TouchableOpacity> |
|
</View> |
|
</View> |
|
</View> : ( |
|
|
|
<View style={styles.productInfoContainer}> |
|
<View style={styles.productImageUploadSection}> |
|
<View style={styles.productInfoContainer1}> |
|
<Image |
|
source={require("../../../assets/img/image_fac2b0a9.png")} |
|
style={styles.productImageIcon} |
|
resizeMode="cover" |
|
/> |
|
<View style={styles.productQuoteContainer}> |
|
<Text style={styles.productInfoHeading}> |
|
Obtenir un devis de produit via une image |
|
</Text> |
|
<Text style={styles.productInfoMessage1}> |
|
Téléchargez une image du produit, {"\n"}et nous vous |
|
fournirons un devis détaillé ainsi{"\n"}que des informations |
|
sur le produit. |
|
</Text> |
|
</View> |
|
</View> |
|
<View style={styles.photoUploadContainer}> |
|
<TouchableOpacity style={styles.photoUploadContainer1} onPress={updataImg}> |
|
<LinearGradient |
|
colors={["#F5F9FF", "#D8E8FF", "#B9D6FF"]} |
|
style={styles.gradientBackground} |
|
start={{ x: 0, y: 0 }} |
|
end={{ x: 0, y: 1 }} |
|
> |
|
<View style={styles.photoUploadPromptContainer}> |
|
<Text style={styles.centerHeadingBoldWhite}> |
|
Prendre une photo ou{"\n"}télécharger une image |
|
</Text> |
|
</View> |
|
</LinearGradient> |
|
</TouchableOpacity> |
|
</View> |
|
</View> |
|
</View> |
|
) |
|
} |
|
</View> |
|
</View> |
|
</ScrollView> |
|
</KeyboardAvoidingView> |
|
); |
|
}; |
|
|
|
const styles = StyleSheet.create({ |
|
container: { |
|
flex: 1, |
|
width: "100%", |
|
}, |
|
scrollContent: { |
|
flexGrow: 1, |
|
}, |
|
productInquirySection1: { |
|
flexDirection: "column", |
|
alignItems: "stretch", |
|
backgroundColor: "#f0f0f0", |
|
}, |
|
titleContainer: { |
|
paddingLeft: 16, |
|
paddingTop: 16, |
|
flexDirection: "row", |
|
}, |
|
heardContainer: { |
|
paddingLeft: 16, |
|
paddingRight: 16, |
|
flexDirection: "row", |
|
justifyContent: "space-between", |
|
height: 234, |
|
marginTop: 50, |
|
}, |
|
|
|
heardContainer1Text: { |
|
fontSize: 16, |
|
fontWeight: 400, |
|
color: "#000", |
|
}, |
|
heardContainer1Img: { |
|
width: 116, |
|
height: 116, |
|
}, |
|
title: { |
|
flexDirection: "row", |
|
alignItems: "center", |
|
gap: 8, |
|
}, |
|
titleText: { |
|
flex: 1, |
|
fontSize: 20, |
|
fontWeight: 600, |
|
color: "#000", |
|
textAlign: "center", |
|
}, |
|
productInquirySection: { |
|
flexDirection: "column", |
|
paddingTop: 3, |
|
paddingBottom: 51, |
|
paddingLeft: 16, |
|
backgroundColor: "#f0f0f0", |
|
}, |
|
timeInfoContainer: { |
|
flexDirection: "row", |
|
gap: 8, |
|
alignItems: "center", |
|
justifyContent: "space-between", |
|
paddingLeft: 40, |
|
}, |
|
timeDisplay: { |
|
width: 42, |
|
fontWeight: "600", |
|
fontSize: 17, |
|
color: "black", |
|
textAlign: "center", |
|
}, |
|
productInquirySection2: { |
|
marginTop: 2, |
|
}, |
|
productInquirySection3: { |
|
flexDirection: "row", |
|
justifyContent: "space-between", |
|
width: "100%", |
|
}, |
|
imageUploadSection: { |
|
paddingBottom: 39, |
|
}, |
|
svgContainer: { |
|
width: 24, |
|
height: 24, |
|
justifyContent: "center", |
|
alignItems: "center", |
|
}, |
|
productInfoMessage: { |
|
paddingRight: 13, |
|
paddingLeft: 13, |
|
marginTop: 33, |
|
fontWeight: "400", |
|
fontSize: 16, |
|
lineHeight: 22, |
|
color: "black", |
|
textAlign: "left", |
|
}, |
|
productInquiryHeading: { |
|
paddingBottom: 118, |
|
fontWeight: "600", |
|
fontSize: 20, |
|
lineHeight: 22, |
|
color: "black", |
|
}, |
|
imageContainer: { |
|
width: 116, |
|
height: 116, |
|
borderWidth: 0, |
|
}, |
|
statusPanel: { |
|
flexDirection: "column", |
|
alignItems: "stretch", |
|
justifyContent: "center", |
|
width: "100%", |
|
paddingRight: 16, |
|
marginTop: -7, |
|
}, |
|
requestQuoteSection: { |
|
flexDirection: "column", |
|
alignItems: "stretch", |
|
justifyContent: "center", |
|
height: 50, |
|
paddingRight: 29, |
|
paddingLeft: 29, |
|
backgroundColor: "#0766e9", |
|
}, |
|
centerHeadingWhite: { |
|
fontWeight: "600", |
|
fontSize: 16, |
|
lineHeight: 18, |
|
color: "white", |
|
textAlign: "center", |
|
}, |
|
statusContainer: { |
|
flexDirection: "row", |
|
alignItems: "center", |
|
alignSelf: "center", |
|
justifyContent: "flex-end", |
|
minWidth: 167, |
|
height: 45, |
|
paddingRight: 20, |
|
paddingLeft: 20, |
|
marginTop: -45, |
|
marginLeft: -17, |
|
backgroundColor: "#fbfbfb", |
|
borderTopRightRadius: 25, |
|
}, |
|
inProgressLabel: { |
|
marginRight: 2, |
|
fontWeight: "600", |
|
fontSize: 14, |
|
lineHeight: 14, |
|
color: "grey", |
|
textAlign: "center", |
|
}, |
|
statusIndicator: { |
|
justifyContent: "center", |
|
maxWidth: "100%", |
|
height: 16, |
|
paddingRight: 3, |
|
paddingLeft: 3, |
|
backgroundColor: "#0766e9", |
|
}, |
|
whiteTextHeading: { |
|
fontWeight: "600", |
|
fontSize: 12, |
|
lineHeight: 14, |
|
color: "white", |
|
}, |
|
completionBox: { |
|
flexDirection: "row", |
|
alignItems: "center", |
|
alignSelf: "center", |
|
justifyContent: "center", |
|
minWidth: 139, |
|
height: 40, |
|
paddingLeft: 20, |
|
marginTop: -40, |
|
marginLeft: 259, |
|
backgroundColor: "#e8e8e8", |
|
borderTopRightRadius: 25, |
|
}, |
|
completedText: { |
|
fontWeight: "600", |
|
fontSize: 14, |
|
color: "grey", |
|
}, |
|
numberBox: { |
|
justifyContent: "center", |
|
maxWidth: "100%", |
|
height: 16, |
|
paddingRight: 3, |
|
paddingLeft: 3, |
|
marginLeft: 2, |
|
backgroundColor: "#0766e9", |
|
}, |
|
productQuoteSection: { |
|
paddingRight: 16, |
|
paddingLeft: 16, |
|
marginTop: -110, |
|
}, |
|
label: { |
|
width: "100%", |
|
height: 50, |
|
flexDirection: "row", |
|
justifyContent: "space-between", |
|
position: "relative", |
|
}, |
|
labelItem: { |
|
width: "33%", |
|
height: "101%", |
|
zIndex: 2, |
|
}, |
|
labelItemTow: { |
|
width: "66%", |
|
height: "90%", |
|
backgroundColor: "#fbfbfb", |
|
marginLeft: "-33%", |
|
zIndex: 1, |
|
position: "absolute", |
|
bottom: 0, |
|
left: "33%", |
|
borderTopLeftRadius: 20, |
|
borderTopRightRadius: 30, |
|
|
|
}, |
|
labelItemTextTow: { |
|
position: "absolute", |
|
color: "#808080", |
|
fontSize: 14, |
|
fontWeight: "600", |
|
width: "50%", |
|
textAlign: "center", |
|
paddingHorizontal: 10, |
|
flexWrap: "wrap", |
|
lineHeight: 16, |
|
right: 0, |
|
top: '50%', |
|
transform: [{ translateY: -8 }], |
|
}, |
|
labelItemThree: { |
|
width: "100%", |
|
height: "80%", |
|
backgroundColor: "#e8e8e8", |
|
marginLeft: "-66%", |
|
position: "absolute", |
|
bottom: 0, |
|
left: "66%", |
|
borderTopLeftRadius: 10, |
|
borderTopRightRadius: 30, |
|
}, |
|
labelItemBox: { |
|
width: "100%", |
|
height: "100%", |
|
alignItems: "center", |
|
justifyContent: "center", |
|
position: "relative", |
|
}, |
|
labelItemText: { |
|
position: "absolute", |
|
color: "white", |
|
fontSize: 14, |
|
fontWeight: "600", |
|
width: "100%", |
|
textAlign: "center", |
|
paddingHorizontal: 10, |
|
flexWrap: "wrap", |
|
lineHeight: 16, |
|
}, |
|
productInfoContainer: { |
|
flexDirection: "column", |
|
alignItems: "stretch", |
|
justifyContent: "center", |
|
backgroundColor: "#0766e9", |
|
borderBottomLeftRadius: 10, |
|
borderBottomRightRadius: 10, |
|
}, |
|
productImageUploadSection: { |
|
flexDirection: "column", |
|
alignItems: "stretch", |
|
justifyContent: "flex-start", |
|
maxWidth: "100%", |
|
height: 300, |
|
paddingBottom: 24, |
|
backgroundColor: "#0766e9", |
|
borderBottomLeftRadius: 10, |
|
borderBottomRightRadius: 10, |
|
}, |
|
productInfoContainer1: { |
|
flexDirection: "column", |
|
alignItems: "center", |
|
justifyContent: "flex-start", |
|
paddingTop: 24, |
|
paddingBottom: 22, |
|
paddingLeft: 29, |
|
paddingRight: 29, |
|
}, |
|
productImageIcon: { |
|
width: 60, |
|
height: 60, |
|
borderWidth: 0, |
|
}, |
|
productQuoteContainer: { |
|
flexDirection: "column", |
|
alignItems: "center", |
|
justifyContent: "flex-start", |
|
marginTop: 15, |
|
}, |
|
productInfoHeading: { |
|
fontWeight: "900", |
|
fontSize: 16, |
|
lineHeight: 20, |
|
color: "white", |
|
}, |
|
productInfoMessage1: { |
|
marginTop: 7, |
|
fontWeight: "400", |
|
fontSize: 12, |
|
lineHeight: 16, |
|
color: "white", |
|
textAlign: "center", |
|
}, |
|
photoUploadContainer: { |
|
flexDirection: "column", |
|
alignItems: "stretch", |
|
justifyContent: "center", |
|
height: widthUtils(80, 80).height, |
|
paddingRight: 29, |
|
paddingLeft: 29, |
|
}, |
|
photoUploadContainer1: { |
|
flexDirection: "column", |
|
alignItems: "center", |
|
justifyContent: "center", |
|
borderRadius: 30, |
|
shadowColor: "#fd5000", |
|
shadowOffset: { width: 2, height: 3 }, |
|
shadowOpacity: 0.2, |
|
shadowRadius: 4, |
|
elevation: 3, |
|
overflow: "hidden", |
|
height: "100%", |
|
}, |
|
gradientBackground: { |
|
width: "100%", |
|
height: "100%", |
|
justifyContent: "center", |
|
alignItems: "center", |
|
}, |
|
photoUploadPromptContainer: { |
|
flexDirection: "column", |
|
alignItems: "flex-end", |
|
justifyContent: "center", |
|
height: "100%", |
|
paddingRight: 20, |
|
}, |
|
centerHeadingBoldWhite: { |
|
fontWeight: "700", |
|
fontSize: 16, |
|
lineHeight: 20, |
|
color: "#002FA7", |
|
textAlign: "right", |
|
}, |
|
headerGradient: { |
|
paddingBottom: 20, |
|
}, |
|
labelItemTextThree: { |
|
position: "absolute", |
|
color: "#808080", |
|
fontSize: 14, |
|
fontWeight: "600", |
|
width: "33%", |
|
textAlign: "center", |
|
paddingHorizontal: 10, |
|
flexWrap: "wrap", |
|
lineHeight: 16, |
|
right: 0, |
|
top: '50%', |
|
transform: [{ translateY: -8 }], |
|
}, |
|
cardContainerWithButtons: { |
|
flexDirection: 'column', |
|
alignItems: 'stretch', |
|
justifyContent: 'center', |
|
paddingVertical: 20, |
|
paddingHorizontal: 16, |
|
paddingBottom: 38, |
|
backgroundColor: 'white', |
|
borderBottomLeftRadius: 10, |
|
borderBottomRightRadius: 10, |
|
}, |
|
productCardContainer: { |
|
flexDirection: 'column', |
|
gap: 18, |
|
alignItems: 'stretch', |
|
justifyContent: 'flex-start', |
|
paddingTop: 26, |
|
paddingRight: 28, |
|
paddingBottom: 23, |
|
paddingLeft: 24, |
|
backgroundColor: '#f2f6ff', |
|
}, |
|
productCardContainer1: { |
|
|
|
|
|
flexDirection: 'row', |
|
alignItems: 'flex-end', |
|
justifyContent: 'flex-start', |
|
}, |
|
articleThumbnailContainer: { |
|
|
|
width: 76, |
|
height: 76, |
|
borderWidth: 0, |
|
borderRadius: 5, |
|
resizeMode: 'cover', |
|
}, |
|
articleTitleContainer: { |
|
width: widthUtils(221, 221).width, |
|
marginLeft: 11, |
|
}, |
|
elegantText: { |
|
padding: 0, |
|
margin: 0, |
|
fontFamily: 'PingFang SC', |
|
fontSize: 12, |
|
fontWeight: '500', |
|
color: '#676b74', |
|
}, |
|
articleTitleContainer1: { |
|
width: '100%', |
|
height: 50, |
|
marginTop: 9, |
|
backgroundColor: 'white', |
|
}, |
|
flexRowWithContent: { |
|
|
|
|
|
flexDirection: 'row', |
|
alignItems: 'center', |
|
justifyContent: 'flex-start', |
|
}, |
|
centerColumnWithText: { |
|
flexDirection: 'column', |
|
alignItems: 'stretch', |
|
justifyContent: 'center', |
|
width: widthUtils(152, 152).width, |
|
}, |
|
quantityLabelTextStyle: { |
|
|
|
padding: 0, |
|
margin: 0, |
|
fontFamily: 'PingFang SC', |
|
fontSize: 12, |
|
fontWeight: '500', |
|
color: '#676b74', |
|
}, |
|
highlightedText: { |
|
fontFamily: 'PingFang SC', |
|
fontSize: 12, |
|
fontWeight: '500', |
|
color: '#fe1e00', |
|
}, |
|
quantityContainer: { |
|
|
|
|
|
height: 40, |
|
backgroundColor: 'white', |
|
}, |
|
matiereContainer: { |
|
flexDirection: 'column', |
|
alignItems: 'stretch', |
|
justifyContent: 'center', |
|
width: widthUtils(151, 151).width, |
|
marginLeft: 7, |
|
}, |
|
linkContainer: { |
|
}, |
|
contentWrapper: { |
|
|
|
width: '100%', |
|
height: 70, |
|
backgroundColor: 'white', |
|
}, |
|
buttonGroupConfirmation: { |
|
|
|
|
|
flexDirection: 'row', |
|
alignItems: 'center', |
|
justifyContent: 'center', |
|
marginTop: 26, |
|
marginRight: 14, |
|
marginLeft: 9, |
|
}, |
|
cancelButtonStyle: { |
|
|
|
|
|
|
|
width: 160, |
|
minWidth: 160, |
|
height: 46, |
|
justifyContent: 'center', |
|
alignItems: 'center', |
|
backgroundColor: '#f2f3f5', |
|
borderRadius: 43, |
|
}, |
|
confirmButtonStyle: { |
|
|
|
|
|
|
|
width: 160, |
|
minWidth: 160, |
|
height: 46, |
|
marginLeft: 19, |
|
justifyContent: 'center', |
|
alignItems: 'center', |
|
backgroundColor: '#002fa7', |
|
borderRadius: 43, |
|
}, |
|
cancelButtonText: { |
|
fontFamily: 'Source Han Sans CN', |
|
fontSize: 16, |
|
fontWeight: '500', |
|
lineHeight: 22, |
|
color: '#333333', |
|
}, |
|
confirmButtonText: { |
|
fontFamily: 'Source Han Sans CN', |
|
fontSize: 16, |
|
fontWeight: '500', |
|
lineHeight: 22, |
|
color: 'white', |
|
}, |
|
});
|
|
|