<!DOCTYPE HTML> 
 | 
<html xmlns:th="http://www.thymeleaf.org" xmlns:matrix="http://www.w3.org/1999/xhtml"> 
 | 
<head> 
 | 
    <meta charset="utf-8"> 
 | 
    <META HTTP-EQUIV="Pragma" CONTENT="no-cache"> 
 | 
    <meta name="renderer" content="webkit|ie-comp|ie-stand"> 
 | 
    <meta http-equiv="X-UA-Compatible" content="IE=edge,chrome=1"> 
 | 
    <meta name="viewport" 
 | 
          content="width=device-width,initial-scale=1,minimum-scale=1.0,maximum-scale=1.0,user-scalable=no"/> 
 | 
    <meta http-equiv="Cache-Control" content="no-siteapp"/> 
 | 
    <!-- 本框架基本脚本和样式 --> 
 | 
    <script type="text/javascript" 
 | 
            th:src="@{/js/plugin/jquery-2.1.4.min.js}"></script> 
 | 
    <script type="text/javascript" th:src="@{/js/systools/MBase.js}"></script> 
 | 
    <style type="text/css"> 
 | 
        .btn-my{background-color: #f8ac59; border-color: #f8ac59;color:#fff} 
 | 
        .btn-my:hover{background-color: #FFD19F;border-color: #FFD19F;color:#fff} 
 | 
        .btn-my:focus{outline:0!important;} 
 | 
        .btn-my.active{background-color: #63bfb7 ;border-color: #63bfb7;color:#fff;outline:0;} 
 | 
  
 | 
  
 | 
    </style> 
 | 
</head> 
 | 
<body class=" container-fluid"> 
 | 
<div class="pd-10"> 
 | 
    <!-- 搜索框部分start --> 
 | 
    <div class="row form-head"> 
 | 
        <form class="form-inline" id="serchform"> 
 | 
            <div class="form-group mr-20"> 
 | 
                <label>订单编号</label> 
 | 
                <input autocomplete="off"   name="orderNo" id="orderNo" type="text" class="form-control" > 
 | 
            </div> 
 | 
            <div class="form-group mr-20"> 
 | 
                <label>客户信息</label> 
 | 
                <input placeholder="会员名\编号\电话"   name="keyWordVo" id="keyword" type="text" class="form-control" > 
 | 
            </div> 
 | 
            <div class="form-group mr-20"> 
 | 
                <label>订单日期</label> 
 | 
                <input autocomplete="off"   name="beginTimeVo" type="text" class="form-control datetimepicker" id="beginTime">- 
 | 
                <input autocomplete="off"   name="endTimeVo"  type="text" class="form-control datetimepicker" id="endTime"> 
 | 
            </div> 
 | 
  
 | 
            <input autocomplete="off"   type="hidden" name="statu" value="待付款" id="statu"/> 
 | 
            <div class="form-group mr-20"> 
 | 
                <button type="button" class="btn btn-my btn-sm" id="btn0" value="" >全部</button> 
 | 
                <button type="button" class="btn btn-my btn-sm active" id="btn1" value="待付款" >待付款</button> 
 | 
                <button type="button" class="btn btn-my btn-sm" id="btn2" value="已付款">已付款</button> 
 | 
                <button type="button" class="btn btn-my btn-sm" id="btn3" value="欠款">欠款</button> 
 | 
                <button type="button" class="btn btn-my btn-sm" id="btn4" value="已取消">已取消</button> 
 | 
            </div> 
 | 
            <div class="form-group"> 
 | 
                <button onclick="myGrid.serchData(1)" type="button" 
 | 
                        class="btn btn-sm btn-info"> 
 | 
                    <i class="fa fa-search "></i> 搜索 
 | 
                </button> 
 | 
                <button type="reset" class="btn btn-sm btn-info "> 
 | 
                    <i class="fa fa-refresh "></i> 重置 
 | 
                </button> 
 | 
            </div> 
 | 
        </form> 
 | 
    </div> 
 | 
    <div class="row mt-10"> 
 | 
        <div id="option-bar"> 
 | 
            <button  matrix:btn="orderClub-exportExcel"  onclick="exportExcel()" type="button" class="btn btn-info btn-sm"><i class="fa fa-download" ></i> 导出</button> 
 | 
            <button  matrix:btn="orderClub-del"  class="btn btn-danger btn-sm mr-5" onClick="cancelOrder()"  ><i class="fa fa-trash-o fa-fw"></i> 取消</button> 
 | 
        </div> 
 | 
        <!-- 数据表格部分 --> 
 | 
        <table id="mgrid"> 
 | 
            <thead> 
 | 
            <tr> 
 | 
                <th data-checkbox="true"></th> 
 | 
                <th data-align="center" data-width="150px" data-field="id" data-formatter="buidOperate">操作</th> 
 | 
                <th data-formatter="MGrid.indexfn" data-align="center" 
 | 
                    data-width="30px">序号</th> 
 | 
                <th data-sortable="true" data-field="orderNo">订单号</th> 
 | 
                <th data-field="vipName">客户姓名</th> 
 | 
                <th data-field="vipPhone">客户手机号</th> 
 | 
                <th data-field="orderTime" data-formatter="MGrid.getTime" 
 | 
                    data-sortable="true">下单时间</th> 
 | 
                <th data-field="total">订单总价</th> 
 | 
  
 | 
                <th data-field="zkTotal">折后价</th> 
 | 
                <th data-field="payTime" data-formatter="MGrid.getTime" 
 | 
                    data-sortable="true">支付时间</th> 
 | 
                <th data-field="staffName">下单顾问</th> 
 | 
                <th data-field="cashPay">现金支付金额</th> 
 | 
                <th data-field="cardPay">卡支付金额</th> 
 | 
                <th data-field="arrears">欠款金额</th> 
 | 
  
 | 
                <th data-field="statu">订单状态</th> 
 | 
                <th data-field="remark">备注</th> 
 | 
  
 | 
            </tr> 
 | 
            </thead> 
 | 
        </table> 
 | 
        <!-- 数据表格部分end --> 
 | 
    </div> 
 | 
</div> 
 | 
  
 | 
<script type="text/javascript" th:src="@{/js/systools/MJsBase.js}"></script> 
 | 
<script type="text/javascript"> 
 | 
    //进入页面初始化赋值 
 | 
    var status=$.query.get('status'); 
 | 
    if(status=='全部'){ 
 | 
        $(".btn-my").removeClass("active"); 
 | 
        $("#btn0").addClass("active"); 
 | 
        $("#statu").val(""); 
 | 
    }else if(status=='欠款'){ 
 | 
        $(".btn-my").removeClass("active"); 
 | 
        $("#btn3").addClass("active"); 
 | 
        $("#statu").val(status); 
 | 
    }else if(status=='待付款'){ 
 | 
        $(".btn-my").removeClass("active"); 
 | 
        $("#btn1").addClass("active"); 
 | 
        $("#statu").val(status); 
 | 
    } 
 | 
  
 | 
    $("#keyword").val($.query.get('keyword')); 
 | 
  
 | 
  
 | 
  
 | 
    $(".select2").select2(); 
 | 
    var myGrid; 
 | 
    $(function(){ 
 | 
        var initParam = { 
 | 
            format : "yyyy-mm-dd hh:ii", //默认显示年与日,如果想显示十分秒:"yyyy-mm-dd hh:ii:ss" 
 | 
            minView: "1",     //"month",只显示年月日的选择,不会再跳转去选择时分秒;如果想要选择时分秒的:"hour" 
 | 
        } 
 | 
        MTools.ininDatetimepicker(initParam); 
 | 
        //限制结束时间不小于开始时间 
 | 
        MTools.limitStartEndTime({}); 
 | 
        //初始化select 
 | 
        MTools.autoFullSelect(); 
 | 
  
 | 
        myGrid=MGrid.initGrid({ 
 | 
            url:basePath+"/admin/order/showList", 
 | 
            sortName:"orderTime", 
 | 
            sortOrder:"desc", 
 | 
        }); 
 | 
  
 | 
    }); 
 | 
  
 | 
    var btns=[]; 
 | 
    btns[0]="",btns[1]="",btns[2]="",btns[3]="",btns[4]=""; 
 | 
    function buidOperate(value, row, index){ 
 | 
        var html=''; 
 | 
        html += '<div class="btn-group">' 
 | 
        html +='<button type="button" class="btn btn-success dropdown-toggle btn-sm" data-toggle="dropdown">操作' 
 | 
        html +='  <span class="caret"></span> </button>' 
 | 
        html +='<ul class="dropdown-menu" role="menu">' 
 | 
        html +=btns[0].replace('VALUE',value); 
 | 
        if(row.statu=='欠款'){   html +=btns[1].replace('VALUE',value); } 
 | 
        if(row.statu=='待付款'){ html +=btns[2].replace('VALUE',value);} 
 | 
        html +=btns[3].replace('VALUE',value); 
 | 
        html +='</ul></div>' 
 | 
        return html; 
 | 
    } 
 | 
  
 | 
  
 | 
    /** 
 | 
     * 跳转消费流水详情页面 
 | 
     */ 
 | 
    function openLook(id) { 
 | 
        layer.full(layer.open({ 
 | 
            type : 2, 
 | 
            title : "订单详情", 
 | 
            maxmin : true, 
 | 
            area : [ MUI.SIZE_L, '500px' ], 
 | 
            content : [ basePath + '/admin/order/orderItem?id=' + id ] 
 | 
        })); 
 | 
    } 
 | 
  
 | 
    function updateTime(id) { 
 | 
        layer.open({ 
 | 
            type : 2, 
 | 
            title : "修改订单时间", 
 | 
            maxmin : true, 
 | 
            area : [ MUI.SIZE_L, '500px' ], 
 | 
            content : [ basePath + '/admin/order/toUpdateTime?id=' + id ] 
 | 
        }); 
 | 
    } 
 | 
  
 | 
  
 | 
    //导出 
 | 
        function exportExcel(){ 
 | 
            var param=MForm.toUrlParam("#serchform"); 
 | 
            window.location.href=basePath+"/admin/order/exportExcel?"+param; 
 | 
        } 
 | 
  
 | 
  
 | 
    //打开编辑界面 
 | 
    function openEdit(id) { 
 | 
        layer.full(layer.open({ 
 | 
            type : 2, 
 | 
            title : "收款", 
 | 
            area : [ MUI.SIZE_L, '400px' ], 
 | 
            maxmin : true, 
 | 
            content : [ basePath+'/admin/redirect/hive/beautySalon/order-form?id=' + id] 
 | 
        })); 
 | 
    } 
 | 
  
 | 
    // 打开补交界面 
 | 
    function openBj(id) { 
 | 
        layer.full(layer.open({ 
 | 
            type : 2, 
 | 
            title : "补交", 
 | 
            area : [ MUI.SIZE_L, '400px' ], 
 | 
            maxmin : true, 
 | 
            content : [ basePath+'/admin/moneyCardUse/toBj?id=' + id] 
 | 
        })); 
 | 
    } 
 | 
    $(".btn-my").click(function(){ 
 | 
        var btnValue = $(this).val(); 
 | 
        $("#statu").val(btnValue); 
 | 
        myGrid.serchData(); 
 | 
        $(".btn-my").removeClass("active") 
 | 
        $(this).addClass("active") 
 | 
    }); 
 | 
  
 | 
    function cancelOrder() { 
 | 
        var id=myGrid.getSelectItemId(); 
 | 
        layer.confirm('确定取消此订单?', { 
 | 
            btn: ['确认', '取消'] //可以无限个按钮 
 | 
        }, function(index, layero){ 
 | 
            $.post(basePath+'/admin/order/cancelOrder?id='+id+'&del=0', {}, function(data){ 
 | 
                if (data.status == '200') { 
 | 
                    parent.layer.msg(data.info,{icon: 1}); 
 | 
                } else { 
 | 
                    parent.layer.msg(data.info,{icon: 2}); 
 | 
                } 
 | 
                layer.closeAll(); 
 | 
                myGrid.serchData(); 
 | 
            }); 
 | 
        }, 
 | 
        //     function(index){ 
 | 
        //     $.post(basePath+'/admin/order/cancelOrder?id='+id+'&del=1', {}, function(data){ 
 | 
        //         parent.layer.msg(data.info,{icon: 1}); 
 | 
        //         layer.closeAll(); 
 | 
        //         myGrid.serchData(); 
 | 
        //     }); 
 | 
        // }, 
 | 
            function(index){ 
 | 
            //按钮【按钮二】的回调 
 | 
        }); 
 | 
    } 
 | 
</script> 
 | 
<script  > 
 | 
    btns[0]='<li> <button class="btn btn-default btn-sm mr-5" onClick="openLook(\'VALUE\')"  title="查看详情"><i class="fa fa-eye fa-trash-o">查看</i></buttoun></li>' 
 | 
</script> 
 | 
<script matrix:btn="orderClub-payment"  > 
 | 
    btns[1]='<li> <button class="btn btn-default btn-sm mr-5" onclick="openBj(\'VALUE\')" title=补交"><i class="fa fa-sign-in">补交</i></button></li>' 
 | 
</script> 
 | 
<script matrix:btn="orderClub-gathering"  > 
 | 
    btns[2]='<li> <button class="btn btn-default btn-sm mr-5" onclick="openEdit(\'VALUE\')" title="收款"><i class="fa fa-edit">收款</i></button></li>' 
 | 
</script> 
 | 
<script matrix:btn="orderClub-edit"  > 
 | 
    btns[3]='<li> <button class="btn btn-default btn-sm mr-5" onclick="updateTime(\'VALUE\')" title="修改时间"><i class="fa fa-edit">修改时间</i></button></li>' 
 | 
</script> 
 | 
  
 | 
  
 | 
  
 | 
</body> 
 | 
</html> 
 |