效果图:
第一步
define(['jquery', 'bootstrap', 'backend', 'table', 'form', 'template'], function ($, undefined, Backend, Table, Form, Template) {
var Controller = {
index: function () {
// 初始化表格参数配置
Table.api.init({
extend: {
index_url: 'wanlshop/order/index' + location.search,
add_url: '',
edit_url: '',
del_url: 'wanlshop/order/del',
multi_url: 'wanlshop/order/multi',
table: 'wanlshop_order',
}
});
var table = $("#table");
Template.helper("cdnurl", function(image) {
return Fast.api.cdnurl(image);
});
Template.helper("Moment", Moment);
// 初始化表格
table.bootstrapTable({
url: $.fn.bootstrapTable.defaults.extend.index_url,
templateView: true,
pk: 'id',
sortName: 'id',
columns: [
[
{checkbox: true},
{field: 'id', title: __('Id')},
{field: 'user.nickname', title: __('User.nickname'), align: 'left', formatter: Table.api.formatter.search},
{field: 'shop.shopname', title: __('Shop_id'), align: 'left', formatter: Table.api.formatter.search},
{field: 'order_no', title: __('Order_no')},
{field: 'express_no', title: __('Express_no')},
{field: 'state', title: __('State'), searchList: {"1":__('State 1'),"2":__('State 2'),"3":__('State 3'),"4":__('State 4'),"6":__('State 6'),"7":__('State 7')}, formatter: Table.api.formatter.normal},
{field: 'createtime', title: __('Createtime'), operate:'RANGE', addclass:'datetimerange', formatter: Table.api.formatter.datetime},
{field: 'paymenttime', title: __('Paymenttime'), operate:'RANGE', addclass:'datetimerange', formatter: Table.api.formatter.datetime},
{field: 'delivertime', title: __('Delivertime'), operate:'RANGE', addclass:'datetimerange', formatter: Table.api.formatter.datetime},
{field: 'dealtime', title: __('Dealtime'), operate:'RANGE', addclass:'datetimerange', formatter: Table.api.formatter.datetime},
{field: 'status', title: __('Status'), searchList: {"normal":__('Normal'),"hidden":__('Hidden')}, formatter: Table.api.formatter.status},
{field: 'operate', title: __('Operate'), table: table, events: Table.api.events.operate, formatter: Table.api.formatter.operate}
]
]
});
// 为表格绑定事件
Table.api.bindevent(table);
//点击详情
$(document).on("click", ".detail[data-id]", function () {
Backend.api.open('wanlshop/order/detail/id/' + $(this).data('id'), __('查看详情'),{area:['1200px', '780px']});
});
//点击详情
$(document).on("click", ".comment[data-id]", function () {
Backend.api.open('wanlshop/comment/detail/order_id/' + $(this).data('id'), __('查看详情'));
});
$(document).on("click", ".kuaidisub[data-id]", function () {
Backend.api.open('wanlshop/order/relative/id/' + $(this).data('id'), __('快递查询'),{area:['800px', '600px']});
});
},
recyclebin: function () {
// 初始化表格参数配置
Table.api.init({
extend: {
'dragsort_url': ''
}
});
var table = $("#table");
// 初始化表格
table.bootstrapTable({
url: 'wanlshop/order/recyclebin' + location.search,
pk: 'id',
sortName: 'id',
columns: [
[
{checkbox: true},
{field: 'id', title: __('Id')},
{
field: 'deletetime',
title: __('Deletetime'),
operate: 'RANGE',
addclass: 'datetimerange',
formatter: Table.api.formatter.datetime
},
{
field: 'operate',
width: '130px',
title: __('Operate'),
table: table,
events: Table.api.events.operate,
buttons: [
{
name: 'Restore',
text: __('Restore'),
classname: 'btn btn-xs btn-info btn-ajax btn-restoreit',
icon: 'fa fa-rotate-left',
url: 'wanlshop/order/restore',
refresh: true
},
{
name: 'Destroy',
text: __('Destroy'),
classname: 'btn btn-xs btn-danger btn-ajax btn-destroyit',
icon: 'fa fa-times',
url: 'wanlshop/order/destroy',
refresh: true
}
],
formatter: Table.api.formatter.operate
}
]
]
});
// 为表格绑定事件
Table.api.bindevent(table);
},
add: function () {
Controller.api.bindevent();
},
relative: function () {
},
detail: function () {
// 查询物流状态
$(document).on("click", ".kuaidisub[data-id]", function () {
Backend.api.open('wanlshop/order/relative/id/' + $(this).data('id'), __('快递查询'),{area:['800px', '600px']});
});
},
edit: function () {
Controller.api.bindevent();
},
api: {
bindevent: function () {
Form.api.bindevent($("form[role=form]"));
}
}
};
return Controller;
});
第二步:
<div class="panel panel-default panel-intro">
<div class="panel-heading">
{:build_heading(null,FALSE)}
<ul class="nav nav-tabs" data-field="status">
<li class="{:$Think.get.status === null ? 'active' : ''}"><a href="#t-all" data-value="" data-toggle="tab">{:__('All')}</a></li>
{foreach name="deliverTypeList" item="vo"}
<li class="{:$Think.get.status === (string)$key ? 'active' : ''}"><a href="#t-{$key}" data-value="{$key}" data-toggle="tab">{$vo}</a></li>
{/foreach}
</ul>
</div>
<div class="panel-body">
<div id="myTabContent" class="tab-content">
<div class="tab-pane fade active in" id="one">
<div class="widget-body no-padding">
<div id="toolbar" class="toolbar">
<a href="javascript:;" class="btn btn-primary btn-refresh" title="{:__('Refresh')}" ><i class="fa fa-refresh"></i> </a>
<!--<a href="javascript:;" class="btn btn-success btn-add {:$auth->check('order/order/add')?'':'hide'}" title="{:__('Add')}" ><i class="fa fa-plus"></i> {:__('Add')}</a>-->
<a href="javascript:;" class="btn btn-success btn-edit btn-disabled disabled {:$auth->check('order/order/edit')?'':'hide'}" title="{:__('Edit')}" ><i class="fa fa-pencil"></i> {:__('Edit')}</a>
<!--<a href="javascript:;" class="btn btn-danger btn-del btn-disabled disabled {:$auth->check('order/order/del')?'':'hide'}" title="{:__('Delete')}" ><i class="fa fa-trash"></i> {:__('Delete')}</a>-->
<!--<div class="dropdown btn-group {:$auth->check('order/order/multi')?'':'hide'}">-->
<!-- <a class="btn btn-primary btn-more dropdown-toggle btn-disabled disabled" data-toggle="dropdown"><i class="fa fa-cog"></i> {:__('More')}</a>-->
<!-- <ul class="dropdown-menu text-left" role="menu">-->
<!-- {foreach name="deliverTypeList" item="vo"}-->
<!-- <li><a class="btn btn-link btn-multi btn-disabled disabled" href="javascript:" data-params="status={$key}">{:__('Set status to ' . $key)}</a></li>-->
<!-- {/foreach}-->
<!-- </ul>-->
<!--</div>-->
<a class="btn btn-success btn-recyclebin btn-dialog {:$auth->check('order/order/recyclebin')?'':'hide'}" href="order/order/recyclebin" title="{:__('Recycle bin')}"><i class="fa fa-recycle"></i> {:__('Recycle bin')}</a>
</div>
<table id="table" class="table table-striped table-bordered table-hover table-nowrap"
data-operate-edit="{:$auth->check('order/order/edit')}"
data-operate-del="{:$auth->check('order/order/del')}"
width="100%">
</table>
</div>
</div>
</div>
</div>
</div>
<style type="text/css">
.wanl_order_list{
margin-bottom: 15px;
}
.wanl_order_list .detail{
}
.fix-108{
width: 108px;
text-align: center;
}
.text-left{
text-align: left;
}
.text-right{
text-align: right;
}
.wanl_order_list .table>thead{
background: #f1f4f6;
}
.bootstrap-table .table,
.bootstrap-table .table>thead>tr>th{
border-bottom: 1px solid #f1f1f1;
}
.table-bordered{
border: 1px solid #f1f1f1;
}
.table-bordered > thead > tr > th,
.table-bordered > tbody > tr > td {
border: 1px solid #f1f1f1;
border-bottom: 0;
}
.table-bordered > thead > tr > th, label{
margin-bottom: 0;
font-weight: normal;
}
.table-bordered > tbody td.empty{
border-top: 0;
}
.table-bordered > tbody td.conceal{
border-left: 0 ;
border-right: 0 ;
}
.table-bordered > tbody td.conceal.fix-108{
}
/* 产品 */
.wanl_order_list p{
margin-bottom: 4px;
}
.wanl_order_list .item {
display: flex;
margin: 10px;
}
.wanl_order_list .item .order_img {
flex-shrink: 0;
}
.wanl_order_list .item .order_info {
width: 90%;
margin-left: 10px;
margin-top: 2px;
}
.wanl_order_list .item .order_info .sku {
color: #9e9e9e;
}
.wanl_order_list .operation a{
color: #565656;
}
</style>
<script type="text/html" id="itemtpl">
<% if(i == 0){ %>
<div class="col-sm-12" style="margin-bottom: 15px;">
<table class="table table-bordered table-striped table-hover table-nowrap">
<thead>
<tr>
<th class="text-center"><div class="th-inner">商品</div></th>
<th class="fix-108"><div class="th-inner">单价</div></th>
<th class="fix-108"><div class="th-inner">数量</div></th>
<th class="fix-108"><div class="th-inner">买家</div></th>
<th class="fix-108"><div class="th-inner">实际支付</div></th>
<th class="fix-108"><div class="th-inner">状态</div></th>
<!-- <th class="fix-108"><div class="th-inner">操作</div></th> -->
</tr>
</thead>
</table>
</div>
<% } %>
<div class="wanl_order_list col-sm-12">
<table class="table table-bordered table-hover ">
<thead>
<tr>
<th colspan="7">
<div class="th-inner">
<input name="checkbox" data-id="<%=item.id%>" id="order_<%=item.id%>" type="checkbox" />
<label for="order_<%=item.id%>">订单号：<%=item.order_no%></label>
<label style="margin-left:60px;" for="order_<%=item.id%>">创建时间：<%=Moment(item.createtime*1000).format("YYYY-MM-DD HH:mm:ss")%></label>
<a href="javascript:;" style="margin-left:60px;" class="searchit text-primary" data-toggle="tooltip" title="" data-field="shop.shopname" data-value="<%=item.shop.shopname%>" data-original-title="点击搜索 <%=item.shop.shopname%>"> <i class="fa fa-shopping-cart"></i> <%=item.shop.shopname%> </a>
</div>
</th>
</tr>
</thead>
<tbody>
<% for(var k = 0 ; k < item.ordergoods.length ; k ++){ %>
<% var goods = item.ordergoods[k]; %>
<% var labelarr = ['primary', 'success', 'info', 'danger', 'warning', 'muted']; %>
<tr>
<td class="conceal">
<div class="item">
<div class="order_img">
<a href="javascript:"><img class="img-md img-center" src="<%=cdnurl(goods.image)%>" alt="<%=goods.title%>"></a>
</div>
<div class="order_info">
<p><%=goods.title%></p>
<p class="sku"><%=goods.difference%></p>
</div>
</div>
</td>
<td class="conceal fix-108">
<p> <del>￥<%=goods.price%></del> </p>
<p>￥<%=goods.actual_payment%></p>
</td>
<td class="conceal fix-108"> <%=goods.number%> </td>
<% if(k == 0){ %>
<td class="fix-108">
<p style="margin-bottom:5px;">
<a href="javascript:;" class="searchit" data-toggle="tooltip" title="" data-field="user.nickname" data-value="<%=item.user.nickname%>" data-original-title="点击搜索 <%=item.user.nickname%>"><%=item.user.nickname%></a>
</p>
</td>
<td class="fix-108">
<p><strong>￥<%= item.pay.price %></strong> </p>
<p style="color:#6c6c6c;font-family:verdana;margin-bottom:3px;"> (含运费：￥<%= item.pay.freight_price %>) </p>
</td>
<td class="fix-108 operation">
<% if(item.state == 1){ %>
<p>
<a href="javascript:;" class="searchit" data-toggle="tooltip" title="" data-field="state" data-value="<%=item.state%>" data-original-title="点击搜索 <%=item.state_text%>">
<span class="text-<%=labelarr[4]%>"><i class="fa fa-circle"></i> <%=item.state_text%> </span>
</a>
</p>
<p><a href="javascript:;" class="detail" data-id="<%=item.id%>">订单详情</a> </p>
<% }else if(item.state == 2){ %>
<p>
<a href="javascript:;" class="searchit" data-toggle="tooltip" title="" data-field="state" data-value="<%=item.state%>" data-original-title="点击搜索 <%=item.state_text%>">
<span class="text-<%=labelarr[0]%>"><i class="fa fa-circle"></i> <%=item.state_text%></span>
</a>
</p>
<p><a href="javascript:;" class="detail" data-id="<%=item.id%>">订单详情</a> </p>
<% }else if(item.state == 3){ %>
<p>
<a href="javascript:;" class="searchit" data-toggle="tooltip" title="" data-field="state" data-value="<%=item.state%>" data-original-title="点击搜索 <%=item.state_text%>">
<span class="text-<%=labelarr[2]%>"><i class="fa fa-circle"></i> <%=item.state_text%></span>
</a>
</p>
<p><a href="javascript:;" class="detail" data-id="<%=item.id%>">订单详情</a> </p>
<p><a href="javascript:;" class="kuaidisub" data-id="<%=item.id%>">查看物流</a> </p>
<% }else if(item.state == 4){ %>
<p>
<a href="javascript:;" class="searchit" data-toggle="tooltip" title="" data-field="state" data-value="<%=item.state%>" data-original-title="点击搜索 <%=item.state_text%>">
<span class="text-<%=labelarr[1]%>"><i class="fa fa-circle"></i> <%=item.state_text%></span>
</a>
</p>
<p><a href="javascript:;" class="detail" data-id="<%=item.id%>">订单详情</a> </p>
<p><a href="javascript:;" class="kuaidisub" data-id="<%=item.id%>">查看物流</a> </p>
<% }else if(item.state == 5){ %>
<p>
<a href="javascript:;" class="searchit" data-toggle="tooltip" title="" data-field="state" data-value="<%=item.state%>" data-original-title="点击搜索 <%=item.state_text%>">
<span class="text-<%=labelarr[0]%>"><i class="fa fa-circle"></i> <%=item.state_text%></span>
</a>
</p>
<p><a href="javascript:;" class="detail" data-id="<%=item.id%>">订单详情</a> </p>
<p><a href="javascript:;" class="kuaidisub" data-id="<%=item.id%>">查看物流</a> </p>
<% }else if(item.state == 6){ %>
<p>
<a href="javascript:;" class="searchit" data-toggle="tooltip" title="" data-field="state" data-value="<%=item.state%>" data-original-title="点击搜索 <%=item.state_text%>">
<span class="text-<%=labelarr[3]%>"><i class="fa fa-circle"></i> <%=item.state_text%></span>
</a>
</p>
<p><a href="javascript:;" class="detail" data-id="<%=item.id%>">订单详情</a> </p>
<p><a href="javascript:;" class="kuaidisub" data-id="<%=item.id%>">查看物流</a> </p>
<p><a href="javascript:;" class="comment" data-id="<%=item.id%>">查看评论</a> </p>
<% }else if(item.state == 7){ %>
<p>
<a href="javascript:;" class="searchit" data-toggle="tooltip" title="" data-field="state" data-value="<%=item.state%>" data-original-title="点击搜索 <%=item.state_text%>">
<span class="text-<%=labelarr[5]%>"><i class="fa fa-circle"></i> <%=item.state_text%></span>
</a>
</p>
<p><a href="javascript:;" class="detail" data-id="<%=item.id%>">订单详情</a> </p>
<p><a href="javascript:;" class="kuaidisub" data-id="<%=item.id%>">查看物流</a> </p>
<% } %>
</td>
<% }else{ %>
<td class="empty"> </td>
<td class="empty"> </td>
<td class="empty"> </td>
<% } %>
</tr>
<% } %>
</tbody>
</table>
</div>
</script>效果
