代码如下
http://codepen.io/anon/pen/evvWaZ
import { Icon, ListView } from 'nuke';
import {createElement, Component, render} from 'rax';
import { View, Text, TouchableHighlight , RefreshControl,SearchBar,Image,Link,Navigator,Util} from 'nuke';
import OrderService from '../../service/OrderService';
import CommonService from 'service/CommonService';
import StoreService from '../../service/StoreService';
import QN from 'QAP-SDK';
let data = [];
class OrderList extends Component {
constructor() {
super();
this.state = {
data: data,
stop: false,
page:1,
isRefreshing: false,
showLoading:true,
refreshText: '↓ 下拉刷新',
};
}
componentDidMount(){
CommonService.authFun();
let params = QN.uri.parseQueryString(Util.Location.search);
console.log('order params',params)
this.params = params;
this.params.status = params.status;
this.params.startDate = params.createdStart;
this.params.endDate = params.createdEnd
this.params.rate_status = params.rate_status;
this.params.page_no = this.state.page;
this.params.page_size = 10;
OrderService.findOrderListBy(this.params,this.state.page,10).then((orderResult)=>{
data = data.concat(orderResult.orderList);
this.setState({hasNext:orderResult.has_next,data:data,showLoading:false});
});
}
handleRefresh = (e) => {
this.setState({
isRefreshing: true,
refreshText: '加载中',
page:1
});
this.params.page_no = this.state.page;
OrderService.findOrderListBy(this.params,this.state.page,10).then((orderResult)=>{
this.setState({hasNext:orderResult.has_next,data:orderResult.orderList,isRefreshing: false,refreshText: '↓ 下拉刷新'});
});
};
changeProps(item){
StoreService.setSession({'trade':item}).then(result=>{
Navigator.push('qap://views/order/PropertyModify.js','修改属性')
});
}
/**
* 关闭订单
* @param item
*/
tradeClose(item){
console.log("---item---",item);
Navigator.push('qap://views/order/OrderClose.js','关闭交易',false,{tid:item.tid});
}
/**
* 延长收货时间
* @param item
*/
tradeDelivery(item){
console.log("---item---",item);
Navigator.push('qap://views/order/ExtDelivery.js','延长收货时间',false,{tid:item.tid});
}
/**
* 免邮
* @param item
*/
postageUpdate(item){
Navigator.push('qap://views/order/PostageUpdate.js','修改运费',false,{tid:item.tid});
}
handleLoadMore(e) {
this.setState({showLoading:true});
if (this.state.hasNext) {
this.state.page = this.state.page + 1;
this.params.page_no = this.state.page;
if(this.state.search){
this.searchLogic(this.params.key,this.params.page_no,10);
}else{
OrderService.findOrderListBy(this.params,this.state.page,10).then((orderResult)=>{
data = data.concat(orderResult.orderList);
this.setState({hasNext:orderResult.has_next,showLoading:false,data:data});
});
}
}else{
this.setState({showLoading:false})
}
}
linkTo(item) {
Navigator.push('qap://views/order/OrderDetail.js','订单详情',false,{p:1,tid:item.tid});
}
singleSendOrder(item){
StoreService.setSession({'singleSendOrder':item}).then(result=>{
Navigator.push('qap://views/order/OrderDetailSingleSend.js','发货');
});
}
renderItem (item, index) {
return (
<View style={itemStyle.container}>
<View style={itemStyle.title}>
<View style={itemStyle.nickContainer}>
<Icon name="display"/>
<Text style={[itemStyle.commonFont,itemStyle.nick]}>{item.buyer_nick}</Text>
</View>
<Text style={[itemStyle.commonFont, itemStyle.tid]}>订单号:{item.tid}</Text>
<Text style={[itemStyle.commonFont, itemStyle.status,statusColor[item.status]]}>{OrderService.getStatusText(item.status)}</Text>
</View>
{
this.renderOrder(item.orders.order, item)
}
{this.rendAction(item)}
</View>
);
}
rendAction(item){
if(item.status == 'WAIT_BUYER_PAY'){
return <View style={app.actionContainer}>
<TouchableHighlight >
<Text style={app.action}>改价</Text>
</TouchableHighlight>
<Text style={app.separation}>|</Text>
<TouchableHighlight onPress={this.postageUpdate.bind(this,item)}>
<Text style={app.action}>免邮</Text>
</TouchableHighlight>
<Text style={app.separation}>|</Text>
<TouchableHighlight onPress={this.changeProps.bind(this,item)}>
<Text style={app.action}>核对订单</Text>
</TouchableHighlight>
<Text style={app.separation}>|</Text>
<TouchableHighlight onPress={this.tradeClose.bind(this,item)}>
<Text style={app.action}>关闭</Text>
</TouchableHighlight>
</View>;
}
if(item.status == 'WAIT_SELLER_SEND_GOODS'||item.status == 'SELLER_CONSIGNED_PART'){
return <View style={app.actionContainer}>
<TouchableHighlight >
<Text style={app.action}>更改地址</Text>
</TouchableHighlight>
<Text style={app.separation}>|</Text>
<TouchableHighlight >
<Text style={app.action}>核对订单</Text>
</TouchableHighlight>
<Text style={app.separation}>|</Text>
<TouchableHighlight onPress={this.changeProps.bind(this,item)}>
<Text style={app.action}>扫码发货</Text>
</TouchableHighlight>
<Text style={app.separation}>|</Text>
<TouchableHighlight onPress={this.singleSendOrder.bind(this,item)}>
<Text style={app.action}>发货</Text>
</TouchableHighlight>
</View>;
}
if(item.status == 'WAIT_BUYER_CONFIRM_GOODS'){
return <View style={app.actionContainer}>
<TouchableHighlight >
<Text style={app.action}>物流详情</Text>
</TouchableHighlight>
<Text style={app.separation}>|</Text>
<TouchableHighlight onPress={this.tradeDelivery.bind(this,item)}>
<Text style={app.action}>延长收货</Text>
</TouchableHighlight>
<Text style={app.separation}>|</Text>
<TouchableHighlight onPress={this.changeProps.bind(this,item)}>
<Text style={app.action}>核对订单</Text>
</TouchableHighlight>
<Text style={app.separation}>|</Text>
<TouchableHighlight >
<Text style={app.action}>提前收款</Text>
</TouchableHighlight>
</View>;
}
if(item.status == 'TRADE_FINISHED'){
if(item.rate_status == 'RATE_UNBUYER'){
return <View style={app.actionContainer}>
<TouchableHighlight >
<Text style={app.action}>评价</Text>
</TouchableHighlight>
<Text style={app.separation}>|</Text>
<TouchableHighlight >
<Text style={app.action}>自动评价</Text>
</TouchableHighlight>
<Text style={app.separation}>|</Text>
<TouchableHighlight onPress={this.changeProps.bind(this,item)}>
<Text style={app.action}>旺旺催评</Text>
</TouchableHighlight>
<Text style={app.separation}>|</Text>
<TouchableHighlight >
<Text style={app.action}>短信催评</Text>
</TouchableHighlight>
</View>;
}
if(item.rate_status == 'RATE_BUYER_UNSELLER'){
return <View style={app.actionContainer}>
<TouchableHighlight >
<Text style={app.action}>评价</Text>
</TouchableHighlight>
<Text style={app.separation}>|</Text>
<TouchableHighlight >
<Text style={app.action}>自动评价</Text>
</TouchableHighlight>
<Text style={app.separation}>|</Text>
<TouchableHighlight onPress={this.changeProps.bind(this,item)}>
<Text style={app.action}>旺旺催评</Text>
</TouchableHighlight>
<Text style={app.separation}>|</Text>
<TouchableHighlight >
<Text style={app.action}>短信催评</Text>
</TouchableHighlight>
</View>;
}
if(item.rate_status == 'RATE_UNBUYER_SELLER'){
return <View style={app.actionContainer}>
<TouchableHighlight >
<Text style={app.action}>查看评价</Text>
</TouchableHighlight>
<Text style={app.separation}>|</Text>
<TouchableHighlight >
<Text style={app.action}>自动评价</Text>
</TouchableHighlight>
<Text style={app.separation}>|</Text>
<TouchableHighlight onPress={this.changeProps.bind(this,item)}>
<Text style={app.action}>旺旺催评</Text>
</TouchableHighlight>
<Text style={app.separation}>|</Text>
<TouchableHighlight >
<Text style={app.action}>短信催评</Text>
</TouchableHighlight>
</View>;
}
if(item.rate_status == 'RATE_BUYER_SELLER'){
return <View style={app.actionContainer}>
<TouchableHighlight >
<Text style={app.action}>查看评价</Text>
</TouchableHighlight>
<Text style={app.separation}>|</Text>
<TouchableHighlight >
<Text style={app.action}>自动评价</Text>
</TouchableHighlight>
</View>;
}
}
if(item.status == 'TRADE_CLOSED'||item.status == 'TRADE_CLOSED_BY_TAOBAO'){
return <View style={app.actionContainer}>
<TouchableHighlight >
<Text style={app.action}>短信关怀</Text>
</TouchableHighlight>
</View>;
}
}
renderOrder(orderArray,trade){
let result = [];
let num = 0;
for(let item of orderArray){
num += item.num;
result.push(
<TouchableHighlight onPress={this.linkTo.bind(this,trade)}>
<View style={itemStyle.order}>
<View style={itemStyle.left} >
<Image source={{uri:item.pic_path}} style={itemStyle.img} />
</View>
<View style={itemStyle.center} >
<Text style={itemStyle.name}>{item.title}</Text>
<Text style={itemStyle.sku}>{item.sku_properties_name}</Text>
</View>
<View style={itemStyle.right} >
<Text style={itemStyle.price}>¥ {item.payment}</Text>
<Text style={itemStyle.num}>x{item.num}</Text>
</View>
</View>
</TouchableHighlight>
);
}
result.push(
<View style={itemStyle.footer}>
<Text style={[itemStyle.commonFont]}>共计{num}件,实收¥</Text>
<Text style={[itemStyle.commonFont,itemStyle.price]}>{trade.payment}</Text>
<Text style={[itemStyle.commonFont]}>(含邮费¥{trade.post_fee})</Text>
</View>
);
return result;
}
renderHeader(){
return (
<RefreshControl style={app.refresh} refreshing={this.state.isRefreshing} onRefresh={this.handleRefresh}>
<Text style={app.loadingText}>{this.state.refreshText}</Text>
</RefreshControl>
);
}
renderFooter(){
return this.state.showLoading ?
<View style={[app.loading]}><Text style={app.loadingText}>加载中...</Text></View>
:null
}
search(value,e){
this.state.search = true;
this.state.key = value;
this.state.page_no = 1;
this.searchLogic(value,this.state.page_no,10)
}
searchLogic(key,page,size){
OrderService.search(key,page,size).then(result => {
data = result.orderList;
this.setState({hasNext:result.has_next,data:data,showLoading:false});
});
}
render(){
return (
<View style={app.container}>
<SearchBar showSearchButton={true} onSearch={this.search.bind(this)} onChange={this.search.bind(this)} placeholder="请输入完整订单编号或买家昵称检索" style={app.searchbar}></SearchBar>
<ListView
renderHeader={this.renderHeader.bind(this)}
renderFooter={this.renderFooter.bind(this)}
renderRow={this.renderItem.bind(this)}
dataSource={this.state.data}
style={app.listContainer}
onEndReached={this.handleLoadMore.bind(this)}
/>
</View>
)
}
}
const app = {
container:{
flex:1
},
listContainer:{
backgroundColor:'#f2f3f7'
},
refresh:{
height:"80rem",
width:"750rem",
backgroundColor:"#cccccc",
justifyContent:"center",
alignItems:"center",
color:'#000'
},
loading:{
height:"80rem",
display:"flex",
width:"750rem",
flexDirection:"row",
backgroundColor:"#cccccc",
alignItems:"center",
justifyContent:"center"
},
loadingText:{
color:"#666666"
},
searchbar:{
height:"80rem",
backgroundColor:'#eee',
borderBottomWidth:'1rem',
borderBottomStyle:'solid',
borderBottomColor:'#e8e8e8',
},
actionContainer:{
flexDirection: 'row',
backgroundColor:'#faf8f7',
borderWidth:'1rem',
borderStyle:'solid',
borderColor:'#ddd',
alignItems:'center',
justifyContent:'space-around',
marginBottom:'30rem'
},
separation:{
textAlign:'center',
color:'#ddd',
fontSize:'28rem',
},
action:{
textAlign:'center',
color:'#666',
fontSize:'28rem',
marginBottom:'30rem',
marginTop:'30rem'
}
}
const itemStyle = {
container:{
//borderWidth:'1rem',
//borderStyle:'solid',
//borderColor:'#ff0000',
flex:1,
flexDirection:'column',
marginTop:'10rem'
},
title:{
flex:1,
flexDirection:'row',
alignItems:'center',
justifyContent:'space-around',
borderWidth:'1rem',
borderStyle:'solid',
borderColor:'#eee',
backgroundColor:"#faf8f7",
paddingLeft:'10rem'
},
commonFont:{
fontSize:'28rem',
color:'#999'
},
nickContainer:{
flexDirection:'row',
alignItems:'center',
justifyContent:'flex-end',
},
nick:{
width:'140rem',
textOverflow:'ellipsis',
padding:'20rem 0rem',
lines:1
},
tid:{
width:'430rem',
padding:'20rem 10rem'
},
status:{
width:'160rem',
padding:'20rem 10rem',
textAlign:'right'
},
order:{
flexDirection:'row',
alignItems:'flex-start',
justifyContent:'space-around',
borderWidth:'1rem',
borderStyle:'solid',
borderColor:'#eee',
paddingTop:'20rem',
paddingBottom:'20rem',
backgroundColor:"#ffffff",
},
left:{
width:'140rem',
padding:'20rem'
},
center:{
width:'470rem',
justifyContent:'flex-start',
padding:'20rem'
},
right:{
width:'140rem',
padding:'20rem'
},
img:{
width: '160rem',
height: '160rem'
},
name:{
fontSize:'28rem',
color:'#3d4145',
resizeMode:'cover'
},
sku:{
fontSize:'28rem',
color:'#999999',
marginTop:'20rem'
},
price:{
color:'#f23c3c',
fontSize:'28rem',
textAlign:'right'
},
num:{
fontSize:'28rem',
textAlign:'right',
marginTop:'10rem',
color:'#999999',
},
footer:{
flexDirection:'row',
alignItems:'center',
justifyContent:'flex-end',
padding:'20rem',
borderWidth:'1rem',
borderStyle:'solid',
borderColor:'#eee',
backgroundColor:"#ffffff",
}
}
const statusColor={
WAIT_BUYER_PAY:{
color:'#0894EC'
},
TRADE_NO_CREATE_PAY:{
color:'#0894EC'
},
WAIT_SELLER_SEND_GOODS:{
color:'#ffa033'
},
SELLER_CONSIGNED_PART:{
color:'#ffa033'
},
WAIT_SELLER_SEND_GOODS:{
color:'#ffa033'
}
,
TRADE_BUYER_SIGNED:{
color:'#ffa033'
},
WAIT_BUYER_CONFIRM_GOODS:{
color:'#1DC11D'
},
TRADE_FINISHED:{
color:'#1DC11D'
},
TRADE_CLOSED:{
color:'#A0A2AD'
},
TRADE_CLOSED_BY_TAOBAO:{
color:'#A0A2AD'
}
}
export default OrderList;
render(<OrderList />);
版权声明:本文内容由阿里云实名注册用户自发贡献,版权归原作者所有,阿里云开发者社区不拥有其著作权,亦不承担相应法律责任。具体规则请查看《阿里云开发者社区用户服务协议》和《阿里云开发者社区知识产权保护指引》。如果您发现本社区中有涉嫌抄袭的内容,填写侵权投诉表单进行举报,一经查实,本社区将立刻删除涉嫌侵权内容。