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";

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")
  };
  updateState(data) {
    this.setState(data);
  }
  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="个人信息"
                  backPress={() => this.goBack()}
                  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: 20 }}>
                        修改头像
                      </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: 30,
                          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() {
    alert("点击退出了");
  }

  cityscommit(provinces_name, citys_name) {
    this.setState({
      provinceName: provinces_name,
      citys: citys_name
    });
  }
  commitGrade(text, index) {
    this.setState({
      grade_text: text,
      grade_index: index
    });
  }
  birthdaycommit(year, month, day) {
    this.setState({
      birthday_time: year + "年" + month + "月" + day + "日"
    });
  }

  photoback(photo_uri) {
    this.chosephoto.setModalVisible(false);
    if (photo_uri == undefined || photo_uri === "" || photo_uri == null) {
      return;
    }
    this.setState({
      photo_uri: { uri: photo_uri }
    });
  }
}

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