|
|
@@ -1,166 +1,303 @@
|
|
|
/*
|
|
|
* 登录
|
|
|
*/
|
|
|
-import React, { Component } from "react";
|
|
|
-import {
|
|
|
- Platform,
|
|
|
- StyleSheet,
|
|
|
- Text,
|
|
|
- View,
|
|
|
- Image,
|
|
|
- TouchableOpacity,
|
|
|
- ImageBackground,
|
|
|
- Button,
|
|
|
- StatusBar,
|
|
|
- Modal,
|
|
|
- TouchableHighlight,
|
|
|
- DeviceEventEmitter,
|
|
|
- TextInput,
|
|
|
- ScrollView
|
|
|
-} from "react-native";
|
|
|
-import BasePage from "./BasePage";
|
|
|
+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 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 = {
|
|
|
+ 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()
|
|
|
+ });
|
|
|
+ }
|
|
|
|
|
|
- };
|
|
|
- render() {
|
|
|
- return (
|
|
|
- <View style={styles.wrapper}>
|
|
|
- <View style={styles.jump}>
|
|
|
- <TouchableOpacity style={styles.jumpBtn}>
|
|
|
- <Text style={styles.jumpText}>跳过</Text>
|
|
|
- <Image source={require('./images/common/arrowRight.png')}></Image>
|
|
|
- </TouchableOpacity>
|
|
|
- </View>
|
|
|
- <View style={styles.phoneNumberBox}>
|
|
|
- <Text style={styles.phoneNumber}>手机号</Text>
|
|
|
- <TextInput
|
|
|
- style={styles.phoneText}
|
|
|
- onChangeText={(text) => this.setState({ text })}
|
|
|
- value={this.state.text}
|
|
|
- placeholder={'请输入手机号'}
|
|
|
- />
|
|
|
- </View>
|
|
|
- <View style={styles.signNumberBox}>
|
|
|
- <Text style={styles.phoneNumber}>验证码</Text>
|
|
|
- <View style={styles.signNumberLine2}>
|
|
|
- <TextInput
|
|
|
- style={styles.signText}
|
|
|
- onChangeText={(text) => this.setState({ text })}
|
|
|
- value={this.state.text}
|
|
|
- placeholder={'请输入验证码'}
|
|
|
- />
|
|
|
- <TouchableOpacity>
|
|
|
- <Text style={styles.getSign}>获取验证码</Text>
|
|
|
- </TouchableOpacity>
|
|
|
- </View>
|
|
|
- </View>
|
|
|
- <View style={styles.loginIn}>
|
|
|
- <Text style={styles.loginText}>登录</Text>
|
|
|
- </View>
|
|
|
- <View style={styles.wechatLogin}>
|
|
|
- <Image source={require('./images/common/wechat.png')}></Image>
|
|
|
- <Text style={styles.wechatLoginText}>微信登录</Text>
|
|
|
- <Image source={require('./images/common/arrowRight.png')}></Image>
|
|
|
- </View>
|
|
|
- </View>
|
|
|
- )
|
|
|
- }
|
|
|
+ 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
|
|
|
- }
|
|
|
-})
|
|
|
+ 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
|
|
|
+ }
|
|
|
+});
|
zhangmengjie