import React ,{Component}from 'react'; import { Radio,Card,Row,Col,Icon,Pagination, message } from 'antd'; import $ from 'jquery/src/ajax'; import '@/account/demand/techDemand.less'; import '@/administration/news/news.less'; import "./coupon.less"; class DemandList extends Component { constructor(props) { super(props); this.state = { loading: false, code:'', timeV:'0', dataSource:[], nubJu:0, pagination: { defaultCurrent: 1, defaultPageSize: 10, showQuickJumper: true, pageSize:6, onChange: function (page) { this.loadData(page); }.bind(this), showTotal: function (total) { return '共' + total + '条数据'; } }, } } loadData(pageNo,state,type,time) { this.state.data = []; this.setState({ state:state, page:pageNo, loading: true, }); $.ajax({ method: "get", dataType: "json", crossDomain: false, url: globalConfig.context + "/api/user/voucher/selectDetailList", data: { pageNo: pageNo || 1, pageSize: this.state.pagination.pageSize, status: state|| 0, //状态 sort:type, sortType:time }, success: function (data) { let theArr = []; if (!data.data || !data.data.list) { if (data.error && data.error.length) { message.warning(data.error[0].message); }; } else { for (let i = 0; i < data.data.list.length; i++) { let thisdata = data.data.list[i]; theArr.push({ key: i, id: thisdata.id, name: thisdata.name,//名称 money: thisdata.money,//面额 source: thisdata.source,//来源 starTime: thisdata.starTime,//领取时间 endTime: thisdata.endTime,//截止时间 useTime: thisdata.useTime, //使用时间 status: thisdata.status,//状态 userMobile: thisdata.userMobile,//使用人手机号 durationDay: thisdata.durationDay,//期限 }); }; }; this.state.pagination.current = data.data.pageNo; this.state.pagination.total = data.data.totalCount; if(!state){ this.setState({ nubJu:data.data.totalCount }) } if(data.data&&data.data.list&&!data.data.list.length){ this.state.pagination.current=0; this.state.pagination.total=0; }; this.setState({ total:data.data.totalCount, dataSource: theArr, pagination: this.state.pagination }); }.bind(this), }).always(function () { this.setState({ loading: false }); }.bind(this)); } codeData(){ $.ajax({ method: "get", dataType: "json", crossDomain: false, url: globalConfig.context + "/api/user/InvitationCode", data: { } }).done(function (data) { if (!data.error.length) { this.setState({ code:data.data }) } else { message.warning(data.error[0].message); }; }.bind(this)); } handleSizeChange(e){ this.setState({ timeV:e.target.value }) this.loadData(0,e.target.value); } componentWillMount() { this.loadData(); this.codeData(); } moneyFun(state,item){ this.loadData(1,this.state.state,state,item) } render() { return ( <div className="user-content" > <div className="content-title"> <span>我的抵用券</span> </div> <div className="user-search"> <Card > <Row> <Col span={6}> <p>{this.state.nubJu} 张</p> <p>抵用券</p> </Col> <Col span={6}> <p>{this.state.code}</p> <p>我的邀请码</p> </Col> <Col span={12}> <div className="discount"> <p>优惠金额</p> <div className="discountMoney"> <Icon type="caret-up" className="up" onClick={()=>{this.moneyFun(0,0)}}/> <Icon type="caret-down" className="down" onClick={()=>{this.moneyFun(0,1)}} /> </div> </div> <div className="effective"> <p>生效时间</p> <div className="time"> <Icon type="caret-up" className="up" onClick={()=>{this.moneyFun(1,0)}}/> <Icon type="caret-down" className="down" onClick={()=>{this.moneyFun(1,1)}}/> </div> </div> </Col> </Row> </Card> <Card title={<Radio.Group value={this.state.timeV} onChange={this.handleSizeChange.bind(this)}> <Radio.Button value="0">可使用</Radio.Button> <Radio.Button value="1">已使用</Radio.Button> <Radio.Button value="2">已失效</Radio.Button> </Radio.Group>} style={{marginTop:10}} > <div className="cardCode"> <Row gutter={20}> { this.state.dataSource.map(item=>{ return <Col span={8} style={{marginBottom:10}}> <Card> <div className="discountList"> <p>技淘币:<span>{parseInt(item.money)}</span> 枚</p> <div className="discountListTxt"> <p>有效天数 : {item.durationDay}</p> <p>名称 : {item.name}</p> <p>有效日期 : {(item.starTime.split(' ')[0]).replace(/-/g,'.')} - {(item.endTime.split(' ')[0]).replace(/-/g,'.')}</p> </div> </div> </Card> </Col> }) } </Row> </div> {this.state.total?<Pagination className="page" {...this.state.pagination}/>:''} </Card> </div> </div > ); } }; export default DemandList;