/**
* Created by zack on 2018/6/24.
*/
import {
View,
Text,
StyleSheet,
Image,
TouchableOpacity,
FlatList,
Modal,
Animated,
TextInput,
Platform,
Keyboard,
Picker,
DatePickerAndroid,
DatePickerIOS,
Alert,
ImageBackground,
findNodeHandle
} from 'react-native'
import React, {Component} from 'react'
import {NavigationBarHeight, TabBarHeight, ScreenDimensions} from '../../utils/DimensionsTools'
import HttpTools from '../../network/HttpTools'
import {auth, getUserProfile, userProfile, userAvatar, userLogout} from '../../network/API'
import UserCenterItem from './View/UserCenterItem'
import {GlobalUserStorageTool, UserStorageKey} from '../../utils/GlobalUserStorageTool'
import ImagePicker from 'react-native-image-picker'
import { BlurView } from 'react-native-blur';
export default class UserCenterViewController extends Component {
constructor(props) {
super(props)
this.state = {
headerImageViewSource: require('../../resources/images/Mine/user.png'),
nickName: '',
linker: ''
}
}
componentDidMount() {
GlobalUserStorageTool.load(UserStorageKey.UserInfo, (ret) => {
console.log("user info: " + ret)
this.setState({
nickName: ret.nickname,
linker: ret.linker,
})
}, (error) => {
})
}
renderItem(item) {
return(
)
}
cameraButtonAction() {
let options = {
title: 'Select Avatar',
storageOptions: {
skipBackup: true,
path: 'images'
}
}
ImagePicker.showImagePicker(options, (response) => {
if (response.didCancel) {
console.log('User cancelled image picker');
}
else if (response.error) {
console.log('ImagePicker Error: ', response.error);
}
else if (response.customButton) {
console.log('User tapped custom button: ', response.customButton);
}
else {
let imageBase64Data = 'data:image/jpeg;base64,' + response.data
let source = { uri: imageBase64Data};
this.setState({headerImageViewSource: source})
this.uploadImage(response.data)
}
})
}
uploadImage(base64ImageString) {
HttpTools.uploadImage(userAvatar, base64ImageString, () => {
}, (error) => {
})
}
showLogOut() {
Alert.alert(
'退出登录',
'',
[
{text: '取消', onPress: () => {}},
{text: '确定', onPress: () => {
this.logOut()
}},
],
{ cancelable: false }
)
}
logOut() {
const param = JSON.stringify({
})
HttpTools.delete(userLogout, param, (response) => {
GlobalUserStorageTool.remove(UserStorageKey.UserInfo) //删除个人信息
global.token = '' //清理token
this.props.navigator.popToRoot()
}, (error) => {
})
}
imageLoaded() {
this.setState({ viewRef: findNodeHandle(this.backgroundImage) });
}
didSelectedMenuItem(index) {
}
render() {
return (
{ this.backgroundImage = img; }}
style={styles.HeaderBlurImageView}
onLoadEnd={() => {this.imageLoaded()}}
source={this.state.headerImageViewSource}/>
{
this.showLogOut()
}} style={{justifyContent: 'center', alignItems: 'flex-end', width: 18, height: 44, position: 'absolute', right: 15, top: (Platform.OS === 'ios' ? 20 : (NavigationBarHeight.height - 44)/2.0)}}>
{
this.props.navigator.pop()
}} style={{justifyContent: 'center', alignItems: 'flex-start', width: 18, height: 44, position: 'absolute', left: 15, top: (Platform.OS === 'ios' ? 20 : (NavigationBarHeight.height - 44)/2.0)}}>
{
this.cameraButtonAction()
}} >
{this.state.nickName}
{'另客号: ' + this.state.linker}
{'已认证'}
{
this.didSelectedMenuItem(0)
}} style={[styles.MenuItem, {marginLeft: 75}]}>
{'积分'}
{
this.didSelectedMenuItem(1)
}} style={[styles.MenuItem, {marginRight: 75}]}>
{'任务'}
{
this.didSelectedMenuItem(2)
}} style={[styles.MenuItem, {marginLeft: 75}]}>
{'动态'}
{
this.didSelectedMenuItem(3)
}} style={[styles.MenuItem, {marginRight: 75}]}>
{'收藏'}
{
this.didSelectedMenuItem(4)
}} style={[styles.MenuItem, {marginLeft: 75}]}>
{'反馈'}
)
}
}
const styles = StyleSheet.create({
View: {
width: ScreenDimensions.width,
height: ScreenDimensions.height,
backgroundColor: 'white'
},
HeaderBlurImageView: {
width: ScreenDimensions.width,
height: 242,
alignItems: 'center',
position: 'absolute'
},
HeaderBgView: {
width: ScreenDimensions.width,
height: 242,
alignItems: 'center',
},
HeaderImageView: {
width: 70,
height: 70,
marginTop: 88,
borderRadius: 35,
},
NameText: {
fontSize: 15,
color: '#ffffff',
marginTop: 7
},
LinkerNumberText: {
fontSize:10,
color: '#ffffff',
marginTop: 7,
},
StatusText: {
fontSize:10,
color: '#ffffff',
marginTop: 7,
},
MenuBgView: {
width: ScreenDimensions.width,
backgroundColor: 'white',
marginTop: 43,
},
MenuItemBgView: {
width: ScreenDimensions.width,
height: 80,
flexDirection: 'row',
alignItems: 'center',
justifyContent: 'space-between',
},
MenuItem: {
flexDirection: 'row',
alignItems: 'center',
justifyContent: 'center'
}
})