学历认证

js/page/Attestation/Attestation.js

@@ -6,22 +6,39 @@ import Title from "./Title"
 import Icon from "./Icon"
 import Info from "./Info"
 import Select from "./Select"
+import IdSelect from "./IdSelect"
+import IdIcon from "./IdIcon"
 
 export default class Attestation extends Component {
-
+    state = {
+        pageStatus: 2
+    }
     render() {
         return (
             <View style={styles.container}>
-                <Select/>
+                {
+                    this.state.pageStatus === 1 ? (<Select />) : null
+                }
                 <Title
-                    tit="请上传您的行驶证内页图片"
-                    subTit="(您上传的照片资料仅作认证使用，并将被加密处理)"
-                />
-                <Icon
-                    text="请上传您的行驶证内页图片"
+                    tit="完成身份验证，信用值+10"
+                    subTit=""
                 />
-                <Info 
-                    infoList={["1.请保证拍摄图片清晰可辨，证书中的印章完整清晰。","2.证书中的证书编号、院校名称、学历类别、姓名等信息须完整清晰，请勿遮挡。"]}
+                {
+                    this.state.pageStatus === 2 ? (<IdSelect />) : null
+                }
+                {
+                    this.state.pageStatus === 1 ? (<Icon
+                        text="请上传您的行驶证内页图片"
+                        IconList={["点击上传个人名片", "点击上传个人工牌", "点击上传在职证明"]}
+                    />) : null
+                }
+                {
+                    this.state.pageStatus === 2 ? (<IdIcon
+                        IconList={["点击上传人像面", "点击上传国徽面"]}
+                    />) : null
+                }
+                <Info
+                    infoList={["1.请保证拍摄图片清晰可辨，证书中的印章完整清晰。", "2.证书中的证书编号、院校名称、学历类别、姓名等信息须完整清晰，请勿遮挡。"]}
                 />
                 <View style={styles.bottomBtn}>
                     <MyButtom
@@ -48,6 +65,8 @@ const styles = StyleSheet.create({
         width: "100%",
         height: unitHeight * 84,
         justifyContent: 'center',
-        alignItems: 'center'
+        alignItems: 'center',
+        position: "absolute",
+        bottom: unitHeight * 138
     }
 })

js/page/Attestation/Icon.js

@@ -6,19 +6,26 @@ import AntDesign from "react-native-vector-icons/AntDesign"
 export default class Icon extends Component {
 
     render() {
-        let { text } = this.props
+        let { IconList } = this.props
         return (
             <View style={styles.iconArea}>
-                <View style={styles.iconItem}>
-                    <View style={styles.icon}>
-                        <AntDesign
-                            name={"camera"}
-                            size={45}
-                            style={{ color: "#fff" }}
-                        />
-                    </View>
-        <Text style={{ color: "#333333", fontSize: unitWidth * 24 }}>{text}</Text>
-                </View>
+                {
+                    IconList.map(item => {
+                        return (
+                            <View style={styles.iconItem}>
+                                <View style={styles.icon}>
+                                    <AntDesign
+                                        name={"camera"}
+                                        size={45}
+                                        style={{ color: "#fff" }}
+                                    />
+                                </View>
+                                <Text style={{ color: "#333333", fontSize: unitWidth * 24 }}>{item}</Text>
+                            </View>
+                        )
+                    })
+                }
+
             </View>
         )
     }
@@ -28,18 +35,22 @@ const styles = StyleSheet.create({
         width: "100%",
         height: unitHeight * 280,
         flexDirection: "row",
-        justifyContent: "space-around"
+        justifyContent: "space-around",
+        paddingLeft: unitWidth * 20,
+        paddingRight: unitWidth * 20
     },
     iconItem: {
-        width: unitWidth * 590,
+        flex: 1,
         height: unitHeight * 280,
         borderStyle: "dashed",
         borderWidth: 1,
-        borderColor:"#ccc",
+        borderColor: "#ccc",
         alignItems: "center",
         justifyContent: "space-between",
         paddingTop: unitHeight * 57,
         paddingBottom: unitHeight * 20,
+        marginLeft: unitWidth * 10,
+        marginRight: unitWidth * 10
     },
     icon: {
         width: unitWidth * 118,

js/page/Attestation/IdIcon.js

@@ -0,0 +1,64 @@
+import React, { Component } from "react"
+import { StyleSheet, Text, View, ImageBackground } from "react-native"
+import { unitWidth, unitHeight } from "../../utils/AdapterUtil";
+import AntDesign from "react-native-vector-icons/AntDesign"
+
+export default class IdIcon extends Component {
+
+    render() {
+        let { IconList } = this.props
+        return (
+            <View style={styles.iconArea}>
+                {
+                    IconList.map(item => {
+                        return (
+                            <View style={styles.iconItem}>
+                                <ImageBackground source={require('../../../static/idCard.png')}
+                                    style={styles.icon}
+                                >
+                                    <AntDesign
+                                        name={"pluscircleo"}
+                                        size={45}
+                                        style={{ color: "#fff" }}
+                                    />
+                                </ImageBackground>
+                                <Text style={{ color: "#333333", fontSize: unitWidth * 24 }}>{item}</Text>
+                            </View>
+                        )
+                    })
+                }
+
+            </View>
+        )
+    }
+}
+const styles = StyleSheet.create({
+    iconArea: {
+        width: "100%",
+        height: unitHeight * 280,
+        flexDirection: "row",
+        justifyContent: "space-around",
+        paddingLeft: unitWidth * 20,
+        paddingRight: unitWidth * 20
+    },
+    iconItem: {
+        flex: 1,
+        height: unitHeight * 280,
+        borderStyle: "dashed",
+        borderWidth: 1,
+        borderColor: "#ccc",
+        alignItems: "center",
+        justifyContent: "space-between",
+        paddingTop: unitHeight * 57,
+        paddingBottom: unitHeight * 20,
+        marginLeft: unitWidth * 10,
+        marginRight: unitWidth * 10
+    },
+    icon: {
+        width: unitWidth * 264,
+        height: unitWidth * 157,
+        backgroundColor: "#FB7E90",
+        justifyContent: "center",
+        alignItems: "center",
+    }
+})

js/page/Attestation/IdSelect.js

@@ -0,0 +1,82 @@
+import React, { Component } from "react"
+import { StyleSheet, View, Text, TextInput } from "react-native"
+import { unitWidth, unitHeight } from "../../utils/AdapterUtil";
+import AntDesign from "react-native-vector-icons/AntDesign"
+import RNPickerSelect from 'react-native-picker-select';
+
+export default class IdSelect extends Component {
+
+    render() {
+        // let { text } = this.props
+        return (
+            <View style={styles.formArea}>
+                    <View style={styles.formItem}>
+                        <View style={styles.itemArea}>
+                            <Text style={{ fontSize: unitWidth * 28, color: "#333333" }}>真实姓名：</Text>
+                            <View style={styles.inputRight}>
+                                <TextInput
+                                    placeholder="请输入手机号"
+                                    placeholderTextColor={"#999999"}
+                                    style={styles.TextInput}
+                                />
+                            </View>
+                        </View>
+                    </View>
+                    <View style={styles.formItem}>
+                        <View style={styles.itemArea}>
+                            <Text style={{ fontSize: unitWidth * 28, color: "#333333" }}>身份证号：</Text>
+                            <View style={styles.inputRight}>
+                                <TextInput
+                                    placeholder="请输入个人身份证号"
+                                    placeholderTextColor={"#999999"}
+                                    style={styles.TextInput}
+                                />
+                            </View>
+                        </View>
+                    </View>
+                </View>
+                
+        )
+    }
+}
+const styles = StyleSheet.create({
+    formArea: {
+        width: "100%"
+    },
+    formItem: {
+        width: "100%",
+        height: unitHeight * 72,
+        backgroundColor: "#fff",
+        marginBottom: unitHeight * 6,
+    },
+    itemArea: {
+        width: "100%",
+        height: "100%",
+        flexDirection: "row",
+        alignItems: "center",
+        paddingLeft: unitWidth * 23,
+        paddingRight: unitWidth * 24,
+        borderBottomColor: "#F9F9F9",
+        borderBottomWidth: 1
+    },
+    inputRight: {
+        width: unitWidth * 566,
+        height: "100%"
+    },
+    TextInput: {
+        width: "100%",
+        height: "100%",
+        backgroundColor: "#F9F9F9",
+        paddingLeft: unitWidth * 18
+    },
+    selectRight: {
+        flexDirection: "row",
+        justifyContent: "space-between",
+        alignItems: "center",
+        width: unitWidth * 566,
+        height: unitHeight * 72,
+        backgroundColor: "#F9F9F9",
+        paddingRight: unitWidth * 18,
+        paddingLeft: unitWidth * 18
+    },
+})

js/page/Attestation/Info.js

@@ -31,8 +31,7 @@ export default class Info extends Component {
 const styles = StyleSheet.create({
     infoArea: {
         width: "100%",
-        marginTop:unitHeight * 40,
-        marginBottom:unitHeight * 396
+        marginTop:unitHeight * 40
     },
     infoTitle: {
         flexDirection: "row",

js/page/Attestation/Select.js

@@ -4,7 +4,7 @@ import { unitWidth, unitHeight } from "../../utils/AdapterUtil";
 import AntDesign from "react-native-vector-icons/AntDesign"
 import RNPickerSelect from 'react-native-picker-select';
 
-export default class Info extends Component {
+export default class Select extends Component {
 
     render() {
         // let { text } = this.props

js/page/Attestation/Title.js

@@ -2,14 +2,16 @@ import React, { Component } from "react"
 import { StyleSheet, Text, View } from "react-native"
 import { unitWidth, unitHeight } from "../../utils/AdapterUtil";
 
-export default class Attestation extends Component {
+export default class Title extends Component {
 
     render() {
         let { tit, subTit } = this.props
         return (
             <View style={styles.titArea}>
                 <Text style={styles.tit}>{tit}</Text>
-                <Text style={styles.subTit}>{subTit}</Text>
+                {
+                    subTit!=="" ? <Text style={styles.subTit}>{subTit}</Text> : null
+                }
             </View>
         )
     }
@@ -23,11 +25,11 @@ const styles = StyleSheet.create({
     },
     tit: {
         fontSize: unitWidth * 28,
-        color: "#333333",
-        marginBottom: unitHeight * 23
+        color: "#333333"
     },
     subTit: {
         fontSize: unitWidth * 24,
         color: "#FA788A",
+        marginTop:unitHeight * 23
     }
 })

js/page/MyGift.js

@@ -1,6 +1,6 @@
 import React, { Component } from "react"
 import { StyleSheet } from "react-native"
-import { unitWidth, unitHeight } from "../utils/AdapterUtil";
+import { unitWidth } from "../utils/AdapterUtil";
 import { createMaterialTopTabNavigator } from "react-navigation-tabs"
 import { createAppContainer } from 'react-navigation';
 import GetGift from './GetGift'

js/page/register2.js

@@ -1,5 +1,5 @@
 import React, { Component } from "react"
-import { StyleSheet, Text, View, TextInput } from "react-native"
+import { StyleSheet, Text, View } from "react-native"
 import AntDesign from "react-native-vector-icons/AntDesign"
 import RNPickerSelect from 'react-native-picker-select';
 import { unitWidth, unitHeight, getStatusBarHeight } from "../utils/AdapterUtil";
@@ -163,8 +163,6 @@ export default class Register2 extends Component {
                             </Text>
                             </View>
                         </View>
-
-
                         <Text style={{ fontSize: unitWidth * 28, color: "#333333", marginLeft: unitWidth * 20 }}>自定义</Text>
                     </View>