294 lines
8.0 KiB
HTML
294 lines
8.0 KiB
HTML
{template '_header'}
|
|
|
|
|
|
<style>
|
|
.panel-default {
|
|
border-radius: 0;
|
|
margin-bottom: 50px;
|
|
}
|
|
.panel-heading {
|
|
border: 0;
|
|
height: 44px;
|
|
padding: 0;
|
|
}
|
|
.panel-heading.transparent {
|
|
background: transparent;
|
|
border-bottom: 1px solid #f2f2f2;
|
|
}
|
|
.panel-tab-small {
|
|
float: right;
|
|
line-height: 44px;
|
|
font-size: 0;
|
|
margin-right: 30px;
|
|
}
|
|
.panel-tab-small a {
|
|
height: inherit;;
|
|
font-size: 12px;
|
|
color: #333;
|
|
padding: 0 10px;position: relative;
|
|
display: inline-block;
|
|
}
|
|
.panel-tab-small a.active:before {
|
|
position: absolute;
|
|
content: '';
|
|
left: 8px;
|
|
right: 8px;
|
|
bottom: 0;
|
|
border-bottom: 2px solid #44abf7;
|
|
}
|
|
.panel-tab {
|
|
height: 44px;
|
|
font-size: 0;
|
|
}
|
|
.panel-tab a {
|
|
height: inherit;
|
|
padding: 0 20px;
|
|
line-height: 44px;
|
|
font-size: 14px;
|
|
color: #333;
|
|
position: relative;
|
|
display: inline-block;
|
|
}
|
|
.panel-tab a.active {
|
|
color: #44abf7;
|
|
}
|
|
.panel-tab a.active:before {
|
|
content: '';
|
|
position: absolute;
|
|
top: -1px;
|
|
left: -1px;
|
|
right: 0;
|
|
border-top: 2px solid #44abf7;
|
|
z-index: 1;
|
|
}
|
|
.panel-tab a.active:after {
|
|
content: '';
|
|
position: absolute;
|
|
top: 0;
|
|
left: -1px;
|
|
right: 0;
|
|
bottom: 0;
|
|
border-left: 1px solid #f2f2f2;
|
|
border-right: 1px solid #f2f2f2;
|
|
border-bottom: 1px solid #fff;
|
|
}
|
|
|
|
.panel .panel-row {
|
|
width: 100%;
|
|
padding: 12px;
|
|
border-bottom: 1px solid #e7eaec;
|
|
display: -webkit-box;
|
|
display: -webkit-flex;
|
|
display: -ms-flexbox;
|
|
display: flex;
|
|
}
|
|
.panel .panel-row.noborder {
|
|
border: 0;
|
|
}
|
|
.panel .panel-col {
|
|
width: 100%;
|
|
padding: 9px 0;
|
|
text-align: center;
|
|
border-left: 1px solid #e7eaec;
|
|
}
|
|
.panel .panel-col:first-child,
|
|
.panel .panel-col.noborder {
|
|
border: 0;
|
|
}
|
|
.panel .panel-col p {
|
|
font-size: 20px;
|
|
color: #333;
|
|
}
|
|
.panel .panel-col p.title {
|
|
font-size: 14px;
|
|
}
|
|
.panel .panel-col p.text-danger {
|
|
color: #ec6060;
|
|
}
|
|
.panel .panel-col p.text-warning {
|
|
color: #ffc000;
|
|
}
|
|
.thead {
|
|
border: 0;
|
|
background: #f4f4f4;
|
|
}
|
|
.table > thead > tr > th,
|
|
.table > tbody > tr > td {
|
|
border: 0;
|
|
font-weight: normal;
|
|
color: #333;
|
|
}
|
|
.table > tbody > tr > td.text-warning {
|
|
color: #ffc000;
|
|
}
|
|
|
|
</style>
|
|
|
|
<div class="page-heading"> <h2>会员概述</h2> </div>
|
|
|
|
<div class="panel panel-default">
|
|
<div class="panel-heading">
|
|
<div class="panel-tab-small">
|
|
<a data-type='1' class="infodays active">今日</a>
|
|
<a data-type='7' class="infodays">七日</a>
|
|
<a data-type='30' class="infodays">本月</a>
|
|
</div>
|
|
</div>
|
|
<div class="panel-body">
|
|
<div class="panel-row">
|
|
<div class="panel-col noborder">
|
|
<p class="title">订单数</p>
|
|
<p id="ordernum">{$info[1][ordernum]}</p>
|
|
</div>
|
|
<div class="panel-col noborder">
|
|
<p class="title">销售额(元)</p>
|
|
<p class="text-danger" id="salesnum">{$info[1][salesnum]}</p>
|
|
</div>
|
|
<div class="panel-col noborder">
|
|
<p class="title">核销数</p>
|
|
<p id="verifynum">{$info[1][verifynum]}</p>
|
|
</div>
|
|
</div>
|
|
<div class="panel-row noborder">
|
|
<div class="panel-col">
|
|
<p class="title">维权金额</p>
|
|
<p id="refundmoney">{$info[1][refundmoney]}</p>
|
|
</div>
|
|
<div class="panel-col">
|
|
<p class="title">维权数</p>
|
|
<p class="text-warning" id="refundnum">{$info[1][refundnum]}</p>
|
|
</div>
|
|
</div>
|
|
</div>
|
|
</div>
|
|
|
|
<div class="panel panel-default">
|
|
<div class="panel-heading transparent">
|
|
<div class="panel-tab-small">
|
|
<a data-type='1' class="listdays active">今日</a>
|
|
<a data-type='7' class="listdays">七日</a>
|
|
<a data-type='30' class="listdays">本月</a>
|
|
</div>
|
|
|
|
<div class="panel-tab">
|
|
<a data-type='ordernumlist' class="showlist active">订单数排行</a>
|
|
<a data-type='salesnumlist' class="showlist ">销售额排行</a>
|
|
<a data-type='verifynumlist' class="showlist ">核销数排行</a>
|
|
</div>
|
|
</div>
|
|
<div class="panel-body ordernumlist list">
|
|
<table class="table">
|
|
<thead class="thead">
|
|
<th style="width: 20%">排序</th>
|
|
<th>门店名称</th>
|
|
<th style="width: 40%">订单数</th>
|
|
</thead>
|
|
<tbody class="tbody">
|
|
{loop $list[1][ordernum] $key $item}
|
|
<tr>
|
|
<td>{php echo $key+1}</td>
|
|
<td>{$item[storename]}</td>
|
|
<td class="text-warning">{$item[num]}</td>
|
|
</tr>
|
|
{/loop}
|
|
</tbody>
|
|
</table>
|
|
</div>
|
|
<div class="panel-body salesnumlist list" style="display: none;">
|
|
<table class="table">
|
|
<thead class="thead">
|
|
<th style="width: 20%">排序</th>
|
|
<th>门店名称</th>
|
|
<th style="width: 40%">销售额</th>
|
|
</thead>
|
|
<tbody class="tbody ">
|
|
{loop $list[1][salesnum] $key $item}
|
|
<tr>
|
|
<td>{php echo $key+1}</td>
|
|
<td>{$item[storename]}</td>
|
|
<td class="text-warning">{$item[num]}</td>
|
|
</tr>
|
|
{/loop}
|
|
</tbody>
|
|
</table>
|
|
</div>
|
|
<div class="panel-body verifynumlist list" style="display: none;">
|
|
<table class="table">
|
|
<thead class="thead">
|
|
<th style="width: 20%">排序</th>
|
|
<th>门店名称</th>
|
|
<th style="width: 40%">核销订单数</th>
|
|
</thead>
|
|
<tbody class="tbody">
|
|
{loop $list[1][verifynum] $key $item}
|
|
<tr>
|
|
<td>{php echo $key+1}</td>
|
|
<td>{$item[storename]}</td>
|
|
<td class="text-warning">{$item[num]}</td>
|
|
</tr>
|
|
{/loop}
|
|
</tbody>
|
|
</table>
|
|
</div>
|
|
</div>
|
|
|
|
|
|
<script language='javascript'>
|
|
|
|
require(['bootstrap'],function(){
|
|
var info = {php echo json_encode($info)};
|
|
var list = {php echo json_encode($list)};
|
|
|
|
$('.showlist').click(function (e) {
|
|
$('.showlist').removeClass('active');
|
|
$(this).addClass('active');
|
|
$('.list').hide();
|
|
var a = $(this).data('type');
|
|
$('.'+a).show();
|
|
})
|
|
|
|
$('.listdays').click(function (e) {
|
|
$('.listdays').removeClass('active');
|
|
$(this).addClass('active');
|
|
|
|
var a = $(this).data('type');
|
|
|
|
$.each(list[a],function(index,value){
|
|
|
|
var html="";
|
|
$.each(list[a][index],function(index2,value2){
|
|
|
|
html+="<tr>";
|
|
html+="<td>"+index2+"</td>";
|
|
html+="<td>"+value2['storename']+"</td>";
|
|
html+="<td class='text-warning'>"+value2['num']+"</td>";
|
|
html+="</tr>";
|
|
|
|
});
|
|
|
|
$('.'+index+'list').find('tbody').html(html);
|
|
});
|
|
|
|
})
|
|
|
|
$('.infodays').click(function (e) {
|
|
$('.infodays').removeClass('active');
|
|
$(this).addClass('active');
|
|
var a = $(this).data('type');
|
|
|
|
$('#ordernum').html( info[a]['ordernum']);
|
|
$('#salesnum').html( info[a]['salesnum']);
|
|
$('#verifynum').html( info[a]['verifynum']);
|
|
$('#refundmoney').html( info[a]['refundmoney']);
|
|
$('#refundnum').html( info[a]['refundnum']);
|
|
|
|
})
|
|
|
|
|
|
|
|
});
|
|
|
|
</script>
|
|
|
|
{template '_footer'}
|