1. 用户详情页用户信息

2. 用户详情页今天日记列表

src/component/diary/diaryBrief.js

@@ -12,31 +12,53 @@ import DiaryActionIcon from './diaryActionIcon';
 
 export default class DiaryBrief extends Component {
 
+    constructor(props) {
+        super(props);
+
+        this.diary = props.diary;
+        this.editable = props.editable || false;
+
+        this.showField = ['icon', 'userName', 'subject', 'createdTime'];
+        if(props.showField && props.showField.length > 0) {
+            this.showField = props.showField
+        }
+    }
+
+    show(field) {
+        return this.showField.indexOf(field) >= 0;
+    }
+
     render() {
-      let diary = this.props.diary;
+      let diary = this.diary;
+      if(!diary) {
+        return null;
+      }
+
       let user = diary.user;
-      let editable = this.props.editable;
 
       return (
         <View style={[localStyle.box, this.props.style]}>
-            {(user && user.iconUrl)
+            {(user && user.iconUrl && this.show('icon'))
                 ? <UserIcon iconUrl={user.iconUrl}></UserIcon> : null}
 
             <View style={localStyle.body}>
                 <View style={localStyle.title}>
-                    {(user && user.name) 
+                    {(user && user.name && this.show('userName'))
                     ? ( <Text style={localStyle.titleName} numberOfLines={1}>
                             {user.name}
                         </Text>
                     ) : null}
-                    {(user && user.name)
+                    {(diary.notebook_subject && this.show('subject'))
                     ? ( <Text style={[localStyle.titleText, {flex: 1}]} numberOfLines={1}>
                             《{diary.notebook_subject}》
                         </Text>
                     ) : null}
-                    <Text style={localStyle.titleText}>
+                    {(diary.created && this.show('createdTime'))
+                    ? ( <Text style={localStyle.titleText}>
                             {moment(diary.created).format('H:mm')}
                         </Text>
+                    ) : null}
+                    
                 </View>
 
                 <Text style={localStyle.content} numberOfLines={5}>
@@ -53,7 +75,7 @@ export default class DiaryBrief extends Component {
                     }
                     <View style={{flex: 1}} />
                     {
-                        editable
+                        this.editable
                         ? <DiaryActionIcon></DiaryActionIcon>
                         : null
                     }

src/component/diary/diaryList.js

@@ -66,6 +66,7 @@ export default class DiaryList extends Component {
 
                         this.setState({
                             diaries: result.list ? result.list : [],
+                            hasMore: result.more,
                             refreshFailed: false
                         });
                     }
@@ -130,7 +131,9 @@ export default class DiaryList extends Component {
                     renderItem={({item}) => {
                         return (
                             <Touchable onPress={() => this.props.onDiaryPress(item)}>
-                                <DiaryBrief diary={item}></DiaryBrief>
+                                <DiaryBrief diary={item}
+                                    showField={this.props.showField}>
+                                </DiaryBrief>
                             </Touchable>
                         )
                     }}

src/component/follow/followUserList.js

@@ -53,6 +53,7 @@ export default class FollowUserList extends Component {
 
                         this.setState({
                             users: result.list ? result.list : [],
+                            hasMore: result.more,
                             refreshFailed: false
                         });
                     }

src/component/loading.js

@@ -22,7 +22,7 @@ export default class Loading extends Component {
             );
 
         } else {
-            return <View />
+            return null;
         }
     }
 }

src/component/notebook/notebookDiaryList.js

@@ -97,6 +97,7 @@ export default class NotebookDiaryList extends Component {
                         let diaries = this.formatDiaries(result.list);
                         this.setState({
                             diaries,
+                            hasMore: result.more,
                             refreshFailed: false
                         });
                     }
@@ -159,7 +160,9 @@ export default class NotebookDiaryList extends Component {
 
                 renderItem={(rowData) => {
                     return (<Touchable onPress={() => {}}>
-                        <DiaryBrief diary={rowData.item}></DiaryBrief>
+                        <DiaryBrief diary={rowData.item}
+                            showField={['createdTime']}>
+                        </DiaryBrief>
                     </Touchable>);
                 }}
 

src/component/notebook/notebookList.js

@@ -60,8 +60,6 @@ export default class NotebookList extends Component {
         this.setState({refreshing: true});
         Api.getSelfNotebooks()
             .then(notebooks => {
-                console.log('get notebooks:', notebooks);
-                
                 let groups = this.createGroup(notebooks, this.itemsPerRow);
                 this.setState({
                     notebooks: groups

src/component/userIcon.js

@@ -11,8 +11,10 @@ export default class UserIcon extends Component {
 
     render() {
         return (
-            <Avatar small rounded
+            <Avatar rounded
                 containerStyle={localStyle.container}
+                width={this.props.width || 40}
+                height={this.props.height || 40}
                 source={{uri: this.props.iconUrl}}
                 onPress={this.props.onPress ? this.props.onPress : this._defaultOnPress.bind(this)}
                 activeOpacity={0.7}

src/component/userIntro.js

@@ -0,0 +1,105 @@
+import React, {Component} from 'react';
+import {StyleSheet, Text, View, ScrollView, InteractionManager} from 'react-native';
+import {Avatar} from "react-native-elements";
+import moment from 'moment';
+
+import Color from '../style/color';
+import Api from '../util/api';
+import Msg from '../util/msg';
+
+import UserIcon from './userIcon'
+import Loading from './loading'
+
+
+export default class UserIntro extends Component {
+
+    constructor(props) {
+        super(props);
+
+        this.state = {
+            user: props.user,
+            isLoading: true
+        };
+    }
+
+    componentDidMount() {
+        InteractionManager.runAfterInteractions(() => {
+            this.loadUser();
+        });
+    }
+
+    loadUser() {
+        Api.getSelfInfoByStore()
+            .then(user => {
+                this.setState({
+                    user: user
+                });
+            })
+            .catch(e => {
+                Msg.showMsg('用户信息加载失败');
+            })
+            .done(() => {
+                this.setState({
+                    isLoading: false
+                })
+            });
+    }
+
+    render() {
+        const user = this.state.user;
+
+        return this.state.isLoading
+            ? <Loading visible={this.state.isLoading}></Loading>
+            : (
+                <ScrollView style={localStyle.container} automaticallyAdjustContentInsets={false}>
+                    <View style={localStyle.userIcon}>
+                        <UserIcon width={90} height={90} iconUrl={user.coverUrl} />
+                        <Text style={localStyle.userTitle}>{user.name}</Text>
+                    </View>
+
+                    {
+                        user.intro && user.intro.length > 0
+                        ? (<Text style={localStyle.introText}>{user.intro}</Text>) : null
+                    }
+                    
+                    <Text style={localStyle.joinTime}>
+                        {moment(user.created).format('YYYY年M月D日')}加入胶囊
+                    </Text>
+
+                </ScrollView>
+            );
+    }
+}
+
+const localStyle = StyleSheet.create({
+    container: {
+        flex: 1,
+        backgroundColor: 'white'
+    },
+    userIcon: {
+        height: 230,
+        backgroundColor: 'white',
+        alignItems: 'center',
+        justifyContent: 'center'
+    },
+    userTitle: {
+        fontSize: 22,
+        marginTop: 30,
+        fontWeight: 'bold',
+        color: '#000'
+    },
+    introText: {
+        padding: 15,
+        color: Color.text,
+        lineHeight: 24,
+        textAlign: 'center'
+    },
+    joinTime: {
+        marginTop: 30,
+        marginBottom:60,
+        padding: 15,
+        color: Color.inactiveText,
+        lineHeight: 20,
+        textAlign: 'center'
+    }
+});

src/dataLoader/userDiaryData.js

@@ -0,0 +1,24 @@
+import Api from '../util/api'
+
+
+const PAGE_SIZE = 21;
+
+export default class UserDiaryData {
+
+    constructor(userId = 0) {
+        this.userId = userId;
+    }
+
+    async refresh() {
+        if(this.userId === 0) {
+            let user = await Api.getSelfInfoByStore();
+            this.userId = user.id;
+        }
+
+        let list = await Api.getUserTodayDiaries(this.userId);
+        return {
+            list,
+            more: false
+        };
+    }
+}

src/page/FollowPage.js

@@ -6,7 +6,7 @@ import Api from '../util/api'
 import {Icon} from '../style/icon'
 
 import DiaryList from '../component/diary/diaryList'
-import FollowListData from '../dataLoader/followDiaryData';
+import FollowDiaryData from '../dataLoader/followDiaryData';
 
 
 export default class FollowPage extends Component {
@@ -15,7 +15,7 @@ export default class FollowPage extends Component {
         super(props);
 
         Navigation.events().bindComponent(this);
-        this.dataSource = new FollowListData();
+        this.dataSource = new FollowDiaryData();
     }
 
     static options(passProps) {

src/page/HomePage.js

@@ -5,14 +5,14 @@ import {Navigation} from 'react-native-navigation';
 import Api from '../util/api';
 
 import DiaryList from '../component/diary/diaryList'
-import HomeListData from '../dataLoader/homeDiaryData';
+import HomeDiaryData from '../dataLoader/homeDiaryData';
 
 
 export default class HomePage extends Component {
 
     constructor(props) {
         super(props);
-        this.dataSource = new HomeListData();
+        this.dataSource = new HomeDiaryData();
     }
 
     _onDiaryPress(diary) {
@@ -28,20 +28,11 @@ export default class HomePage extends Component {
         
     }
 
-    renderHeader() {
-        return (
-            <View style={localStyle.header}>
-                <Text style={localStyle.title}>胶囊日记</Text>
-            </View>
-        );
-    }
-
     render() {
         return (
           <View style={localStyle.wrap}>
                 <DiaryList ref={(r) => this.list = r}
                     dataSource={this.dataSource}
-                    header={this.renderHeader.bind(this)}
                     onDiaryPress={this._onDiaryPress.bind(this)}
 
                     navigator={this.props.navigator}
@@ -56,15 +47,5 @@ const localStyle = StyleSheet.create({
     wrap: {
         flex: 1,
         backgroundColor: '#fff'
-    },
-    header: {
-        paddingLeft: 20,
-        paddingTop: 20,
-        flexDirection: "row"
-    },
-    title: {
-        flex: 1,
-        fontSize: 30,
-        color: '#000'
     }
 });

src/page/UserPage.js

@@ -11,17 +11,23 @@ import {Navigation} from 'react-native-navigation';
 import Api from '../util/api';
 import Color from '../style/color';
 
-import NotebookList from '../component/notebook/notebookList'
+import UserIntro from '../component/userIntro';
+import UserDiaryData from '../dataLoader/userDiaryData';
+import DiaryList from '../component/diary/diaryList';
+import NotebookList from '../component/notebook/notebookList';
 
 
 export default class UserPage extends Component {
 
     constructor(props) {
         super(props);
+
+        this.dataSource = new UserDiaryData();
+
         this.state = {
             index: 0,
             routes: [
-                { key: 'userInfo', title: '简介' },
+                { key: 'userIntro', title: '简介' },
                 { key: 'diary', title: '日记' },
                 { key: 'notebook', title: '日记本' }
             ]
@@ -68,8 +74,14 @@ export default class UserPage extends Component {
     };
 
     _renderScene = SceneMap({
-        userInfo: () => <View style={localStyle.container}><Text style={localStyle.welcome}>user info !</Text></View>,
-        diary: () => <View style={localStyle.container}><Text style={localStyle.welcome}>diary !</Text></View>,
+        userIntro: () => <UserIntro
+        />,
+        diary: () => <DiaryList
+            dataSource={this.dataSource}
+            onDiaryPress={() => {}}
+
+            navigator={this.props.navigator}
+        />,
         notebook: () => <NotebookList
             onNotebookPress={this._onNotebookPress.bind(this)}
             navigator={this.props.navigator}
@@ -100,14 +112,6 @@ export default class UserPage extends Component {
 }
 
 const localStyle = StyleSheet.create({
-    
-    welcome: {
-      fontSize: 20,
-      textAlign: 'center',
-      marginTop: 40
-    },
-
-
     container: {
         flex: 1
     },

src/util/api.js

@@ -25,6 +25,7 @@ async function login(username, password) {
 
     try {
         const userInfo = await getSelfInfo();
+
         await TokenManager.setUserInfo(userInfo);
         await TokenManager.setLoginPassword('');
 
@@ -90,6 +91,14 @@ async function getNotebookDiaries(id, page, page_size) {
             });
 }
 
+async function getSelfInfoByStore() {
+  return await TokenManager.getUserInfo();
+}
+
+async function getUserTodayDiaries(userId) {
+  return call('GET', '/users/' + userId + '/diaries/')
+}
+
 
 async function call(method, api, body, _timeout = 10000) {
     let token = await TokenManager.getUserToken();
@@ -177,10 +186,12 @@ export default {
     IS_IPHONEX,
 
     login,
+    getSelfInfoByStore,
 
     getTodayDiaries,
     getFollowDiaries,
     getNotebookDiaries,
+    getUserTodayDiaries,
     
     getDiaryComments,
     getSelfNotebooks,