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
} 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,
		file_user_data: new Map(),
		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)}
						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/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() {
		//获取用户信息
		this.getUserInfo();
		BackHandler.addEventListener('hardwareBackPress', this.onBackAndroid);
	}
	componentWillUnmount() {
		BackHandler.removeEventListener('hardwareBackPress', this.onBackAndroid);
	}

	async getUserInfo() {
		let userinfo = await global.storage
			.load({
				key: 'userInfo'
			})
			.then((result) => {
				this.state.file_user_data = commonutil.jsonToMap(result);
				var time = this.formaterDate(this.state.file_user_data.get('birthday'));
				this.setState({
					schoolName:
						this.state.file_user_data.get('school') === ''
							? '未设置'
							: this.state.file_user_data.get('school'),
					provinceName:
						this.state.file_user_data.get('province') === ''
							? '未设置'
							: this.state.file_user_data.get('province'),
					citys: this.state.file_user_data.get('city') === '' ? '未设置' : this.state.file_user_data.get('city'),
					phone: this.state.file_user_data.get('mobile'),
					wechat_nickName: this.state.file_user_data.get('wechat_nickName'),
					user_nickName: this.state.file_user_data.get('nickName'),
					birthday_time: time
				});
				if (this.state.file_user_data.get('avatar').length > 0) {
					this.setState({
						photo_uri: {
							uri: this.state.file_user_data.get('avatar')
						}
					});
					console.log('====================================');
					console.log('加载头像路径了..');
					console.log('====================================');
				}
				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
				});
			})
			.catch((err) => {
				console.log('PersonalInfo:ERROR' + err.message);
			});
	}

	onBackAndroid = () => {
		if (this.state.show_bind_phone) {
			this.setState({
				show_bind_phone: false
			});
		} else {
			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) => {
					console.log('openid:' + result['openid']);
					console.log('unionid:' + result['unionid']);
					console.log('nickname:' + result['nickname']);
					console.log('sex:' + result['sex']);
					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 {
							ToastAndroid.show(res.message, ToastAndroid.SHORT);
						}
					});
				});
				break;
		}
	}

	logout() {
		//清空存储的用户信息
		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 });
		} 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.upload_head(photo_uri);
	}

	updateUserInfo(object) {
		let opts = {
			method: 'PUT', //请求方法
			body: object //请求体
		};
		http_user.update_UserInfo(opts).then((res) => {
			this.update_file_userinfo(this.state.file_user_data, res);
			this.saveUserInfo(commonutil.mapToJson(this.state.file_user_data));
		});
	}

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

	personinfoback() {
		this.props.navigation.state.params.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 });
			} else {
				alert('上传失败:' + res.message);
			}
		});
	}

	update_file_userinfo(map, res) {
		map.set('ageGroup', res.data.ageGroup);
		map.set('avatar', res.data.avatar);
		map.set('birthday', res.data.birthday);
		map.set('channel', res.data.channel);
		map.set('city', res.data.city);
		map.set('country', res.data.country);
		map.set('eid', res.data.eid);
		map.set('gmtCreated', res.data.gmtCreated);
		map.set('gmtModified', res.data.gmtModified);
		map.set('mobile', res.data.mobile);
		map.set('nickName', res.data.nickName);
		map.set('province', res.data.province);
		map.set('school', res.data.school);
		map.set('sex', res.data.sex);
		map.set('status', res.data.status);
		map.set('uid', res.data.uid);
	}
}

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