efunbox-mobile-8/pages/PersonalInfo.js

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

import React, { Component } from 'react';
import {
	StyleSheet,
	Text,
	View,
	Image,
	TouchableOpacity,
	ImageBackground,
	ToastAndroid,
	BackHandler,
	StatusBar,
	DeviceEventEmitter
} 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 http_user from './services/user';
import wechat from './utils/wechat';
import commonutil from './utils/commonutil';

type Props = {};

export default class PersonalInfo extends BasePage {
	state = {
		ready: false,
		user_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: 'red',
		wechat_nickName: '',
		wechat_bind_color: 'red',
		show_bind_phone: false
	};

	render() {
		if (!this.state.ready) {
			return null;
		}
		return (
			<View style={{ backgroundColor: '#F0F1F5', flex: 1 }}>
				<View style={{ width: '100%', height: this.getWindowHeight() }}>
					<PersonalInfoDialog
						ref={(view) => (this.dialog = view)}
						style={{ height: 10000 }}
						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.personinfoback.bind(this)}
								/>

								<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: 3.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.user_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.7,
								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: 3
										}}
									/>
									<TouchableOpacity
										activeOpacity={1}
										style={{
											flex: 2,
											width: '100%',
											alignItems: 'center',
											justifyContent: 'center',
											height: '100%'
										}}
										onPress={() => this.logout()}
									>
										<ImageBackground
											source={require('./images/userInfo/logoutbg.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() {
		//获取用户信息
		this.setView();
		BackHandler.addEventListener('hardwareBackPress', this.onBackAndroid);
	}
	componentWillUnmount() {
		BackHandler.removeEventListener('hardwareBackPress', this.onBackAndroid);
	}

	async setView() {
		console.log('====================================');
		console.log('userInfo', global.userInfo);
		console.log('====================================');
		var time;
		if (
			global.userInfo.birthday == null ||
			global.userInfo.birthday == undefined ||
			global.userInfo.birthday === ''
		) {
			time = this.formaterDate(Date.parse(new Date()));
		} else {
			time = this.formaterDate(global.userInfo.birthday);
		}
		this.setState({
			schoolName: global.userInfo.school === '' ? '未设置' : global.userInfo.school,
			provinceName: global.userInfo.province === '' ? '未设置' : global.userInfo.province,
			citys: global.userInfo.city === '' ? '未设置' : global.userInfo.city,
			phone: global.userInfo.mobile,
			wechat_nickName: global.userInfo.wechat_nickName,
			user_nickName: global.userInfo.nickName,
			birthday_time: time,
			photo_uri:
				global.userInfo.avatar.length > 0
					? { uri: global.userInfo.avatar }
					: require('./images/userInfo/default_photo.png')
		});
		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)'
			});
		}
		this.setState({
			ready: true
		});
	}

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

	getArraowImg(type) {
		return (
			<View
				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%'
					}}
				/>
			</View>
		);
	}

	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:
				if (this.state.phone === '未绑定') {
					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) => {
					let opts = {
						method: 'PUT',
						body: {
							openId: result['openid'],
							unionId: result['unionid'],
							avatar: '',
							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 {
							this.Toast(res.message);
						}
					});
				});
				break;
		}
	}

	logout() {
		//清空存储的用户信息
		http_user.LoginOut().then((res) => {
			console.log('====================================');
			console.log('res', res);
			console.log('====================================');
			global.storage.remove({ key: 'userInfo' });
			this.clearPageToNext('Login');
		});
	}

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

	cityscommit(provinces_name, citys_name) {
		this.setState({
			provinceName: provinces_name,
			citys: citys_name
		});
		this.updateUserInfo({ province: provinces_name, city: citys_name }, 4);
	}
	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 }, 3);
	}

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

	updateUserInfo(object, type) {
		let opts = {
			method: 'PUT', //请求方法
			body: object //请求体
		};
		http_user.update_UserInfo(opts).then((res) => {
			switch (type) {
				case 0:
					//只改变头像
					global.userInfo.avatar = res.data.avatar;
					break;
				case 1:
					//修改昵称
					global.userInfo.nickName = res.data.nickName;
					break;
				case 2:
					global.userInfo.birthday = res.data.birthday;
					break;
				case 3:
					global.userInfo.birthday = res.data.birthday;
					break;
				case 4:
					global.userInfo.province = res.data.province;
					global.userInfo.city = res.data.city;
					break;
				case 5:
					global.userInfo.school = res.data.school;
					break;
				case 6:
					global.userInfo.mobile = res.data.mobile;
					break;
			}
			commonutil.saveUserInfo();
		});
	}

	bind_phone_back(phone_num, result) {
		if (result == true) {
			this.Toast('修改手机号成功');
			this.setState({
				phone: phone_num,
				phone_bind_result: result,
				show_bind_phone: true
			});
			this.updateUserInfo({ mobile: phone_num }, 6);
		} else {
			this.Toast('修改手机号失败');
		}
	}
	personinfoback() {
		// this.props.navigation.state.params.infoback();
		DeviceEventEmitter.emit('infoback');
		this.props.navigation.goBack();
	}

	formaterDate(date) {
		var date = new Date(date);
		var Y = date.getFullYear() + '';
		var M = (date.getMonth() + 1 < 10 ? '0' + (date.getMonth() + 1) : date.getMonth() + 1) + '';
		var D = (date.getDate() < 10 ? '0' + date.getDate() : date.getDate()) + ' ';
		this.setState({
			birthday_year: Y,
			birthday_month: M,
			birthday_day: D
		});
		return Y + '-' + M + '-' + D;
	}

	upload_head(file_path) {
		//上传成功但是没拿到数据
		http_user.uploadImage(file_path).then((res) => {
			//请求成功
			if (res.code == 200) {
				this.setState({
					photo_uri: { uri: res.data }
				});
				this.updateUserInfo({ avatar: res.data }, 0);
				this.Toast('上传成功');
			} else {
				this.Toast('上传失败:' + res.message);
			}
		});
	}
}

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