react native 更换手机号 验证码输入框

React Native 版本执行0.57的规则


import React, { Component } from 'react';
import { StyleSheet, Text, View, TextInput, ScrollView, KeyboardAvoidingView, Image, TouchableOpacity, StatusBar } from 'react-native';
import LinearGradient from 'react-native-linear-gradient'; //按钮渐变
import CountDownButton from 'react-native-smscode-count-down';// 倒计时
import { regExp } from "../../network/RegExp";
import { global } from '../../utils/Global';
import { requestUrl } from '../../network/Url';// 请求url
import Fetch from '../../network/Fetch';
import Loading from '../../components/Loading';
import Nav from '../../components/Nav';
import * as Public from '../../utils/Public'

export default class ReplaceTel extends Component {
    constructor(props) {
        super(props);
        this.state = {
            isLoading: false,
            iphone: '', //手机号
            identCode: '', //验证码
            iPhoneValidate: false,// 手机号验证
            smsCodeValidate: false,// 验证码验证
            CodeValidate: false,// 第一步验证码验证
            TimingText: "获取验证码",// 获取验证码文字
            ValidateFlag: true,// 展示第一步校验
            length: 6, //输入框的个数
            codeInput: "", //第一步验证码输入
            isShowTime: false,//是否显示自定义倒计时
            timeText: "60", //自定义倒计时
        }
    }
    componentWillMount() {

    }
    componentDidMount() {
        if (UserInfo.phone) {
            this.setState({
                isShowTime: true
            })
            //获取验证码
            this._getRegisterSms();
            //获取倒计时
            this.renderTime()
        }
    }
    render() {
        const { navigate, goBack } = this.props.navigation;
        return (
            <KeyboardAvoidingView
                behavior={IOS ? "padding" : null}
                style={styles.container}
            >
                <StatusBar
                    animated={true}//是否动画
                    hidden={false}//是否隐藏
                    backgroundColor={'#000'}//android 设置状态栏背景颜色
                    translucent={false}//android 设置状态栏是否为透明
                    showHideTransition="fade"//IOS状态栏改变时动画 fade:默认 slide
                    networkActivityIndicatorVisible={this.state.isLoading}//IOS设定网络活动指示器(就是那个菊花)是否显示在状态栏。
                    statusBarStyle={"default"}//状态栏样式 default	默认(IOS为白底黑字、Android为黑底白字)
                    barStyle={"default"}// 状态栏文本的颜色。
                />
                <Nav title={"更换手机号"} leftClick={() => { goBack() }} />
                <ScrollView
                    keyboardShouldPersistTaps={"handled"}
                >
                    {/* 第一步验证原手机号 */}
                    {
                        this.state.ValidateFlag ?
                            <View style={styles.oneStep}>
                                <View style={styles.oneStepTit}>
                                    <Text style={styles.oneStepTxt}>请输入当前手机号</Text>
                                    <Text style={[styles.oneStepTxt, { marginLeft: Px2dp(5), marginRight: Px2dp(5) }]}>{Public.formatPhone(UserInfo.phone)}</Text>
                                    <Text style={styles.oneStepTxt}>的验证码</Text>
                                </View>
                                <View style={{
                                    position: 'relative',
                                    justifyContent: "center",
                                    alignItems: "center",
                                    flexDirection: "row",
                                    marginTop: Px2dp(20),
                                }}>
                                    <View style={{ width: SCREEN_WIDTH, height: Px2dp(40), justifyContent: "center", alignItems: "center", flexDirection: "row", overflow: "hidden" }}>
                                        {this._tempDomArr()}
                                    </View>
                                    <TextInput
                                        ref={"_input"}
                                        key={"one"}
                                        style={{ opacity: 0, width: SCREEN_WIDTH + Px2dp(60), height: Px2dp(40), position: 'absolute', top: 0, left: -Px2dp(60), zIndex: 10, }}
                                        returnKeyType={"done"}// 键盘确定按钮类型 done/go/next/search/send
                                        placeholderTextColor="#999"
                                        keyboardType="numeric"
                                        maxLength={6}
                                        autoFocus={true}
                                        caretHidden={true}
                                        contextMenuHidden={true} // 禁用粘贴
                                        defaultValue={this.state.codeInput}
                                        underlineColorAndroid={'transparent'}
                                        onChangeText={(text) => {
                                            if (regExp.Reg_Number.test(text)) {
                                                this.setState({
                                                    CodeValidate: true
                                                })
                                            }
                                            else {
                                                this.setState({
                                                    CodeValidate: false
                                                })
                                            }
                                            this.setState({ codeInput: text })
                                        }}
                                    />
                                </View>
                                {/* 倒计时 */}
                                <View style={{ justifyContent: "center", alignItems: "center", marginTop: Px2dp(20) }}>
                                    {
                                        this.state.isShowTime ?
                                            <View style={{ height: Px2dp(44), justifyContent: "center" }}>
                                                <Text style={{ fontSize: Px2dp(12), color: "#9B9B9BFF" }}>重新获取({this.state.timeText}</Text>
                                            </View>
                                            :
                                            <CountDownButton
                                                style={{ marginBottom: Px2dp(5) }}
                                                textStyle={{
                                                    fontSize: Px2dp(12),
                                                    color: "rgba(44,125,201,1)"
                                                }}// 文字样式
                                                timerCount={60}// 倒计时时长
                                                timerTitle={this.state.TimingText}// 提示文字
                                                enable={true}
                                                onClick={(shouldStartCounting) => {
                                                    this._getRegisterSms()
                                                    shouldStartCounting(true); //重置验证码状态
                                                }}
                                                timerEnd={() => {
                                                    this.setState({
                                                        TimingText: '重新获取',
                                                        iPhoneFocus: true,
                                                    })
                                                }}// 倒计时结束
                                            />
                                    }
                                    <TouchableOpacity activeOpacity={0.8} onPress={() => {
                                        this._verifyAuthCode()
                                    }}>
                                        <LinearGradient
                                            start={{ x: 0, y: 1 }}
                                            end={{ x: 1, y: 1 }}
                                            colors={['#EF6666', '#EA2424']}
                                            locations={[0, 1.0]}
                                            style={[styles.LoginBtnLg, this.state.CodeValidate ? { opacity: 1 } : { opacity: 0.5 }]}>
                                            <Text style={styles.LoginBtnTxt}>下一步</Text>
                                        </LinearGradient>
                                    </TouchableOpacity>
                                </View>
                            </View>
                            :   //第二步更新手机号
                            <View style={styles.LoginBox}>
                                {/* 填写更新手机号 */}
                                <Text style={{ width: Px2dp(300), lineHeight: Px2dp(15), marginBottom: Px2dp(35), fontSize: Px2dp(12), color: "#504949FF", }}>解除后该手机号的信息将全部转移至新绑定的手机中, 请知悉。</Text>
                                <View style={styles.LoginAccount}>
                                    <Image style={styles.LoginAccountImg} source={require('../../images/login_account.png')} />
                                    <TextInput
                                        key={"phone"}
                                        style={styles.input}
                                        returnKeyType={"done"}// 键盘确定按钮类型 done/go/next/search/send
                                        placeholderTextColor="#999"
                                        keyboardType="numeric"
                                        placeholder="请输入手机号"
                                        underlineColorAndroid={'transparent'}
                                        maxLength={11}
                                        onChangeText={(text) => {
                                            if (regExp.Reg_TelNo.test(text)) {
                                                this.setState({
                                                    iPhoneValidate: true
                                                })
                                            }
                                            else {
                                                this.setState({
                                                    iPhoneValidate: false
                                                })
                                            }
                                            this.setState({ iphone: text })
                                        }}
                                        onBlur={() => {
                                            this.iphoneBlur()
                                        }}
                                    />
                                </View>
                                {/* 填写更新验证码 */}
                                <View style={styles.LoginAccount}>
                                    <Image style={styles.identCodeImg} source={require('../../images/ident_code.png')} />
                                    <TextInput
                                        key={"code"}
                                        style={styles.input}
                                        returnKeyType={"done"}// 键盘确定按钮类型 done/go/next/search/send
                                        placeholderTextColor="#999"
                                        keyboardType="numeric"
                                        placeholder="请输入验证码"
                                        defaultValue={this.state.identCode}
                                        maxLength={6}
                                        underlineColorAndroid={'transparent'}
                                        onChangeText={(text) => {
                                            if (regExp.Reg_Number.test(text)) {
                                                this.setState({
                                                    smsCodeValidate: true
                                                })
                                            }
                                            else {
                                                this.setState({
                                                    smsCodeValidate: false
                                                })
                                            }
                                            this.setState({ identCode: text })
                                        }}
                                        onBlur={() => {
                                            this.smsCodeBlur()
                                        }}
                                    />
                                    {/* 更新倒计时 */}
                                    <CountDownButton
                                        style={[styles.getIdentCode, this.state.iPhoneValidate ? { opacity: 1 } : null]}
                                        textStyle={{
                                            fontSize: Px2dp(12),
                                            color: Colors.white
                                        }}// 文字样式
                                        timerCount={60}// 倒计时时长
                                        timerTitle={this.state.TimingText}// 提示文字
                                        enable={true}
                                        onClick={(shouldStartCounting) => {
                                            //校验新手机号是否已注册
                                            if (!this.state.iPhoneValidate) {
                                                ToastShow({ "text": '请输入正确的手机号' })
                                                shouldStartCounting(false);
                                            } else {
                                                Fetch(requestUrl.URL, {
                                                    "phone": this.state.iphone,
                                                }).then(data => {
                                                    console.log(data)
                                                    if (data.status == "SUCCESS") {
                                                        if (this.state.iPhoneValidate) {
                                                            if (!this.state.iphone) {
                                                                shouldStartCounting(false);
                                                            }
                                                            else {
                                                                this._getRegisterSms(this.state.iphone)
                                                                shouldStartCounting(true); //重置验证码状态
                                                            }
                                                        }
                                                    } else if (data.status == "ERROR") {
                                                        ToastShow({ "text": data.msg })
                                                        shouldStartCounting(false);

                                                    } else {
                                                        ToastShow({ "text": '手机号校验失败' })
                                                        shouldStartCounting(false);

                                                    }
                                                })
                                            }
                                        }}
                                        timerEnd={() => {
                                            this.setState({
                                                TimingText: '重新获取',
                                                iPhoneFocus: true
                                            })
                                        }}// 倒计时结束
                                    />
                                </View>
                                {/* 立即绑定 */}
                                <TouchableOpacity activeOpacity={0.8} onPress={() => {
                                    if (this.state.iPhoneValidate && this.state.smsCodeValidate) {
                                        this._replacePhone()
                                    }
                                }}>
                                    <LinearGradient
                                        start={{ x: 0, y: 1 }}
                                        end={{ x: 1, y: 1 }}
                                        colors={['#EF6666', '#EA2424']}
                                        locations={[0, 1.0]}
                                        style={[styles.LoginBtnLg, this.state.iPhoneValidate && this.state.smsCodeValidate ? { opacity: 1 } : { opacity: 0.5 }]}>
                                        <Text style={styles.LoginBtnTxt}>立即绑定</Text>
                                    </LinearGradient>
                                </TouchableOpacity>
                                <View style={{ flex: 1 }}></View>
                            </View>
                    }
                </ScrollView>
                {this.state.isLoading ? <Loading /> : null}
            </KeyboardAvoidingView>
        );
    }
    //倒计时
    renderTime() {
        let timeCount = 60// 总秒数
        let timer = setInterval(() => {
            timeCount -= 1;
            this.setState({
                timeText: timeCount,
            })
            if (timeCount <= 0) {
                // 倒计时结束
                clearInterval(timer);
                this.setState({
                    isShowTime: false
                })
            }
        }, 1000)
    }
    //手机号失去焦点
    iphoneBlur() {
        if (!this.state.iphone) {
            ToastShow({ "text": '请输入手机号' })
        }
        else if (!regExp.Reg_TelNo.test(this.state.iphone)) {
            ToastShow({ "text": '请输入正确的手机号' })
        } else {
            return true
        }
    }
    //验证码失去焦点
    smsCodeBlur() {
        if (!this.state.identCode.length) {
            ToastShow({ "text": '请输入验证码' })
        }
        else if (!regExp.Reg_Number.test(this.state.identCode)) {
            ToastShow({ "text": '请输入正确的验证码格式' })
        }
        else {
            return true
        }
    }
    //渲染展示input
    _tempDomArr() {
        let tempDomArr = [];
        for (var i = 0; i < this.state.length; i++) {
            tempDomArr.push(
                <View key={i} style={styles.inputBoxItem}>
                    <Text>{this.state.codeInput.length >= i + 1 ? this.state.codeInput[i] : ""}</Text>
                </View>
            )
        }
        return tempDomArr;
    }
    // 获取第一步验证码
    _getRegisterSms(iphone) {
        Fetch(requestUrl.URL, { "phone": iphone ? iphone : UserInfo.phone }).then(data => {
            if (data.status == "SUCCESS") {
                this.setState({
                    iPhoneFocus: false
                })
                ToastShow({ "text": '验证码发送成功' })
            } else {
                ToastShow({ "text": '获取验证码失败' })
            }
        })
    }
    //第一步校验原手机号
    _verifyAuthCode() {
        if (!this.state.codeInput) {
            ToastShow({ "text": '请输入验证码' })
        }
        else if (!regExp.Reg_Number.test(this.state.codeInput)) {
            ToastShow({ "text": '请输入正确的验证码格式' })
        }
        else {
            Fetch(requestUrl.URL, {
                "phone": UserInfo.phone, 'authCode': this.state.codeInput, "userId": UserInfo.id
            }).then(data => {
                console.log(data)
                if (data.status == "SUCCESS") {
                    this.setState({
                        ValidateFlag: false,
                    })
                } else if (data.status == "1") {
                    this.setState({
                        codeInput: '',
                    })
                    this.refs._input.focus();
                    ToastShow({ "text": data.msg })
                } else {
                    this.setState({
                        codeInput: '',
                    })
                    this.refs._input.focus();
                    ToastShow({ "text": '手机号校验失败' })
                }
            })
        }
    }
    // 立即绑定更新手机号
    _replacePhone() {
        if (!this.state.iphone || !this.state.identCode) {
            ToastShow({ "text": '请输入正确的信息' })
        }
        else if (!regExp.Reg_TelNo.test(this.state.iphone)) {
            ToastShow({ "text": '请输入正确的手机号' })
        }
        else if (!this.state.identCode) {
            ToastShow({ "text": '请输入验证码' })
        }
        else if (!regExp.Reg_Number.test(this.state.identCode)) {
            ToastShow({ "text": '请输入正确的验证码格式' })
        }
        else {
            this.setState({
                isLoading: true,
            })
            Fetch(requestUrl.verificationPhone, {
                "phone": this.state.iphone,
            }).then(data => {
                console.log(data)
                if (data.status == "SUCCESS") {
                    Fetch(requestUrl.url, { "phone": this.state.iphone, "userId": UserInfo.id, 'authCode': this.state.identCode }).then(data => {
                        console.log(data)
                        if (data.status == "SUCCESS") {
                            let tempUserInfo = UserInfo;
                            tempUserInfo.phone = this.state.iphone;
                            Public.setItem("userInfo", tempUserInfo);
                            this.props.navigation.state.params.callback(this.state.iphone);
                            this.props.navigation.goBack();
                        } else if (data.status == "ERROR") {
                            this.setState({
                                isLoading: false,
                            })
                            ToastShow({ "text": data.msg })
                        } else {
                            this.setState({
                                isLoading: false,
                            })
                            ToastShow({ "text": '绑定失败' })
                        }
                    })
                } else {
                    this.setState({
                        isLoading: false,
                    })
                    ToastShow({ "text": data.msg })
                }
            })
        }
    }
}
const styles = StyleSheet.create({
    container: {
        backgroundColor: Colors.white,
        justifyContent: "center",
        flex: 1,
    },
    LoginBox: {
        justifyContent: "center",
        alignItems: "center",
        flex: 1,
        paddingTop: Px2dp(40)
    },
    //通用input盒子
    LoginAccount: {
        width: Px2dp(306),
        paddingBottom: Px2dp(7),
        flexDirection: "row",
        alignItems: "center",
        justifyContent: 'space-between',
        borderBottomWidth: Pixel,
        borderBottomColor: '#ececec',
        marginBottom: Px2dp(32)
    },
    LoginAccountImg: {
        marginRight: Px2dp(10)
    },
    identCodeImg: {
        marginRight: Px2dp(7)
    },
    input: {
        flex: 1,
        fontSize: Px2dp(16),
        padding: 0,
    },
    //按钮及文字
    LoginBtn: {
        width: Px2dp(306),
        backgroundColor: Colors.red,
        height: Px2dp(50),
        marginTop: Px2dp(2),
        justifyContent: 'center', alignItems: 'center',
    },
    LoginBtnLg: {
        width: Px2dp(306),
        height: Px2dp(50),
        marginTop: Px2dp(2),
        opacity: 0.5,
        justifyContent: 'center', alignItems: 'center',
    },
    LoginBtnTxt: {
        fontSize: Px2dp(16),
        color: Colors.white,
    },
    //获取验证码及文字
    getIdentCode: {
        width: Px2dp(89),
        height: Px2dp(26),
        backgroundColor: "#EA2424",
        opacity: 0.5,
        borderRadius: Px2dp(13),
        justifyContent: "center",
        alignItems: "center"
    },
    getIdentCodeTxt: {
        fontSize: Px2dp(12),
        color: Colors.white
    },
    // 第一步
    oneStep: {
        marginTop: Px2dp(110),
        flex: 1,
    },
    oneStepTit: {
        flexDirection: "row",
        justifyContent: "center",
        alignItems: "center"
    },
    oneStepTxt: {
        fontSize: Px2dp(16),
        color: Colors.text333
    },
    inputBox: {
        flexDirection: "row",
        justifyContent: "center",
        alignItems: 'center',
        marginTop: Px2dp(40),
    },
    inputBoxItem: {
        borderBottomWidth: Pixel,
        borderBottomColor: "rgba(216,216,216,1)",
        width: Px2dp(30),
        height: Px2dp(30),
        marginRight: Px2dp(10),
        textAlign: "center",
        padding: 0,
        alignItems: 'center',
        justifyContent: 'center',
    },
});
评论 3
添加红包

请填写红包祝福语或标题

红包个数最小为10个

红包金额最低5元

当前余额3.43前往充值 >
需支付:10.00
成就一亿技术人!
领取后你会自动成为博主和红包主的粉丝 规则
hope_wisdom
发出的红包
实付
使用余额支付
点击重新获取
扫码支付
钱包余额 0

抵扣说明:

1.余额是钱包充值的虚拟货币,按照1:1的比例进行支付金额的抵扣。
2.余额无法直接购买下载,可以购买VIP、付费专栏及课程。

余额充值