jitao-client/js/component/account/ticket/coupon.jsx

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;