242 lines
6.6 KiB
HTML
242 lines
6.6 KiB
HTML
<!DOCTYPE html>
|
|
<html lang="zh-CN">
|
|
<head>
|
|
<meta charset="UTF-8">
|
|
<meta name="viewport" content="width=device-width, initial-scale=1.0">
|
|
<title>单据详情</title>
|
|
|
|
<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: 60px auto;
|
|
padding: 32px;
|
|
background: #fff;
|
|
border-radius: 12px;
|
|
box-shadow: 0 8px 24px rgba(0,0,0,0.08);
|
|
}
|
|
|
|
.back-link {
|
|
display: inline-block;
|
|
margin-bottom: 20px;
|
|
color: #4CAF50;
|
|
text-decoration: none;
|
|
}
|
|
|
|
.detail-header {
|
|
border-bottom: 2px solid #4CAF50;
|
|
padding-bottom: 15px;
|
|
margin-bottom: 30px;
|
|
}
|
|
|
|
.detail-title {
|
|
font-size: 22px;
|
|
margin: 0;
|
|
}
|
|
|
|
.section-title {
|
|
font-size: 16px;
|
|
color: #4CAF50;
|
|
margin-bottom: 15px;
|
|
}
|
|
|
|
.info-grid {
|
|
display: grid;
|
|
grid-template-columns: repeat(auto-fit, minmax(220px, 1fr));
|
|
gap: 15px;
|
|
}
|
|
|
|
.info-item {
|
|
padding: 14px;
|
|
background: #fafafa;
|
|
border-radius: 6px;
|
|
}
|
|
|
|
.info-label {
|
|
font-size: 12px;
|
|
color: #888;
|
|
}
|
|
|
|
.info-value {
|
|
font-size: 15px;
|
|
font-weight: 500;
|
|
}
|
|
|
|
.status {
|
|
padding: 4px 10px;
|
|
border-radius: 4px;
|
|
font-size: 12px;
|
|
}
|
|
|
|
.done {
|
|
background: #e8f5e9;
|
|
color: #2e7d32;
|
|
}
|
|
|
|
.pending {
|
|
background: #fff3e0;
|
|
color: #ef6c00;
|
|
}
|
|
|
|
.action-buttons {
|
|
margin-top: 30px;
|
|
display: flex;
|
|
gap: 10px;
|
|
}
|
|
|
|
.btn {
|
|
padding: 10px 20px;
|
|
border-radius: 6px;
|
|
border: none;
|
|
cursor: pointer;
|
|
}
|
|
|
|
.btn-primary {
|
|
background: #4CAF50;
|
|
color: white;
|
|
}
|
|
|
|
.btn-secondary {
|
|
background: #6c757d;
|
|
color: white;
|
|
}
|
|
|
|
.loading, .error-message {
|
|
text-align: center;
|
|
padding: 40px;
|
|
}
|
|
|
|
.error-message {
|
|
color: #c33;
|
|
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>
|
|
|
|
<script>
|
|
const SUPABASE_URL = 'https://chixssrphfgxvqqigkzo.supabase.co';
|
|
const SUPABASE_ANON_KEY = 'eyJhbGciOiJIUzI1NiIsInR5cCI6IkpXVCJ9.eyJpc3MiOiJzdXBhYmFzZSIsInJlZiI6ImNoaXhzc3JwaGZneHZxcWlna3pvIiwicm9sZSI6ImFub24iLCJpYXQiOjE3NzQ2OTE0OTEsImV4cCI6MjA5MDI2NzQ5MX0.Az_Ew2J2zdOMcSV0UNAjBS-LPqGpqhsaN4IyZ5R7iqU';
|
|
|
|
// 防重复初始化（关键修复）
|
|
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) {
|
|
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;
|
|
}
|
|
|
|
displayTicketDetail(ticket);
|
|
|
|
} catch (error) {
|
|
showError(error.message);
|
|
}
|
|
}
|
|
|
|
function displayTicketDetail(ticket) {
|
|
const el = document.getElementById('detailContent');
|
|
|
|
el.innerHTML = `
|
|
<div class="detail-header">
|
|
<h1 class="detail-title">
|
|
${ticket.ticket_number || ''} / ${ticket.customer_name || ''}
|
|
</h1>
|
|
</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.status ? '已处理' : '待处理'}
|
|
</span>
|
|
`, true)}
|
|
${item('办结否', `
|
|
<span class="status ${ticket.status ? 'TRUE' : 'FALSE'}">
|
|
${ticket.processed ? '已办结' : '未办结'}
|
|
</span>
|
|
`, true)}
|
|
${item('办结日期', formatDate(ticket.processed_at) || '暂无')}
|
|
${item('备注', ticket.remarks || '无')}
|
|
</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 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 formatDate(dateString) {
|
|
if (!dateString) return '暂无';
|
|
return new Date(dateString).toLocaleString('zh-CN');
|
|
}
|
|
|
|
function showError(msg) {
|
|
document.getElementById('detailContent').innerHTML =
|
|
`<div class="error-message">${msg}</div>`;
|
|
}
|
|
|
|
document.addEventListener('DOMContentLoaded', loadTicketDetail);
|
|
</script>
|
|
<script src="https://cdn.jsdmirror.cn/gh/bishshi/wechat-detect@main/wechat-detect.js"></script>
|
|
</body>
|
|
</html> |