js

'use strict';
Com.ready(function(){
    var TopBar = require('topBar');//webpack是近期最火的一款模块加载器兼打包工具，基于它可以直接使用 require(XXX) 的形式来引入各模块，括号里面的参数是在
                                   //webpack.config.js中约定的或者是node_module中的。node_modules文件夹下的文件是npm（类似gradle）构建工具根据
                                   //package.json（build.gradle文件）中所引用的第三方包下载到本地的包，
    TopBar.create("收入情况");      
    require("boss_incomeCss");//引入css,这是给webpack编译用的,如果没引入这句的话，那在下面所引用的css则不起作用
    var ScrollLite = require('scrollLite');
    var DoughnutCharts = require('doughnutCharts');
    var BarCharts = require('barCharts');
    var SelectBtnGroup = require('selectBtnGroup');
    var ScreenGroup = require('screenGroup');
    var IncomeColorItem = require('incomeColorItem');
    var IncomeTypeGroup = require('incomeTypeGroup');
    var shop_id = parseInt(Com.getLocalData(Com.SHOP_ID)) || 0;//parseInt是JS自己的api
    var _self = null;
    var time = Com.getLocalData("TIME_INCOME_PAGE") ||　0;//这里调用的是common.js中的api,或者是base.js中的api
    var shopId = Com.getLocalData("SHOPID") || 0;
    var b_click = true;//全部门店按钮是否可以点击
    var Boss_Salemenu = require('boss_Salemenu');
    var menu_config=[{name:'今日',b_isarrow:true,s_silderStr:'days'},{name:'全部门店',b_isarrow:false,s_silderStr:'none'}];
    var a_list = [];
    // var a_list = [{img:require('store_moneyImg'),lable:'门店收银'},{img:require('store_intImg'),lable:'门店电商'},{img:require('seller_intImg'),lable:'商家电商'}];//图标数组
    var colors = ["#E2EAE9","#1D96F2","#2DCD18","#FF9631","#E2EAE9","#D4CCC5","#E96024","#F7464A","#4D5360","#9359B1","#949FB1"];//饼形图颜色
    class PageEl extends React.Component {
         constructor(props){
            super(props);
            this.state={
                data:this.props.data,
            }
        }
        selectBtn(index,value){//筛选：类方法，按钮点击事件，会被调用，
            if (index === 0) {//时间筛选
                Com.openWin('boss_choose_time',{b_income:0,b_isTime:0});
            }
        }
        render(){//类方法，主渲染方法，会被调用，
            var a_pay = [];
            var a_chart = [];
            var o_data = this.state.data;
            var total = o_data.total;
            var echart = o_data.echart;//图表
            var payment = o_data.payment;//支付方式
            var type = o_data.type;//收入类型
            var shop_pos = type.shop_pos;//门店收银
            var shop_saas = type.shop_saas;//门店电商
            var store_saas = type.store_saas;//商家电商
            echart.map(function(item,index){//柱状图
                var income_amount = item.income_amount;
                var time = Com.getTimeFormat(item.time);
                a_chart.push({num:income_amount,time:time});
            });
            //支付方式
            var a_pay_label = {alipay:'支付宝',cardpay:'银行卡',cash:'现金',credit:'挂账',membercard:'会员卡',memberpos:'pos会员卡',offline:'货到付款',other:'其他',smallPro:'小程序',treat:'宴请',weixinpay:'微信'};
            var a_color = {alipay:'payItem alipay',cardpay:'payItem cardpay',cash:'payItem cash',credit:'payItem credit',membercard:'payItem membercard',memberpos:'payItem memberpos',offline:'payItem offline',other:'payItem other',smallPro:'payItem smallPro',treat:'payItem treat',weixinpay:'payItem weixinpay'};
            for(var i in payment){
                if (payment[i]) {
                    a_pay.push({s_style:a_color[i],s_name:a_pay_label[i],i_money:payment[i]});
                }
            }
            var e_dough = null;
            if (a_pay.length > 0) {//没有支付方式则不显示统计图
                 e_dough = <div>
                        <div className="income_title">支付方式统计</div>
                            <div className="income_cont">
                                <div className="pay_type">
                                        <DoughnutCharts o_data={payment}/>
                                    <div className="payWrap">
                                        <IncomeColorItem o_data={a_pay}/>
                                    </div>
                                </div>
                            </div>
                        </div>;
            }
            //收入类型
            var e_type = null;
            var a_type_list = [];
            var a_value = [];
            var e_type_item = null;
            var i_index = 0;
            for(var j in type){
                if (j === 'store_saas') {//商家电商
                    a_list[i_index] = Com.spliceObj({img:require('seller_intImg'),lable:'商家电商'},type[j]);
                }else if (j === 'shop_saas') {//门店电商
                    a_list[i_index] = Com.spliceObj({img:require('store_intImg'),lable:'门店电商'},type[j]);
                }else{//pos 收银
                    a_list[i_index] = Com.spliceObj({img:require('store_moneyImg'),lable:'门店收银'},type[j]);
                }
                a_list[i_index] = Com.spliceObj(a_list[i_index],type[j]);
                a_type_list.push(a_list[i_index]);
                i_index++;
            }
            for (var i = 0; i < a_type_list.length; i++) {
                if (parseInt(a_type_list[i].income_num) !== 0) {
                    a_value.push(a_type_list[i]);
                }
            }
            if (a_value.length > 0) {
                 e_type_item =  <div className="income_wrap">
                                    <div className="income_title">收入类型</div>
                                    <div className="income_cont">
                                        <IncomeTypeGroup o_data={a_type_list}/>
                                    </div>
                                </div>;
            }else{
                e_type_item = null;
            }
            var s_time_lable = Com.getLocalData("lable_income_page")  ||  '今日收入';//时间筛选默
            var shop_name = null;
            // var shop_name = Com.getLocalData('page_store_name') || '全部门店';
            //是否有全部类型筛选
            if (parseInt(shop_id) === 0) {
                b_click = true;
                shop_name = Com.getLocalData('page_store_name') || '全部门店';
            }else{
                shop_name = Com.getLocalData(Com.STORE_NAME);//不能选择门店显示当前门店
                b_click = false;
            }
            var a_select = [s_time_lable,shop_name];
            var a_time_list = [];
            var a_shop_list = [];
            return (
                <div className="boss_income">
                    <ScrollLite style={{height:Com.getTopH()}}>
                        <div className="menu_box">
                            <SelectBtnGroup b_click={b_click} a_time_list={a_time_list} a_shop_list={a_shop_list} a_dataItems={a_select} f_itemCallBack={(index,value)=>this.selectBtn(index,value)} s_page='boss_allshop'/>
                        </div>
                        <div className="today_income">
                            <div className="todayItem">
                                <p>{s_time_lable}收入</p>
                                <div className="money">￥{Com.getNumFormat(total.total_income)}</div>
                            </div>
                            <div className="todayItem">
                                <p>订单数</p>
                                <div className="money">{total.total_num}</div>
                            </div>
                            <div className="todayItem">
                                <p>客单均价</p>
                                <div className="money">￥{Com.getNumFormat(total.total_vag)}</div>
                            </div>
                        </div>
                        <div className="income_wrap">
                            {e_dough}
                        </div>
                        {e_type_item}
                        <div className="income_wrap">
                            <div className="income_title">近7天收入趋势</div>
                            <div className="income_cont">
                                <BarCharts a_list={a_chart}/>
                            </div>
                        </div>
                    </ScrollLite>
                </div>
             );
        }
    };//class 结束
    //时间筛选的回调方法：选择了时间之后会回调此方法
    Com.addEvt('time_upload_data',(data)=>{//base.js
        time = data.time;
        shopId = data.shopId;
        requestData(time,shopId,function (o_data) {
            if(!_self){
                _self = ReactDOM.render(<PageEl data={o_data}/>,document.getElementById('pageCon'));
            }else{
                _self.setState({data:o_data});
            }
        });
    })
    //刷新首页事件
    // Com.addEvt('upload_page',(data)=>{
    //     shop_name = data.s_title;
    //     requestData(time,shopId,function (o_data) {
    //         if(_self){
    //             Com.removeLocalData('upload_page');
    //             _self.setState({data:o_data});
    //         }
    //     });
    // });
    // 请求数据：网络请求
    function requestData(time,shopId,f_callBack) {
        Com.getVerify({act:"Income_boss",op:"income_index",shopId:shopId,time:time},function(res){//在common或者base.js中
            if(parseInt(res.code) === 0){
                f_callBack(res.data);
            }else{
                Com.toast(res.msg);
            }
        });
    }
    requestData(time,shopId,(data)=>{//相当于java main 主动请求网络数据炫染道pageCon界面
        //document:也就是说这个js肯定是要被一个HTML引用的，哪个HTML引用了这个js，那么这个js中的document就代表哪个HTML
        //很明显，这个js文件被boss_income.html所引用，所以id pageCon 可以去boss_income.html中找
       _self = ReactDOM.render(<PageEl data={data}/>,document.getElementById('pageCon'));
    });


});