tbom/examples/src/user/index.js

Taobao Open Platform Modules

import {createElement, Component} from 'rax';
import View from 'tboc-view';
import Text from 'tboc-text';
import styles from '../common/style.css';
import { user } from '../../../src/index';

class UserDemo extends Component {

  state = {
    data: {
      isLogin: false,
      info: {
        userId: '',
        nick: ''
      }
    }
  }

  componentDidMount() {
    user.getUserInfo((data) => {
      console.log(data);
      this.setState({
        data: data
      });
    });
  }
  
  login = () => {
    user.login((data) => {
      this.setState({
        data: data
      });
    });
  }
    
  logout = () => {
    user.logout((data) => {
      this.setState({
        data: data
      });
    });
  }

  render() {
    const isLogin = this.state.data.isLogin == true || this.state.data.isLogin == 'true';
    const loginStatus = !isLogin ? '未登录' : '已登录';
    let nick = '';
    if (isLogin) {
      nick = this.state.data.info.nick;
    }
    nick = nick ? `${nick}, ` : '';
    return (
      <View style={styles.app}>
        <Text>Hi, {nick}您当前的登录状态为：{loginStatus}</Text>
        {
          !isLogin 
            ? (<View clickable={true}onPress={this.login} onClick={this.login} style={demoStyles.button}>点击登录</View>)
            : (<View clickable={true}onPress={this.logout} onClick={this.logout} style={demoStyles.button}>点击退出</View>)
        }
      </View>
    );
  }
}

const demoStyles = {
  button: {
    borderWidth: 2,
    borderColor: '#CCC',
    borderStyle: 'solid',
    paddingLeft: 20,
    paddingRight: 20,
    marginTop: 40,
    backgroundColor: '#EEE'
  }
}

export default UserDemo;