接口OK

罗广聪
Commit c3653646833471699e10d95bf3d0df6709737c87 c3653646 1 parent b29e6f71
Showing 2 changed files with 93 additions and 54 deletions
src/Components/ProductTemplate.js
src/pages/Home/allProduct.js
--- a/src/Components/ProductTemplate.js
View file @c365364
+++ b/src/Components/ProductTemplate.js
View file @c365364
@@ -7,36 +7,56 @@ import {
   Dimensions,
   ScrollView,
   Text,
-  TouchableOpacity,
+  TouchableOpacity
 } from "react-native";
 import { StackNavigator, TabNavigator } from "react-navigation";
 export default class ProductTemplate extends Component {
+  static navigationOptions = {
+    title: "产品详情"
+  };
+
   constructor(props) {
     super(props);
     this.state = {
-      products: [
+      id: this.props.navigation.state.params.id,
-        {
+      productDetais: {}
-          headerImage: require("../assets/home/product_header_1.jpg"),
-          title: "平安e生保2017版-100万（有社保含新农合）",
-          subscribe: "200万医疗险/续保至99岁免审核",
-          price: "￥174.00",
-          detailImage: "",
-        },
-        {
-          headerImage: require("../assets/home/product_header_2.jpg"),
-          title: "泰康在线“住院宝”必备版（0-49周岁）",
-          subscribe: "承保疾病，意外伤害，性价比高，住院有补贴，30-49岁一家三口可买",
-          price: "￥249.00",
-          detailImage: "",
-        }
-      ]
     };
   }
+  componentWillMount() {
+    this.getDetails();
+  }
+  getDetails() {
+    const id = this.state.id;
+    const that = this;
+    return fetch(`https://devpay.brae.co/test/insurance/product/${id}`, {
+      method: "POST",
+      headers: {
+        Accept: "application/json",
+        "Content-Type": "application/json"
+      }
+    })
+      .then(resp => {
+        if (resp.status === 200) {
+          return resp.json();
+        } else {
+          console.error("something went wrong!");
+        }
+      })
+      .then(respJson => {
+        if (respJson.enmsg != "ok") {
+          alert(respJson.cnmsg);
+        } else {
+          that.setState({
+            productDetais: respJson.data.product
+          });
+          console.log("产品详情", respJson.data.product);
+        }
+      });
+  }
   render() {
-    console.log("Image  index", this.props.navigation.state.params.index);
     const index = this.props.navigation.state.params.index;
-    const item = this.state.products[index];
+    const item = this.state.productDetais;
     return (
       <View style={styles.container}>
         <ScrollView style={styles.scrollViewContainer}>
@@ -45,7 +65,7 @@ export default class ProductTemplate extends Component {
             <Image
               style={styles.headerImage}
               resizeMode="contain"
-              source={item.headerImage}
+              source={{ uri: item.headerImage }}
             />
             {/* 标题 */}
             <View style={styles.titleContainer}>
@@ -55,7 +75,10 @@ export default class ProductTemplate extends Component {
           </View>
           {/* 产品特色 */}
           <View style={styles.midContaier}>
-            <Image source={require("../assets/home/ic_feature.png")} style={{width: 16, height: 17,}} />
+            <Image
+              source={require("../assets/home/ic_feature.png")}
+              style={{ width: 16, height: 17 }}
+            />
             <Text style={styles.midText}>产品特色</Text>
           </View>
           {/* 图片详情 */}
@@ -66,11 +89,11 @@ export default class ProductTemplate extends Component {
               source={require("../assets/home/product_long_1.jpg")}
             />
           ) : (
-          <Image
+            <Image
-            style={styles.imgTwo}
+              style={styles.imgTwo}
-            resizeMode="contain"
+              resizeMode="contain"
-            source={require("../assets/home/product_long_2.jpg")}
+              source={require("../assets/home/product_long_2.jpg")}
-          />
+            />
           )}
         </ScrollView>
         {/* 悬浮按钮 */}
@@ -104,7 +127,7 @@ const styles = StyleSheet.create({
     paddingLeft: 15,
     paddingRight: 15,
     paddingTop: 10,
-    paddingBottom: 10,
+    paddingBottom: 10
   },
   title: {
     fontSize: 16,
@@ -123,12 +146,12 @@ const styles = StyleSheet.create({
     flexDirection: "row",
     paddingLeft: 13,
     alignItems: "center",
-    marginBottom: 1,
+    marginBottom: 1
   },
   midText: {
     marginLeft: 10,
     fontSize: 15,
-    color: "#242424",
+    color: "#242424"
   },
   imgOne: {
     width: Dimensions.get("window").width,
@@ -148,26 +171,26 @@ const styles = StyleSheet.create({
     flex: 1,
     borderColor: "#E4E4E4",
     borderStyle: "solid",
-    borderTopWidth: 1,
+    borderTopWidth: 1
   },
   footerLeft: {
     flex: 1,
     justifyContent: "center",
     alignItems: "flex-start",
-    paddingLeft: 15,
+    paddingLeft: 15
   },
   price: {
     color: "#1B9341",
-    fontSize: 18,
+    fontSize: 18
   },
   footerRight: {
     backgroundColor: "#1B9341",
     width: 144,
     justifyContent: "center",
-    alignItems: "center",
+    alignItems: "center"
   },
   button: {
     color: "white",
-    fontSize: 16,
+    fontSize: 16
-  },
+  }
 });
--- a/src/pages/Home/allProduct.js
View file @c365364
+++ b/src/pages/Home/allProduct.js
View file @c365364
@@ -9,31 +9,47 @@ import {
   Image
 } from "react-native";
 import { StackNavigator, TabNavigator } from 'react-navigation';
-import CommonWebView from "../../Components/CommonWebView";
-// import CommonImageView from "../../Components/CommonImageView";
 export default class AllProduct extends Component {
-  
   constructor(props) {
     super(props);
     this.state = {
-      ListData: [
+      ListData: []
-        {
-          id: 0,
-          title: "平安e生保2017版-100万（有社保含新农合）",
-          Subtitle: "200万医疗险，续保至99岁免审核",
-          imgurl: require("../../assets/home/product_1.png")
-        },
-        {
-          id: 1,
-          title: "泰康在线“住院宝”必备版（0-49周岁）",
-          Subtitle: "疾病意外全面保障，补充社保不足，公共交通意外双倍赔付",
-          imgurl: require("../../assets/home/product_2.png")
-        },
-      ]
     };
   }
+  componentWillMount() {
+    this.getProducts();
+  }
+
+  getProducts() {
+    let that = this;
+    return fetch(`https://devpay.brae.co/test/insurance/product`, {
+      method: "POST",
+      headers: {
+        Accept: "application/json",
+        "Content-Type": "application/json"
+      }
+    })
+      .then(resp => {
+        if (resp.status === 200) {
+          return resp.json();
+        } else {
+          console.error("something went wrong!");
+        }
+      })
+      .then(respJson => {
+        if (respJson.enmsg != "ok") {
+          alert(respJson.cnmsg);
+        } else {
+          that.setState({
+            ListData: respJson.data.data.ListData
+          })
+          console.log("全部产品列表",respJson.data.data.ListData);
+        }
+      });
+  }
+
   render() {
     const { navigate } = this.props.navigation;
     return (
@@ -47,9 +63,9 @@ export default class AllProduct extends Component {
               <TouchableOpacity
                 style={styles.itemContainer}
                 key={index}
-                onPress={() => navigate("ProductTemplate", { index: index })}
+                onPress={() => navigate("ProductTemplate", { index: index,id: item.id })}
               >
-                <Image style={styles.itemImgWrapper} source={item.imgurl} />
+                <Image style={styles.itemImgWrapper} source={{uri: item.imgurl}} />
                 <View style={styles.itemRightWrapper}>
                   <Text style={styles.itemTextTop} numberOfLines={2}>
                     {item.title}