|  |  |  | 
|---|
|  |  |  | <!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" /> | 
|---|
|  |  |  | <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> | 
|---|
|  |  |  | <style> | 
|---|
|  |  |  |  | 
|---|
|  |  |  | .btn{ | 
|---|
|  |  |  | position: fixed; | 
|---|
|  |  |  | bottom: 10px; | 
|---|
|  |  |  | left: 45%; | 
|---|
|  |  |  | } | 
|---|
|  |  |  | <div th:include="'admin/hive/printTemplates/'+${page}::html" ></div> | 
|---|
|  |  |  |  | 
|---|
|  |  |  | </style> | 
|---|
|  |  |  | </head> | 
|---|
|  |  |  | <body> | 
|---|
|  |  |  | <div class="ibox-content" id="app"> | 
|---|
|  |  |  | <div id="print" style="width: 220px; "> | 
|---|
|  |  |  | <h1   style="text-align: center;font-size: 18px;margin: 20px auto;"> | 
|---|
|  |  |  | {{order.shopName}} | 
|---|
|  |  |  | </h1> | 
|---|
|  |  |  | <table style="width: 100%; font-size:12px;line-height: 20px;"> | 
|---|
|  |  |  |  | 
|---|
|  |  |  | <tr> | 
|---|
|  |  |  | <td colspan="2"> | 
|---|
|  |  |  | <b>订单号</b>:<span>{{order.orderNo}}</span> | 
|---|
|  |  |  | </td> | 
|---|
|  |  |  | </tr> | 
|---|
|  |  |  | <tr> | 
|---|
|  |  |  | <td colspan="2" > | 
|---|
|  |  |  | <b>客户</b>:<span>{{order.vipName}}</span> | 
|---|
|  |  |  | </td> | 
|---|
|  |  |  | </tr> | 
|---|
|  |  |  | <tr> | 
|---|
|  |  |  | <td colspan="2" > | 
|---|
|  |  |  | <b>消费日期</b>:<span>{{order.orderTime |format}}</span> | 
|---|
|  |  |  | </td> | 
|---|
|  |  |  | </tr> | 
|---|
|  |  |  | <tr> | 
|---|
|  |  |  | <td colspan="2"> | 
|---|
|  |  |  | <b>电话</b>:<span>{{order.vipPhone| formatPhone }}</span> | 
|---|
|  |  |  | </td> | 
|---|
|  |  |  | </tr> | 
|---|
|  |  |  | </table> | 
|---|
|  |  |  | <p>-----------------------------------</p> | 
|---|
|  |  |  | <table style="width: 80%;font-size:12px;margin-top: 20px;text-align: left"> | 
|---|
|  |  |  |  | 
|---|
|  |  |  | <tr> | 
|---|
|  |  |  | <th style="text-align: left;"  colspan="4">产品</th> | 
|---|
|  |  |  | </tr> | 
|---|
|  |  |  | <tr> | 
|---|
|  |  |  | <th style="">数量</th> | 
|---|
|  |  |  | <th style="">单价</th> | 
|---|
|  |  |  | <th style="">小计</th> | 
|---|
|  |  |  | </tr> | 
|---|
|  |  |  | <template v-for="item in order.items"> | 
|---|
|  |  |  | <tr  > | 
|---|
|  |  |  | <td style="text-align: left;" colspan="4" >{{item.shoppingGoods.name }}</td> | 
|---|
|  |  |  | </tr> | 
|---|
|  |  |  | <tr  > | 
|---|
|  |  |  | <td>{{item.count }}</td> | 
|---|
|  |  |  | <td>{{item.zkPrice }}</td> | 
|---|
|  |  |  | <td>{{(item.zkPrice * item.count).toFixed(1) }}</td> | 
|---|
|  |  |  | </tr> | 
|---|
|  |  |  | </template> | 
|---|
|  |  |  | <tr> | 
|---|
|  |  |  | <td> | 
|---|
|  |  |  | <b>总计:</b> | 
|---|
|  |  |  | </td> | 
|---|
|  |  |  | <td> | 
|---|
|  |  |  |  | 
|---|
|  |  |  | </td> | 
|---|
|  |  |  | <td> | 
|---|
|  |  |  | <span >{{order.zkTotal}}</span> | 
|---|
|  |  |  | </td> | 
|---|
|  |  |  | </tr> | 
|---|
|  |  |  | </table> | 
|---|
|  |  |  | <p>-----------------------------------</p> | 
|---|
|  |  |  | <table style="width: 100%;font-size: 10px;line-height: 30px;"> | 
|---|
|  |  |  | <tr  > | 
|---|
|  |  |  | <td> | 
|---|
|  |  |  | <b  >储值卡余额:</b><span >{{totalMoney}}</span> | 
|---|
|  |  |  | </td> | 
|---|
|  |  |  | </tr> | 
|---|
|  |  |  |  | 
|---|
|  |  |  | <tr> | 
|---|
|  |  |  | <td> | 
|---|
|  |  |  | <b>实收金额:</b><span >{{order.zkTotal-order.arrears}}</span> | 
|---|
|  |  |  | </td> | 
|---|
|  |  |  | </tr> | 
|---|
|  |  |  | <tr> | 
|---|
|  |  |  | <td> | 
|---|
|  |  |  | <b>收银人:</b><span>{{order.staffName}}</span> | 
|---|
|  |  |  | </td> | 
|---|
|  |  |  | </tr> | 
|---|
|  |  |  | <tr> | 
|---|
|  |  |  | <td> | 
|---|
|  |  |  | <b>客户签名:</b> | 
|---|
|  |  |  | </td> | 
|---|
|  |  |  | </tr> | 
|---|
|  |  |  |  | 
|---|
|  |  |  |  | 
|---|
|  |  |  | </table> | 
|---|
|  |  |  |  | 
|---|
|  |  |  | <div style="width: 100%;text-align: center;margin: 30px auto;margin-bottom: 10px"> | 
|---|
|  |  |  | <br> | 
|---|
|  |  |  | *****************<br> | 
|---|
|  |  |  | 谢谢惠顾<br> | 
|---|
|  |  |  | *****************<br> | 
|---|
|  |  |  |  <br> | 
|---|
|  |  |  | </div> | 
|---|
|  |  |  | <div style="width: 100%;"> | 
|---|
|  |  |  | 地址:{{shopInfo.shopAddr}}<br> | 
|---|
|  |  |  | 电话:{{shopInfo.shopTel}}<br> | 
|---|
|  |  |  |  <br> | 
|---|
|  |  |  |  <br> | 
|---|
|  |  |  | </div> | 
|---|
|  |  |  | <div style="width: 100%;"  > | 
|---|
|  |  |  | <div style="text-align: center;"> | 
|---|
|  |  |  |  | 
|---|
|  |  |  | <img style="width: 100%;" :src="shopInfo.qrcode" /><br> | 
|---|
|  |  |  | 更多精彩请访问小程序<br> | 
|---|
|  |  |  | </div> | 
|---|
|  |  |  |  <br> | 
|---|
|  |  |  |  <br> | 
|---|
|  |  |  | </div> | 
|---|
|  |  |  |  | 
|---|
|  |  |  |  | 
|---|
|  |  |  | </div> | 
|---|
|  |  |  | <a href="javascript:;" onclick="print()" class="btn btn-success radius">打印</a> | 
|---|
|  |  |  | </div> | 
|---|
|  |  |  | <script type="text/javascript" th:src="@{/js/plugin/jquery-2.1.4.min.js}"></script> | 
|---|
|  |  |  | <script type="text/javascript" th:src="@{/js/plugin/jquery.query.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="@{/js/plugin/LodopFuncs.js}"></script> | 
|---|
|  |  |  | <script type="text/javascript" th:src="@{/plugin/element-ui/index.js}"></script> | 
|---|
|  |  |  | <script type="text/javascript"> | 
|---|
|  |  |  |  | 
|---|
|  |  |  |  | 
|---|
|  |  |  | var id = $.query.get("id"); | 
|---|
|  |  |  | var app = new Vue({ | 
|---|
|  |  |  | el: '#app', | 
|---|
|  |  |  | data: { | 
|---|
|  |  |  | order:{ | 
|---|
|  |  |  | vipInfo:{}, | 
|---|
|  |  |  | serviceItems:[] | 
|---|
|  |  |  | }, | 
|---|
|  |  |  | moneyCar:{}, | 
|---|
|  |  |  | totalMoney:0 | 
|---|
|  |  |  |  | 
|---|
|  |  |  | }, | 
|---|
|  |  |  | created: function () { | 
|---|
|  |  |  |  | 
|---|
|  |  |  | this.loadInfo(); | 
|---|
|  |  |  | }, | 
|---|
|  |  |  |  | 
|---|
|  |  |  | mounted: function () { | 
|---|
|  |  |  |  | 
|---|
|  |  |  | }, | 
|---|
|  |  |  |  | 
|---|
|  |  |  | methods: { | 
|---|
|  |  |  | loadInfo(){ | 
|---|
|  |  |  | var _this=this; | 
|---|
|  |  |  | AjaxProxy.requst({ | 
|---|
|  |  |  | app: _this, | 
|---|
|  |  |  | url: basePath + '/admin/order/getShopOrder?id='+id, | 
|---|
|  |  |  | callback: function (data) { | 
|---|
|  |  |  | _this.order=data.mapInfo.order; | 
|---|
|  |  |  | _this.moneyCar=data.mapInfo.moneyCar; | 
|---|
|  |  |  | _this.shopInfo=data.mapInfo.shopInfo; | 
|---|
|  |  |  | _this.totalMoney=data.mapInfo.totalMoney; | 
|---|
|  |  |  | setTimeout(print,1000)  ; | 
|---|
|  |  |  | } | 
|---|
|  |  |  | }); | 
|---|
|  |  |  | }, | 
|---|
|  |  |  | }, | 
|---|
|  |  |  |  | 
|---|
|  |  |  | filters: | 
|---|
|  |  |  | { | 
|---|
|  |  |  | format: function (value) { | 
|---|
|  |  |  | if (!value) return ''; | 
|---|
|  |  |  | return MTools.formatDate(value, 'yyyy-MM-dd') | 
|---|
|  |  |  | } , | 
|---|
|  |  |  | formatPhone: function (value) { | 
|---|
|  |  |  | if (!value) return ''; | 
|---|
|  |  |  | return value.substr(0,3) + "****" + value.substr(value.length-4,value.length+1) | 
|---|
|  |  |  | } , | 
|---|
|  |  |  | }, | 
|---|
|  |  |  |  | 
|---|
|  |  |  |  | 
|---|
|  |  |  | }, | 
|---|
|  |  |  | ); | 
|---|
|  |  |  |  | 
|---|
|  |  |  |  | 
|---|
|  |  |  | var LODOP; | 
|---|
|  |  |  |  | 
|---|
|  |  |  | function print() { | 
|---|
|  |  |  | LODOP = getLodop(); | 
|---|
|  |  |  | LODOP.PRINT_INIT("HIVE打印任务"); | 
|---|
|  |  |  | LODOP.ADD_PRINT_HTM(0, 0, "100%", "100%", document.getElementById("print").innerHTML); | 
|---|
|  |  |  | LODOP.SET_PRINT_MODE("FULL_HEIGHT_FOR_OVERFLOW", true); | 
|---|
|  |  |  | LODOP.PREVIEW(); | 
|---|
|  |  |  | } | 
|---|
|  |  |  |  | 
|---|
|  |  |  | </script> | 
|---|
|  |  |  | </body> | 
|---|
|  |  |  | </html> | 
|---|