罗广聪

产品详情页

... ... @@ -5,7 +5,9 @@ import {
View,
Image,
Dimensions,
ScrollView
ScrollView,
Text,
TouchableOpacity,
} from "react-native";
import { StackNavigator, TabNavigator } from "react-navigation";
... ... @@ -16,17 +18,20 @@ export default class CommonImageView extends Component {
products: [
{
headerImage: require("../assets/home/product_header_1.jpg"),
title: "",
subscribe: "",
price: ""
},{
title: "平安e生保2017版-100万(有社保含新农合)",
subscribe: "200万医疗险/续保至99岁免审核",
price: "¥174.00",
detailImage: "",
},
{
headerImage: require("../assets/home/product_header_2.jpg"),
title: "",
subscribe: "",
price: "",
title: "泰康在线“住院宝”必备版(0-49周岁)",
subscribe: "承保疾病,意外伤害,性价比高,住院有补贴,30-49岁一家三口可买",
price: "¥249.00",
detailImage: "",
}
]
}
};
}
render() {
console.log("Image index", this.props.navigation.state.params.index);
... ... @@ -34,8 +39,26 @@ export default class CommonImageView extends Component {
const item = this.state.products[index];
return (
<View style={styles.container}>
<ScrollView>
<ScrollView style={styles.scrollViewContainer}>
<View style={styles.headerContainer}>
{/* 顶部图片 */}
<Image
style={styles.headerImage}
resizeMode="contain"
source={item.headerImage}
/>
{/* 标题 */}
<View style={styles.titleContainer}>
<Text style={styles.title}>{item.title}</Text>
<Text style={styles.subscribe}>{item.subscribe}</Text>
</View>
</View>
{/* 产品特色 */}
<View style={styles.midContaier}>
<Image source={require("../assets/home/ic_feature.png")} style={{width: 16, height: 17,}} />
<Text style={styles.midText}>产品特色</Text>
</View>
{/* 图片详情 */}
{index == 0 ? (
<Image
style={styles.imgOne}
... ... @@ -43,13 +66,22 @@ export default class CommonImageView extends Component {
source={require("../assets/home/product_long_1.jpg")}
/>
) : (
<Image
style={styles.imgTwo}
resizeMode="contain"
source={require("../assets/home/product_long_2.jpg")}
/>
<Image
style={styles.imgTwo}
resizeMode="contain"
source={require("../assets/home/product_long_2.jpg")}
/>
)}
</ScrollView>
{/* 悬浮按钮 */}
<View style={styles.footer}>
<View style={styles.footerLeft}>
<Text style={styles.price}>{item.price}</Text>
</View>
<TouchableOpacity style={styles.footerRight}>
<Text style={styles.button}>立即投保</Text>
</TouchableOpacity>
</View>
</View>
);
}
... ... @@ -57,15 +89,81 @@ export default class CommonImageView extends Component {
const styles = StyleSheet.create({
container: {
flex: 1,
justifyContent: "flex-start",
backgroundColor: "#EFEFEF",
backgroundColor: "#EFEFEF"
},
scrollViewContainer: {},
headerContainer: {},
headerImage: {
width: Dimensions.get("window").width,
height: Dimensions.get("window").width * 300 / 750
},
titleContainer: {
backgroundColor: "white",
paddingLeft: 15,
paddingRight: 15,
paddingTop: 10,
paddingBottom: 10,
},
title: {
fontSize: 16,
color: "#242424",
lineHeight: 22
},
subscribe: {
fontSize: 13,
color: "#7A7A7A",
lineHeight: 15
},
midContaier: {
marginTop: 10,
height: 45,
backgroundColor: "white",
flexDirection: "row",
paddingLeft: 13,
alignItems: "center",
},
midText: {
marginLeft: 10,
fontSize: 15,
color: "#242424",
},
imgOne: {
width: Dimensions.get("window").width,
height: Dimensions.get("window").width * 3118 / 640,
height: Dimensions.get("window").width * 3118 / 640
},
imgTwo: {
width: Dimensions.get("window").width,
height: Dimensions.get("window").width * 1651 / 690,
}
height: Dimensions.get("window").width * 1651 / 690
},
footer: {
position: "absolute",
bottom: 0,
backgroundColor: "white",
height: 49,
width: Dimensions.get("window").width,
flexDirection: "row",
flex: 1,
},
footerLeft: {
flex: 1,
justifyContent: "center",
alignItems: "flex-start",
paddingLeft: 15,
},
price: {
color: "#1B9341",
fontSize: 18,
},
footerRight: {
backgroundColor: "#1B9341",
width: 144,
justifyContent: "center",
alignItems: "center",
},
button: {
color: "white",
fontSize: 16,
},
});
... ...

47.1 KB | W: | H:

38.2 KB | W: | H:

  • 2-up
  • Swipe
  • Onion skin

38.2 KB | W: | H:

47.1 KB | W: | H:

  • 2-up
  • Swipe
  • Onion skin
No preview for this file type
... ... @@ -20,18 +20,12 @@ export default class AllProduct extends Component {
ListData: [
{
title: "平安e生保2017版-100万(有社保含新农合)",
time: "刚刚",
// url: "http://hankschan.legendh5.com/h5/b8302dac-0563-478c-ff82-ba8ab20c1cb3.html",
url: require("../../assets/home/product_long_1.jpg"),
Subtitle: "200万医疗险,续保至99岁免审核",
imgurl: require("../../assets/home/product_1.png")
},
{
title: "泰康在线“住院宝”必备版(0-49周岁)",
time: "刚刚",
Subtitle: "疾病意外全面保障,补充社保不足,公共交通意外双倍赔付",
// url: "http://hankschan.legendh5.com/h5/f782ab69-6515-3e70-025a-5da78f1f745f.html",
url: require("../../assets/home/product_long_2.jpg"),
imgurl: require("../../assets/home/product_2.png")
},
]
... ...