mobile / YH_RNComponent · Commits

Go to a project

Authored by shangjf
Commit 961ad2fbe1769ee9a9b5006ad91343b02f23be1b 1 parent a95f22cd

添加站内信相关模块 review by 于良

Inline Side-by-side
Showing 22 changed files with 369 additions and 50 deletions
... ... @@ -42,17 +42,26 @@ export default class EmptyContent extends Component {
render(){
let {listId} = this.props;
return(
<View style={styles.container}>
<Image style={styles.iconStyle}/>
<Text style={styles.textStyle}>
{this.emptyText(listId)}
</Text>
<View style={styles.aroundStyle}>
<Text style={styles.aroundTitle}>
随便逛逛
</Text>
</View>
</View>
<View style={styles.container}>
<Image
style={styles.iconStyle}
source={require('../../images/message_empty_ic.png')}
/>
<Text style={styles.textStyle}>
{this.emptyText(listId)}
</Text>
<TouchableOpacity
onPress={() => {
this.props.onPressEmptyItem && this.props.onPressEmptyItem();
}}
>
<View style={styles.aroundStyle}>
<Text style={styles.aroundTitle}>
随便逛逛
</Text>
</View>
</TouchableOpacity>
</View>
);
};
}
... ... @@ -70,7 +79,7 @@ let styles = StyleSheet.create({
iconStyle: {
width: Math.ceil(96*scale),
height: Math.ceil(70*scale),
backgroundColor: 'red',
backgroundColor: 'transparent',
},
textStyle: {
marginTop: Math.ceil(28*scale),
... ...
... ... @@ -13,10 +13,13 @@ import ReactNative, {
} from 'react-native';
import LoadMoreIndicator from '../../../common/components/LoadMoreIndicator';
import LoadingIndicator from '../../../common/components/LoadingIndicator';
import EmptyContent from './EmptyContent';
import MessageListCellHeader from './MessageListCellHeader';
import MessageListSmallIconCell from './MessageListSmallIconCell';
import MessageListBigIconCell from './MessageListBigIconCell';
import MessageListTextCell from './MessageListTextCell';
import MessageListOrderCell from './MessageListOrderCell';
export default class MessageList extends Component {
... ... @@ -26,39 +29,104 @@ export default class MessageList extends Component {
this.dataSource = new ListView.DataSource({
rowHasChanged: (r1, r2) => !Immutable.is(r1, r2),
});
this.loadMessageListCell = this.loadMessageListCell.bind(this);
}
componentDidMount() {
}
loadMessageListCell(rowData) {
let cellType = rowData.get('businessType');
switch (cellType) {
case 100:
case 101:
case 102:
case 103:
case 202:
case 203:
case 204:
case 205:
case 206:
case 207:
case 306:
{
return(
<MessageListSmallIconCell
itemData={rowData}
onPressListItem={this.props.onPressListItem}
/>
);
}
break;
case 200:
case 201:
case 403:
{
return(
<MessageListBigIconCell
itemData={rowData}
onPressListItem={this.props.onPressListItem}
/>
);
}
break;
case 300:
case 301:
case 302:
case 303:
case 304:
case 305:
case 402:
{
return(
<MessageListOrderCell
itemData={rowData}
onPressListItem={this.props.onPressListItem}
/>
);
}
break;
case 400:
case 401:
{
return(
<MessageListTextCell
itemData={rowData}
/>
);
}
break;
default:
return(
<View />
);
}
}
renderRow(rowData, sectionID, rowID) {
return (
<View style= {styles.cellContainer}>
<MessageListCellHeader
timestamp= {'09:30'}
/>
<MessageListSmallIconCell
data= {rowData}
timestamp= {rowData.get('create_date')}
/>
{this.loadMessageListCell(rowData)}
</View>
// <MessageListBigIconCell />
);
}
render() {
let {isFetching, endReached, list, listId} = this.props.data;
let {isFetching, endReached, list, listId, shouldShowEmpty} = this.props.data;
let isLoadingMore = list.size != 0 && isFetching;
let shouldShowEmpty = list.size == 0 && !isFetching;
if (shouldShowEmpty) {
return (
<View style={styles.container}>
<EmptyContent listId={listId}/>
<EmptyContent
listId={listId}
onPressEmptyItem={this.props.onPressEmptyItem}
/>
</View>
);
}
return (
<View style={styles.container}>
<ListView
... ... @@ -85,6 +153,9 @@ export default class MessageList extends Component {
}
}}
/>
<LoadingIndicator
isVisible={isFetching}
/>
</View>
);
}
... ...
... ... @@ -18,6 +18,11 @@ export default class MessageListBigIconCell extends Component {
}
render() {
let itemData = this.props.itemData;
let body = itemData.get('body');
let imageUri = body ? body.get('img_url') : 'www.yohobuy.com';
let content = body ? body.get('content') : '';
imageUri = imageUri.replace('{width}', width).replace('{height}', 117).replace('{mode}',2);
return(
<View style={styles.container}>
<View style={styles.titleContainer}>
... ... @@ -25,19 +30,25 @@ export default class MessageListBigIconCell extends Component {
numberOfLines={2}
style={styles.titleStyle}
>
我是标题
{itemData.get('title')}
</Text>
</View>
<Image style={styles.iconStyle}/>
<Image
style={styles.iconStyle}
source={{uri: imageUri}}
/>
<View style={styles.descContainer}>
<Text
numberOfLines={2}
style={styles.detail}
>
我是详情我是详情我是详情我是详情我是详情我是详情我是详情我是详情我是详情我是详情我是详情我是详情我是详情我是详情我是详情我是详情
{content}
</Text>
</View>
<MessageListCellFooter />
<MessageListCellFooter
onPressListItem={this.props.onPressListItem}
itemData={itemData}
/>
</View>
)
}
... ... @@ -60,12 +71,12 @@ let styles = StyleSheet.create({
fontSize: 14,
fontWeight: 'bold',
color: '#444444',
maxWidth: width-30,
marginRight: 15,
},
iconStyle: {
width,
height: 117,
backgroundColor: 'yellow'
backgroundColor: 'transparent'
},
descContainer: {
flexDirection: 'column',
... ... @@ -76,7 +87,7 @@ let styles = StyleSheet.create({
marginTop: 8,
marginBottom: 15,
marginLeft: 15,
maxWidth: width-30,
marginRight: 15,
fontSize: 12,
color: '#b0b0b0',
textAlign: 'left'
... ...
... ... @@ -17,8 +17,14 @@ export default class MessageListCellFooter extends Component {
}
render() {
let {itemData} = this.props;
return(
<TouchableOpacity>
<TouchableOpacity
onPress={() => {
this.props.onPressListItem && this.props.onPressListItem(itemData)
}
}
>
<View style={styles.container}>
<View style={styles.topSeparator} />
<View style={styles.textContainer}>
... ...
'use strict';
import React, {Component} from 'react';
import ReactNative, {
View,
Text,
Image,
StyleSheet,
Dimensions,
Platform,
} from 'react-native';
import MessageListCellFooter from './MessageListCellFooter'
export default class MessageListOrderCell extends Component {
constructor(props) {
super(props);
}
render() {
let itemData = this.props.itemData;
let body = itemData.get('body');
let imageUri = body ? body.get('img_url') : 'www.yohobuy.com';
let content = body ? body.get('content') : '';
imageUri = imageUri.replace('{width}', 46).replace('{height}', 60).replace('{mode}',2);
return(
<View style={styles.container}>
<View style={styles.contentContainer}>
<Text
numberOfLines={2}
style={styles.titleStyle}
>
{itemData.get('title')}
</Text>
<View style={styles.descStyle}>
<Image
style={styles.iconStyle}
source={{uri: imageUri}}
/>
<Text
style={styles.detail}
numberOfLines={3}
>
{content}
</Text>
</View>
</View>
<MessageListCellFooter
onPressListItem={this.props.onPressListItem}
data={itemData}
/>
</View>
)
};
}
let {width, height} = Dimensions.get('window');
let styles = StyleSheet.create({
container: {
backgroundColor: 'white'
},
contentContainer: {
flex: 1,
minHeight: 97,
flexDirection: 'column'
},
titleStyle: {
marginTop: 15,
marginLeft: 15,
fontSize: 14,
fontWeight: 'bold',
color: '#444444',
marginRight: 15,
},
descStyle:{
flexDirection: 'row'
},
iconStyle: {
marginLeft: 15,
marginTop: 10,
marginBottom: 10,
backgroundColor: 'red',
width: 46,
height: 60
},
detail:{
marginLeft: 10,
marginTop: 9,
fontSize: 12,
color: '#686868',
maxWidth: width-15-50-10-20,
lineHeight: 18,
}
})
... ...
... ... @@ -16,8 +16,12 @@ export default class MessageListSmallIconCell extends Component {
constructor(props) {
super(props);
}
render() {
let itemData = this.props.itemData;
let body = itemData.get('body');
let imageUri = body ? body.get('img_url') : 'www.yohobuy.com';
let content = body ? body.get('content') : '';
// imageUri = imageUri.replace('{width}', 50).replace('{height}', 50).replace('{mode}',2);
return(
<View style={styles.container}>
<View style={styles.contentContainer}>
... ... @@ -25,19 +29,25 @@ export default class MessageListSmallIconCell extends Component {
numberOfLines={2}
style={styles.titleStyle}
>
我是标题
{itemData.get('title')}
</Text>
<View style={styles.descStyle}>
<Image style={styles.iconStyle}/>
<Image
style={styles.iconStyle}
source={{uri: imageUri}}
/>
<Text
style={styles.detail}
numberOfLines={3}
>
昂好看的哈萨克就实打实的爱好是的哈按时到家啊爱神的箭卡是爱神的箭卡号是按时打算爱上的空间安徽省安徽电视剧爱上爱神的箭卡是昂贵的航按时给大哥说按施工队几行阿萨德噶好几十个点都干啥
{content}
</Text>
</View>
</View>
<MessageListCellFooter />
<MessageListCellFooter
onPressListItem={this.props.onPressListItem}
itemData={itemData}
/>
</View>
)
};
... ... @@ -60,7 +70,7 @@ let styles = StyleSheet.create({
fontSize: 14,
fontWeight: 'bold',
color: '#444444',
maxWidth: width-30
marginRight: 15,
},
descStyle:{
flexDirection: 'row'
... ... @@ -69,7 +79,7 @@ let styles = StyleSheet.create({
marginLeft: 15,
marginTop: 10,
marginBottom: 10,
backgroundColor: 'red',
backgroundColor: 'transparent',
width: 50,
height: 50
},
... ...
'use strict';
import React, {Component} from 'react';
import ReactNative, {
View,
Text,
Image,
StyleSheet,
Dimensions,
Platform,
} from 'react-native';
export default class MessageListTextCell extends Component {
constructor(props) {
super(props);
}
render() {
let itemData = this.props.itemData;
let body = itemData.get('body');
let content = body ? body.get('content') : '';
return(
<View style={styles.container}>
<Text
numberOfLines={2}
style={styles.titleStyle}
>
{itemData.get('title')}
</Text>
<Text
style={styles.detail}
>
{content}
</Text>
<View style={styles.separator}/>
</View>
)
}
}
let {width, height} = Dimensions.get('window');
let styles = StyleSheet.create({
container: {
width,
backgroundColor: 'white'
},
titleStyle: {
marginLeft: 15,
marginRight: 15,
marginTop: 15,
fontSize: 14,
fontWeight: 'bold',
color: '#444444',
},
detail: {
marginTop: 10,
marginBottom: 15,
marginLeft: 15,
marginRight: 15,
fontSize: 12,
color: '#b0b0b0',
textAlign: 'left'
},
separator: {
height: 0.5,
width,
backgroundColor: '#e0e0e0'
}
})
... ...
... ... @@ -15,6 +15,7 @@ export default class MessageCell extends Component {
constructor(props) {
super(props);
this.renderUnreaderMsg = this.renderUnreaderMsg.bind(this);
this.emptyText = this.emptyText.bind(this);
}
renderUnreaderMsg(rowData) {
... ... @@ -32,6 +33,29 @@ export default class MessageCell extends Component {
);
}
emptyText(rowData){
let text = '';
let content = rowData.get('content');
let isEmpty = content ? false : true;
switch (rowData.get('id')) {
case 1:
text = isEmpty ? '会员等级变更提醒、会员生日福利' : content;
break;
case 2:
text = isEmpty ? '新注册用户提示新人专享优惠券信息' : content;
break;
case 3:
text = isEmpty ? '没有收到任何关于你的消息' : content;
break;
case 4:
text = isEmpty ? '没有收到任何系统消息' : content;
break;
default:
}
return text;
}
render() {
let {data, rowID} = this.props;
let images = [require('../../images/message_vip_ic.png'),
... ... @@ -62,8 +86,10 @@ export default class MessageCell extends Component {
{data.get('createTime')}
</Text>
</View>
<Text style={styles.subTitle}>
{data.get('content')}
<Text
numberOfLines={1}
style={styles.subTitle}>
{this.emptyText(data)}
</Text>
</View>
</View>
... ... @@ -71,6 +97,7 @@ export default class MessageCell extends Component {
);
}
}
// {data.get('content')}
let {width, height} = Dimensions.get('window');
... ...
... ... @@ -47,6 +47,8 @@ class MessageListContainer extends Component {
constructor(props) {
super(props);
this.onEndReached = this.onEndReached.bind(this);
this.onPressListItem = this.onPressListItem.bind(this);
this.onPressEmptyItem = this.onPressEmptyItem.bind(this);
}
componentDidMount() {
... ... @@ -56,11 +58,19 @@ class MessageListContainer extends Component {
componentWillUnmount() {
}
onEndReached() {
this.props.actions.messageList();
}
onPressListItem(item) {
NativeModules.YH_MessageHelper.messagePush(item);
}
onPressEmptyItem() {
NativeModules.YH_MessageHelper.jumpNew();
}
render() {
let {list} = this.props;
return (
... ... @@ -68,6 +78,8 @@ class MessageListContainer extends Component {
<MessageList
data={list}
onEndReached={this.onEndReached}
onPressListItem={this.onPressListItem}
onPressEmptyItem={this.onPressEmptyItem}
/>
</View>
);
... ...
... ... @@ -63,6 +63,10 @@ export function messageList() {
let newList = [...oldList, ...payload.list];
payload.list = newList;
}
if (payload.currentPage == 1 && payload.list.length == 0) {
payload.shouldShowEmpty = true;
}
dispatch(messageListSuccess(payload));
})
.catch(error => {
... ... @@ -82,7 +86,7 @@ export function messageList() {
function parseMessageList(json) {
let currentPage = json && json.page ? json.page : 1;
let pageCount = json && json.total_page ? json.total_page : 0;
let pageCount = json && json.page_total ? json.page_total : 0;
let total = json && json.total ? json.total : 0;
let list = json && json.list ? json.list : [];
... ...
... ... @@ -13,6 +13,7 @@ let InitialState = Record({
pageSize: 60,
total: 0,
endReached: false,
shouldShowEmpty: false,
});
export default InitialState;
... ...
... ... @@ -32,6 +32,7 @@ export default function listReducer(state=initialState, action) {
pageCount,
total,
endReached,
shouldShowEmpty,
} = action.payload;
let newState = state.set('isFetching', false)
... ... @@ -40,16 +41,18 @@ export default function listReducer(state=initialState, action) {
.set('currentPage', currentPage)
.set('pageCount', pageCount)
.set('total', total)
.set('endReached', endReached);
.set('endReached', endReached)
.set('shouldShowEmpty', shouldShowEmpty);
return newState;
}
case MESSAGE_LIST_FAILURE: {
return state.set('isFetching', false)
.set('error', action.payload);
.set('error', action.payload)
.set('shouldShowEmpty', true);
}
}
return state;
... ...
... ... @@ -4,28 +4,28 @@ import Immutable, {Record, List, Map} from 'immutable';
let defaults = Immutable.fromJS([
{
id: '1',
id: 1,
inboxCatName: '会员信息',
content: '会员等级变更提醒、会员生日福利',
unReadCount:0,
createTime:''
},
{
id: '2',
id: 2,
inboxCatName: '我的资产',
content: '新注册用户提示新人专享优惠券信息',
unReadCount:0,
createTime:''
},
{
id: '3',
id: 3,
inboxCatName: '客户服务',
content: '没有收到任何关于你的消息',
unReadCount:0,
createTime:''
},
{
id: '4',
id: 4,
inboxCatName: '其他',
content: '没有收到任何系统给消息',
unReadCount:0,
... ...
... ... @@ -21,7 +21,7 @@ export default function messageReducer(state=initialState, action) {
case LATEST_MESSAGE_SUCCESS: {
return state.setIn(['latest', 'isFetching'], false)
.setIn(['latest', 'data'], Immutable.fromJS(action.payload))
.setIn(['latest', 'data'], Immutable.fromJS(action.payload.list))
.setIn(['latest', 'error'], null);
}
... ...