| | |
| | | <!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> |