customer / shanghai-railway-rnapp

/**
 * Created by Cassie on 2018/03/21
 */
import React, { Component } from 'react';
import {
    StyleSheet,
    ScrollView,
    View,
    Text,
    TouchableOpacity,
    Image,
    TextInput,
    ActivityIndicator,
    Keyboard
} from 'react-native';

import {zoomW,zoomH} from '../utils/getSize';
import {getHeaderPadding,getHeaderHeight,xnToast} from "../utils/utils";
import xnService from "../service/AppService";

const bgImg = require('../img/bgImg.png');
const phone = require('../img/phone.png');
const pwd = require('../img/pwd.png');
const pwdR = require('../img/pwdR.png');
const vCode = require('../img/vCode.png');
const back = require('../img/back.png');

const phoneRule = /^1[3456789]\d{9}$/;

export default class FogetPwd extends Component {
    static navigationOptions = ({navigation,screenProps}) => ({
        header:null
    });

    constructor(props){
        super(props);
        this.state = {
            code:'获取验证码',
            mobile:'',
            verifyCode:'',
            password:'',
            passwordR:'',
            loading:false
        };
    };

    /*获取验证码*/
    getCode(){
        if(this.state.mobile.length ==0 || !phoneRule.test(this.state.mobile)){
            xnToast('请输入正确的手机号！');
            return;
        }
        if(this.state.code == '获取验证码'){
            this.setState({
                code:60 + ' 秒'
            });
            let time = 60;
            this.setState({
                timer:setInterval(() => {
                    time = time -1;
                    if(time != 0){
                        this.setState({
                            code:time + ' 秒'
                        })
                    }else{
                        clearInterval(this.state.timer);
                        this.setState({
                            code:'获取验证码'
                        })
                    }
                },1000)
            });
            let params = {
                mobile:this.state.mobile
            };
            // xnService.getVcode(params).then((data) => {
            //     if(data.message){
            //         xnToast(data.message);
            //         return;
            //     }
            //     if(data.errors.length > 0){
            //         xnToast(data.errors[0].message)
            //     }else{
            //         xnToast('验证码已发送~')
            //     }
            // })
        }
    };
    /*清除定时器*/
    componentWillUnmount(){
        clearInterval(this.state.timer)
    };

    render() {
        return (
            <View style={styles.background}>
                <View style={styles.bgImg}>
                    <Image style={{width:'100%'}} source={bgImg} resizeMode="stretch" />
                </View>
                <View style={[styles.bgImg,{backgroundColor:'rgba(0,0,0,.3)'}]} resizeMode="cover" />
                <View style={styles.title}>
                    <Text style={{fontSize:17,color:'#fff'}}>手机找回密码</Text>
                </View>
                <TouchableOpacity activeOpacity={0.8} style={styles.backBtn} onPress={() => {this.props.navigation.goBack()}}>
                    <Image style={{width:(12/zoomW),height:(12/zoomW)}} source={back} resizeMode="cover" />
                </TouchableOpacity>
                <ScrollView style={styles.signMiddle}>
                    <View style={styles.inputItem}>
                        <View style={{width:(60/zoomW),display:'flex',justifyContent:'center',alignItems:'center'}}>
                            <Image style={{width:(22/zoomW),height:(22/zoomW)}} source={phone} resizeMode="center" />
                        </View>
                        <TextInput style={styles.input} placeholderTextColor="#fbfbfb" underlineColorAndroid="transparent" placeholder="输入手机号码" onChangeText={(value) => this.setState({mobile:value})} />
                        <View style={{width:(70/zoomW)}} />
                    </View>
                    <View style={styles.inputItem}>
                        <View style={{width:(60/zoomW),display:'flex',justifyContent:'center',alignItems:'center'}}>
                            <Image style={{width:(22/zoomW),height:(22/zoomW)}} source={vCode} resizeMode="center" />
                        </View>
                        <TextInput style={styles.input} placeholderTextColor="#fbfbfb" underlineColorAndroid="transparent" placeholder="输入验证码" onChangeText={(value) => this.setState({verifyCode:value})} />
                        <TouchableOpacity activeOpacity={0.8} style={styles.vCode} onPress={() => this.getCode()}>
                            <Text style={{fontSize:14,color:'#fff'}}>{this.state.code}</Text>
                        </TouchableOpacity>
                    </View>
                    <View style={styles.inputItem}>
                        <View style={{width:(60/zoomW),display:'flex',justifyContent:'center',alignItems:'center'}}>
                            <Image style={{width:(22/zoomW),height:(22/zoomW)}} source={pwd} resizeMode="center" />
                        </View>
                        <TextInput style={styles.input} placeholderTextColor="#fbfbfb" underlineColorAndroid="transparent" secureTextEntry={true} placeholder="设置新密码" onChangeText={(value) => this.setState({password:value})} />
                    </View>
                    <View style={styles.inputItem}>
                        <View style={{width:(60/zoomW),display:'flex',justifyContent:'center',alignItems:'center'}}>
                            <Image style={{width:(22/zoomW),height:(22/zoomW)}} source={pwdR} resizeMode="center" />
                        </View>
                        <TextInput style={styles.input} placeholderTextColor="#fbfbfb" underlineColorAndroid="transparent" secureTextEntry={true} placeholder="再次输入新密码" onChangeText={(value) => this.setState({passwordR:value})} />
                    </View>
                    <TouchableOpacity activeOpacity={0.8} style={styles.signBtn}>
                        <Text style={{fontSize:18,color:'#fff'}}>提交密码修改</Text>
                    </TouchableOpacity>
                </ScrollView>
                {this.state.loading && <View style={styles.loadingBg}>
                    <ActivityIndicator size="large" />
                </View>}
            </View>
        );
    }
}

const styles = StyleSheet.create({
    background:{
        flex:1,
        paddingTop:getHeaderPadding()
    },
    bgImg:{
        width:'100%',
        height:'100%',
        position:'absolute',
        top:0,
        bottom:0
    },
    backBtn:{
        width:(60/zoomW),
        display:'flex',
        flexDirection:'row',
        alignItems:'center',
        position:'absolute',
        left:(16/zoomW),
        paddingTop:getHeaderPadding(),
        height:getHeaderHeight()
    },
    title:{
        width:'100%',
        position:'absolute',
        left:0,
        paddingTop:getHeaderPadding(),
        height:getHeaderHeight(),
        display:'flex',
        alignItems:'center',
        justifyContent:'center'
    },
    signMiddle:{
        width:'100%',
        paddingLeft:(30/zoomW),
        paddingRight:(30/zoomW),
        marginTop:(64/zoomH)
    },
    inputItem:{
        width:'100%',
        height:(72/zoomH),
        borderBottomWidth:1,
        borderColor:'#f6f6f6',
        borderStyle:'solid',
        display:'flex',
        flexDirection:'row',
        alignItems:'center'
    },
    input:{
        flex:1,
        color:'#fbfbfb',
        fontSize:16
    },
    vCode:{
        width:(72/zoomW),
        height:(28/zoomH),
        display:'flex',
        justifyContent:'center',
        alignItems:'center',
        backgroundColor:'#239afa',
        opacity:.7,
        borderRadius:2
    },
    signBtn:{
        width:'100%',
        height:(50/zoomH),
        backgroundColor:'#239afa',
        opacity:.7,
        borderRadius:4,
        marginTop:(38/zoomH),
        display:'flex',
        justifyContent:'center',
        alignItems:'center'
    },
    loadingBg:{
        width:'100%',
        height:'100%',
        position:'absolute',
        display:'flex',
        alignItems:'center',
        justifyContent:'center'
    }
});