SevicheCC/timepill-app
1
0
Fork 0
mirror of https://github.com/timepill/timepill-app.git synced 2025-04-30 09:59:31 +08:00
Code Issues Projects Releases Packages Wiki Activity

1. 首页，关注，我的日记列表增加ok绷图标，可点/可取消

Browse source
This commit is contained in:
xuwenyang 2019-06-17 23:12:35 +08:00
parent d137b41c74
commit 239c7bc790
12 changed files with 212 additions and 65 deletions
Show stats Download patch file Download diff file Expand all files Collapse all files

0
src/Icon.png → src/about/Icon.png
View file

Side by side Swipe Overlay

Before

Width:  |  Height:  |  Size: 5.6 KiB

After

Width:  |  Height:  |  Size: 5.6 KiB

0
src/updateInfo.js → src/about/updateInfo.js
View file

36
src/component/diary/diaryBrief.js
View file

@ -7,6 +7,8 @@ import Color from '../../style/color';
import UserIcon from '../userIcon';
import Photo from '../photo';
import DiaryIconComment from './diaryIconComment';
import DiaryIconOkB from './diaryIconOkB';
import DiaryAction from './diaryAction';
@ -16,9 +18,10 @@ export default class DiaryBrief extends Component {
super(props);
this.diary = props.diary;
this.diary.isExpired = props.isExpired || false;
this.editable = props.editable || false;
this.showField = ['icon', 'userName', 'subject', 'createdTime'];
this.showField = ['userIcon', 'userName', 'subject', 'createdTime'];
if(props.showField && props.showField.length > 0) {
this.showField = props.showField
}
@ -42,7 +45,7 @@ export default class DiaryBrief extends Component {
return (
<View style={[localStyle.box, this.props.style]}>
{(user && user.iconUrl && this.show('icon'))
{(user && user.iconUrl && this.show('userIcon'))
? <UserIcon iconUrl={user.iconUrl} onPress={this.props.onUserIconPress}></UserIcon> : null}
<View style={localStyle.body}>
@ -72,16 +75,13 @@ export default class DiaryBrief extends Component {
<Photo uri={diary.photoThumbUrl} onPress={this.props.onPhotoPress}></Photo>
<View style={localStyle.actionBar}>
{
diary.comment_count > 0
? <View style={localStyle.commentIconBox}>
<Ionicons name="ios-text-outline" size={18}
color={Color.inactiveText}
style={localStyle.buttonIcon} />
<Text style={localStyle.commentIconText}>{diary.comment_count}</Text>
<View style={localStyle.icons}>
<DiaryIconComment count={diary.comment_count}></DiaryIconComment>
<DiaryIconOkB diaryId={diary.id}
count={diary.like_count}
active={diary.liked}
clickable={!diary.isExpired}></DiaryIconOkB>
</View>
: null
}
<View style={{flex: 1}} />
{
this.editable
@ -143,19 +143,11 @@ const localStyle = StyleSheet.create({
marginTop: 10,
justifyContent: 'space-between'
},
icons: {
flexDirection: 'row'
},
moreIcon: {
paddingVertical: 5,
paddingHorizontal: 5
},
commentIconBox: {
flexDirection: "row"
},
buttonIcon: {
marginRight: 8,
marginLeft: 2
},
commentIconIext: {
fontSize: 15,
color: Color.inactiveText
}
});

42
src/component/diary/diaryIconComment.js Normal file
View file

@ -0,0 +1,42 @@
import React, {Component} from 'react';
import {StyleSheet, Text, View, Image, TouchableOpacity} from 'react-native';
import Ionicons from 'react-native-vector-icons/Ionicons';
import Color from '../../style/color';
export default class DiaryIconComment extends Component {
constructor(props) {
super(props);
this.state = {
count: props.count || 0
}
}
render() {
return this.state.count > 0 ? (
<View style={localStyle.wrap}>
<Ionicons name="ios-text-outline" size={18}
style={localStyle.icon} />
<Text style={localStyle.text}>{this.state.count}</Text>
</View>
) : null;
}
}
const localStyle = StyleSheet.create({
wrap: {
flexDirection: 'row',
marginRight: 6
},
icon: {
marginLeft: 2,
marginRight: 4
},
text: {
fontSize: 15,
color: Color.inactiveText
}
});

97
src/component/diary/diaryIconOkB.js Normal file
View file

@ -0,0 +1,97 @@
import React, {Component} from 'react';
import {StyleSheet, Text, View, Image, TouchableOpacity} from 'react-native';
import Color from '../../style/color';
import Api from '../../util/api';
import Msg from '../../util/msg';
export default class DiaryIconOkB extends Component {
constructor(props) {
super(props);
this.state = {
diaryId: props.diaryId || null,
count: props.count || 0,
active: props.active || false,
clickable: props.clickable && true
}
}
onPress() {
if(!this.state.clickable) {
return;
}
let count = this.state.count;
let isActive = this.state.active;
if(!isActive) {
Api.likeDiary(this.state.diaryId)
.then(re => {
this.setState({
count: count + 1,
active: true
})
})
.catch(e => {
Msg.showMsg('操作失败');
})
.done();
} else {
Api.cancelLikeDiary(this.state.diaryId)
.then(re => {
this.setState({
count: count - 1,
active: false
})
})
.catch(e => {
Msg.showMsg('操作失败');
})
.done();
}
}
render() {
return (
<TouchableOpacity onPress={this.onPress.bind(this)}>
<View style={localStyle.wrap}>
<Image
source={
!this.state.active
? require('../../img/ok-beng1.png')
: require('../../img/ok-beng2.png')
}
style={localStyle.icon}
/>
<Text style={[localStyle.icon, {
color: !this.state.active
? Color.inactiveText
: Color.primary
}]}
>{this.state.count}</Text>
</View>
</TouchableOpacity>
);
}
}
const localStyle = StyleSheet.create({
wrap: {
flexDirection: 'row',
marginRight: 6
},
icon: {
width: 18,
height: 18,
marginLeft: 2,
marginRight: 4
},
text: {
fontSize: 15
}
});

2
src/component/diary/diaryList.js
View file

@ -200,7 +200,7 @@ export default class DiaryList extends Component {
data={this.state.diaries}
keyExtractor={(item, index) => {
return item.id + item.updated + item.comment_count;
return item.id + item.updated + item.comment_count + item.like_count;
}}
renderItem={({item}) => {

14
src/component/notebook/notebookDiaryList.js
View file

@ -81,7 +81,6 @@ export default class NotebookDiaryList extends Component {
});
}
console.log('format result:', result);
return result;
}
@ -177,7 +176,13 @@ export default class NotebookDiaryList extends Component {
}
render() {
return this.notebook ? (
if(!this.notebook) {
return null;
}
let isExpired = this.notebook.isExpired;
return (
<View style={localStyle.container}>
<SectionList
@ -187,8 +192,9 @@ export default class NotebookDiaryList extends Component {
renderItem={(rowData) => {
return (<Touchable onPress={() => this._onDiaryPress(rowData.item)}>
<DiaryBrief diary={rowData.item}
<DiaryBrief diary={rowData.item} isExpired={isExpired}
showField={['createdTime']}>
}
</DiaryBrief>
</Touchable>);
}}
@ -225,7 +231,7 @@ export default class NotebookDiaryList extends Component {
/>
</View>
) : null;
);
}
}

BIN
src/img/ok-beng1.png Normal file
View file

Binary file not shown.
Side by side

After

Width:  |  Height:  |  Size: 618 B

BIN
src/img/ok-beng2.png Normal file
View file

Binary file not shown.
Side by side

After

Width:  |  Height:  |  Size: 1.4 KiB

4
src/page/AboutPage.js
View file

@ -11,7 +11,7 @@ import Api from '../util/api';
import Token from '../util/token';
import Event from '../util/event';
import Color from '../style/color';
import UpdateInfo from '../updateInfo';
import UpdateInfo from '../about/updateInfo';
export default class AboutPage extends Component {
@ -48,7 +48,7 @@ export default class AboutPage extends Component {
return (
<View style={{flex: 1, backgroundColor: 'white'}}>
<View style={{flex: 1, padding: 15, alignItems: 'center', paddingTop: 80}}>
<Image source={require('../Icon.png')}
<Image source={require('../about/Icon.png')}
style={{width: 128, height: 128, borderRadius: 28, borderWidth: 1, borderColor:"#d9d9d9"}} />
<Text style={{paddingTop: 20, paddingBottom: 60}}>版本: {Api.VERSION}{label}</Text>
<Text style={{color: Color.inactiveText}}>{this.state.news.date} 更新日志</Text>

11
src/page/FollowPage.js
View file

@ -2,10 +2,11 @@ import React, {Component} from 'react';
import {StyleSheet, Text, View} from 'react-native';
import {Navigation} from 'react-native-navigation';
import Api from '../util/api'
import {Icon} from '../style/icon'
import Api from '../util/api';
import {Icon} from '../style/icon';
import Color from '../style/color';
import DiaryList from '../component/diary/diaryList'
import DiaryList from '../component/diary/diaryList';
import FollowDiaryData from '../dataLoader/followDiaryData';
@ -28,7 +29,7 @@ export default class FollowPage extends Component {
id: 'followIcon',
icon: Icon.followIcon,
color: '#aaa' // android
color: Color.primary // android
}]
}
};
@ -68,7 +69,7 @@ const localStyle = StyleSheet.create({
wrap: {
flex: 1,
backgroundColor: '#fff',
paddingTop: 20
paddingTop: 1
},
header: {
paddingLeft: 20,

69
src/util/api.js
View file

@ -260,6 +260,41 @@ async function deleteDiary(id) {
return call('DELETE', '/diaries/' + id);
}
async function addDiary(bookId, content, photoUri = null, join_topic = null) {
if(!photoUri) {
return call('POST', '/notebooks/' + bookId + '/diaries', {
content,
join_topic
});
} else {
return upload('POST', '/notebooks/' + bookId + '/diaries', {
content,
join_topic,
photo: {
uri: photoUri,
name: 'image.jpg',
type: 'image/jpg'
}
});
}
}
async function updateDiary(id, bookId, content) {
return call('PUT', '/diaries/' + id, {
content,
notebook_id: bookId
});
}
async function likeDiary(id) {
return callV2('PUT', '/like/diaries/' + id);
}
async function cancelLikeDiary(id) {
return callV2('DELETE', '/like/diaries/' + id);
}
async function updateNotebookCover(bookId, photoUri) {
return upload('POST', `/notebooks/${bookId}/cover`, {
@ -292,33 +327,6 @@ async function deleteNotebook(id) {
return call('DELETE', '/notebooks/' + id)
}
async function addDiary(bookId, content, photoUri = null, join_topic = null) {
if(!photoUri) {
return call('POST', '/notebooks/' + bookId + '/diaries', {
content,
join_topic
});
} else {
return upload('POST', '/notebooks/' + bookId + '/diaries', {
content,
join_topic,
photo: {
uri: photoUri,
name: 'image.jpg',
type: 'image/jpg'
}
});
}
}
async function updateDiary(id, bookId, content) {
return call('PUT', '/diaries/' + id, {
content,
notebook_id: bookId
});
}
async function report(user_id, diary_id) {
return call('POST', '/reports/', {
@ -494,6 +502,10 @@ export default {
getDiary,
deleteDiary,
addDiary,
updateDiary,
likeDiary,
cancelLikeDiary,
getDiaryComments,
deleteComment,
@ -516,9 +528,6 @@ export default {
updateNotebook,
deleteNotebook,
addDiary,
updateDiary,
report,
feedback
}