|  |  | 
 |  |  |     <meta http-equiv="Cache-Control" content="no-siteapp"/> | 
 |  |  |     <LINK rel="Bookmark" href="../images/favicon.ico"> | 
 |  |  |     <!-- 本框架基本脚本和样式 --> | 
 |  |  |     <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> | 
 |  |  |     <script type="text/javascript" th:src="@{/js/systools/MBaseVue.js}"></script> | 
 |  |  |     <script type="text/javascript" th:src="@{/js/plugin/jquery-2.1.4.min.js}"></script> | 
 |  |  |     <script type="text/javascript" th:src="@{/plugin/moment.min.js}"></script> | 
 |  |  |     <script type="text/javascript" th:src="@{/js/systools/MBase.js}"></script> | 
 |  |  |     <script type="text/javascript" th:src="@{/js/function/vip.js}"></script> | 
 |  |  |     <link rel="stylesheet" th:href="@{/plugin/element-ui/index.css}"> | 
 |  |  |  | 
 |  |  |     <script type="text/javascript" th:src="@{/js/function/vip.js}"></script> | 
 |  |  |     <script type="text/javascript" th:src="@{/js/function/meiduCommon.js}"></script> | 
 |  |  |     <title></title> | 
 |  |  | </head> | 
 |  |  |  | 
 |  |  | <div class="panel-body"> | 
 |  |  |     <div class="form-group"> | 
 |  |  |         <label class="col-sm-2 control-label">订单号</label> | 
 |  |  |         <div class="col-sm-4"> | 
 |  |  |             <span class="form-control-static" th:text="${order.orderNo}"></span> | 
 |  |  |         </div> | 
 |  |  |  | 
 |  |  |         <label class="col-sm-2 control-label">订单总价</label> | 
 |  |  |         <div class="col-sm-4"> | 
 |  |  |             <span class="form-control-static" id="total" th:text="${order.total}"></span> | 
 |  |  |         </div> | 
 |  |  |     </div> | 
 |  |  |     <br> | 
 |  |  |     <div class="form-group"> | 
 |  |  |         <label class="col-sm-2 control-label">客户编号</label> | 
 |  |  |         <div class="col-sm-4"> | 
 |  |  |             <span class="form-control-static" th:text="${order.vipNo}"></span> | 
 |  |  |         </div> | 
 |  |  |         <label class="col-sm-2 control-label">客户姓名</label> | 
 |  |  |         <div class="col-sm-4"> | 
 |  |  |             <span class="form-control-static" th:text="${order.vipName}"></span> | 
 |  |  |         </div> | 
 |  |  |     </div> | 
 |  |  |     <br> | 
 |  |  |     <div class="form-group"> | 
 |  |  |         <label class="col-sm-2 control-label">现金支付金额</label> | 
 |  |  |         <div class="col-sm-4"> | 
 |  |  |             <span class="form-control-static">[[${order.cashPay}]]</span> | 
 |  |  |         </div> | 
 |  |  |         <label class="col-sm-2 control-label">卡支付金额</label> | 
 |  |  |         <div class="col-sm-4"> | 
 |  |  |             <span class="form-control-static" id="total">[[${order.cardPay}]]</span> | 
 |  |  |         </div> | 
 |  |  |     </div> | 
 |  |  |     <br> | 
 |  |  |     <div class="form-group"> | 
 |  |  |         <label class="col-sm-2 control-label">欠款</label> | 
 |  |  |         <div class="col-sm-4"> | 
 |  |  |             <span class="form-control-static">[[${order.arrears}]]</span> | 
 |  |  |         </div> | 
 |  |  |         <label class="col-sm-2 control-label">折后价</label> | 
 |  |  |         <div class="col-sm-4"> | 
 |  |  |             <span class="form-control-static" id="zkTotal" th:text="${order.zkTotal}"></span> | 
 |  |  |         </div> | 
 |  |  |     </div> | 
 |  |  |     <br> | 
 |  |  |     <div class="form-group"> | 
 |  |  |         <label class="col-sm-2 control-label">顾问姓名</label> | 
 |  |  |         <div class="col-sm-4"> | 
 |  |  |             <span class="form-control-static" th:text="${order.staffName}"></span> | 
 |  |  |         </div> | 
 |  |  |         <label class="col-sm-2 control-label">备注</label> | 
 |  |  |         <div class="col-sm-4"> | 
 |  |  |             <span class="form-control-static" th:text="${order.remark}"></span> | 
 |  |  |         </div> | 
 |  |  |     </div> | 
 |  |  |  | 
 |  |  | </div> | 
 |  |  |  | 
 |  |  |  | 
 |  |  | <div class="col-sm-12 form-group"> | 
 |  |  |     <div class="panel-body"> | 
 |  |  |         <table class="table table-striped table-condensed  table-hover"> | 
 |  |  |             <thead> | 
 |  |  |             <tr> | 
 |  |  |                 <th>序号</th> | 
 |  |  |                 <th>商品名称</th> | 
 |  |  |                 <th>单价</th> | 
 |  |  |                 <th>购买数量</th> | 
 |  |  |                 <th>折扣单价</th> | 
 |  |  |                 <th>卡付款</th> | 
 |  |  |                 <th>现金付款</th> | 
 |  |  |                 <th>欠款</th> | 
 |  |  |             </tr> | 
 |  |  |             </thead> | 
 |  |  |             <tbody id="tbody"> | 
 |  |  |             <tr th:each="item,count:${order.items }"> | 
 |  |  |                 <td th:text="${count.index}+1"></td> | 
 |  |  |                 <td><span th:text=" ${item.shoppingGoods.name }"></span> | 
 |  |  |  | 
 |  |  |                     <span th:if="${item.isFree eq '是' }" th:text="赠"></span> | 
 |  |  |                 </td> | 
 |  |  |                 <td th:text="${item.price }"></td> | 
 |  |  |                 <td th:text="${item.count}"></td> | 
 |  |  |                 <td th:text="${item.zkPrice}"></td> | 
 |  |  |                 <td>[[${item.cardPay}]]</td> | 
 |  |  |                 <td>[[${item.cashPay}]]</td> | 
 |  |  |                 <td>[[${item.arrears}]]</td> | 
 |  |  |             </tr> | 
 |  |  |             </tbody> | 
 |  |  |         </table> | 
 |  |  |     </div> | 
 |  |  |     <div class="form-group "> | 
 |  |  |         <div class="col-sm-12 text-center"> | 
 |  |  |             <a href="javascript:;" onclick="print()" class="btn btn-success radius">打印</a>      | 
 |  |  |             <button onclick="MTools.closeForm()" class="btn btn-danger radius" type="button">取消</button> | 
 |  |  |         </div> | 
 |  |  |     </div> | 
 |  |  | </div> | 
 |  |  |  | 
 |  |  | </body> | 
 |  |  |  | 
 |  |  | <form id="print" style="display: none;"> | 
 |  |  |     <!-- <form id="print"> --> | 
 |  |  |     <style midia="print"> | 
 |  |  |         .table1 { | 
 |  |  |             width: 500px; | 
 |  |  |             font-size: 10px; | 
 |  |  |             border-top: 1px solid #333; | 
 |  |  |             margin-top: 40px; | 
 |  |  |         } | 
 |  |  |  | 
 |  |  |         .table2 { | 
 |  |  |             margin-bottom: 100px; | 
 |  |  |         } | 
 |  |  |  | 
 |  |  |         .table1 td { | 
 |  |  |             height: 20px; | 
 |  |  |         } | 
 |  |  |  | 
 |  |  |         .table2 td { | 
 |  |  |             height: 20px; | 
 |  |  |         } | 
 |  |  |  | 
 |  |  |         .table1 tr { | 
 |  |  |             height: 30px; | 
 |  |  |         } | 
 |  |  |  | 
 |  |  |         .table3 { | 
 |  |  |             position: absolute; | 
 |  |  |             bottom: 20px; | 
 |  |  |         } | 
 |  |  |  | 
 |  |  |         .tittl { | 
 |  |  |             text-align: center; | 
 |  |  |             font-size: 20px; | 
 |  |  |     <style> | 
 |  |  |         .ibox-content { | 
 |  |  |             background-color: rgba(240, 242, 245, 1); | 
 |  |  |         } | 
 |  |  |     </style> | 
 |  |  | </head> | 
 |  |  | <div class="ibox-content" id="app"> | 
 |  |  |     <el-container> | 
 |  |  |         <el-header style="height: 210px; background-color: white; margin: 15px;"> | 
 |  |  |             <el-row style="line-height: 60px; padding-top: 20px;"> | 
 |  |  |                 <el-col :span="1" style="font-size: 40px; color:#409EFF;"> | 
 |  |  |                     <i class="el-icon-s-order" type="primary"></i> | 
 |  |  |                 </el-col> | 
 |  |  |                 <el-col :span="10"> | 
 |  |  |                     <h1 style="line-height: 60px; margin: 0 0;">订单号:{{order.orderNo}}</h1> | 
 |  |  |                 </el-col> | 
 |  |  |                 <el-col :span="5" style="float: right; margin-right: 10px;"> | 
 |  |  |                     <el-button type="info" @click="printf">打印</el-button> | 
 |  |  |                     <el-button type="danger" @click="toBack">返回</el-button> | 
 |  |  |                 </el-col> | 
 |  |  |             </el-row> | 
 |  |  |             <el-row class="order-info" type="flex" justify="space-around"  style="height: 150px; padding: 30px 30px;"> | 
 |  |  |                 <el-col :span="5"> | 
 |  |  |                     <p>顾问姓名:{{order.staffName}}</p> | 
 |  |  |                     <p>会员姓名:{{order.vipName}}</p> | 
 |  |  |                     <p>会员编号:{{order.vipNo}}</p> | 
 |  |  |                 </el-col> | 
 |  |  |                 <el-col :span="5"> | 
 |  |  |                     <p>卡支付:{{order.cardPay}}</p> | 
 |  |  |                     <p>现金支付:{{order.cashPay}}</p> | 
 |  |  |                     <p>备注:{{order.remark}}</p> | 
 |  |  |                 </el-col> | 
 |  |  |                 <el-col :span="10"> | 
 |  |  |                     <el-col :span="6"> | 
 |  |  |                         <p>欠款总额</p> | 
 |  |  |                         <h2>¥ {{order.arrears}}</h2> | 
 |  |  |                     </el-col> | 
 |  |  |                     <el-col :span="6"> | 
 |  |  |                         <p>折后总额</p> | 
 |  |  |                         <h2>¥ {{order.zkTotal}}</h2> | 
 |  |  |                     </el-col> | 
 |  |  |                     <el-col :span="6"> | 
 |  |  |                         <p>订单总额</p> | 
 |  |  |                         <h2>¥ {{order.total}}</h2> | 
 |  |  |                     </el-col> | 
 |  |  |                 </el-col> | 
 |  |  |             </el-row> | 
 |  |  |         </el-header> | 
 |  |  |         <el-main style="background-color: white; margin: 15px; padding: 20px 30px;"> | 
 |  |  |             <el-tabs v-model="activeName" @tab-click="handleClick"> | 
 |  |  |                 <el-tab-pane label="商品" name="goods"> | 
 |  |  |                     <el-table :data="orderData" | 
 |  |  |                             style="width: 100%"> | 
 |  |  |                         <el-table-column | 
 |  |  |                                 prop="shoppingGoods.name" | 
 |  |  |                                 label="商品名称" | 
 |  |  |                                 width="300"> | 
 |  |  |                         </el-table-column> | 
 |  |  |                         <el-table-column | 
 |  |  |                                 prop="price" | 
 |  |  |                                 label="单价" | 
 |  |  |                                 width="80"> | 
 |  |  |                         </el-table-column> | 
 |  |  |                         <el-table-column | 
 |  |  |                                 prop="count" | 
 |  |  |                                 label="购买数量"> | 
 |  |  |                         </el-table-column> | 
 |  |  |                         <el-table-column | 
 |  |  |                                 prop="zkPrice" | 
 |  |  |                                 label="折后金额"> | 
 |  |  |                         </el-table-column> | 
 |  |  |                         <el-table-column | 
 |  |  |                                 prop="cardPay" | 
 |  |  |                                 label="卡付款"> | 
 |  |  |                         </el-table-column> | 
 |  |  |                         <el-table-column | 
 |  |  |                                 prop="cashPay" | 
 |  |  |                                 label="现金付款"> | 
 |  |  |                         </el-table-column> | 
 |  |  |                         <el-table-column | 
 |  |  |                                 prop="arrears" | 
 |  |  |                                 label="欠款"> | 
 |  |  |                         </el-table-column> | 
 |  |  |                     </el-table> | 
 |  |  |                 </el-tab-pane> | 
 |  |  |                 <el-tab-pane label="业绩" name="yj">业绩</el-tab-pane> | 
 |  |  |             </el-tabs> | 
 |  |  |         </el-main> | 
 |  |  |     </el-container> | 
 |  |  | </div> | 
 |  |  | </body> | 
 |  |  |  | 
 |  |  |     <h1 class="tittl">HIVE收银单</h1> | 
 |  |  |     <table class="table1"> | 
 |  |  |  | 
 |  |  |  | 
 |  |  |         <tr> | 
 |  |  |             <td>会员姓名:[[${order.vipName }]]</td> | 
 |  |  |             <td>联系电话:[[${order.vipPhone }]]</td> | 
 |  |  |             <td>打印日期:[[<span id="date">]]</span></td> | 
 |  |  |         </tr> | 
 |  |  |         <tr> | 
 |  |  |             <td>会员编号:[[${order.vipNo}]]</td> | 
 |  |  |             <td>健康顾问:[[${order.staffName}]]</td> | 
 |  |  |         </tr> | 
 |  |  |         <tr> | 
 |  |  |             <td>订单编号:[[${order.orderNo}]]</td> | 
 |  |  |             <td>收银人:[[${session.userInfo.suName}]]</td> | 
 |  |  |         </tr> | 
 |  |  |     </table> | 
 |  |  |     <table class="table2 table1"> | 
 |  |  |         <tr> | 
 |  |  |             <td>套餐/项目/家居/充值卡</td> | 
 |  |  |             <td>数量</td> | 
 |  |  |             <td>单价</td> | 
 |  |  |             <td>折后价</td> | 
 |  |  |             <td>赠送</td> | 
 |  |  |         </tr> | 
 |  |  |  | 
 |  |  |         <tr th:each="item,count:${orderItems }"> | 
 |  |  |             <td>  <span th:text=" ${item.shoppingGoods.name }"></span> | 
 |  |  |  | 
 |  |  |             <span th:if="${item.isFree eq '是' }" th:text="赠"></span> | 
 |  |  |             </td> | 
 |  |  |             <td th:text="${item.count}"></td> | 
 |  |  |             <td th:text="${item.price }"></td> | 
 |  |  |             <td th:text="${item.zkPrice}"></td> | 
 |  |  |  | 
 |  |  |             <td> | 
 |  |  |                      <span th:if="${item.shoppingGoods.goodType eq  '充值卡' }"> | 
 |  |  |                      [[${item.shoppingGoods.referencePice }]] | 
 |  |  |                      </span> | 
 |  |  |             </td> | 
 |  |  |         </tr> | 
 |  |  |     </table> | 
 |  |  |  | 
 |  |  |     <table class="table1 table3"> | 
 |  |  |         <tr> | 
 |  |  |             <td colspan="4">备注:</td> | 
 |  |  |         </tr> | 
 |  |  |         <tr> | 
 |  |  |             <td>缴纳金额:[[${order.cashPay+order.cardPay}]]</td> | 
 |  |  |             <td>现金:[[${order.cashPay}]]</td> | 
 |  |  |             <td>划扣:[[${order.cardPay }]]</td> | 
 |  |  |             <td>本次欠款:[[${order.arrears }]]</td> | 
 |  |  |         </tr> | 
 |  |  |  | 
 |  |  |     </table> | 
 |  |  | </form> | 
 |  |  | <script type="text/javascript" th:src="@{/js/plugin/LodopFuncs.js}"></script> | 
 |  |  | <script type="text/javascript" th:src="@{/js/systools/AjaxProxyVue.js}"></script> | 
 |  |  | <script type="text/javascript" th:src="@{/js/plugin/vue.js}"></script> | 
 |  |  | <script type="text/javascript" th:src="@{/plugin/element-ui/index.js}"></script> | 
 |  |  | <script type="text/javascript" th:src="@{/js/systools/MJsBase.js}"></script> | 
 |  |  | <script type="text/javascript"> | 
 |  |  | <script type="text/javascript"  th:inline="javascript"> | 
 |  |  |     //<![CDATA[ | 
 |  |  |     var app = new Vue({ | 
 |  |  |         el : "#app", | 
 |  |  |         data : { | 
 |  |  |             activeName : "goods", | 
 |  |  |             order : "", | 
 |  |  |             orderItems : "", | 
 |  |  |             cards : "", | 
 |  |  |             orderData : [] | 
 |  |  |         }, | 
 |  |  |         created : function() { | 
 |  |  |             this.order = /*[[${order}]]*/ | 
 |  |  |             this.orderItems = /*[[${orderItems}]]*/ | 
 |  |  |             this.cards = /*[[${cards}]]*/ | 
 |  |  |  | 
 |  |  |     var LODOP; | 
 |  |  |  | 
 |  |  |             this.orderData = this.order.items; | 
 |  |  |         }, | 
 |  |  |         methods : { | 
 |  |  |             handleClick(tab, event) { | 
 |  |  |             }, | 
 |  |  |             printf() { | 
 |  |  |                 var id = 1; | 
 |  |  |                 layer.open({ | 
 |  |  |                     type: 2, | 
 |  |  |                     title: "打印服务单", | 
 |  |  |                     area: ['250px', '550px'], | 
 |  |  |                     maxmin: true, | 
 |  |  |                     content: [basePath + '/admin/redirect/hive/beautySalon/print-service?id=' + id] | 
 |  |  |                 }); | 
 |  |  |             }, | 
 |  |  |             toBack() { | 
 |  |  |                 MTools.closeForm(); | 
 |  |  |             }, | 
 |  |  |         } | 
 |  |  |     }); | 
 |  |  |     //]]> | 
 |  |  |     function print() { | 
 |  |  |         CreateOneFormPage(); | 
 |  |  |         LODOP.PRINTA(); | 
 |  |  |     } | 
 |  |  |  | 
 |  |  |     function CreateOneFormPage() { | 
 |  |  |         $("#date").text(getNowFormatDate()); | 
 |  |  |  | 
 |  |  |         LODOP = getLodop(); | 
 |  |  |  | 
 |  |  |         LODOP.PRINT_INIT(""); | 
 |  |  |         LODOP.SET_PRINT_STYLE("FontSize", 18); | 
 |  |  |         LODOP.SET_PRINT_PAGESIZE(0, 1300, 1945, ""); | 
 |  |  |         strCenterStyle = "<style/>table {width:100%}</style>"; | 
 |  |  |         LODOP.ADD_PRINT_HTM(5, "9%", "82%", 600, strCenterStyle | 
 |  |  |             + document.getElementById("print").innerHTML); | 
 |  |  |         LODOP.SET_PRINT_STYLE("Bold", 1); | 
 |  |  |         /*    LODOP.ADD_PRINT_HTM(30,30,650,600,document.getElementById("print").innerHTML); */ | 
 |  |  |  | 
 |  |  |         var id=$("#orderId").val(); | 
 |  |  |         layer.open({ | 
 |  |  |             type: 2, | 
 |  |  |             title: "打印订单", | 
 |  |  |             area: ['250px', '550px'], | 
 |  |  |             maxmin: true, | 
 |  |  |             content: [basePath + '/admin/redirect/hive/beautySalon/print-order?id=' + id] | 
 |  |  |         }); | 
 |  |  |     }; | 
 |  |  |  | 
 |  |  |     //获取当前时间 | 
 |  |  |     function getNowFormatDate() { | 
 |  |  |         var date = new Date(); | 
 |  |  |         var seperator1 = "-"; | 
 |  |  |         var seperator2 = ":"; | 
 |  |  |         var month = date.getMonth() + 1; | 
 |  |  |         var strDate = date.getDate(); | 
 |  |  |         if (month >= 1 && month <= 9) { | 
 |  |  |             month = "0" + month; | 
 |  |  |         } | 
 |  |  |         if (strDate >= 0 && strDate <= 9) { | 
 |  |  |             strDate = "0" + strDate; | 
 |  |  |         } | 
 |  |  |         var currentdate = date.getFullYear() + seperator1 + month + seperator1 | 
 |  |  |             + strDate + " " + date.getHours() + seperator2 | 
 |  |  |             + date.getMinutes() + seperator2 + date.getSeconds(); | 
 |  |  |         return currentdate; | 
 |  |  |     } | 
 |  |  |  | 
 |  |  | </script> | 
 |  |  | </html> |