{"size": 14235, "ext": "js", "max_stars_repo_path": "client/views/account/session/session.js", "max_stars_repo_name": "bigmgreen/p2p-react-webpack-es6-nodejs", "max_stars_repo_stars_event_min_datetime": "2021-02-12T19:34:37.000Z", "max_stars_repo_stars_event_max_datetime": "2021-02-12T19:34:37.000Z", "max_issues_repo_path": "client/views/account/session/session.js", "max_issues_repo_name": "bigmgreen/p2p-react-webpack-es6-nodejs", "max_issues_repo_issues_event_min_datetime": null, "max_issues_repo_issues_event_max_datetime": null, "max_forks_repo_path": "client/views/account/session/session.js", "max_forks_repo_name": "bigmgreen/p2p-react-webpack-es6-nodejs", "max_forks_repo_forks_event_min_datetime": null, "max_forks_repo_forks_event_max_datetime": null}
{"max_stars_count": 1, "max_issues_count": null, "max_forks_count": null, "avg_line_length": 33.4941176471, "max_line_length": 213, "alphanum_fraction": 0.4238145416}
/**
 * 头部组件
 */
var Header = Global.component.Header;
/**
 * 底部组件
 */
var Footer = Global.component.Footer;
/**
 * 面包屑组件
 */
var Breadcrumb = Global.component.Breadcrumb;
/**
 * 表格组件
 */
var Table = Global.component.Table;
/**
 * 请求地址
 */
var URL = Global.URLS.ACCOUNT;
/**
 * 链接地址
 */
var LINK = Global.LINK;
/**
 * 左菜单组件
 */
var AccountLeft = Global.component.AccountLeft;
/**
 * Mixins
 */
var Mixins = {
    tabSetItem: function (num) {
        sessionStorage.setItem('react-tab-index' + LINK.ACCOUNT.RECHARGE.split('/').pop(), num);
        location.href = LINK.ACCOUNT.RECHARGE;
    }
}

/**
 * 流水信息
 */
var SessionInfo = React.createClass({
    mixins: [Mixins],
    getInitialState: function () {
        return {
            //账户余额
            cash: null,
            statics: {
                //充值总额
                totalCharge: null,
                //提现总额
                totalWithdraw: null
            }
        };
    },
    componentDidMount: function () {
        Utils.getUserCash(function (cash) {
            this.setState({
                cash: cash
            });
        }.bind(this));
    },
    componentWillReceiveProps: function (nextProps) {
        this.setState(nextProps.info);
    },
    render: function () {
        return (
            <section className="session-info">
                <header className="clear-fix session-info-title">
                    <h3 className="pull-left">
                        <span>账户余额：￥</span>
                        <span>{this.state.cash}</span>
                    </h3>
                    <span className="pull-right">
                        <button type="button" onClick={this.tabSetItem.bind(this, 0)} className="btn btn-success">充值</button>
                        <button type="button" onClick={this.tabSetItem.bind(this, 1)} className="btn btn-success">提现</button>
                    </span>
                </header>
                <p className="session-info-text">充值总额：￥<span>{this.state.statics.totalCharge}</span></p>
                <p className="session-info-text">提现总额：￥<span>{this.state.statics.totalWithdraw}</span></p>
            </section>
        );
    }
});

/*  筛选出来的数据  */
var FilterTable = React.createClass({
    getInitialState: function () {
        return {
            list: [
                {
                    mtype: null,
                    record: {
                        tradeTime: null,
                        loanTitle: null,
                        tradeType: null,
                        amount: null,
                        tradeComment: null
                    }
                }
            ],
            pageView: {
                currentPage: 1,
                pageCount: 0
            }
        };
    },
    componentWillReceiveProps: function (nextProps) {
        this.setState(nextProps);
    },
    render: function () {
        return (
            <div className="table-responsive">
                <Table
                    {...this.state}
                    tableClass="table table-hover table-bordered"
                    th={['时间', '类型', '项目', '收入', '支出', '备注']}
                    noDataText="没有流水！"
                    callBack={
                        function (result) {
                            return (
                                <tr>
                                    <td>{result.record.tradeTime}</td>
                                    <td>{result.mtype}</td>
                                    <td title={result.record.loanTitle}><span
                                        className="text-overflow-small">{result.record.loanTitle}</span></td>
                                    <td className="text-danger">{result.record.tradeType < 1000 && '+' + result.record.amount}</td>
                                    <td className="text-danger">{result.record.tradeType > 1000 && '-' + result.record.amount}</td>
                                    <td title={result.record.tradeComment}>
                                        <span className="text-overflow-small">{result.record.tradeComment}</span>
                                    </td>
                                </tr>
                            )
                        }.bind(this)
                    }
                />
            </div>
        );
    }
});

/**
 * 数据筛选
 */
var FilterData = React.createClass({
    getInitialState: function () {
        return {
            roles: null
        };
    },
    componentWillReceiveProps: function (nextProps) {
        this.setState(nextProps);
    },
    queryData: function (param) {
        this.props.queryData(param);
    },
    getBorrowerFilter: function () {
        return (
            <dl>
                <dt>流水类型：</dt>
                <dd>
                    <button
                        className="active"
                        type="button"
                        onClick={this.queryDataByType.bind(this, 0)}>所有流水
                    </button>
                </dd>
                <dd>
                    <button type="button" onClick={this.queryDataByType.bind(this, 220)}>回收本金</button>
                </dd>
                <dd>
                    <button type="button" onClick={this.queryDataByType.bind(this, 230)}>回收利息</button>
                </dd>
                <dd>
                    <button type="button" onClick={this.queryDataByType.bind(this, 100)}>充值</button>
                </dd>
                <dd>
                    <button type="button" onClick={this.queryDataByType.bind(this, 1100)}>提现</button>
                </dd>
                <dd>
                    <button type="button" onClick={this.queryDataByType.bind(this, -1)}>其他类型</button>
                </dd>
            </dl>
        );
    },
    getPersonFilter: function () {
        return (
            <dl>
                <dt>流水类型：</dt>
                <dd>
                    <button
                        className="active"
                        type="button"
                        onClick={this.queryDataByType.bind(this, 0)}>所有流水
                    </button>
                </dd>
                <dd>
                    <button type="button" onClick={this.queryDataByType.bind(this, 1350)}>投资冻结</button>
                </dd>
                <dd>
                    <button type="button" onClick={this.queryDataByType.bind(this, 300)}>借款成功</button>
                </dd>
                <dd>
                    <button type="button" onClick={this.queryDataByType.bind(this, 1200)}>偿还本息</button>
                </dd>
                <dd>
                    <button type="button" onClick={this.queryDataByType.bind(this, 1550)}>风险保证金</button>
                </dd>
                <dd>
                    <button type="button" onClick={this.queryDataByType.bind(this, 1500)}>借款手续费</button>
                </dd>
                <dd>
                    <button type="button" onClick={this.queryDataByType.bind(this, 100)}>充值</button>
                </dd>
                <dd>
                    <button type="button" onClick={this.queryDataByType.bind(this, 1100)}>提现</button>
                </dd>
                <dd>
                    <button type="button" onClick={this.queryDataByType.bind(this, -1)}>其他类型</button>
                </dd>
            </dl>
        );
    },
    getEnterpriseFilter: function () {
        return (
            <dl>
                <dt>流水类型：</dt>
                <dd>
                    <button
                        className="active"
                        type="button"
                        onClick={this.queryDataByType.bind(this, 0)}>所有流水
                    </button>
                </dd>
                <dd>
                    <button type="button" onClick={this.queryDataByType.bind(this, 300)}>借款成功</button>
                </dd>
                <dd>
                    <button type="button" onClick={this.queryDataByType.bind(this, 1200)}>偿还本息</button>
                </dd>
                <dd>
                    <button type="button" onClick={this.queryDataByType.bind(this, 1550)}>风险保证金</button>
                </dd>
                <dd>
                    <button type="button" onClick={this.queryDataByType.bind(this, 1500)}>借款手续费</button>
                </dd>
                <dd>
                    <button type="button" onClick={this.queryDataByType.bind(this, 100)}>充值</button>
                </dd>
                <dd>
                    <button type="button" onClick={this.queryDataByType.bind(this, 1100)}>提现</button>
                </dd>
                <dd>
                    <button type="button" onClick={this.queryDataByType.bind(this, -1)}>其他类型</button>
                </dd>
            </dl>
        );
    },
    getFilterByRole: function (role) {
        switch (role) {
            case Global.ROLE.PERSON:
                return this.getPersonFilter();
            case Global.ROLE.ENTERPRISE:
                return this.getEnterpriseFilter();
            case Global.ROLE.BORROWER:
                return this.getBorrowerFilter();
        }
    },
    queryDataByType: function (type, e) {
        e.preventDefault();

        var target = $(e.target);
        target.parents('dl').find('.active').removeClass('active');
        target.addClass('active');

        this.queryData({
            currentPage: 1,
            type: type
        });
    },
    queryDataByTime: function (time, e) {
        e.preventDefault();

        var target = $(e.target);
        target.parents('dl').find('.active').removeClass('active');
        target.addClass('active');

        $('#startTime').val('');
        $('#endTime').val('');

        this.queryData({
            currentPage: 1,
            time: time,
            startTime: null,
            endTime: null
        });
    },
    queryDataByDate: function (e) {
        e.preventDefault();

        $(e.target).parents('dl').find('.active').removeClass('active');

        this.queryData({
            currentPage: 1,
            startTime: $('#startTime').val(),
            endTime: $('#endTime').val()
        });
    },
    render: function () {
        return (
            <div className="filter-panel">
                {this.getFilterByRole(this.state.roles)}
                <dl>
                    <dt>时间范围：</dt>
                    <dd>
                        <button
                            className="active"
                            type="button"
                            onClick={this.queryDataByTime.bind(this, 0)}>最近七天
                        </button>
                    </dd>
                    <dd>
                        <button type="button" onClick={this.queryDataByTime.bind(this, 1)}>1个月</button>
                    </dd>
                    <dd>
                        <button type="button" onClick={this.queryDataByTime.bind(this, 2)}>2个月</button>
                    </dd>
                    <dd>
                        <button type="button" onClick={this.queryDataByTime.bind(this, 3)}>3个月</button>
                    </dd>
                    <dd>
                        <div
                            dangerouslySetInnerHTML={{
                                __html: '<input type="text" class="form-control" name="startTime" id="startTime" onfocus=WdatePicker({maxDate:"%y-%M-{%d}",dateFmt:"yyyy-MM-dd"}) />'
                            }}
                        ></div>
                    </dd>
                    <dd>-</dd>
                    <dd>
                        <div
                            dangerouslySetInnerHTML={{
                                __html: '<input type="text" class="form-control" name="endTime" id="endTime" onfocus=WdatePicker({maxDate:"%y-%M-{%d}",minDate:"#F{$dp.$D(\'startTime\')}",dateFmt:"yyyy-MM-dd"}) />'
                            }}
                        ></div>
                    </dd>
                    <dd>
                        <button
                            type="button"
                            onClick={this.queryDataByDate}
                            className="btn btn-success"
                        >确 定
                        </button>
                    </dd>
                </dl>
                <FilterTable {...this.state}/>
                <Pagination {...this.state} queryData={this.queryData}/>
            </div>
        );
    }
});

var AccountRight = React.createClass({
    componentWillReceiveProps: function (nextProps) {
        this.setState(nextProps)
    },
    render: function () {
        return (
            <div className="account-right">
                <SessionInfo {...this.state} />
                <FilterData {...this.state} />
            </div>
        );
    }
});

var App = React.createClass({
    componentDidMount: function () {
        this.queryData();
    },
    queryData: function (param) {
        if (param instanceof Object) {
            this.param = $.extend(this.param, param);
        } else {
            this.param = {
                currentPage: 1,
                type: 0,
                time: 0
            }
        }
        $.get(URL.SESSION, this.param, function (result) {
            var pageView = result.pageView
            this.setState({
                appUser: result.appUser,
                list: result.datas,
                pageView: {
                    currentPage: pageView.currentPage,
                    pageCount: pageView.pageCount
                },
                roles: result.appUser.roles,
                info: result
            });
        }.bind(this));
    },
    render: function () {
        return (
            <div>
                <Header {...this.state}/>
                <div className="page-container">
                    <Breadcrumb {...{
                        index: '首页',
                        pageName: '资金流水'
                    }}/>
                    <div className="clear-fix">
                        <AccountLeft {...this.state}/>
                        <AccountRight {...this.state} queryData={this.queryData}/>
                    </div>
                </div>
                <Footer {...this.state}/>
            </div>
        );
    }
});

ReactDOM.render(<App />, document.getElementById('app'));
