要完成的功能是,通过时间筛选可以得出每个时间端的数据,页面引用的组件是vant的Picker 选择器:
首先,前端方面,引入这个选择器组件(可以跟弹出层的组件搭配---Popup 弹出层)
<div class="col-xs-3">
<img src="../img/i/down.png " height="14"
@click="timezone">//给图片设置点击的方法
<input type="text" hidden id="time">//将值拿到这个input框,隐藏掉
<van-popup v-model="show">//弹出层的组件,将选择器包裹起来
<van-picker//选择的组件整体
show-toolbar
:columns="columns"
@cancel="onCancel"
@confirm="onConfirm"
/>
</van-popup>
</div>引入组件的属性,在vue的return那边引入
columns: ['交易时间', '今日', '近七日', '本周', '本月','近三月'],引入组件完毕,接下来先告一段落,去接口方面拿数据:
if($params['zone']==3){
//请求参数
switch ($params['columns']){
case ($params['columns'] == '交易时间'):
$time_start = '';
$time_end = Carbon::tomorrow();
//获取所有旗下商户收益总金额
$money= Order::select()
->join('users','orders.user_id','=','users.id')
->where('users.aid', '=',$params['id'])
->where('orders.pay_status','=','2')
->whereBetween('orders.created_at',[$time_start,$time_end])
->sum('real_amount');
//代理总分润
$benefit = AccountLog::select()
->where('user_id','=',$params['id'])
->where('type','=','1')
->whereBetween('account_logs.created_at',[$time_start,$time_end])
->sum('balance');
return [
'status' => true,
'code' => '200',
'money'=>fenToYuan($money),
'benefit'=>fenToYuan($benefit),
];
break;
case ($params['columns'] == '今日'):
//今日
$time_start = Carbon::today();
$time_end = Carbon::tomorrow();
//获取所有旗下商户收益总金额
$money= Order::select()
->join('users','orders.user_id','=','users.id')
->where('users.aid', '=',$params['id'])
->where('orders.pay_status','=','2')
->whereBetween('orders.created_at',[$time_start,$time_end])
->sum('real_amount');
//代理总分润
$benefit = AccountLog::select()
->where('user_id','=',$params['id'])
->where('type','=','1')
->whereBetween('account_logs.created_at',[$time_start,$time_end])
->sum('balance');
return [
'status' => true,
'code' => '200',
'money'=>fenToYuan($money),
'benefit'=>fenToYuan($benefit),
];
break;
case ($params['columns'] == '近七日') :
//近七日
$time_start = Carbon::now()->subDays(7);
$time_end = Carbon::today();
//获取所有旗下商户收益总金额
$money= Order::select()
->join('users','orders.user_id','=','users.id')
->where('users.aid', '=',$params['id'])
->where('orders.pay_status','=','2')
->whereBetween('orders.created_at',[$time_start,$time_end])
->sum('real_amount');
//代理总分润
$benefit = AccountLog::select()
->where('user_id','=',$params['id'])
->where('type','=','1')
->whereBetween('account_logs.created_at',[$time_start,$time_end])
->sum('balance');
return [
'status' => true,
'code' => '200',
'money'=>fenToYuan($money),
'benefit'=>fenToYuan($benefit),
];
break;
case ($params['columns'] == '本周') :
//本周
$time_start = Carbon::now()->startOfWeek();
$time_end = Carbon::now()->endOfWeek();
//获取所有旗下商户收益总金额
$money= Order::select()
->join('users','orders.user_id','=','users.id')
->where('users.aid', '=',$params['id'])
->where('orders.pay_status','=','2')
->whereBetween('orders.created_at',[$time_start,$time_end])
->sum('real_amount');
//代理总分润
$benefit = AccountLog::select()
->where('user_id','=',$params['id'])
->where('type','=','1')
->whereBetween('account_logs.created_at',[$time_start,$time_end])
->sum('balance');
return [
'status' => true,
'code' => '200',
'money'=>fenToYuan($money),
'benefit'=>fenToYuan($benefit),
];
break;
case ($params['columns'] == '上周') :
//上周
$time_start = Carbon::now()->subWeek(1)->startOfWeek();
$time_end =Carbon::now()->subweek(1)->endOfWeek();
//获取所有旗下商户收益总金额
$money= Order::select()
->join('users','orders.user_id','=','users.id')
->where('users.aid', '=',$params['id'])
->where('orders.pay_status','=','2')
->whereBetween('orders.created_at',[$time_start,$time_end])
->sum('real_amount');
//代理总分润
$benefit = AccountLog::select()
->where('user_id','=',$params['id'])
->where('type','=','1')
->whereBetween('account_logs.created_at',[$time_start,$time_end])
->sum('balance');
return [
'status' => true,
'code' => '200',
'money'=>fenToYuan($money),
'benefit'=>fenToYuan($benefit),
];
break;
case ($params['columns'] == '本月') :
//本月
$time_start = Carbon::now()->startOfMonth();
$time_end = Carbon::now()->endOfMonth();
//获取所有旗下商户收益总金额
$money= Order::select()
->join('users','orders.user_id','=','users.id')
->where('users.aid', '=',$params['id'])
->where('orders.pay_status','=','2')
->whereBetween('orders.created_at',[$time_start,$time_end])
->sum('real_amount');
//代理总分润
$benefit = AccountLog::select()
->where('user_id','=',$params['id'])
->where('type','=','1')
->whereBetween('account_logs.created_at',[$time_start,$time_end])
->sum('balance');
return [
'status' => true,
'code' => '200',
'money'=>fenToYuan($money),
'benefit'=>fenToYuan($benefit),
];
break;
case ($params['columns'] == '近三月') :
//近三月
$time_start = Carbon::now()->subMonth(2)->startOfMonth();
$time_end = Carbon::tomorrow();
//获取所有旗下商户收益总金额
$money= Order::select()
->join('users','orders.user_id','=','users.id')
->where('users.aid', '=',$params['id'])
->where('orders.pay_status','=','2')
->whereBetween('orders.created_at',[$time_start,$time_end])
->sum('real_amount');
//代理总分润
$benefit = AccountLog::select()
->where('user_id','=',$params['id'])
->where('type','=','1')
->whereBetween('account_logs.created_at',[$time_start,$time_end])
->sum('balance');
return [
'status' => true,
'code' => '200',
'money'=>fenToYuan($money),
'benefit'=>fenToYuan($benefit),
];
break;
}
}
else{
//获取所有旗下商户收益总金额
$money= Order::select()
->join('users','orders.user_id','=','users.id')
->where('users.aid', '=',$params['id'])
->where('orders.pay_status','=','2')
->sum('real_amount');
//代理总分润
$benefit = AccountLog::select()
->where('user_id','=',$params['id'])
->where('type','=','1')
->sum('balance');
//旗下商户数量
$data1= User::merchant()->where('aid','=',$params['id'])->count();
//旗下商户列表
$data = User::merchant()->where('aid','=',$params['id'])->get();
return [
'status' => true,
'code' => '200',
'data' => $data,
'data1'=>$data1,
'money'=>fenToYuan($money),
'benefit'=>fenToYuan($benefit),
];
}想法是刚进来页面的时候 数据进行渲染,判断的值zone为空,为空的时候,走的渲染代码如下:
mounted () {
var _self =this ;
axios.post('/api/v1',api_data_sign(post_data, 'mrf'))
.then(function (response) {
var data = response.data;
if(data.code == 200){
_self.count = data.data1;//旗下商户数量
_self.items = data.data;//旗下商户列表
_self.money = data.money;
_self.benefit = data.benefit;
_self.shelly = true;
}
}).catch(function (error) {
console.log(error);
});
},如果zone等于3则进行调用组件的方法,先看代码,再做解释!
methods: {
//这是图片点击时候,触发的方法名
timezone(){
this.show = true;//表示组件是跳出来的,显示的
},
//这是组件自带的方法,取消按钮的方法名
onCancel(){
this.show = false;//表示点击取消的时候,组件隐藏掉,关闭
},
//组件自带的确认按钮的方法名
onConfirm(a){
this.show = false;//点确认的时候,隐藏掉,值拿到了
var columns = a;//将参数拿到传给变量,变量在传给后台的接口文件,进行判断拿数据
var post_data = {
id:data_id,
method: 'agent.account.list',
nonce: 'agent.account.list',
columns:columns,//传到后台的值
zone:3//这就是判断的zone为3的时候就可以执行查询
};
var _self =this ;
axios.post('/api/v1',api_data_sign(post_data, 'mrf'))
.then(function (response) {
var data = response.data;
if(data.code == 200){
_self.money = data.money;
console.log(_self.money)
_self.benefit = data.benefit;
}
}).catch(function (error) {
console.log(error);
});
},
}我们从前台的这边的参数赋予给一个变量,将这个变量拿到后台进行查询数据
看图 zone为3的时候 进入判断,前台拿到的值作为一个switch.当这个值为多少值,进入相应的case,进行查询,详细代码在上面.
扫描二维码关注公众号，回复：
3762259 查看本文章
到这边 查询的功能就完成了,看下效果图
确认后,拿到值,进行对应的case查询
觉得有用的话,就转发哦!
欢迎评论多多交流!!!