import React, {Component} from 'react'; import {connect,browserHistory} from 'react-redux'; import {actionAxios, concatPageAndType} from 'js/actions/actions'; import {LoadingRound} from 'component/common'; import {CLOUDAPI} from 'config/index'; const createActions = concatPageAndType("logicompany"); const axiosCreator = actionAxios("logicompany"); const pageApi = { init: {url: `${CLOUDAPI}/user/sold/logistics`, method: "get"} }; class Logicompany extends Component { componentWillMount() { this.props.getData(); } //点击获取物流公司 getCompany =(item) => { let {dispatch} = this.props; dispatch(createActions('changeCompany', {name: item.name,code:item.code,id:item.id})); history.go(-1); }; getHtml = () => { let {data} = this.props; let arrCom=[]; for(let key in data){ arrCom.push( <div id={key} key={key}> <h1>{key}</h1> { data[key].map(item=><div className="one-company" onClick={()=>{this.getCompany(item)}} key={item.id+item.code}>{item.name}</div>) } </div> ) } return arrCom }; // 跳转锚点 anchorJump = (n) => { let text = $(n).text(); $(n).href = `#${text}`; let {pathname,search} = location; let url = pathname+search; window.location.replace( url + "#" + text) }; // 手指滑动 move = () => { // 获取开始点击的位置 // 每滑动一个a标签的高度切换一个锚点 event.preventDefault(); anchorJump(document.elementFromPoint(event.changedTouches[0].clientX,event.changedTouches[0].clientY)) }; touchEnd = () => { let opcityNum = 1; setInterval(function () { opcityNum -= 0.1; if (opcityNum > 0) { $('.letter').css({'opacity': opcityNum}) } else { clearInterval(); } },50) }; //侧边导航 getsubLitter = () =>{ let {data} = this.props; let subArr = []; for(let key in data){ subArr.push( <a key={key} onTouchStart={ (e) => {this.anchorJump(e.target)} }> {key} </a> ) } return subArr; }; render() { let {load} = this.props; return ( <div> {!load ? <div data-page="after-sale-company"> {this.getHtml()} <div className="slidePage flex-def flex-zTopBottom flex-zCenter flex-cEnd" onTouchEnd={ () => {this.touchEnd()}} onTouchMove={ () => {this.move()}}> <div className="wrap"> {this.getsubLitter()} </div> </div> </div> : <LoadingRound/>} </div> ) } } function logicompanyState(state, props) { return { ...state.logicompany } } function logicompanyDispatch(dispatch, props) { return { dispatch: dispatch, getData: () => { dispatch(axiosCreator('getData', {...pageApi.init, params: {}})); }, } } function logicompanyProps(stateProps, dispatchProps, props) { let {dispatch} = dispatchProps; return { ...stateProps, ...dispatchProps, ...props } } export default connect(logicompanyState, logicompanyDispatch, logicompanyProps)(Logicompany);
带字母的物流列表开发react
最新推荐文章于 2021-09-14 19:21:31 发布