学历认证

js/page/Attestation/Attestation.js

@@ -1,14 +1,18 @@
 import React, { Component } from "react"
 import { StyleSheet, View } from "react-native"
+import { unitWidth, unitHeight } from "../../utils/AdapterUtil";
+import MyButtom from '../../component/MyButton'
 import Title from "./Title"
 import Icon from "./Icon"
 import Info from "./Info"
+import Select from "./Select"
 
 export default class Attestation extends Component {
 
     render() {
         return (
             <View style={styles.container}>
+                <Select/>
                 <Title
                     tit="请上传您的行驶证内页图片"
                     subTit="(您上传的照片资料仅作认证使用，并将被加密处理)"
@@ -16,7 +20,20 @@ export default class Attestation extends Component {
                 <Icon
                     text="请上传您的行驶证内页图片"
                 />
-                <Info />
+                <Info 
+                    infoList={["1.请保证拍摄图片清晰可辨，证书中的印章完整清晰。","2.证书中的证书编号、院校名称、学历类别、姓名等信息须完整清晰，请勿遮挡。"]}
+                />
+                <View style={styles.bottomBtn}>
+                    <MyButtom
+                        text={"提交认证"}
+                        width={unitWidth * 502}
+                        height={unitHeight * 84}
+                        borderRadius={unitHeight * 84}
+                        bgColor="#FA788A"
+                        shadowBgc="rgba(250,120,138,1)"
+                        style={{ fontSize: unitWidth * 32 }}
+                    />
+                </View>
             </View>
         )
     }
@@ -24,6 +41,13 @@ export default class Attestation extends Component {
 const styles = StyleSheet.create({
     container: {
         flex: 1,
-        alignItems: "center"
+        alignItems: "center",
+        backgroundColor: "#fff"
+    },
+    bottomBtn: {
+        width: "100%",
+        height: unitHeight * 84,
+        justifyContent: 'center',
+        alignItems: 'center'
     }
 })

js/page/Attestation/Info.js

@@ -6,7 +6,7 @@ import AntDesign from "react-native-vector-icons/AntDesign"
 export default class Info extends Component {
 
     render() {
-        // let { text } = this.props
+        let { infoList } = this.props
         return (
             <View style={styles.infoArea}>
                 <View style={styles.infoTitle}>
@@ -18,8 +18,11 @@ export default class Info extends Component {
                     <Text style={{ color: "#333333", fontSize: unitWidth * 28, marginLeft: unitWidth * 12 }}>证明材料拍摄技巧</Text>
                 </View>
                 <View style={styles.infoList}>
-                    <Text style={{ color: "#666666", fontSize: unitWidth * 28, marginBottom: unitWidth * 10 }}>1、请保证拍摄图片清晰可辨。</Text>
-                    <Text style={{ color: "#666666", fontSize: unitWidth * 28, marginBottom: unitWidth * 10 }}>2、证书内页的印章完整清晰，请勿遮挡。</Text>
+                    {
+                        infoList.map(item=>{
+                        return <Text style={{ color: "#666666", fontSize: unitWidth * 28, marginBottom: unitWidth * 10 }}>{item}</Text>
+                        })
+                    }
                 </View>
             </View>
         )
@@ -28,7 +31,8 @@ export default class Info extends Component {
 const styles = StyleSheet.create({
     infoArea: {
         width: "100%",
-        marginTop:unitHeight * 40
+        marginTop:unitHeight * 40,
+        marginBottom:unitHeight * 396
     },
     infoTitle: {
         flexDirection: "row",
@@ -37,6 +41,7 @@ const styles = StyleSheet.create({
     },
     infoList: {
         marginTop: unitHeight * 10,
-        marginLeft: unitWidth * 64
+        marginLeft: unitWidth * 64,
+        paddingRight:unitWidth * 24
     }
 })

js/page/Attestation/Select.js

@@ -0,0 +1,94 @@
+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 Info 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}>
+                        <RNPickerSelect
+                            placeholder={""}
+                            onValueChange={(value) => console.log(value)}
+                            items={[
+                                { label: 'Football', value: 'football' },
+                                { label: 'Baseball', value: 'baseball' },
+                                { label: 'Hockey', value: 'hockey' },
+                            ]}
+                        >
+                            <View style={styles.itemArea}>
+                                <Text style={{ fontSize: unitWidth * 28, color: "#333333" }}>学        历：</Text>
+                                <View style={styles.selectRight}>
+                                    <Text style={{ fontSize: unitWidth * 28, color: "#666666" }}>小学</Text>
+                                    <AntDesign
+                                        name={"caretdown"}
+                                        size={15}
+                                        style={{ color: "#999999" }}
+                                    />
+                                </View>
+                            </View>
+                        </RNPickerSelect>
+                    </View>
+                </View>
+                
+        )
+    }
+}
+const styles = StyleSheet.create({
+    formArea: {
+        width: "100%",
+        paddingTop: unitHeight * 30
+    },
+    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
+    },
+})