|
页面：06.html
<html>
<head>
<meta charset="utf-8" />
<title>
</title>
<link rel="stylesheet" href="../CSS/06.css" />
<script src="../JS/jquery-1.10.2.min.js"></script>
<script src="../JS/jquery.qrcode.min.js"></script>
<script src="../JS/06.js"></script>
<script src="../JS/printhandler.js"></script>
<script src="../../../../Scripts/universal/ajax_REST-1.0.js"></script>
<script src="../../../../Scripts/universal/unitity.js"></script>
</head>
<body>
<!--startprint-->
<div id="template">
<div id="bill06_part0" style="page-break-after: always">
<div id="bill06_part1">
<div id="bill06_part1_title">
<span id="HotelName"name="hotelName"></span>
</div>
</div>
<div id="bill06_part2">
<div id="bill06_part2_left">
<div id="bill06_part2_title">
<span>早餐券</span>
</div>
</div>
<div id="bill06_part2_right">
<div id="bill06_part2_1_img">
<!--二维码-->
<div id="bill06_part2_1_img_canvas" class="qrCode"></div>
</div>
</div>
</div>
<div id="bill06_part3">
<div id="bill06_part3_diningInformation">
<div id="bill06_part3_diningInformation_top">
<div class="keyDes"><span>用餐时间:</span></div><div class="valueDes"><span id="BreakFastTime" name="breakfastTime"></span></div><br />
<div class="keyDes"><span>Time:</span></div><div class="valueDes"><span id="BreakFastTime" name="breakfastTime"></span></div><br />
<div class="keyDes"><span>用餐地址:</span></div><br />
<div class="keyDes"><span>Address:</span></div> <div class="valueDes"><span id="BreakFastAddress" name="breakfastAddress"></span></div>
</div>
</div>
</div>
<div id="bill06_part4">
<div id="bill06_part4_message">
<div id="bill06_part4_message_title"><span>用餐前请出示此券：</span></div>
<div id="bill06_part4_message_content">
<span>Please show this coupon before ordering</span><br />
</div>
</div>
</div>
<div id="bill06_part5">
<div id="bill06_part5_message">
<div id="bill06_part5_message_left">
<div class="keyDes_All"><span>券号:</span></div><br />
<div class="keyDes_All_Eng0"><span>TicketNo:</span></div> <div class="valueDes_All_Eng0"><span id="TicketNo" class="underline" ></span></div><br />
<div class="keyDes_All"><span>房号:</span></div><br />
<div class="keyDes_All_Eng"><span>RoomNo:</span></div> <div class="valueDes_All_Eng"><span id="RoomNo" class="underline" ></span></div><br />
<div class="keyDes_All"><span>经办人:</span></div><br />
<div class="keyDes_All_Eng"><span>Print:</span></div> <div class="valueDes_All_Eng"><span id="CurrentUser" class="underline" name="printUser" ></span></div>
</div>
<div id="bill06_part5_message_right">
<div class="keyDes_All"><span>价格:</span></div><br />
<div class="keyDes_All_Eng1"><span>Price:</span></div> <div class="valueDes_All_Eng1"><span id="Price" name="price" class="underline" ></span></div><br />
<div class="keyDes_All"><span>有效期:</span></div><br />
<div class="keyDes_All_Eng1"><span>Validate:</span></div> <div class="valueDes_All_Eng1"><span id="Validate" name="validDate" class="underline" ></span></div><br />
<div class="keyDes_All"><span>打印时间:</span></div><br />
<div class="keyDes_All_Eng1"><span>PrintTime:</span></div> <div class="valueDes_All_Eng1"><span id="PrintTime" name="printTime" class="underline" ></span></div>
</div>
</div>
</div>
</div>
</div>
<!--endprint-->
</body>
</html>
页面对应06.js：
/// <reference path="../../../../Scripts/universal/unitity.js"/> <!--在06.js中引用unitity.js文件-->
/*早餐券 add by jackjiang20190606*/
//定义全局变量
var coupons = "";
var re = "";
var price = "";
var hotelcode = "";
var validDate = "", couponNo = "";
$(function () {
coupons = GetQueryString("ticketNos").split(',');//早餐券号
price = Number(GetQueryString("price")).toFixed(2);//早餐券价格,toFixed(2)金额保留2位
let accountNos = GetQueryString("accountNos");//单号
hotelcode = GetQueryString("hotelCode");//酒店编号
if (hotelcode != null && hotelcode.length > 6) {
alert("参数异常请刷新页面");
}
let div_qrCode = "#bill06_part2_1_img_canvas";//二维码
let div_Span_ticketNo = "#TicketNo";//券号
for (let i = 0; i < coupons.length; i++) {
let tempValues = coupons[i].split('|');
couponNo = tempValues[0];//早餐券号
validDate = tempValues[1].substring(0,10);//有效期转化为2019/06/06格式
let code = "{0}|{1}".format(hotelcode, couponNo);
let qrCodeX = $(div_qrCode).qrcode(
{
render: "canvas",
width: 100,
height: 100,
text: code,
correctLevel: 1
}
);
let canvas = $(div_qrCode + " canvas")[0];
let base64 = canvas.toDataURL("image/png");
let img1 = "<img src='{0}'/>".format(base64);
qrCodeX.html(img1);//二维码图片
$(div_Span_ticketNo).html(couponNo);//券号
}
GetPrintBreakfastTicketData(accountNos);
});
//部分打印方法
function doPrint() {
////bdhtml = str;
//console.log(str);
//console.log(window.document.body.innerHTML);
//bdhtml = window.document.body.innerHTML;
//console.log(bdhtml);
//sprnstr = "<!--startprint-->";
//eprnstr = "<!--endprint-->";
//prnhtml = bdhtml.substr(bdhtml.indexOf(sprnstr) + 17);
//prnhtml = prnhtml.substring(0, prnhtml.indexOf(eprnstr));
//window.document.body.innerHTML = prnhtml;//页面取到的值实际是传递过来的字符串
window.print();
}
//获取传输参数
function GetQueryString(name) {
var reg = new RegExp("(^|&)" + name + "=([^&]*)(&|$)");
var r = window.location.search.substr(1).match(reg);
if (r != null) return unescape(r[2]); return null;
}
function GetPrintBreakfastTicketData(accountNos) {
let ajaxUrl = "/Report/Print/GetBreakfastDataOfPrint";
let successFunc = FillBreakfastTemplateInfo;
let jsonText = { AccountNos: accountNos };
ajax_json_postV2(ajaxUrl, jsonText, 10000, true, successFunc, null, null);
}
function FillBreakfastTemplateInfo(jsonModel) {
if (!jsonModel.Success) {
return;
}
let model = jsonModel.Data;
//批量设置模版数值
$("[name=hotelName]").html(model.HotelName);//酒店名称
$("[name=breakfastTime]").html(model.BreakfastTime);//用餐时间
$("[name=breakfastAddress]").html(model.BreakfastAddress);//用餐地址
$("[name=printUser]").html(model.PrintUser);//打印人
$("[name=printTime]").html(model.PrintTime);//打印时间
let roomNos = model.RoomNos.split(',');
var div_qrCode = "#bill06_part2_1_img_canvas";//二维码
var div_Span_ticketNo = "#TicketNo";//券号
var div_Span_roomNo = "#RoomNo";//房间号
for (var i = 0; i < coupons.length; i++) {
//批量设置早餐券房间
let roomNo = !roomNos[i] ? roomNos[0] : roomNos[i];
$(div_Span_roomNo).html(roomNo);//房间号
let tempValues = coupons[i].split('|');
couponNo = tempValues[0];//早餐券号
validDate = tempValues[1].substring(0, 10);//有效期转化为2019/06/06格式
let code = "{0}|{1}".format(hotelcode, couponNo);
let qrCodeX = $(div_qrCode).qrcode(
{
render: "canvas",
width: 100,
height: 100,
text: code,
correctLevel: 1
}
);
let canvas = $(div_qrCode + " canvas")[0];
let base64 = canvas.toDataURL("image/png");
let img1 = "<img src='{0}'/>".format(base64);
qrCodeX.html(img1);//二维码图片
$(div_Span_ticketNo).html(couponNo);//券号
$(div_Span_roomNo).html(roomNo);//房间号
//批量设置模板数值
$("[name=price]").html(price);//早餐券价格
$("[name=validDate]").html(validDate);//有效期
var div_part0Content = document.getElementById('template').innerHTML;
re += '<div>' + div_part0Content +
'</div>';
}
window.document.body.innerHTML = re;//为页面元素赋值
//打印
doPrint();
//打印后关闭当前窗口
let index = parent.layer.getFrameIndex(window.name);
parent.layer.close(index);
}
页面对应06.css
body {
margin-top: 0px;
}
#bill06_part0 {
width: 300px;
height: auto;
margin-top: 0px;
}
#bill06_part1 {
/*background-color:red;*/
width: 300px;
height: 70px;
margin-top: 0px;
}
#bill06_part1_title {
/*background-color: darkgrey;*/
float: left;
width: 300px;
height: auto;
text-align: center;
font-size: 15pt;
/*opacity: .95;*/
margin-top: 0px;
font-weight: bold;
}
#bill06_part1_title span {
width: 300px;
height: auto;
text-align: center;
font-size: 15pt;
/*opacity: .95;*/
margin-top: 0px;
font-weight: bold;
font-family: KaiTi;
}
/*part2 早餐券和二维码*/
#bill06_part2 {
/*background-color:red;*/
width: 300px;
height: 100px;
}
#bill06_part2_left {
width: 180px;
height: 100px;
float: left;
}
#bill06_part2_title span {
float: left;
width: 180px;
height: auto;
text-align: center;
font-size: 20pt;
/*opacity: .95;*/
margin-top: 15px;
/*font-weight: 900;*/ /*bold*/
font-family: KaiTi;
}
#bill06_part2_right {
width: 120px;
height: 100px;
float: right;
}
/*二维码*/
#bill06_part2_1_img {
/*background-color: darkgray;*/
padding-top: 5px;
width: 100px;
height: 100px;
float: right;
/*opacity: .65;*/
}
.qrCode {
float: right;
}
#PaymentTypeName {
font-size: 9pt;
font-weight: bold;
}
#Balance {
font-size: 9pt;
font-weight: bold;
}
/*part3用餐信息*/
#bill06_part3 {
/*background-color:red;*/
width: 300px;
height: 100px;
}
#bill06_part3_diningInformation_top {
/*background-color: cornflowerblue;*/
float: left;
width: 300px;
height: auto;
padding-top: 5px;
/*opacity: .95;*/
/*border-bottom: 1px dashed #000;*/
}
/*part4提示信息，messge*/
#bill06_part4 {
/*background-color:red;*/
width: 300px;
height: 45px;
}
#bill06_part4_message {
/*background-color: antiquewhite;*/
float: left;
width: 300px;
height: 100%;
/*opacity: .95;*/
border-bottom: 1px dashed #000;
}
#bill06_part4_message_title {
font-size: 9pt;
font-weight: bold;
}
#bill06_part4_message_content span {
font-size: 9pt;
/*background-color: cornflowerblue;*/
}
/*part5 早餐券详细信息，messge*/
#bill06_part5 {
/*background-color:red;*/
width: 300px;
height: 200px;
}
#bill06_part5_message {
/*background-color: brown;*/
float: left;
width: 300px;
height: 100%;
/*opacity: .95;*/
min-height: 150px;
/*border-bottom: 1px solid #000;*/
}
#bill06_part5_message_left {
width: 165px;
height: auto;
float: left;
}
#bill06_part5_message_right {
width: 135px;
height: auto;
float: left;
}
/*附加的内部span样式*/
.keyDes {
float: left;
/*background-color:darkcyan;*/
width: 95px;
}
.keyDes span {
font-size: 6pt;
}
.valueDes {
float: left;
/*background-color:darkgreen;*/
width: 205px;
}
.valueDes span {
font-size: 6pt;
}
.keyDes_All {
float: left;
/*background-color:darkcyan;*/
width: 70px;
}
.keyDes_All span{
font-size: 6pt;
}
.valueDes_All {
float: left;
/*background-color:darkgreen;*/
width: 80px;
}
.keyDes_All_Eng0 {
float: left;
/*background-color:darkcyan;*/
width: 60px;
}
.keyDes_All_Eng0 {
float: left;
/*background-color:darkcyan;*/
width: 60px;
}
.keyDes_All_Eng1 {
float: left;
/*background-color:darkcyan;*/
width: 57px;
}
.keyDes_All_Eng {
float: left;
/*background-color:darkcyan;*/
width: 60px;
}
.keyDes_All_Eng span {
font-size: 6pt;
}
.keyDes_All_Eng0 span {
font-size: 6pt;
}
.keyDes_All_Eng1 span {
font-size: 6pt;
}
.valueDes_All_Eng0 {
float: left;
/*background-color:darkgreen;*/
width: 105px;
}
.valueDes_All_Eng1 {
float: left;
/*background-color:darkgreen;*/
width: 78px;
}
.valueDes_All_Eng0 span {
font-size: 6pt;
}
.valueDes_All_Eng1 span {
font-size: 6pt;
}
.valueDes_All_Eng {
float: left;
/*background-color:darkgreen;*/
width: 90px;
}
.valueDes_All_Eng span {
font-size: 6pt;
}
.valueDes_All_Eng0 span {
font-size: 6pt;
}
.underline {
text-decoration: underline;
}
纯JS实现分页
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<meta http-equiv="X-UA-Compatible" content="ie=edge">
<title>纯JS实现分页</title>
<!-- <script type="text/javascript" src="page.javascript">
把下面的的函数放到page.js中也可以
</script> -->
<script type="text/javascript">
/**
* 分页函数
* pno--页数
* psize--每页显示记录数
* 分页部分是从真实数据行开始，因而存在加减某个常数，以确定真正的记录数
* 纯js分页实质是数据行全部加载，通过是否显示属性完成分页功能
**/
function goPage(pno,psize){
var itable = document.getElementById("idData");
var num = itable.rows.length;//表格所有行数(所有记录数)
console.log(num);
var totalPage = 0;//总页数
var pageSize = psize;//每页显示行数
//总共分几页
if(num/pageSize > parseInt(num/pageSize)){
totalPage=parseInt(num/pageSize)+1;
}else{
totalPage=parseInt(num/pageSize);
}
var currentPage = pno;//当前页数
var startRow = (currentPage - 1) * pageSize+1;//开始显示的行 31
var endRow = currentPage * pageSize;//结束显示的行 40
endRow = (endRow > num)? num : endRow; 40
console.log(endRow);
//遍历显示数据实现分页
for(var i=1;i<(num+1);i++){
var irow = itable.rows[i-1];
if(i>=startRow && i<=endRow){
irow.style.display = "block";
}else{
irow.style.display = "none";
}
}
var pageEnd = document.getElementById("pageEnd");
var tempStr = "共"+num+"条记录 分"+totalPage+"页 当前第"+currentPage+"页";
if(currentPage>1){
tempStr += "<a href=\"#\" onClick=\"goPage("+(1)+","+psize+")\">首页</a>";
tempStr += "<a href=\"#\" onClick=\"goPage("+(currentPage-1)+","+psize+")\"><上一页</a>"
}else{
tempStr += "首页";
tempStr += "<上一页";
}
if(currentPage<totalPage){
tempStr += "<a href=\"#\" onClick=\"goPage("+(currentPage+1)+","+psize+")\">下一页></a>";
tempStr += "<a href=\"#\" onClick=\"goPage("+(totalPage)+","+psize+")\">尾页</a>";
}else{
tempStr += "下一页>";
tempStr += "尾页";
}
document.getElementById("barcon").innerHTML = tempStr;
}
</script>
<style type="text/css">
#idData {color: red;border: solid;text-align: center;}
a{text-decoration: none;}
</style>
</head>
<body onLoad="goPage(1,10);">
<table id="idData" width="70%">
<tr><td>张锋1</td><td>18</td><td>男</td><td>上海市长宁</td></tr>
<tr><td>张锋2</td><td>18</td><td>男</td><td>上海市长宁</td></tr>
<tr><td>张锋3</td><td>18</td><td>男</td><td>上海市长宁</td></tr>
<tr><td>张锋4</td><td>18</td><td>男</td><td>上海市长宁</td></tr>
<tr><td>张锋5</td><td>18</td><td>男</td><td>上海市长宁</td></tr>
<tr><td>张锋6</td><td>18</td><td>男</td><td>上海市长宁</td></tr>
<tr><td>张锋7</td><td>18</td><td>男</td><td>上海市长宁</td></tr>
<tr><td>张锋8</td><td>18</td><td>男</td><td>上海市长宁</td></tr>
<tr><td>张锋9</td><td>18</td><td>男</td><td>上海市长宁</td></tr>
<tr><td>张锋10</td><td>18</td><td>男</td><td>上海市长宁</td></tr>
<tr><td>张锋11</td><td>18</td><td>男</td><td>上海市长宁</td></tr>
<tr><td>张锋12</td><td>18</td><td>男</td><td>上海市长宁</td></tr>
<tr><td>张锋13</td><td>18</td><td>男</td><td>上海市长宁</td></tr>
<tr><td>张锋14</td><td>18</td><td>男</td><td>上海市长宁</td></tr>
<tr><td>张锋15</td><td>18</td><td>男</td><td>上海市长宁</td></tr>
<tr><td>张锋16</td><td>18</td><td>男</td><td>上海市长宁</td></tr>
<tr><td>张锋17</td><td>18</td><td>男</td><td>上海市长宁</td></tr>
<tr><td>张锋18</td><td>18</td><td>男</td><td>上海市长宁</td></tr>
<tr><td>张锋19</td><td>18</td><td>男</td><td>上海市长宁</td></tr>
<tr><td>张锋20</td><td>18</td><td>男</td><td>上海市长宁</td></tr>
<tr><td>张锋21</td><td>18</td><td>男</td><td>上海市长宁</td></tr>
<tr><td>张锋22</td><td>18</td><td>男</td><td>上海市长宁</td></tr>
<tr><td>张锋23</td><td>18</td><td>男</td><td>上海市长宁</td></tr>
<tr><td>张锋24</td><td>18</td><td>男</td><td>上海市长宁</td></tr>
<tr><td>张锋18</td><td>18</td><td>男</td><td>上海市长宁</td></tr>
<tr><td>张锋26</td><td>18</td><td>男</td><td>上海市长宁</td></tr>
<tr><td>张锋27</td><td>18</td><td>男</td><td>上海市长宁</td></tr>
<tr><td>张锋28</td><td>18</td><td>男</td><td>上海市长宁</td></tr>
<tr><td>张锋29</td><td>18</td><td>男</td><td>上海市长宁</td></tr>
<tr><td>张锋30</td><td>18</td><td>男</td><td>上海市长宁</td></tr>
<tr><td>张锋31</td><td>18</td><td>男</td><td>上海市长宁</td></tr>
<tr><td>张锋32</td><td>18</td><td>男</td><td>上海市长宁</td></tr>
<tr><td>张锋33</td><td>18</td><td>男</td><td>上海市长宁</td></tr>
<tr><td>张锋34</td><td>18</td><td>男</td><td>上海市长宁</td></tr>
<tr><td>张锋35</td><td>18</td><td>男</td><td>上海市长宁</td></tr>
<tr><td>张锋36</td><td>18</td><td>男</td><td>上海市长宁</td></tr>
<tr><td>张锋37</td><td>18</td><td>男</td><td>上海市长宁</td></tr>
<tr><td>张锋38</td><td>18</td><td>男</td><td>上海市长宁</td></tr>
<tr><td>张锋39</td><td>18</td><td>男</td><td>上海市长宁</td></tr>
<tr><td>张锋40</td><td>18</td><td>男</td><td>上海市长宁</td></tr>
</table>
<table width="60%" align="right">
<tr><td><div id="barcon" name="barcon"></div></td></tr>
</table>
</body>
</html>
|
