efunbox-mobile-8/pages/Login.js

/* 
 * 登录
*/
import React, { Component } from 'react';
import { StyleSheet, Text, View, Image, TouchableOpacity, StatusBar, ToastAndroid, TextInput } from 'react-native';
import BasePage from './BasePage';
import Dimensions from './utils/dimensions';
import ShopBox from './components/ShopBox';
import TopicTitle from './components/TopicTitle';
import ScrollRow from './components/ScrollRow';
import DeviceInfo from 'react-native-device-info';
import commonutil from './utils/commonutil';
import http_user from './services/user';
import wechat from './utils/wechat';

export default class Login extends BasePage {
	state = {
		phone_num: '',
		verification_text: '获取验证码',
		verification_code: '',
		http_verification_code: '',
		deviceCode: ''
	};
	render() {
		return (
			<View style={styles.wrapper}>
				<StatusBar backgroundColor={'white'} translucent={true} barStyle={'dark-content'} />
				<View style={styles.jump}>
					<TouchableOpacity style={styles.jumpBtn}>
						<Text style={styles.jumpText}>跳过</Text>
						<Image source={require('./images/common/arrowRight.png')} />
					</TouchableOpacity>
				</View>
				<View style={styles.phoneNumberBox}>
					<Text style={styles.phoneNumber}>手机号</Text>
					<TextInput
						style={styles.phoneText}
						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}
							onChangeText={(text) => this.setState({ verification_code: text })}
							value={this.state.verification_code}
							placeholder={'请输入验证码'}
						/>
						<TouchableOpacity onPress={this.getVerification.bind(this)}>
							<Text style={styles.getSign}> {this.state.verification_text}</Text>
						</TouchableOpacity>
					</View>
				</View>
				<View style={styles.loginIn}>
					<Text style={styles.loginText} onPress={this.clickOK.bind(this)}>
						登录
					</Text>
				</View>
				<View style={styles.wechatLogin}>
					<Image source={require('./images/common/wechat.png')} />
					<Text style={styles.wechatLoginText} onPress={this.wechatLogin.bind(this)}>
						微信登录
					</Text>
					<Image source={require('./images/common/arrowRight.png')} />
				</View>
			</View>
		);
	}

	componentWillMount() {
		console.log('================================================'); // e.g US
		console.log('Device getUniqueID', DeviceInfo.getUniqueID()); // e.g US
		console.log('Device getSerialNumber', DeviceInfo.getSerialNumber()); // e.g US
		console.log('================================================'); // e.g US
		this.setState({
			deviceCode: DeviceInfo.getUniqueID() + DeviceInfo.getSerialNumber()
		});
	}

	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 {
			setTimeout(() => {
				this.setState({
					verification_text: parseInt(this.state.verification_text) - 1 + ''
				});
				this.CountDown();
			}, 1000);
		}
	}

	//绑定手机号
	clickOK() {
		//请求报错
		//参数
		/**
         * 
         * {
	        "channel": "006",
	        "deviceCode": "fb3dcd333348ZX1G42CPJD",
	        "mobile": "15810271473",
	        "sign": "9999"
            }   
         * 
         * 
         * 
         * 
         */
		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: 'POST', //请求方法
				//请求体
				body: {
					mobile: this.state.phone_num,
					sign: this.state.verification_code,
					channel: '006',
					deviceCode: this.state.deviceCode
				}
			};
			http_user.mobileLoginAndReg(option).then((result) => {
				if (result.code == 200) {
					ToastAndroid.show(result.message, ToastAndroid.SHORT);
				} else {
					ToastAndroid.show(result.message, ToastAndroid.SHORT);
				}
			});
		} else {
			ToastAndroid.show('验证码不正确', ToastAndroid.SHORT);
		}
	}

	wechatLogin() {
		//网络请求 status 500
		/**
         * {
	        "channel": "006",
	        "deviceCode": "fb3dcd333348ZX1G42CPJD",
	        "openId": "odI7ls2Bk_0A2_Y0E6D4dAKuSsqs",
        	"unionId": "o8sgct5UksQ7kfrSGTBRRgwY5oVU",
        	"avatar": "",
	        "sex": "2",
        	"nickName": "雨露"
            }
         * 
         * 
         * 
         */
		console.log('this.state.deviceCode:' + this.state.deviceCode);
		wechat.wechatLogin((user) => {
			let option = {
				method: 'POST',
				body: {
					channel: '006',
					deviceCode: this.state.deviceCode,
					openId: user['openid'],
					unionId: user['unionid'],
					avatar: user['province'] + user['city'],
					sex: +user['sex'],
					nickName: user['nickname']
				}
			};
			http_user.wechatLogin(option).then((result) => {
				if (result.code == 200) {
					//登陆成功了,可以存储用户数据到本地
					ToastAndroid.show(result.message, ToastAndroid.SHORT);
				} else {
					ToastAndroid.show(result.message, ToastAndroid.SHORT);
				}
				console.log('result-------:' + result);
			});
		});
	}
}

const styles = StyleSheet.create({
	wrapper: {
		flex: 1
	},
	jumpText: {
		color: '#3e3e3e',
		fontSize: 16,
		marginRight: 4
	},
	jump: {
		// width: Dimensions.width,
		flex: 2,
		alignItems: 'flex-end',
		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
	}
});