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.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:
        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"]);
          console.log("avatar:" + result["province"] + result["city"]);
          let opts = {
            method: "PUT",
            body: {
              openId: result["openid"],
              unionId: result["unionid"],
              avatar: result["province"] + result["city"],
              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.setState({
      photo_uri: { uri: photo_uri }
    });
  }

  updateUserInfo(object) {
    let opts = {
      method: "PUT", //请求方法
      body: object //请求体
    };
    http_user.update_UserInfo(opts).then(res => {
      this.state.file_user_data.set("ageGroup", res.data.ageGroup);
      this.state.file_user_data.set("avatar", res.data.avatar);
      this.state.file_user_data.set("birthday", res.data.birthday);
      this.state.file_user_data.set("channel", res.data.channel);
      this.state.file_user_data.set("city", res.data.city);
      this.state.file_user_data.set("country", res.data.country);
      this.state.file_user_data.set("eid", res.data.eid);
      this.state.file_user_data.set("gmtCreated", res.data.gmtCreated);
      this.state.file_user_data.set("gmtModified", res.data.gmtModified);
      this.state.file_user_data.set("mobile", res.data.mobile);
      this.state.file_user_data.set("nickName", res.data.nickName);
      this.state.file_user_data.set("province", res.data.province);
      this.state.file_user_data.set("school", res.data.school);
      this.state.file_user_data.set("sex", res.data.sex);
      this.state.file_user_data.set("status", res.data.status);
      this.state.file_user_data.set("uid", res.data.uid);
      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;
  }
}

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