157 lines
3.6 KiB
HTML
157 lines
3.6 KiB
HTML
<!DOCTYPE html>
|
|
<html lang="zh-CN">
|
|
<head>
|
|
<meta charset="UTF-8">
|
|
<title>打印单据</title>
|
|
|
|
<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: 40%;
|
|
left: 50%;
|
|
transform: translate(-50%, -50%) rotate(-30deg);
|
|
font-size: 60px;
|
|
color: rgba(0,0,0,0.08);
|
|
white-space: nowrap;
|
|
pointer-events: none;
|
|
z-index: 0;
|
|
}
|
|
|
|
/* ===== 标题 ===== */
|
|
.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">BISS · OFFICIAL</div>
|
|
|
|
<div class="title">单据详情</div>
|
|
|
|
<table class="table" id="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>
|
|
</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');
|
|
}
|
|
|
|
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('print_time').innerText = new Date().toLocaleString('zh-CN');
|
|
|
|
// 自动打印（稳定延迟）
|
|
setTimeout(() => {
|
|
window.print();
|
|
}, 300);
|
|
}
|
|
|
|
load();
|
|
</script>
|
|
|
|
</body>
|
|
</html> |