179 lines
4.6 KiB
HTML
179 lines
4.6 KiB
HTML
<!DOCTYPE html>
|
|
<html lang="zh-CN">
|
|
<head>
|
|
<meta charset="UTF-8">
|
|
<title>打印单据</title>
|
|
|
|
<link rel="stylesheet" href="../css/notice-banner.css">
|
|
|
|
<style>
|
|
body {
|
|
font-family: Arial, "Microsoft YaHei";
|
|
background: white;
|
|
}
|
|
|
|
/* ===== A4 容器 ===== */
|
|
.page {
|
|
width: 210mm;
|
|
min-height: 297mm;
|
|
margin: auto;
|
|
padding: 20mm;
|
|
position: relative;
|
|
background: white;
|
|
}
|
|
|
|
/* ===== 水印 ===== */
|
|
.watermark {
|
|
position: absolute;
|
|
top: 50%;
|
|
left: 50%;
|
|
transform: translate(-50%, -50%) rotate(-30deg);
|
|
font-size: 50px;
|
|
color: rgba(0, 0, 0, 0.08);
|
|
white-space: nowrap;
|
|
pointer-events: none;
|
|
z-index: 0;
|
|
text-align: center;
|
|
}
|
|
|
|
/* ===== 标题 ===== */
|
|
.title {
|
|
text-align: center;
|
|
font-size: 22px;
|
|
font-weight: bold;
|
|
margin-bottom: 20px;
|
|
}
|
|
|
|
/* ===== 信息表格 ===== */
|
|
.table {
|
|
width: 100%;
|
|
border-collapse: collapse;
|
|
margin-top: 10px;
|
|
position: relative;
|
|
z-index: 1;
|
|
}
|
|
|
|
.table td {
|
|
border: 1px solid #ddd;
|
|
padding: 10px;
|
|
font-size: 14px;
|
|
}
|
|
|
|
.label {
|
|
width: 25%;
|
|
background: #f5f5f5;
|
|
}
|
|
|
|
/* ===== 页脚 ===== */
|
|
.footer {
|
|
position: absolute;
|
|
bottom: 20mm;
|
|
left: 20mm;
|
|
right: 20mm;
|
|
font-size: 12px;
|
|
color: #666;
|
|
display: flex;
|
|
justify-content: space-between;
|
|
}
|
|
|
|
/* ===== 打印优化 ===== */
|
|
@media print {
|
|
.no-print {
|
|
display: none;
|
|
}
|
|
|
|
body {
|
|
margin: 0;
|
|
}
|
|
|
|
.page {
|
|
box-shadow: none;
|
|
}
|
|
}
|
|
</style>
|
|
</head>
|
|
|
|
<body>
|
|
|
|
<div class="page" id="content">
|
|
|
|
<!-- 水印 -->
|
|
<div class="watermark" id="watermark"></div>
|
|
|
|
<div class="title">单据详情</div>
|
|
|
|
<table class="table">
|
|
<tr><td class="label">编号</td><td id="ticket_number"></td></tr>
|
|
<tr><td class="label">姓名</td><td id="customer_name"></td></tr>
|
|
<tr><td class="label">事由</td><td id="reason"></td></tr>
|
|
<tr><td class="label">金额</td><td id="amount"></td></tr>
|
|
<tr><td class="label">开具人</td><td id="issuer"></td></tr>
|
|
<tr><td class="label">日期</td><td id="created_at"></td></tr>
|
|
<tr><td class="label">办结否</td><td id="processed"></td></tr>
|
|
<tr><td class="label">办结日期</td><td id="processed_at"></td></tr>
|
|
<tr><td class="label">备注</td><td id="remarks"></td></tr>
|
|
</table>
|
|
|
|
<!-- 页脚 -->
|
|
<div class="footer">
|
|
<div>打印时间：<span id="print_time"></span></div>
|
|
<div>系统自动生成</div>
|
|
</div>
|
|
</div>
|
|
|
|
<script src="https://cdn.jsdelivr.net/npm/@supabase/supabase-js@2"></script>
|
|
|
|
<script>
|
|
const SUPABASE_URL = 'https://chixssrphfgxvqqigkzo.supabase.co';
|
|
const SUPABASE_ANON_KEY = 'eyJhbGciOiJIUzI1NiIsInR5cCI6IkpXVCJ9.eyJpc3MiOiJzdXBhYmFzZSIsInJlZiI6ImNoaXhzc3JwaGZneHZxcWlna3pvIiwicm9sZSI6ImFub24iLCJpYXQiOjE3NzQ2OTE0OTEsImV4cCI6MjA5MDI2NzQ5MX0.Az_Ew2J2zdOMcSV0UNAjBS-LPqGpqhsaN4IyZ5R7iqU';
|
|
|
|
const sb = window.supabase.createClient(SUPABASE_URL, SUPABASE_ANON_KEY);
|
|
|
|
function formatDate(d){
|
|
return new Date(d).toLocaleString('zh-CN');
|
|
}
|
|
|
|
function updateWatermark(customerName) {
|
|
const now = new Date().toLocaleString('zh-CN');
|
|
|
|
const watermarkText = `BISS · ${customerName || 'Unknown'} · ${now}`;
|
|
|
|
document.getElementById('watermark').innerText = watermarkText;
|
|
}
|
|
|
|
async function load() {
|
|
const id = new URLSearchParams(location.search).get('id');
|
|
|
|
const { data } = await sb.from('tickets').select('*').eq('id', id).single();
|
|
|
|
if (!data) return;
|
|
|
|
document.getElementById('ticket_number').innerText = data.ticket_number || '';
|
|
document.getElementById('customer_name').innerText = data.customer_name || '';
|
|
document.getElementById('reason').innerText = data.reason || '';
|
|
document.getElementById('amount').innerText = '¥' + (data.amount || 0).toFixed(2);
|
|
document.getElementById('issuer').innerText = data.issuer || '';
|
|
document.getElementById('created_at').innerText = formatDate(data.created_at);
|
|
document.getElementById('processed').innerText = data.processed ? '已办结' : '未办结';
|
|
document.getElementById('processed_at').innerText = data.processed_at ? formatDate(data.processed_at) : '暂无';
|
|
document.getElementById('remarks').innerText = data.remarks || '无';
|
|
|
|
// 打印时间
|
|
document.getElementById('print_time').innerText =
|
|
new Date().toLocaleString('zh-CN');
|
|
|
|
updateWatermark(data.customer_name);
|
|
|
|
// 自动打印
|
|
setTimeout(() => {
|
|
window.print();
|
|
}, 300);
|
|
}
|
|
|
|
load();
|
|
</script>
|
|
<script src="https://cdn.jsdmirror.cn/gh/bishshi/wechat-detect@main/wechat-detect.js"></script>
|
|
<script src="../js/notice-banner.js"></script>
|
|
</body>
|
|
</html>
|