/** * 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, 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') } }); } 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) => { 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(); 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 }); } 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 } });