| | |
| | | <!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%; |
| | | } |
| | | |
| | | </style> |
| | | </head> |
| | | <body> |
| | | <div class="ibox-content" id="app"> |
| | | <div id="print" style="width: 200px; margin: 5px auto;"> |
| | | <h1 style="text-align: center;font-size:18px;margin: 20px auto;"> |
| | | {{projService.shopName}} |
| | | </h1> |
| | | <table style="width: 100%; font-size:10px;line-height: 20px;"> |
| | | |
| | | <tr> |
| | | <td colspan="2"> |
| | | <b>订单号</b>:<span>{{projService.serviceNo}}</span> |
| | | </td> |
| | | </tr> |
| | | <tr> |
| | | <td colspan="2" > |
| | | <b>客户</b>:<span>{{projService.vipInfo.vipName}}</span> |
| | | </td> |
| | | </tr> |
| | | <tr> |
| | | <td colspan="2" > |
| | | <b>消费日期</b>:<span>{{projService.createTime |format}}</span> |
| | | </td> |
| | | </tr> |
| | | <tr> |
| | | <td colspan="2"> |
| | | <b>电话</b>:<span>{{projService.vipInfo.phone| formatPhone }}</span> |
| | | </td> |
| | | </tr> |
| | | </table> |
| | | <table style="width: 80%;font-size:10px;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> |
| | | <th style="">技师</th> |
| | | </tr> |
| | | <template v-for="item in projService.serviceItems"> |
| | | <tr > |
| | | <td style="text-align: left;" colspan="4" >{{item.projInfo.name }}</td> |
| | | </tr> |
| | | <tr > |
| | | <td>{{item.count }}</td> |
| | | <td>{{item.projUse.price }}</td> |
| | | <td >{{item.projUse.surplusCount }}</td> |
| | | <td>{{item.beautiStaffInfo?item.beautiStaffInfo.suName:''}}</td> |
| | | </tr> |
| | | </template> |
| | | </table> |
| | | <table style="width: 100%;font-size: 10px;line-height: 30px;"> |
| | | <tr> |
| | | <td> |
| | | <b>本次划扣:</b> <span >{{projService.money}}</span> |
| | | </td> |
| | | </tr> |
| | | <tr> |
| | | <td> |
| | | <b>收银人:</b> <span>{{projService.createStaffName}}</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 th:include="'admin/hive/printTemplates/print-service-'+${page}::html" ></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: { |
| | | projService:{ |
| | | vipInfo:{}, |
| | | serviceItems:[] |
| | | } |
| | | }, |
| | | created: function () { |
| | | |
| | | this.loadInfo(); |
| | | }, |
| | | |
| | | mounted: function () { |
| | | |
| | | }, |
| | | |
| | | methods: { |
| | | loadInfo(){ |
| | | var _this=this; |
| | | AjaxProxy.requst({ |
| | | app: _this, |
| | | url: basePath + '/admin/projService/findProjServiceInfo?id='+id, |
| | | callback: function (data) { |
| | | _this.projService=data.mapInfo.projService; |
| | | _this.shopInfo=data.mapInfo.shopInfo; |
| | | 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> |