/* * 登录 */ import React, { Component } from 'react'; import { StyleSheet, Text, View, Image, TouchableOpacity, ToastAndroid, StatusBar, TextInput, BackHandler } from 'react-native'; import BasePage from './BasePage'; import Dimensions from './utils/dimensions'; import http_user from './services/user'; import commonutil from './utils/commonutil'; export default class PhoneBind extends BasePage { state = { type: '', phone_num: '', verification_text: '获取验证码', verification_code: '', http_verification_code: '', page_title_text: '绑定手机号', click_ok_text: '绑 定', phone_bind_result: false }; render() { return ( <View style={styles.wrapper}> <StatusBar backgroundColor={'white'} translucent={true} barStyle={'dark-content'} /> <View style={{ flex: 2 }}> <View style={{ marginTop: '6%', flex: 2, flexDirection: 'row' }}> <TouchableOpacity style={{ marginLeft: '5%' }} activeOpacity={1} onPress={this.backresult.bind(this)} > <Image source={require('./images/schedulePage/back_black.png')} /> </TouchableOpacity> </View> <View style={styles.jump}> <TouchableOpacity style={styles.jumpBtn}> <Text style={styles.jumpText}>{this.state.page_title_text}</Text> </TouchableOpacity> </View> </View> <View style={styles.phoneNumberBox}> <Text style={styles.phoneNumber}>手机号</Text> <TextInput style={styles.phoneText} maxLength={11} onChangeText={(text) => this.setState({ phone_num: text })} value={this.state.phone_num} placeholder={'请输入手机号'} /> </View> <View style={styles.signNumberBox}> <Text style={styles.phoneNumber}>验证码</Text> <View style={styles.signNumberLine2}> <TextInput style={styles.signText} maxLength={4} onChangeText={(text) => this.setState({ verification_code: text })} value={this.state.verification_code} placeholder={'请输入验证码'} /> <TouchableOpacity> <Text style={styles.getSign} onPress={this.getVerification.bind(this)}> {this.state.verification_text} </Text> </TouchableOpacity> </View> </View> <View style={styles.loginIn}> <Text style={styles.loginText} onPress={this.clickOK.bind(this)}> {this.state.click_ok_text} </Text> </View> <View style={styles.wechatLogin}> {/* <Image source={require('./images/common/wechat.png')} /> */} <Text style={styles.wechatLoginText} /> {/* <Image source={require('./images/common/arrowRight.png')} /> */} </View> </View> ); } componentWillMount() { BackHandler.addEventListener('hardwareBackPress', this.onBackAndroid); var type; if (this.props.navigation.state.params == undefined) { type = 1; } else { type = this.props.navigation.state.params.type; } switch (type) { case 1: this.setState({ type: type, page_title_text: '绑定手机号', click_ok_text: '绑 定' }); break; case 2: this.setState({ type: type, page_title_text: '修改手机号', click_ok_text: '修 改' }); break; } } componentWillUnmount() { BackHandler.removeEventListener('hardwareBackPress', this.onBackAndroid); } onBackAndroid = () => { this.backresult(); return true; }; getVerification() { if (this.state.verification_text === '获取验证码') { if (commonutil.isPoneAvailable(this.state.phone_num)) { http_user.getVerificationCode(this.state.phone_num).then((result) => { if (result.code != 200) { ToastAndroid.show(result.message, ToastAndroid.SHORT); return; } else { console.log('===================================='); console.log(result.data); console.log('===================================='); this.setState({ http_verification_code: result.data }); } this.setState({ verification_text: '60' }); this.CountDown(); }); } else { ToastAndroid.show('请输入正确的手机号', ToastAndroid.SHORT); } } else { } } CountDown() { if (parseInt(this.state.verification_text) == 0) { this.setState({ verification_text: '获取验证码' }); } else { this.count_timeout = setTimeout(() => { this.setState({ verification_text: parseInt(this.state.verification_text) - 1 + '' }); this.CountDown(); }, 1000); } } //绑定手机号 clickOK() { if (!commonutil.isPoneAvailable(this.state.phone_num)) { ToastAndroid.show('请输入正确的手机号', ToastAndroid.SHORT); return; } if (this.state.verification_code == '') { ToastAndroid.show('请输入验证码', ToastAndroid.SHORT); return; } if (this.state.http_verification_code == this.state.verification_code) { let option = { method: 'PUT', //请求方法 //请求体 body: { mobile: this.state.phone_num, sign: this.state.verification_code } }; http_user.bind_phone(option).then((result) => { if (result.code == 200) { this.setState({ phone_bind_result: true }); ToastAndroid.show(result.message, ToastAndroid.SHORT); } else { this.setState({ phone_bind_result: false }); ToastAndroid.show(result.message, ToastAndroid.SHORT); } }); } else { ToastAndroid.show('验证码不正确', ToastAndroid.SHORT); } } backresult() { clearTimeout(this.count_timeout); this.props.navigation.state.params.bind_phone_back(this.state.phone_num, this.state.phone_bind_result); this.props.navigation.goBack(); } } const styles = StyleSheet.create({ wrapper: { flex: 1 }, jumpText: { color: '#3e3e3e', fontSize: 16, marginRight: 4 }, jump: { // width: Dimensions.width, flex: 2, alignItems: 'center', justifyContent: 'center', paddingHorizontal: '8%' }, jumpBtn: { flexDirection: 'row', alignItems: 'center', justifyContent: 'center' }, phoneNumberBox: { flex: 2, paddingHorizontal: '8%' }, phoneNumber: { color: '#3e3e3e', fontSize: 18, marginBottom: 10 }, phoneText: { width: '100%', height: Dimensions.getHeight(50), borderRadius: 25, backgroundColor: '#f3f3f3' }, signNumberBox: { flex: 2, paddingHorizontal: '8%' }, signNumberLine2: { flexDirection: 'row', width: Dimensions.width }, signText: { width: '54%', height: Dimensions.getHeight(50), borderRadius: 25, backgroundColor: '#f3f3f3', marginRight: 9 }, getSign: { width: 105, height: Dimensions.getHeight(50), borderRadius: 25, backgroundColor: '#38da84', lineHeight: Dimensions.getHeight(50), color: '#fff', fontSize: 16, textAlign: 'center' }, loginIn: { flex: 3, paddingHorizontal: '8%' }, loginText: { width: '100%', height: Dimensions.getHeight(50), backgroundColor: '#63aeff', textAlign: 'center', lineHeight: Dimensions.getHeight(50), color: '#fff', fontSize: 20, borderRadius: 25 }, wechatLogin: { flex: 3, flexDirection: 'row', paddingHorizontal: '33.6%', alignItems: 'center', justifyContent: 'center' }, wechatLoginText: { fontSize: 16, color: '#3e3e3e', marginHorizontal: 6 } });