index.js

/**
 * 首次绑定
 */
import React, {
    Component
} from 'react';
import ReactDOM from 'react-dom';
import {
    NavBar,
    Icon,
    Button,
    Toast,
    Modal,
    Picker,
    Accordion,
    List,
} from 'antd-mobile';
import './index.less';
import pdaApi from '../../common/api/pdauser'
import SingleItem,{SingleInput} from '../../common/commonview/singleitem';
import NewSteps from '../../common/commonview/newsteps'
import AccardionSteps from '../../common/accardionsteps'
import back from '../../assets/back.png';
import clear from '../../assets/delete.png';


class AdminTranckingQuery extends React.Component {
    constructor(props) {
        super(props)
        this.state = {
            id:'',
            boxnum:'',
            partid:'',
            shunfengid:'',
            onthewayinfoshow:false,
            onthewayinfoshowtype:2,
            data:[],
            isshunfeng:false,
            userInfo:''
        }
        this.handleInputChange = this.handleInputChange.bind(this)
        this.goVagueaQuery = this.goVagueaQuery.bind(this)
    }
    handleInputChange(event){
        const target = event.target
        const value = target.type === 'checkbox' ? target.checked : target.value
        const name = target.name
        this.setState({
            [name]: value
        })
        if(name=="shunfengid"){
            localStorage.setItem("shunfengid",value);
        }else{
            localStorage.setItem("partid",value);
        }
    }
    goVagueaQuery(){
        window.location.href='/adminTrackingVagueQuery.html'
    }
    goVagueaQuerybox(){
        window.location.href='/adminTrackingBoxNumVagueQuery.html'
    }
    query(){
        if(!this.state.id && !this.state.boxnum  && !this.state.shunfengid){
            Toast.info("请输入查询条件")
            this.setState({
                data:[]
            })
        }else{
            if(this.state.shunfengid){
                //根据顺丰单号查询
                var orderid=this.state.shunfengid
                pdaApi.getquerybyid({orderid}).then(res=>{
                    console.log('在途查询--顺丰单号',res);
                    if(res.code==1&&res.result.length!=0){
                        this.setState({
                            data:res.result,
                            onthewayinfoshow:true,
                            onthewayinfoshowtype:1,
                            isshunfeng:true
                        })
                    }else{
                        Toast.info('没有查询到在途信息')
                        this.setState({
                            data:[]
                        })
                    }
                })
                return
            }
            if(this.state.boxnum){
                //根据箱号查询
                var box_number=this.state.boxnum
                var code=this.state.userInfo.code || ""//站点
                pdaApi.getqueryinfo({box_number,code}).then(res=>{
                    console.log('在途查询--箱号',res);
                    if(res.code==1&&res.result.length!=0){
                        this.setState({
                            data:res.result,
                            onthewayinfoshow:true,
                            onthewayinfoshowtype:1
                        })
                    }else{
                        Toast.info('没有查询到在途信息')
                        this.setState({
                            data:[]
                        })
                    }
                })
                return
            }
            if(this.state.id){
                //根据注册号查询
                var pacid=this.state.partid ||''
                var regid=this.state.id
                var code=this.state.userInfo.code || ""//站点
                pdaApi.getqueryinfo({regid,pacid,code}).then(res=>{
                    console.log('在途查询--注册号',res);
                    if(res.code==1&&res.result.length!=0){
                        this.setState({
                            data:res.result,
                            onthewayinfoshow:true,
                            onthewayinfoshowtype:2
                        })
                    }else{
                        Toast.info('没有查询到在途信息')
                        this.setState({
                            data:[]
                        })
                    }
                })
            }
        }

    }
    render() {
        var containner={
            marginTop:'0.5rem',
            width:'100%',
            display:'flex',
            flexDirection: 'column',
            alignItems: 'center',
            backgroundColor:'#ffffff'
        }
        var SeachButtonwrap={
            width:'80%',
            height:'0.75rem',
            marginTop:'0.3rem',
            backgroundColor:'#80b3f2',
            borderTopColor:'#80b3f2',
            borderRadius:100,
            display:'flex',
            justifyContent:'center',
            alignItems:'center',
            fontSize:'0.34rem',
            color:'#fefefe',
            textAlign:'center'
        }
        var OnthewayButtonwrap={
            width:'100%',
            height:'0.8rem',
            marginTop:'0.5rem',
            backgroundColor:'#fefefe',
            borderTopColor:'#fefefe',
            borderRadius:0,
            boxShadow:'0 0.02rem 0.08rem 0 rgba(112,115,118,0.30)',
            display:'flex',
            justifyContent:'flex-start',
            alignItems:'center',
            fontSize:'0.34rem',
            color:'#505050',
            paddingLeft:'0.4rem'
        }
        var infowrap={
            width:'100%',
            padding:'0.2rem',
            display:'none'
        }
        var infowrapshown={
            width:'100%',
            padding:'0.2rem',
        }
        var loc = this.state.data.length>0 ? this.state.data[0].item[0].dealercode:''
        //var loc = '我是经销商'
        console.log('loc 是',loc);
        return (
            <div>
                <NavBar 
                    leftContent={<div style={{ 'display': 'flex', 'alignItems': 'center' }}>
                                    < img style={{ 'width': '.25rem' }} src={back} /> 
                                    <span style={{ 'marginLeft': '.12rem' }}>返回</span>
                                </div>
                                }
                    iconName={false}
                    onLeftClick={() => {
                        // window.history.back(-1);
                        window.location.href='/adminIndex.html'
                    }}>
                    跟踪查询
                </NavBar>
                <div style={containner}>
                    <SingleItem 
                        name="注册号"
                        >
                        <SingleInput 
                        name="id" 
                        onChange={this.handleInputChange} 
                        onFocus={this.goVagueaQuery} 
                        value={this.state.id}
                        onIconClick={()=>{this.clear('id')}}
                        iconStyle={{marginTop:'.2rem'}}
                        icon={clear}/>/>
                    </SingleItem>
                    <SingleItem
                            name="箱号"
                        >
                        <SingleInput 
                        name="boxnum" 
                        onChange={this.handleInputChange} 
                        onFocus={this.goVagueaQuerybox}
                        value={this.state.boxnum}
                        onIconClick={()=>{this.clear('boxnum')}}
                        iconStyle={{marginTop:'.2rem'}}
                        icon={clear}/>/>
                    </SingleItem>
                    <SingleItem 
                        name="零件号"
                        >
                        <SingleInput name="partid" onChange={this.handleInputChange}  value={this.state.partid}/>
                    </SingleItem>
                    <SingleItem 
                        name="顺丰单号"
                        >
                        <SingleInput name="shunfengid" onChange={this.handleInputChange}/>
                    </SingleItem>
                    <Button style={SeachButtonwrap} 
                        loading={this.state.loading}
                        onClick={()=>{this.query()}}>
                        查询
                    </Button>
                    <Button style={OnthewayButtonwrap} 
                        loading={this.state.loading}
                        >
                        在途信息{loc?'-经销商代码：'+loc:''}
                    </Button>
                    {this.state.onthewayinfoshowtype==1?
                        <div style={this.state.onthewayinfoshow==true?infowrapshown:infowrap}>
                            {this.state.data.map((item,index)=>{
                                var tempdata=[]
                                item.item.map((m,n)=>{
                                    if(this.state.isshunfeng){
                                        //var tempitem={itemtext:m.description,date:m.date_time} //LEO
                                        var tempitem={itemtext:m.scg_description+" "+m.location_id_value,date:m.eventdate}
                                    }else{
                                        //var tempitem={itemtext:m.description,date:m.eventdate}
                                        var tempitem={itemtext:m.scg_description+" "+m.location_id_value,date:m.eventdate}
                                    }
                                    tempdata.push(tempitem)
                                })
                                return<NewSteps
                                    data={tempdata}
                                />
                            })}
                        </div>:
                        <div style={this.state.onthewayinfoshow==true?infowrapshown:infowrap}>
                            {this.state.data.map((item,index)=>{
                                if(item.item){
                                    var tempdata=[]
                                    item.item.map((m,n)=>{
                                        //var tempitem={itemtext:m.description,date:m.eventdate}
                                        var tempitem={itemtext:m.scg_description+" "+m.location_id_value,date:m.eventdate}
                                        tempdata.push(tempitem)
                                    })
                                }else{
                                    var tempdata=[{itemtext:'暂无信息',date:''}]
                                }
                                return<AccardionSteps
                                    data={tempdata} boxnum={item.box_number}
                                />
                            })}
                        </div>
                    }
                </div>    
        </div>
        );
    }
    componentDidMount(){
        // 获取用户信息
        let userInfo=JSON.parse(localStorage.getItem("userInfo")) || ''
        if(userInfo!=''){
            console.log('用户信息',userInfo);
            this.setState({
                userInfo:userInfo
            })
        }else{
            window.location.href = "/binduser.html";
        }
        var partid=localStorage.getItem("partid")||''
        if(partid!=''){
            this.setState({
                partid:partid,
            })
        }
        var shunfengid=localStorage.getItem("shunfengid")||''
        if(shunfengid!=''){
            this.setState({
                shunfengid:shunfengid,
            })
        }
        var id=localStorage.getItem("id")||''
        if(id!=''){
            this.setState({
                id:id,
            })
        }
        var boxnum=localStorage.getItem("boxnum")||''
        if(boxnum!=''){
            this.setState({
                boxnum:boxnum,
            })
        }
    }
    clear(type){
        if(type=="id"){
            this.setState({
                id:''
            })
            localStorage.removeItem("id");
        }else{
            this.setState({
                boxnum:''
            })
            localStorage.removeItem("boxnum");
        }
    }
}


const render = () => {
    ReactDOM.render(
        <AdminTranckingQuery></AdminTranckingQuery>, document.getElementById('root'));
}
render();