更新

2026-03-28 20:53:41 +08:00
parent f072d636c0
commit 87f1ed2dee
3 changed files with 483 additions and 345 deletions
@@ -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;
-            padding: 30px;
-            background: white;
-            box-shadow: 0 4px 6px rgba(0, 0, 0, 0.1);
-            border-radius: 8px;
+            margin: 60px auto;
+            padding: 32px;
+            background: #fff;
+            border-radius: 12px;
+            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;
-            color: #333;
+            font-size: 22px;
            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;
-            background: #f9f9f9;
-            border-radius: 4px;
+            padding: 14px;
+            background: #fafafa;
+            border-radius: 6px;
        }

        .info-label {
            font-size: 12px;
-            color: #666;
-            margin-bottom: 5px;
+            color: #888;
        }

        .info-value {
-            font-size: 16px;
-            color: #333;
-            font-weight: bold;
+            font-size: 15px;
+            font-weight: 500;
        }

-        .status-badge {
-            display: inline-block;
-            padding: 5px 15px;
-            border-radius: 20px;
-            font-size: 14px;
-            font-weight: bold;
+        .status {
+            padding: 4px 10px;
+            border-radius: 4px;
+            font-size: 12px;
        }

-        .status-pending {
-            background-color: #fff3cd;
-            color: #856404;
+        .done {
+            background: #e8f5e9;
+            color: #2e7d32;
        }

-        .status-processing {
-            background-color: #cce5ff;
-            color: #004085;
-        }
-
-        .status-completed {
-            background-color: #d4edda;
-            color: #155724;
-        }
-
-        .status-cancelled {
-            background-color: #f8d7da;
-            color: #721c24;
+        .pending {
+            background: #fff3e0;
+            color: #ef6c00;
        }

        .action-buttons {
@@ -112,193 +92,145 @@

        .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 {
-            background-color: #5a6268;
-        }
-
-        .loading {
+        .loading, .error-message {
            text-align: center;
            padding: 40px;
-            color: #666;
        }

        .error-message {
-            background-color: #fee;
            color: #c33;
-            padding: 15px;
-            border-radius: 4px;
-            margin: 20px 0;
+            background: #fee;
+            border-radius: 6px;
        }
    </style>
 </head>
+
 <body>

-    <div class="detail-container">
-        <a href="index.html" class="back-link">← 返回查询页面</a>
-        
-        <div id="detailContent">
-            <div class="loading">正在加载详情...</div>
-        </div>
+<div class="detail-container">
+    <!-- 修复返回路径 -->
+    <a href="ticket.html" class="back-link">← 返回查询页面</a>
+
+    <div id="detailContent">
+        <div class="loading">正在加载详情...</div>
    </div>
+</div>

-    <script>
-        // 初始化 Supabase 客户端
-        const SUPABASE_URL = 'YOUR_SUPABASE_URL';
-        const SUPABASE_ANON_KEY = 'YOUR_SUPABASE_ANON_KEY';
-        
-        const supabase = window.supabase.createClient(SUPABASE_URL, SUPABASE_ANON_KEY);
+<script>
+    const SUPABASE_URL = 'https://chixssrphfgxvqqigkzo.supabase.co';
+    const SUPABASE_ANON_KEY = 'eyJhbGciOiJIUzI1NiIsInR5cCI6IkpXVCJ9.eyJpc3MiOiJzdXBhYmFzZSIsInJlZiI6ImNoaXhzc3JwaGZneHZxcWlna3pvIiwicm9sZSI6ImFub24iLCJpYXQiOjE3NzQ2OTE0OTEsImV4cCI6MjA5MDI2NzQ5MX0.Az_Ew2J2zdOMcSV0UNAjBS-LPqGpqhsaN4IyZ5R7iqU';

-        async function loadTicketDetail() {
-            const urlParams = new URLSearchParams(window.location.search);
-            const ticketId = urlParams.get('id');
+    // 防重复初始化（关键修复）
+    if (!window._sbClient) {
+        window._sbClient = window.supabase.createClient(
+            SUPABASE_URL,
+            SUPABASE_ANON_KEY
+        );
+    }
+    const sbClient = window._sbClient;

-            if (!ticketId) {
-                document.getElementById('detailContent').innerHTML = `
-                    <div class="error-message">
-                        错误：未提供单据 ID
-                    </div>
-                `;
+    async function loadTicketDetail() {
+        const urlParams = new URLSearchParams(window.location.search);
+        const ticketId = urlParams.get('id');
+
+        if (!ticketId) {
+            showError('未提供单据 ID');
+            return;
+        }
+
+        try {
+            const { data: ticket, error } = await sbClient
+                .from('tickets')
+                .select('*')
+                .eq('id', ticketId)
+                .single();
+
+            if (error) throw error;
+
+            if (!ticket) {
+                showError('未找到该单据');
                return;
            }

-            try {
-                const { data: ticket, error } = await supabase
-                    .from('tickets')
-                    .select('*')
-                    .eq('id', ticketId)
-                    .single();
+            displayTicketDetail(ticket);

-                if (error) throw error;
-
-                if (!ticket) {
-                    document.getElementById('detailContent').innerHTML = `
-                        <div class="error-message">
-                            未找到该单据信息
-                        </div>
-                    `;
-                    return;
-                }
-
-                displayTicketDetail(ticket);
-
-            } catch (error) {
-                console.error('加载详情失败:', error);
-                document.getElementById('detailContent').innerHTML = `
-                    <div class="error-message">
-                        加载失败：${error.message}
-                    </div>
-                `;
-            }
+        } catch (error) {
+            showError(error.message);
        }
+    }

-        function displayTicketDetail(ticket) {
-            const contentDiv = document.getElementById('detailContent');
+    function displayTicketDetail(ticket) {
+        const el = document.getElementById('detailContent');

-            contentDiv.innerHTML = `
-                <div class="detail-header">
-                    <h1 class="detail-title">单据详情 - ${ticket.ticket_number || ''} / ${ticket.customer_name || ''}</h1>
-                </div>
+        el.innerHTML = `
+            <div class="detail-header">
+                <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">
-                            <div class="info-label">编号</div>
-                            <div class="info-value">${ticket.ticket_number || '无'}</div>
-                        </div>
-                        <div class="info-item">
-                            <div class="info-label">姓名</div>
-                            <div class="info-value">${ticket.customer_name || '未填写'}</div>
-                        </div>
-                        <div class="info-item">
-                            <div class="info-label">事由</div>
-                            <div class="info-value">${ticket.reason || '无'}</div>
-                        </div>
-                        <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="info-grid">
+                ${item('编号', ticket.ticket_number)}
+                ${item('姓名', ticket.customer_name)}
+                ${item('事由', ticket.reason)}
+                ${item('处理结果', ticket.result)}
+                ${item('金额', '¥' + Number(ticket.amount || 0).toFixed(2))}
+                ${item('开具人', ticket.issuer)}
+                ${item('日期', formatDate(ticket.created_at))}
+                ${item('状态', `
+                    <span class="status ${ticket.processed ? 'done' : 'pending'}">
+                        ${ticket.processed ? '已处理' : '未处理'}
+                    </span>
+                `, true)}
+            </div>

-                <div class="action-buttons">
-                    <button class="btn btn-primary" onclick="window.print()">打印单据</button>
-                    <button class="btn btn-secondary" onclick="history.back()">返回列表</button>
-                </div>
-            `;
-        }
+            <div class="action-buttons">
+                <button class="btn btn-primary" onclick="goPrint()">打印</button>
+                <button class="btn btn-secondary" onclick="history.back()">返回</button>
+            </div>
+        `;
+    }
+    
+    function goPrint() {
+    window.open(`print.html?id=${new URLSearchParams(location.search).get('id')}`, '_blank');
+    }

-        function getTicketTypeName(type) {
-            const types = {
-                'invoice': '发票',
-                'receipt': '收据',
-                'order': '订单',
-                'other': '其他'
-            };
-            return types[type] || type;
-        }
+    function item(label, value, isHTML = false) {
+        return `
+            <div class="info-item">
+                <div class="info-label">${label}</div>
+                <div class="info-value">${isHTML ? value : (value || '无')}</div>
+            </div>
+        `;
+    }

-        function getStatusName(status) {
-            const statusMap = {
-                'pending': '待处理',
-                'processing': '处理中',
-                'completed': '已完成',
-                'cancelled': '已取消'
-            };
-            return statusMap[status] || status;
-        }
+    function formatDate(dateString) {
+        if (!dateString) return '暂无';
+        return new Date(dateString).toLocaleString('zh-CN');
+    }

-        function formatDate(dateString) {
-            if (!dateString) return '暂无';
-            const date = new Date(dateString);
-            return date.toLocaleDateString('zh-CN', {
-                year: 'numeric',
-                month: '2-digit',
-                day: '2-digit',
-                hour: '2-digit',
-                minute: '2-digit',
-                second: '2-digit'
-            });
-        }
+    function showError(msg) {
+        document.getElementById('detailContent').innerHTML =
+            `<div class="error-message">${msg}</div>`;
+    }
+
+    document.addEventListener('DOMContentLoaded', loadTicketDetail);
+</script>

-        // 页面加载时获取详情
-        document.addEventListener('DOMContentLoaded', loadTicketDetail);
-    </script>
 </body>
 </html>