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.
592 lines
16 KiB
592 lines
16 KiB
import React,{useState} from "react"; |
|
import { |
|
View, |
|
Text, |
|
Image, |
|
StyleSheet, |
|
TouchableOpacity, |
|
TextInput, |
|
KeyboardAvoidingView, |
|
Platform, |
|
ScrollView, |
|
SafeAreaView, |
|
StatusBar |
|
} 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"; |
|
import { useNavigation } from "@react-navigation/native"; |
|
|
|
export const InquiryScreen = () => { |
|
const [searchImg, setSearchImg] = useState(''); |
|
const navigation = useNavigation(); |
|
|
|
const updataImg = () => { |
|
setSearchImg("updataImg"); |
|
}; |
|
|
|
return ( |
|
<SafeAreaView style={styles.safeArea}> |
|
<StatusBar barStyle="dark-content" backgroundColor="#C8DFFF" /> |
|
<KeyboardAvoidingView |
|
behavior={Platform.OS === "ios" ? "padding" : "height"} |
|
style={styles.keyboardAvoidingContainer} |
|
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}> |
|
<TouchableOpacity |
|
style={styles.backButton} |
|
onPress={() => navigation.goBack()} |
|
> |
|
<BackIcon size={fontSize(24)} /> |
|
</TouchableOpacity> |
|
<View style={styles.titleTextContainer}> |
|
<Text style={styles.titleText}>图片询盘</Text> |
|
</View> |
|
<View style={styles.placeholder} /> |
|
</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} |
|
/> |
|
</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}>请求报价</Text> |
|
</View> |
|
</View> |
|
<View style={styles.labelItemTow}> |
|
<Text style={styles.labelItemTextTow}>进行中</Text> |
|
</View> |
|
<View style={styles.labelItemThree}> |
|
<Text style={styles.labelItemTextThree}>已完成</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}>商品名称</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>数量</Text> |
|
</Text> |
|
<TextInput style={styles.quantityContainer} /> |
|
</View> |
|
<View style={styles.matiereContainer}> |
|
<Text style={styles.quantityLabelTextStyle}>材质</Text> |
|
<TextInput style={styles.quantityContainer} /> |
|
</View> |
|
</View> |
|
<View style={styles.linkContainer}> |
|
<Text style={styles.elegantText}>链接</Text> |
|
<TextInput style={styles.contentWrapper} multiline={true} /> |
|
</View> |
|
<View style={styles.linkContainer}> |
|
<Text style={styles.elegantText}>备注</Text> |
|
<TextInput style={styles.contentWrapper} multiline={true} /> |
|
</View> |
|
</View> |
|
<View style={styles.buttonGroupConfirmation}> |
|
<TouchableOpacity |
|
style={styles.cancelButtonStyle} |
|
onPress={() => setSearchImg('')} |
|
> |
|
<Text style={styles.cancelButtonText}>取消</Text> |
|
</TouchableOpacity> |
|
<TouchableOpacity style={styles.confirmButtonStyle}> |
|
<Text style={styles.confirmButtonText}>确认</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}> |
|
通过图片获取产品报价 |
|
</Text> |
|
<Text style={styles.productInfoMessage1}> |
|
上传产品图片，{"\n"}我们将为您提供详细报价{"\n"}和产品信息。 |
|
</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}> |
|
拍照或{"\n"}上传图片 |
|
</Text> |
|
</View> |
|
</LinearGradient> |
|
</TouchableOpacity> |
|
</View> |
|
</View> |
|
</View> |
|
) |
|
} |
|
</View> |
|
</View> |
|
</ScrollView> |
|
</KeyboardAvoidingView> |
|
</SafeAreaView> |
|
); |
|
}; |
|
|
|
const styles = StyleSheet.create({ |
|
safeArea: { |
|
flex: 1, |
|
backgroundColor: '#C8DFFF', |
|
}, |
|
keyboardAvoidingContainer: { |
|
flex: 1, |
|
width: "100%", |
|
}, |
|
container: { |
|
flex: 1, |
|
width: "100%", |
|
}, |
|
scrollContent: { |
|
flexGrow: 1, |
|
}, |
|
productInquirySection1: { |
|
flexDirection: "column", |
|
alignItems: "stretch", |
|
backgroundColor: "#f0f0f0", |
|
}, |
|
titleContainer: { |
|
paddingHorizontal: 16, |
|
paddingTop: 16, |
|
flexDirection: "row", |
|
alignItems: "center", |
|
justifyContent: "space-between", |
|
}, |
|
backButton: { |
|
width: widthUtils(24, 24).width, |
|
}, |
|
titleTextContainer: { |
|
flex: 1, |
|
alignItems: "center", |
|
}, |
|
titleText: { |
|
fontSize: fontSize(18), |
|
fontWeight: "600", |
|
textAlign: "center", |
|
}, |
|
placeholder: { |
|
width: widthUtils(24, 24).width, |
|
opacity: 0, |
|
}, |
|
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, |
|
}, |
|
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', |
|
}, |
|
});
|
|
|