efunbox-mobile-8/pages/components/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,
	Button,
	StatusBar,
	Modal,
	TouchableHighlight,
	DeviceEventEmitter
} from 'react-native';
import AndroidUtil from '../../util/AndroidUtil';
import BasePage from '../BasePage';
import CourseTitle from './CourseTitle';
import ChosePhoto from './ChosePhoto';
import RegionModal from './RegionModal';
import BirthdayModal from './BirthdayModal';
import GradeSelectionModal from './GradeSelectionModal';
import Header from './Header';
import PersonalInfoDialog from './PersonalInfoDialog';
import { NavigationActions, StackActions } from 'react-navigation';
import asyncStorage from '../utils/asyncStorage';
import user from '../services/user';
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')
	};

	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: 2.8,
								width: '100%',
								backgroundColor: '#F0F1F5',
								height: '75%'
							}}
							imageStyle={{ resizeMode: 'cover' }}
						>
							<View
								style={{
									flex: 1,
									alignItems: 'center',
									justifyContent: 'center',
									flexDirection: 'column'
								}}
							>
								<CourseTitle
									style={{ flex: 4 }}
									width={this.getWindowWidth()}
									title="个人信息"
									lefttype={2}
									righttype={0}
									textcolor={'white'}
									backPress={() => this.goBack()}
								/>

								<TouchableOpacity
									style={{
										flex: 1,
										backgroundColor: 'white',
										width: '90%',
										bottom: 0,
										alignItems: 'center',
										justifyContent: 'center',
										borderRadius: 20,
										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>
						</ImageBackground>
						<View style={{ flex: 0.5, backgroundColor: '#F0F1F5' }} />
						<View
							style={{
								width: '100%',
								flex: 4.3,
								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={{
								width: '100%',
								flex: 4,
								backgroundColor: '#F0F1F5',
								flexDirection: 'column'
							}}
						>
							<View style={{ flex: 2.5 }} />
							<View style={{ flex: 2, flexDirection: 'row' }}>
								<View style={{ flex: 1 }} />
								<View
									style={{
										flex: 7,
										width: '100%',
										height: '100%'
									}}
								>
									<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 }} />
								</View>
								<View style={{ flex: 1 }} />
							</View>
							<View style={{ flex: 0.8 }} />
						</View>
					</View>
				</View>
			</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 + '日'
		});
	}

	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;
		}
		// 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;
		}
	}

	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 //请求体
		};
		user.update_UserInfo(opts).then((res) => {
			console.log(res);
			console.log('success');
		});
	}
}

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
	}
});