开发者社区> 问答> 正文

Listview 在本地测试的时候正常显示数据,发布qap离线包之后,线上无法正常显示数据了

千牛的牛 2017-03-10 14:57:25 1069

代码如下
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 />);
前端开发 rax JavaScript 容器
分享到
取消 提交回答
全部回答(1)
  • sym1010
    2019-07-17 20:54:00

    你可以检查一下,线上和线下的数据是否一致。。

    0 0

集结各类场景实战经验,助你开发运维畅行无忧

推荐文章
相似问题
推荐课程