/**
* 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
},
item_text: {
flex: 3,
textAlignVertical: "center",
color: "black",
fontSize: 16
}
});