efunbox-mobile-8/pages/PersonalInfo.js

/**
 * Sample React Native App
 * https://github.com/facebook/react-native
 *
 * @format
 * @flow
 */

import React, { Component } from 'react';
import {
	Platform,
	StyleSheet,
	Text,
	View,
	Image,
	TouchableOpacity,
	ImageBackground,
	ToastAndroid,
	BackHandler,
	StatusBar,
	Modal
} from 'react-native';
import BasePage from './BasePage';
import CourseTitle from '../pages/components/CourseTitle';
import ChosePhoto from '../pages/components/ChosePhoto';
import RegionModal from '../pages/components/RegionModal';
import BirthdayModal from '../pages/components/BirthdayModal';
import GradeSelectionModal from '../pages/components/GradeSelectionModal';
import PersonalInfoDialog from '../pages/components/PersonalInfoDialog';
import { NavigationActions, StackActions } from 'react-navigation';
import asyncStorage from './utils/asyncStorage';
import http_user from './services/user';
import wechat from './utils/wechat';
type Props = {};

export default class PersonalInfo extends BasePage {
	state = {
		nickName: '初始昵称',
		schoolName: '未设置',
		provinceName: '广东省',
		citys: '深圳市',
		grade_text: '七年级',
		grade_index: 6,
		birthday_year: 0,
		birthday_month: 0,
		birthday_day: 0,
		birthday_time: 0,
		photo_uri: require('./images/userInfo/default_photo.png'),
		phone: '',
		phone_bind_result: false,
		phone_bind_type: 1, //1是绑定，2是修改
		phone_bind_color: '',
		wechat_nickName: '',
		wechat_bind_color: '',
		show_bind_phone: false
	};

	render() {
		return (
			<View style={{ backgroundColor: '#F0F1F5', flex: 1 }}>
				<View style={{ width: '100%', height: this.getWindowHeight() }}>
					<PersonalInfoDialog
						ref={(view) => (this.dialog = view)}
						updateParentState={this.updateState.bind(this)}
					/>
					<ChosePhoto ref={(view) => (this.chosephoto = view)} photoback={this.photoback.bind(this)} />
					<RegionModal
						ref={(view) => (this.regionmodal = view)}
						cityscommit={this.cityscommit.bind(this)}
						provinceName={this.state.provinceName}
						citys={this.state.citys}
					/>
					<GradeSelectionModal
						ref={(view) => (this.gradeselectionModal = view)}
						commitGrade={this.commitGrade.bind(this)}
						grade_index={this.state.grade_index}
					/>
					<BirthdayModal
						ref={(view) => (this.birthdaymodal = view)}
						birthdaycommit={this.birthdaycommit.bind(this)}
						year={this.state.birthday_year}
						month={this.state.birthday_month}
						day={this.state.birthday_day}
					/>
					<StatusBar backgroundColor={'transparent'} translucent={true} />

					<View
						style={{
							flex: 1,
							flexDirection: 'column'
						}}
					>
						<ImageBackground
							source={require('./images/userInfo/top.png')}
							style={{
								flex: 3,
								width: '100%',
								backgroundColor: '#F0F1F5',
								height: '75%'
							}}
							imageStyle={{ resizeMode: 'cover' }}
						>
							<View
								style={{
									flex: 1,
									alignItems: 'center',
									justifyContent: 'center',
									flexDirection: 'column'
								}}
							>
								<CourseTitle
									style={{ flex: 5 }}
									width={this.getWindowWidth()}
									title="个人信息"
									lefttype={2}
									righttype={0}
									textcolor={'white'}
									backPress={() => this.goBack()}
								/>

								<TouchableOpacity
									style={{
										flex: 1.3,
										backgroundColor: 'white',
										width: '90%',
										bottom: 0,
										alignItems: 'center',
										justifyContent: 'flex-end',
										bottom: -30,
										borderRadius: 10,
										overflow: 'hidden'
									}}
									activeOpacity={1}
									onPress={() => this.arrowpress(0)}
								>
									<View
										style={{
											flex: 1,
											borderRadius: 20,
											overflow: 'hidden',
											alignItems: 'center',
											justifyContent: 'center',
											flexDirection: 'row'
										}}
									>
										<View style={{ flex: 0.5 }} />

										<View
											style={{
												flex: 3,
												height: '100%',
												alignItems: 'center',
												justifyContent: 'center'
											}}
										>
											<Image
												style={{
													borderRadius: 50,
													width: '80%',
													height: '70%'
													// borderWidth: 3
													// borderColor: "red"
												}}
												source={this.state.photo_uri}
											/>
										</View>
										<View
											style={{
												flex: 9,
												backgroundColor: 'white',
												height: '100%',
												justifyContent: 'center'
											}}
										>
											<Text style={{ left: 10, color: 'black', fontSize: 16 }}>修改头像</Text>
										</View>
										<View
											style={{
												flex: 1.5,
												height: '65%',
												alignItems: 'center',
												justifyContent: 'center'
											}}
										>
											{this.getArraowImg(0)}
										</View>
									</View>
								</TouchableOpacity>
								<View style={{ flex: 0.5 }} />
							</View>
						</ImageBackground>
						<View style={{ flex: 0.2 }} />
						<View
							style={{
								width: '100%',
								flex: 4,
								alignItems: 'center',
								backgroundColor: '#F0F1F5'
							}}
						>
							<View
								style={{
									backgroundColor: 'rgb(242, 242, 242)',
									width: '90%',
									alignItems: 'center',
									justifyContent: 'center',
									height: '100%',
									overflow: 'hidden',
									borderRadius: 10
								}}
							>
								<View
									style={{
										width: '100%',
										alignItems: 'center',
										justifyContent: 'center',
										height: '100%'
									}}
								>
									<TouchableOpacity
										style={{
											flex: 1,
											marginVertical: 1,
											width: '100%',
											flexDirection: 'row',
											backgroundColor: 'white'
										}}
										activeOpacity={1}
										onPress={() => this.arrowpress(1)}
									>
										<View
											style={{
												flex: 2,
												alignItems: 'center',
												justifyContent: 'center'
											}}
										>
											{this.choseheadericon(1)}
										</View>
										<Text style={styles.item_text}>昵称</Text>
										<View
											style={{
												flex: 5,
												alignItems: 'flex-end'
											}}
										>
											<Text
												style={{
													flex: 1,
													fontSize: 15,
													textAlignVertical: 'center'
												}}
												numberOfLines={1}
												ellipsizeMode={'tail'}
											>
												{this.state.nickName}
											</Text>
										</View>
										<View
											style={{
												flex: 1.1,
												alignItems: 'center',
												justifyContent: 'center'
											}}
										>
											{this.getArraowImg(1)}
										</View>
									</TouchableOpacity>
									<TouchableOpacity
										style={{
											flex: 1,
											width: '100%',
											flexDirection: 'row',
											backgroundColor: 'white',
											marginVertical: 1
										}}
										activeOpacity={1}
										onPress={() => this.arrowpress(2)}
									>
										<View
											style={{
												flex: 2,
												alignItems: 'center',
												justifyContent: 'center'
											}}
										>
											{this.choseheadericon(2)}
										</View>
										<Text style={styles.item_text}>生日</Text>
										<View
											style={{
												flex: 5,
												alignItems: 'flex-end'
											}}
										>
											<Text
												style={{
													flex: 1,
													fontSize: 15,
													textAlignVertical: 'center'
												}}
												numberOfLines={1}
												ellipsizeMode={'tail'}
											>
												{this.state.birthday_time}
											</Text>
										</View>
										<View
											style={{
												flex: 1.1,
												alignItems: 'center',
												justifyContent: 'center'
											}}
										>
											{this.getArraowImg(2)}
										</View>
									</TouchableOpacity>
									<TouchableOpacity
										style={{
											flex: 1,
											width: '100%',
											flexDirection: 'row',
											backgroundColor: 'white',
											marginVertical: 1
										}}
										activeOpacity={1}
										onPress={() => this.arrowpress(3)}
									>
										<View
											style={{
												flex: 2,
												alignItems: 'center',
												justifyContent: 'center'
											}}
										>
											{this.choseheadericon(3)}
										</View>

										<Text style={styles.item_text}>所在地区</Text>
										<View
											style={{
												flex: 5,
												alignItems: 'flex-end'
											}}
										>
											<Text
												style={{
													flex: 1,
													fontSize: 15,
													textAlignVertical: 'center'
												}}
												numberOfLines={1}
												ellipsizeMode={'tail'}
											>
												{this.state.provinceName}-{this.state.citys}
											</Text>
										</View>
										<View
											style={{
												flex: 1.1,
												alignItems: 'center',
												justifyContent: 'center'
											}}
										>
											{this.getArraowImg(3)}
										</View>
									</TouchableOpacity>
									<TouchableOpacity
										style={{
											flex: 1,
											width: '100%',
											flexDirection: 'row',
											backgroundColor: 'white',
											marginVertical: 1
										}}
										activeOpacity={1}
										onPress={() => this.arrowpress(4)}
									>
										<View
											style={{
												flex: 2,
												alignItems: 'center',
												justifyContent: 'center'
											}}
										>
											{this.choseheadericon(4)}
										</View>

										<Text style={styles.item_text}>我的学校</Text>
										<View
											style={{
												flex: 5,
												alignItems: 'flex-end'
											}}
										>
											<Text
												style={{
													flex: 1,
													fontSize: 15,
													textAlignVertical: 'center'
												}}
												numberOfLines={1}
												ellipsizeMode={'tail'}
											>
												{this.state.schoolName}
											</Text>
										</View>
										<View
											style={{
												flex: 1.1,
												alignItems: 'center',
												justifyContent: 'center'
											}}
										>
											{this.getArraowImg(4)}
										</View>
									</TouchableOpacity>
									<TouchableOpacity
										style={{
											flex: 1,
											marginTop: 1,
											width: '100%',
											flexDirection: 'row',
											backgroundColor: 'white',
											marginVertical: 1
										}}
										activeOpacity={1}
										onPress={() => this.arrowpress(5)}
									>
										<View
											style={{
												flex: 2,
												alignItems: 'center',
												justifyContent: 'center'
											}}
										>
											{this.choseheadericon(5)}
										</View>

										<Text style={styles.item_text}>我的年级</Text>
										<View
											style={{
												flex: 5,
												alignItems: 'flex-end'
											}}
										>
											<Text
												style={{
													flex: 1.1,
													fontSize: 15,
													textAlignVertical: 'center'
												}}
												numberOfLines={1}
												ellipsizeMode={'tail'}
											>
												{this.state.grade_text}
											</Text>
										</View>
										<View
											style={{
												flex: 1.1,
												alignItems: 'center',
												justifyContent: 'center'
											}}
										>
											{this.getArraowImg(5)}
										</View>
									</TouchableOpacity>
								</View>
							</View>
						</View>
						<View style={{ flex: 0.3, backgroundColor: '#F0F1F5' }} />
						<View
							style={{
								flex: 1.5,
								backgroundColor: '#F0F1F5',
								alignItems: 'center',
								justifyContent: 'center'
							}}
						>
							<View
								style={{
									width: '90%',
									alignItems: 'center',
									justifyContent: 'center',
									height: '100%',
									overflow: 'hidden',
									borderRadius: 10
								}}
							>
								<TouchableOpacity
									style={{
										flex: 1,
										width: '100%',
										flexDirection: 'row',
										backgroundColor: 'white',
										marginVertical: 1
									}}
									activeOpacity={1}
									onPress={() => this.arrowpress(6)}
								>
									<View
										style={{
											flex: 2,
											alignItems: 'center',
											justifyContent: 'center'
										}}
									>
										{this.choseheadericon(6)}
									</View>

									<Text style={styles.item_text}>我的手机号</Text>
									<View
										style={{
											flex: 5,
											alignItems: 'flex-end'
										}}
									>
										<Text
											style={{
												flex: 1,
												fontSize: 15,
												textAlignVertical: 'center',
												color: this.state.phone_bind_color
											}}
											numberOfLines={1}
											ellipsizeMode={'tail'}
										>
											{this.state.phone}
										</Text>
									</View>
									<View
										style={{
											flex: 1.1,
											alignItems: 'center',
											justifyContent: 'center'
										}}
									>
										{this.getArraowImg(6)}
									</View>
								</TouchableOpacity>
								<TouchableOpacity
									style={{
										flex: 1,
										width: '100%',
										flexDirection: 'row',
										backgroundColor: 'white',
										marginVertical: 1
									}}
									activeOpacity={1}
									onPress={() => this.arrowpress(7)}
								>
									<View
										style={{
											flex: 2,
											alignItems: 'center',
											justifyContent: 'center'
										}}
									>
										{this.choseheadericon(7)}
									</View>

									<Text style={styles.item_text}>我的微信</Text>
									<View
										style={{
											flex: 5,
											alignItems: 'flex-end'
										}}
									>
										<Text
											style={{
												flex: 1,
												fontSize: 15,
												textAlignVertical: 'center',
												color: this.state.wechat_bind_color
											}}
											numberOfLines={1}
											ellipsizeMode={'tail'}
										>
											{this.state.wechat_nickName}
										</Text>
									</View>
									<View
										style={{
											flex: 1.1,
											alignItems: 'center',
											justifyContent: 'center'
										}}
									>
										{this.getArraowImg(4)}
									</View>
								</TouchableOpacity>
							</View>
						</View>
						<View
							style={{
								width: '100%',
								flex: 2,
								backgroundColor: '#F0F1F5',
								flexDirection: 'column'
							}}
						>
							<View
								style={{
									flex: 1,
									flexDirection: 'row',
									alignItems: 'center',
									justifyContent: 'center'
								}}
							>
								<View
									style={{
										alignItems: 'center',
										width: '100%',
										height: '100%',
										backgroundColor: '#F0F1F5',
										justifyContent: 'center'
									}}
								>
									<View
										style={{
											flex: 1.5
										}}
									/>
									<TouchableOpacity
										activeOpacity={1}
										style={{
											flex: 2,
											width: '100%',
											alignItems: 'center',
											justifyContent: 'center',
											height: '100%'
										}}
										onPress={() => this.logout()}
									>
										<ImageBackground
											source={require('./images/userInfo/logoutbg1.png')}
											style={{
												flex: 1,
												width: '100%',
												alignItems: 'center',
												justifyContent: 'center',
												height: '100%'
											}}
											imageStyle={{ resizeMode: 'contain' }}
										>
											<Text
												style={{
													fontSize: 22,
													color: 'white',
													width: '100%',
													textAlign: 'center'
												}}
											>
												退出登录
											</Text>
										</ImageBackground>
									</TouchableOpacity>
									<View
										style={{
											flex: 1.5
										}}
									/>
								</View>
							</View>
						</View>
					</View>
				</View>
				{/* <BindPhoneSuccess show={this.state.show_bind_phone} /> */}
			</View>
		);
	}

	componentWillMount() {
		var date = new Date();
		var year = date.getFullYear().toString();
		var month = (date.getMonth() + 1).toString();
		var day = date.getDate().toString();
		this.setState({
			birthday_year: year,
			birthday_month: month,
			birthday_day: day,
			birthday_time: year + '年' + month + '月' + day + '日'
		});
		if (this.state.phone == null || this.state.phone === '') {
			this.setState({
				phone_bind_color: 'red',
				phone_bind_type: 1,
				phone: '未绑定'
			});
		} else {
			this.setState({
				phone_bind_color: 'rgba(113, 113, 113, 1)',
				phone_bind_type: 2
			});
		}
		if (this.state.wechat_nickName == null || this.state.wechat_nickName === '') {
			this.setState({
				wechat_bind_color: 'red',
				wechat_nickName: '未绑定'
			});
		} else {
			this.setState({
				wechat_bind_color: 'rgba(113, 113, 113, 1)'
			});
		}
		BackHandler.addEventListener('hardwareBackPress', this.onBackAndroid);
	}
	componentWillUnmount() {
		BackHandler.removeEventListener('hardwareBackPress', this.onBackAndroid);
	}

	onBackAndroid = () => {
		if (this.state.show_bind_phone) {
			this.setState({
				show_bind_phone: false
			});
		} else {
			this.goBack();
		}
		return true;
	};

	getArraowImg(type) {
		return (
			<TouchableOpacity
				style={{
					width: '100%',
					height: '100%',
					alignItems: 'center',

					resizeMode: 'contain',
					justifyContent: 'center'
				}}
				//onPress={() => this.arrowpress(type)}
			>
				<Image
					source={require('./images/userInfo/arrow.png')}
					style={{
						width: '20%',
						height: '30%'
					}}
				/>
			</TouchableOpacity>
		);
	}

	choseheadericon(type) {
		let headerpath;
		switch (type) {
			case 0:
				headerpath = require('./images/userInfo/headportrait.png');

				break;
			case 1:
				headerpath = require('./images/userInfo/nickname.png');
				break;
			case 2:
				headerpath = require('./images/userInfo/birthday.png');
				break;
			case 3:
				headerpath = require('./images/userInfo/location.png');
				break;
			case 4:
				headerpath = require('./images/userInfo/school.png');
				break;
			case 5:
				headerpath = require('./images/userInfo/grade.png');
				break;
			case 6:
				headerpath = require('./images/userInfo/phone.png');
				break;
			case 7:
				headerpath = require('./images/userInfo/wechat.png');
				break;
		}
		// alert(headerpath);
		return (
			<Image
				source={headerpath}
				style={{
					width: '60%',
					height: '60%',
					resizeMode: 'contain'
				}}
			/>
		);
	}

	arrowpress(type) {
		switch (type) {
			case 0:
				this.chosephoto.setModalVisible(true);
				break;
			case 1:
				this.dialog.setInfo('修改昵称', '昵称');
				this.dialog.setModalVisible(true, 1);
				break;
			case 2:
				// alert("生日");
				this.birthdaymodal.setModalVisible(true);
				break;
			case 3:
				this.regionmodal.setModalVisible(true);
				break;
			case 4:
				this.dialog.setInfo('我的学校', '学校名称');
				this.dialog.setModalVisible(true, 2);

				break;
			case 5:
				this.gradeselectionModal.setModalVisible(true);
				break;
			//手机号
			case 6:
				this.props.navigation.navigate('PhoneBind', {
					type: this.state.phone_bind_type,
					bind_phone_back: this.bind_phone_back.bind(this)
				});
				break;
			//微信
			case 7:
				wechat.wechatLogin((result) => {
					console.log('openid:' + result['openid']);
					console.log('unionid:' + result['unionid']);
					console.log('nickname:' + result['nickname']);
					console.log('sex:' + result['sex']);
					console.log('avatar:' + result['province'] + result['city']);
					let opts = {
						method: 'PUT',
						body: {
							openId: result['openid'],
							unionId: result['unionid'],
							avatar: result['province'] + result['city'],
							sex: result['sex'],
							nickName: result['nickname']
						}
					};
					http_user.bind_wechat(opts).then((res) => {
						if (res.code == 200) {
							this.setState({
								wechat_nickName: res['nickname'],
								wechat_bind_color: 'rgba(113, 113, 113, 1)'
							});
						} else {
							ToastAndroid.show(res.message, ToastAndroid.SHORT);
						}
					});
				});
				break;
		}
	}

	logout() {
		const resetAction = StackActions.reset({
			index: 0,
			actions: [
				NavigationActions.navigate({ routeName: 'Login' }) //要跳转到的页面名字
			]
		});
		this.props.navigation.dispatch(resetAction);
	}

	updateState(input_text, type) {
		if (type == 1) {
			this.setState({ nickName: input_text });
			this.updateUserInfo({ nickName: input_text });
		} else if (type == 2) {
			this.setState({ schoolName: input_text });
			this.updateUserInfo({ school: input_text });
		}
	}

	cityscommit(provinces_name, citys_name) {
		this.setState({
			provinceName: provinces_name,
			citys: citys_name
		});
		this.updateUserInfo({ province: provinces_name, city: citys_name });
	}
	commitGrade(text, index) {
		this.setState({
			grade_text: text,
			grade_index: index
		});
		this.updateUserInfo({ grade: index + 1 });
	}
	birthdaycommit(year, month, day) {
		this.setState({
			birthday_time: year + '年' + month + '月' + day + '日'
		});
		var date = new Date(year + '-' + month + '-' + day);
		this.updateUserInfo({ birthday: date });
	}

	photoback(photo_uri) {
		if (photo_uri == undefined || photo_uri === '' || photo_uri == null) {
			return;
		}
		this.setState({
			photo_uri: { uri: photo_uri }
		});
	}

	updateUserInfo(object) {
		let opts = {
			method: 'PUT', //请求方法
			body: object //请求体
		};
		http_user.update_UserInfo(opts).then((res) => {
			console.log(res);
		});
	}

	bind_phone_back(phone_num, result) {
		if (result == true) {
			ToastAndroid.show('修改成功', ToastAndroid.SHORT);
			this.setState({ phone: phone_num, phone_bind_result: result, show_bind_phone: true });
		} else {
			// ToastAndroid.show('修改失败', ToastAndroid.SHORT);
		}
	}
}

class BindPhoneSuccess extends BasePage {
	render() {
		if (this.props.show) {
			return (
				<View
					style={{
						position: 'absolute',
						width: '100%',
						height: '100%',
						backgroundColor: 'rgba(0, 0, 0, 0.5)'
					}}
				/>
			);
		} else {
			return null;
		}
	}
}
const styles = StyleSheet.create({
	item: {
		flex: 1,
		width: '100%',
		flexDirection: 'row',
		backgroundColor: 'white',
		marginTop: 1,
		backgroundColor: 'red'
	},
	item_text: {
		flex: 3,
		textAlignVertical: 'center',
		color: 'black',
		fontSize: 16
	}
});