'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'));
});
});
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'));
});
});