<!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: 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,
|
shopInfo:{}
|
|
},
|
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>
|
