kangaroo/js/page/Attestation/Attestation.js

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"
import IdSelect from "./IdSelect"
import IdIcon from "./IdIcon"

export default class Attestation extends Component {
    state = {
        pageStatus: 4,
        carTit: "请上传您的行驶证内页图片",
        carSubTit: "(您上传的照片资料仅作认证使用，并将被加密处理)",
        schoolTit: "请上传您的毕业证书、学位证书或学信网电子证明",
        schoolSubTit: "(您上传的照片资料仅作认证使用，并将被加密处理)",
        houseTit: "请上传房产证内页或购房合同内页（需露出署名）",
        houseSubTit: "(您上传的照片资料仅作认证使用，并将被加密处理)",
        workTit: "请选择以下任一材料上传，证明你的工作职业",
        idTit: "完成身份验证，信用值+10",
    }
    componentDidMount() {
        this.setState({
            pageStatus: this.props.navigation.state.params.status
        })
    }
    toWaitCheck = () => {
        const { navigation } = this.props;
        switch (this.state.pageStatus) {
            case 4:
                navigation.navigate("WaitAttestation",{status:2})
                break;
            case 3:
                navigation.navigate("WaitAttestation",{status:2})
            break;
            case 1:
                navigation.navigate("WaitAttestation",{status:2})
            break;
        }

    }
    render() {
        return (
            <View style={styles.container}>
                {
                    this.state.pageStatus === 0 ? (<Title
                        tit={this.state.carTit}
                        subTit={this.state.carSubTit}
                    />) : null
                }
                {
                    this.state.pageStatus === 0 ? (<Icon
                        IconList={["点击上传行驶证内页或者车辆购买证明"]}
                    />) : null
                }
                {
                    this.state.pageStatus === 0 ? (<Info
                        infoList={["1、请保证拍摄图片清晰可辨。", "2、证书内页的印章完整清晰，请勿遮挡。"]}
                    />) : null
                }

                {
                    this.state.pageStatus === 1 ? (<Select />) : null
                }
                {
                    this.state.pageStatus === 1 ? (<Title
                        tit={this.state.schoolTit}
                        subTit={this.state.schoolSubTit}
                    />) : null
                }
                {
                    this.state.pageStatus === 1 ? (<Icon
                        IconList={["点击上传学历证书内页"]}
                    />) : null
                }
                {
                    this.state.pageStatus === 1 ? (<Info
                        infoList={["1.请保证拍摄图片清晰可辨，证书中的印章完整清晰。", "2.证书中的证书编号、院校名称、学历类别、姓名等信息须完整清晰，请勿遮挡。"]}
                    />) : null
                }
                {
                    this.state.pageStatus === 2 ? (<Title
                        tit={this.state.houseTit}
                        subTit={this.state.houseSubTit}
                    />) : null
                }
                {
                    this.state.pageStatus === 2 ? (<Icon
                        IconList={["点击上传带有产权拥有人和产权年限信息的内页图片"]}
                    />) : null
                }
                {
                    this.state.pageStatus === 2 ? (<Info
                        infoList={["1.请保证拍摄图片清晰可辨，证书中的印章完整清晰。", "2.证书内页的产权拥有人和产权年限等信息须完整清晰，请勿遮挡。"]}

                    />) : null
                }
                {
                    this.state.pageStatus === 3 ? (<Title
                        tit={this.state.workTit}
                        subTit={""}
                    />) : null
                }
                {
                    this.state.pageStatus === 3 ? (<Icon
                        IconList={["点击上传个人名片", "点击上传个人工牌", "点击上传在职证明"]}
                    />) : null
                }
                {
                    this.state.pageStatus === 3 ? (<Info
                        infoList={["1、须手持纸质名片拍摄，确保姓名、公司、职位、手机号拍摄清晰，请勿遮挡。", "2、在职证明和个人工牌须确保公司、职位、姓名信息区域拍摄清晰，请勿遮挡。"]}
                    />) : null
                }
                {
                    this.state.pageStatus === 4 ? (<Title
                        tit={this.state.idTit}
                        subTit={""}
                    />) : null
                }
                {
                    this.state.pageStatus === 4 ? (<IdSelect />) : null
                }
                {
                    this.state.pageStatus === 4 ? (<IdIcon
                        IconList={["点击上传人像面", "点击上传国徽面"]}
                    />) : null
                }
                {
                    this.state.pageStatus === 4 ? (<Info
                        infoList={["1、证件必须是清晰彩色原件电子版本，支持jpg、png、jpeg的图片格式。", "2、拍摄的证件必须无反光、无水印，身份证尽量充满图片，文字清晰可见。"]}
                    />) : null
                }
                <View style={styles.bottomBtn}>
                    <MyButtom
                        onPress={this.toWaitCheck}
                        text={"提交认证"}
                        width={unitWidth * 502}
                        height={unitHeight * 84}
                        borderRadius={unitHeight * 84}
                        bgColor="#FA788A"
                        shadowBgc="rgba(250,120,138,1)"
                        style={{ fontSize: unitWidth * 32 }}
                    />
                </View>
            </View>
        )
    }
}
const styles = StyleSheet.create({
    container: {
        flex: 1,
        alignItems: "center",
        backgroundColor: "#fff"
    },
    bottomBtn: {
        width: "100%",
        height: unitHeight * 84,
        justifyContent: 'center',
        alignItems: 'center',
        position: "absolute",
        bottom: unitHeight * 138
    }
})