Helius
2022-05-27 4351e71d782741143a98f86f6648acd16689165f
zq-erp/src/main/resources/templates/views/admin/hive/beautySalon/print-order.html
@@ -1,219 +1,6 @@
<!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>
            &nbsp;<br>
        </div>
        <div style="width: 100%;">
            地址:{{shopInfo.shopAddr}}<br>
            电话:{{shopInfo.shopTel}}<br>
            &nbsp;<br>
            &nbsp;<br>
        </div>
        <div style="width: 100%;"  >
            <div style="text-align: center;">
                <img style="width: 100%;" :src="shopInfo.qrcode" /><br>
                更多精彩请访问肽妍小程序<br>
            </div>
            &nbsp;<br>
            &nbsp;<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>