更新

ticket/detail.html

@@ -4,17 +4,22 @@
     <meta charset="UTF-8">
     <meta name="viewport" content="width=device-width, initial-scale=1.0">
     <title>单据详情</title>
-    <link href="https://fonts.googleapis.com/css2?family=Zhi+Mang+Xing&display=swap" rel="stylesheet">
+
-    <link rel="stylesheet" href="../css/style.css">
     <script src="https://cdn.jsdelivr.net/npm/@supabase/supabase-js@2"></script>
+
     <style>
+        body {
+            background: #f0f2f5;
+            font-family: -apple-system, BlinkMacSystemFont, "Segoe UI", Roboto;
+        }
+
         .detail-container {
             max-width: 900px;
-            margin: 40px auto;
+            margin: 60px auto;
-            padding: 30px;
+            padding: 32px;
-            background: white;
+            background: #fff;
-            box-shadow: 0 4px 6px rgba(0, 0, 0, 0.1);
+            border-radius: 12px;
-            border-radius: 8px;
+            box-shadow: 0 8px 24px rgba(0,0,0,0.08);
         }
 
         .back-link {
@@ -24,10 +29,6 @@
             text-decoration: none;
         }
 
-        .back-link:hover {
-            text-decoration: underline;
-        }
-
         .detail-header {
             border-bottom: 2px solid #4CAF50;
             padding-bottom: 15px;
@@ -35,73 +36,52 @@
         }
 
         .detail-title {
-            font-size: 24px;
+            font-size: 22px;
-            color: #333;
             margin: 0;
         }
 
-        .detail-section {
-            margin-bottom: 25px;
-        }
-
         .section-title {
-            font-size: 18px;
+            font-size: 16px;
             color: #4CAF50;
             margin-bottom: 15px;
-            border-left: 3px solid #4CAF50;
-            padding-left: 10px;
         }
 
         .info-grid {
             display: grid;
-            grid-template-columns: repeat(auto-fit, minmax(250px, 1fr));
+            grid-template-columns: repeat(auto-fit, minmax(220px, 1fr));
             gap: 15px;
         }
 
         .info-item {
-            padding: 15px;
+            padding: 14px;
-            background: #f9f9f9;
+            background: #fafafa;
-            border-radius: 4px;
+            border-radius: 6px;
         }
 
         .info-label {
             font-size: 12px;
-            color: #666;
+            color: #888;
-            margin-bottom: 5px;
         }
 
         .info-value {
-            font-size: 16px;
+            font-size: 15px;
-            color: #333;
+            font-weight: 500;
-            font-weight: bold;
         }
 
-        .status-badge {
+        .status {
-            display: inline-block;
+            padding: 4px 10px;
-            padding: 5px 15px;
+            border-radius: 4px;
-            border-radius: 20px;
+            font-size: 12px;
-            font-size: 14px;
-            font-weight: bold;
         }
 
-        .status-pending {
+        .done {
-            background-color: #fff3cd;
+            background: #e8f5e9;
-            color: #856404;
+            color: #2e7d32;
         }
 
-        .status-processing {
+        .pending {
-            background-color: #cce5ff;
+            background: #fff3e0;
-            color: #004085;
+            color: #ef6c00;
-        }
-
-        .status-completed {
-            background-color: #d4edda;
-            color: #155724;
-        }
-
-        .status-cancelled {
-            background-color: #f8d7da;
-            color: #721c24;
         }
 
         .action-buttons {
@@ -112,77 +92,69 @@
 
         .btn {
             padding: 10px 20px;
+            border-radius: 6px;
             border: none;
-            border-radius: 4px;
             cursor: pointer;
-            font-size: 14px;
         }
 
         .btn-primary {
-            background-color: #4CAF50;
+            background: #4CAF50;
             color: white;
         }
 
-        .btn-primary:hover {
-            background-color: #45a049;
-        }
-
         .btn-secondary {
-            background-color: #6c757d;
+            background: #6c757d;
             color: white;
         }
 
-        .btn-secondary:hover {
+        .loading, .error-message {
-            background-color: #5a6268;
-        }
-
-        .loading {
             text-align: center;
             padding: 40px;
-            color: #666;
         }
 
         .error-message {
-            background-color: #fee;
             color: #c33;
-            padding: 15px;
+            background: #fee;
-            border-radius: 4px;
+            border-radius: 6px;
-            margin: 20px 0;
         }
     </style>
 </head>
+
 <body>
 
-    <div class="detail-container">
+<div class="detail-container">
-        <a href="index.html" class="back-link">← 返回查询页面</a>
+    <!-- 修复返回路径 -->
+    <a href="ticket.html" class="back-link">← 返回查询页面</a>
 
     <div id="detailContent">
         <div class="loading">正在加载详情...</div>
     </div>
-    </div>
+</div>
 
-    <script>
+<script>
-        // 初始化 Supabase 客户端
+    const SUPABASE_URL = 'https://chixssrphfgxvqqigkzo.supabase.co';
-        const SUPABASE_URL = 'YOUR_SUPABASE_URL';
+    const SUPABASE_ANON_KEY = 'eyJhbGciOiJIUzI1NiIsInR5cCI6IkpXVCJ9.eyJpc3MiOiJzdXBhYmFzZSIsInJlZiI6ImNoaXhzc3JwaGZneHZxcWlna3pvIiwicm9sZSI6ImFub24iLCJpYXQiOjE3NzQ2OTE0OTEsImV4cCI6MjA5MDI2NzQ5MX0.Az_Ew2J2zdOMcSV0UNAjBS-LPqGpqhsaN4IyZ5R7iqU';
-        const SUPABASE_ANON_KEY = 'YOUR_SUPABASE_ANON_KEY';
 
-        const supabase = window.supabase.createClient(SUPABASE_URL, SUPABASE_ANON_KEY);
+    // 防重复初始化（关键修复）
+    if (!window._sbClient) {
+        window._sbClient = window.supabase.createClient(
+            SUPABASE_URL,
+            SUPABASE_ANON_KEY
+        );
+    }
+    const sbClient = window._sbClient;
 
     async function loadTicketDetail() {
         const urlParams = new URLSearchParams(window.location.search);
         const ticketId = urlParams.get('id');
 
         if (!ticketId) {
-                document.getElementById('detailContent').innerHTML = `
+            showError('未提供单据 ID');
-                    <div class="error-message">
-                        错误：未提供单据 ID
-                    </div>
-                `;
             return;
         }
 
         try {
-                const { data: ticket, error } = await supabase
+            const { data: ticket, error } = await sbClient
                 .from('tickets')
                 .select('*')
                 .eq('id', ticketId)
@@ -191,114 +163,74 @@
             if (error) throw error;
 
             if (!ticket) {
-                    document.getElementById('detailContent').innerHTML = `
+                showError('未找到该单据');
-                        <div class="error-message">
-                            未找到该单据信息
-                        </div>
-                    `;
                 return;
             }
 
             displayTicketDetail(ticket);
 
         } catch (error) {
-                console.error('加载详情失败:', error);
+            showError(error.message);
-                document.getElementById('detailContent').innerHTML = `
-                    <div class="error-message">
-                        加载失败：${error.message}
-                    </div>
-                `;
         }
     }
 
     function displayTicketDetail(ticket) {
-            const contentDiv = document.getElementById('detailContent');
+        const el = document.getElementById('detailContent');
 
-            contentDiv.innerHTML = `
+        el.innerHTML = `
             <div class="detail-header">
-                    <h1 class="detail-title">单据详情 - ${ticket.ticket_number || ''} / ${ticket.customer_name || ''}</h1>
+                <h1 class="detail-title">
+                    ${ticket.ticket_number || ''} / ${ticket.customer_name || ''}
+                </h1>
             </div>
 
-                <div class="detail-section">
-                    <h3 class="section-title">基本信息</h3>
             <div class="info-grid">
-                        <div class="info-item">
+                ${item('编号', ticket.ticket_number)}
-                            <div class="info-label">编号</div>
+                ${item('姓名', ticket.customer_name)}
-                            <div class="info-value">${ticket.ticket_number || '无'}</div>
+                ${item('事由', ticket.reason)}
-                        </div>
+                ${item('处理结果', ticket.result)}
-                        <div class="info-item">
+                ${item('金额', '¥' + Number(ticket.amount || 0).toFixed(2))}
-                            <div class="info-label">姓名</div>
+                ${item('开具人', ticket.issuer)}
-                            <div class="info-value">${ticket.customer_name || '未填写'}</div>
+                ${item('日期', formatDate(ticket.created_at))}
-                        </div>
+                ${item('状态', `
-                        <div class="info-item">
+                    <span class="status ${ticket.processed ? 'done' : 'pending'}">
-                            <div class="info-label">事由</div>
+                        ${ticket.processed ? '已处理' : '未处理'}
-                            <div class="info-value">${ticket.reason || '无'}</div>
+                    </span>
-                        </div>
+                `, true)}
-                        <div class="info-item">
-                            <div class="info-label">处理结果</div>
-                            <div class="info-value">${ticket.result || '无'}</div>
-                        </div>
-                        <div class="info-item">
-                            <div class="info-label">金额</div>
-                            <div class="info-value">¥${ticket.amount?.toFixed(2) || '0.00'}</div>
-                        </div>
-                        <div class="info-item">
-                            <div class="info-label">开具人</div>
-                            <div class="info-value">${ticket.issuer || '未填写'}</div>
-                        </div>
-                        <div class="info-item">
-                            <div class="info-label">日期</div>
-                            <div class="info-value">${formatDate(ticket.created_at || ticket.date)}</div>
-                        </div>
-                        <div class="info-item">
-                            <div class="info-label">处理状态</div>
-                            <div class="info-value">${ticket.processed ? '已处理' : '未处理'}</div>
-                        </div>
-                    </div>
             </div>
 
             <div class="action-buttons">
-                    <button class="btn btn-primary" onclick="window.print()">打印单据</button>
+                <button class="btn btn-primary" onclick="goPrint()">打印</button>
-                    <button class="btn btn-secondary" onclick="history.back()">返回列表</button>
+                <button class="btn btn-secondary" onclick="history.back()">返回</button>
             </div>
         `;
     }
     
-        function getTicketTypeName(type) {
+    function goPrint() {
-            const types = {
+    window.open(`print.html?id=${new URLSearchParams(location.search).get('id')}`, '_blank');
-                'invoice': '发票',
-                'receipt': '收据',
-                'order': '订单',
-                'other': '其他'
-            };
-            return types[type] || type;
     }
 
-        function getStatusName(status) {
+    function item(label, value, isHTML = false) {
-            const statusMap = {
+        return `
-                'pending': '待处理',
+            <div class="info-item">
-                'processing': '处理中',
+                <div class="info-label">${label}</div>
-                'completed': '已完成',
+                <div class="info-value">${isHTML ? value : (value || '无')}</div>
-                'cancelled': '已取消'
+            </div>
-            };
+        `;
-            return statusMap[status] || status;
     }
 
     function formatDate(dateString) {
         if (!dateString) return '暂无';
-            const date = new Date(dateString);
+        return new Date(dateString).toLocaleString('zh-CN');
-            return date.toLocaleDateString('zh-CN', {
+    }
-                year: 'numeric',
+
-                month: '2-digit',
+    function showError(msg) {
-                day: '2-digit',
+        document.getElementById('detailContent').innerHTML =
-                hour: '2-digit',
+            `<div class="error-message">${msg}</div>`;
-                minute: '2-digit',
-                second: '2-digit'
-            });
     }
 
-        // 页面加载时获取详情
     document.addEventListener('DOMContentLoaded', loadTicketDetail);
-    </script>
+</script>
+
 </body>
 </html>

ticket/index.html

@@ -4,90 +4,129 @@
     <meta charset="UTF-8">
     <meta name="viewport" content="width=device-width, initial-scale=1.0">
     <title>单据查询</title>
-    <link href="https://fonts.googleapis.com/css2?family=Zhi+Mang+Xing&display=swap" rel="stylesheet">
+
-    <link rel="stylesheet" href="../css/style.css">
     <script src="https://cdn.jsdelivr.net/npm/@supabase/supabase-js@2"></script>
+
     <style>
+        body {
+            background: #f0f2f5;
+            font-family: -apple-system, BlinkMacSystemFont, "Segoe UI", Roboto;
+        }
+
         .ticket-container {
-            max-width: 800px;
+            max-width: 900px;
-            margin: 40px auto;
+            margin: 60px auto;
-            padding: 30px;
+            padding: 32px;
-            background: white;
+            background: #fff;
-            box-shadow: 0 4px 6px rgba(0, 0, 0, 0.1);
+            border-radius: 12px;
-            border-radius: 8px;
+            box-shadow: 0 8px 24px rgba(0,0,0,0.08);
+        }
+
+        h1 {
+            text-align: center;
+            font-size: 24px;
+            font-weight: 600;
+            margin-bottom: 20px;
         }
 
         .search-form {
-            margin-bottom: 30px;
+            margin-bottom: 24px;
             padding: 20px;
-            background: #f5f5f5;
+            background: #fafafa;
-            border-radius: 8px;
+            border-radius: 10px;
+            display: grid;
+            grid-template-columns: repeat(auto-fit, minmax(180px, 1fr));
+            gap: 16px;
+            align-items: end;
         }
 
         .form-group {
-            margin-bottom: 15px;
+            display: flex;
+            flex-direction: column;
         }
 
         .form-group label {
-            display: block;
+            font-size: 13px;
-            margin-bottom: 5px;
+            color: #666;
-            font-weight: bold;
+            margin-bottom: 6px;
-            color: #333;
         }
 
         .form-control {
-            width: 100%;
+            padding: 10px 12px;
-            padding: 10px;
             border: 1px solid #ddd;
-            border-radius: 4px;
+            border-radius: 6px;
-            font-size: 14px;
+        }
+
+        .form-control:focus {
+            border-color: #4CAF50;
+            outline: none;
+            box-shadow: 0 0 0 2px rgba(76,175,80,0.15);
         }
 
         .btn {
-            padding: 10px 20px;
+            height: 40px;
-            background-color: #4CAF50;
+            background: linear-gradient(135deg, #4CAF50, #43a047);
-            color: white;
+            border-radius: 6px;
-            border: none;
+            color: #fff;
-            border-radius: 4px;
+            font-weight: 500;
             cursor: pointer;
-            font-size: 14px;
+            border: none;
         }
 
         .btn:hover {
-            background-color: #45a049;
+            transform: translateY(-1px);
+            box-shadow: 0 4px 12px rgba(76,175,80,0.3);
         }
 
         .result-table {
             width: 100%;
             border-collapse: collapse;
-            margin-top: 20px;
+            margin-top: 16px;
-        }
+            font-size: 14px;
-
-        .result-table th,
-        .result-table td {
-            padding: 12px;
-            text-align: left;
-            border-bottom: 1px solid #ddd;
         }
 
         .result-table th {
-            background-color: #4CAF50;
+            background: #fafafa;
-            color: white;
+            text-align: left;
+            padding: 12px;
+            font-weight: 600;
+            border-bottom: 1px solid #eee;
+        }
+
+        .result-table td {
+            padding: 12px;
+            border-bottom: 1px solid #f0f0f0;
         }
 
         .result-table tr:hover {
-            background-color: #f5f5f5;
+            background: #fafafa;
+        }
+
+        .status {
+            padding: 4px 8px;
+            border-radius: 4px;
+            font-size: 12px;
+        }
+
+        .status.done {
+            background: #e8f5e9;
+            color: #2e7d32;
+        }
+
+        .status.pending {
+            background: #fff3e0;
+            color: #ef6c00;
         }
 
         .no-result {
             text-align: center;
-            padding: 40px;
+            padding: 60px;
             color: #999;
         }
 
         .loading {
             text-align: center;
-            padding: 20px;
+            padding: 30px;
             color: #666;
         }
 
@@ -95,15 +134,15 @@
             background-color: #fee;
             color: #c33;
             padding: 10px;
-            border-radius: 4px;
+            border-radius: 6px;
-            margin-bottom: 15px;
         }
 
         .back-link {
-            display: inline-block;
+            font-size: 14px;
-            margin-bottom: 20px;
             color: #4CAF50;
             text-decoration: none;
+            display: inline-block;
+            margin-bottom: 20px;
         }
 
         .back-link:hover {
@@ -111,46 +150,49 @@
         }
     </style>
 </head>
+
 <body>
 
-    <div class="ticket-container">
+<div class="ticket-container">
     <a href="../index.html" class="back-link">← 返回首页</a>
 
-        <h1 style="text-align: center; margin-bottom: 30px;">单据查询</h1>
+    <h1>单据查询</h1>
 
     <div class="search-form">
         <div class="form-group">
-                <label for="searchTerm">编号 / 姓名</label>
+            <label>编号 / 姓名</label>
-                <input type="text" id="searchTerm" class="form-control" placeholder="请输入单据编号或姓名">
+            <input type="text" id="searchTerm" class="form-control">
         </div>
 
         <div class="form-group">
-                <label for="dateFrom">开始日期</label>
+            <label>开始日期</label>
             <input type="date" id="dateFrom" class="form-control">
         </div>
 
         <div class="form-group">
-                <label for="dateTo">结束日期</label>
+            <label>结束日期</label>
             <input type="date" id="dateTo" class="form-control">
         </div>
 
-            <button onclick="searchTickets()" class="btn">查询</button>
+        <button id="searchBtn" class="btn">查询</button>
     </div>
 
-        <div id="searchResults">
+    <div id="searchResults"></div>
-            <!-- 查询结果将在这里显示 -->
+</div>
-        </div>
-    </div>
 
-    <script>
+<script>
-        // 1. 只声明一次变量
     const SUPABASE_URL = 'https://chixssrphfgxvqqigkzo.supabase.co';
     const SUPABASE_ANON_KEY = 'eyJhbGciOiJIUzI1NiIsInR5cCI6IkpXVCJ9.eyJpc3MiOiJzdXBhYmFzZSIsInJlZiI6ImNoaXhzc3JwaGZneHZxcWlna3pvIiwicm9sZSI6ImFub24iLCJpYXQiOjE3NzQ2OTE0OTEsImV4cCI6MjA5MDI2NzQ5MX0.Az_Ew2J2zdOMcSV0UNAjBS-LPqGpqhsaN4IyZ5R7iqU';
 
-        // 2. 初始化客户端 (确保只在这里初始化一次)
+    // 防止重复初始化
-        const supabase = window.supabase.createClient(SUPABASE_URL, SUPABASE_ANON_KEY);
+    if (!window._sbClient) {
+        window._sbClient = window.supabase.createClient(
+            SUPABASE_URL,
+            SUPABASE_ANON_KEY
+        );
+    }
+    const sbClient = window._sbClient;
 
-        // 3. 定义查询函数
     async function searchTickets() {
         const searchTerm = document.getElementById('searchTerm').value.trim();
         const dateFrom = document.getElementById('dateFrom').value;
@@ -160,11 +202,16 @@
         resultsDiv.innerHTML = '<div class="loading">正在查询...</div>';
 
         try {
-                let query = supabase.from('tickets').select('*');
+            let query = sbClient.from('tickets').select('*');
 
             if (searchTerm) {
-                    const escapedTerm = searchTerm.replace(/%/g, '\\%').replace(/_/g, '\\_');
+                const escapedTerm = searchTerm
-                    query = query.or(`ticket_number.ilike.%${escapedTerm}%,customer_name.ilike.%${escapedTerm}%`);
+                    .replace(/%/g, '\\%')
+                    .replace(/_/g, '\\_');
+
+                query = query.or(
+                    `ticket_number.ilike.%${escapedTerm}%,customer_name.ilike.%${escapedTerm}%`
+                );
             }
 
             if (dateFrom) query = query.gte('created_at', dateFrom);
@@ -174,16 +221,14 @@
             if (error) throw error;
 
             displayResults(data);
-
         } catch (error) {
-                console.error('查询错误:', error);
             resultsDiv.innerHTML = `<div class="error-message">查询失败：${error.message}</div>`;
         }
     }
 
-        // 4. 定义结果显示函数
     function displayResults(tickets) {
         const resultsDiv = document.getElementById('searchResults');
+
         if (!tickets || tickets.length === 0) {
             resultsDiv.innerHTML = '<div class="no-result">未找到符合条件的单据</div>';
             return;
@@ -207,8 +252,14 @@
                     <td>${ticket.reason || ''}</td>
                     <td>¥${Number(ticket.amount || 0).toFixed(2)}</td>
                     <td>${formatDate(ticket.created_at)}</td>
-                        <td>${ticket.processed ? '已处理' : '未处理'}</td>
+                    <td>
-                        <td><button class="btn" onclick="viewDetail('${ticket.id}')">详情</button></td>
+                        <span class="status ${ticket.processed ? 'done' : 'pending'}">
+                            ${ticket.processed ? '已处理' : '未处理'}
+                        </span>
+                    </td>
+                    <td>
+                        <button class="btn" onclick="viewDetail('${ticket.id}')">详情</button>
+                    </td>
                 </tr>
             `;
         });
@@ -222,19 +273,17 @@
         return new Date(dateString).toLocaleDateString('zh-CN');
     }
 
-        function viewDetail(ticketId) {
+    function viewDetail(id) {
-            window.location.href = `detail.html?id=${ticketId}`;
+        window.location.href = `detail.html?id=${id}`;
     }
 
-        // 5. 绑定回车键
+    // 事件绑定（替代 onclick）
-        document.addEventListener('DOMContentLoaded', function() {
+    document.getElementById('searchBtn').addEventListener('click', searchTickets);
-            const input = document.getElementById('searchTerm');
+
-            if (input) {
+    document.getElementById('searchTerm').addEventListener('keypress', function(e) {
-                input.addEventListener('keypress', function(e) {
         if (e.key === 'Enter') searchTickets();
     });
-            }
+</script>
-        });
+
-    </script>
 </body>
 </html>

ticket/print.html

@@ -0,0 +1,157 @@
+<!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>