@@ -0,0 +1,304 @@
|
||||
<!DOCTYPE html>
|
||||
<html lang="zh-CN">
|
||||
<head>
|
||||
<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>
|
||||
.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;
|
||||
}
|
||||
|
||||
.back-link {
|
||||
display: inline-block;
|
||||
margin-bottom: 20px;
|
||||
color: #4CAF50;
|
||||
text-decoration: none;
|
||||
}
|
||||
|
||||
.back-link:hover {
|
||||
text-decoration: underline;
|
||||
}
|
||||
|
||||
.detail-header {
|
||||
border-bottom: 2px solid #4CAF50;
|
||||
padding-bottom: 15px;
|
||||
margin-bottom: 30px;
|
||||
}
|
||||
|
||||
.detail-title {
|
||||
font-size: 24px;
|
||||
color: #333;
|
||||
margin: 0;
|
||||
}
|
||||
|
||||
.detail-section {
|
||||
margin-bottom: 25px;
|
||||
}
|
||||
|
||||
.section-title {
|
||||
font-size: 18px;
|
||||
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));
|
||||
gap: 15px;
|
||||
}
|
||||
|
||||
.info-item {
|
||||
padding: 15px;
|
||||
background: #f9f9f9;
|
||||
border-radius: 4px;
|
||||
}
|
||||
|
||||
.info-label {
|
||||
font-size: 12px;
|
||||
color: #666;
|
||||
margin-bottom: 5px;
|
||||
}
|
||||
|
||||
.info-value {
|
||||
font-size: 16px;
|
||||
color: #333;
|
||||
font-weight: bold;
|
||||
}
|
||||
|
||||
.status-badge {
|
||||
display: inline-block;
|
||||
padding: 5px 15px;
|
||||
border-radius: 20px;
|
||||
font-size: 14px;
|
||||
font-weight: bold;
|
||||
}
|
||||
|
||||
.status-pending {
|
||||
background-color: #fff3cd;
|
||||
color: #856404;
|
||||
}
|
||||
|
||||
.status-processing {
|
||||
background-color: #cce5ff;
|
||||
color: #004085;
|
||||
}
|
||||
|
||||
.status-completed {
|
||||
background-color: #d4edda;
|
||||
color: #155724;
|
||||
}
|
||||
|
||||
.status-cancelled {
|
||||
background-color: #f8d7da;
|
||||
color: #721c24;
|
||||
}
|
||||
|
||||
.action-buttons {
|
||||
margin-top: 30px;
|
||||
display: flex;
|
||||
gap: 10px;
|
||||
}
|
||||
|
||||
.btn {
|
||||
padding: 10px 20px;
|
||||
border: none;
|
||||
border-radius: 4px;
|
||||
cursor: pointer;
|
||||
font-size: 14px;
|
||||
}
|
||||
|
||||
.btn-primary {
|
||||
background-color: #4CAF50;
|
||||
color: white;
|
||||
}
|
||||
|
||||
.btn-primary:hover {
|
||||
background-color: #45a049;
|
||||
}
|
||||
|
||||
.btn-secondary {
|
||||
background-color: #6c757d;
|
||||
color: white;
|
||||
}
|
||||
|
||||
.btn-secondary:hover {
|
||||
background-color: #5a6268;
|
||||
}
|
||||
|
||||
.loading {
|
||||
text-align: center;
|
||||
padding: 40px;
|
||||
color: #666;
|
||||
}
|
||||
|
||||
.error-message {
|
||||
background-color: #fee;
|
||||
color: #c33;
|
||||
padding: 15px;
|
||||
border-radius: 4px;
|
||||
margin: 20px 0;
|
||||
}
|
||||
</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>
|
||||
// 初始化 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);
|
||||
|
||||
async function loadTicketDetail() {
|
||||
const urlParams = new URLSearchParams(window.location.search);
|
||||
const ticketId = urlParams.get('id');
|
||||
|
||||
if (!ticketId) {
|
||||
document.getElementById('detailContent').innerHTML = `
|
||||
<div class="error-message">
|
||||
错误：未提供单据 ID
|
||||
</div>
|
||||
`;
|
||||
return;
|
||||
}
|
||||
|
||||
try {
|
||||
const { data: ticket, error } = await supabase
|
||||
.from('tickets')
|
||||
.select('*')
|
||||
.eq('id', ticketId)
|
||||
.single();
|
||||
|
||||
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>
|
||||
`;
|
||||
}
|
||||
}
|
||||
|
||||
function displayTicketDetail(ticket) {
|
||||
const contentDiv = document.getElementById('detailContent');
|
||||
|
||||
contentDiv.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="action-buttons">
|
||||
<button class="btn btn-primary" onclick="window.print()">打印单据</button>
|
||||
<button class="btn btn-secondary" onclick="history.back()">返回列表</button>
|
||||
</div>
|
||||
`;
|
||||
}
|
||||
|
||||
function getTicketTypeName(type) {
|
||||
const types = {
|
||||
'invoice': '发票',
|
||||
'receipt': '收据',
|
||||
'order': '订单',
|
||||
'other': '其他'
|
||||
};
|
||||
return types[type] || type;
|
||||
}
|
||||
|
||||
function getStatusName(status) {
|
||||
const statusMap = {
|
||||
'pending': '待处理',
|
||||
'processing': '处理中',
|
||||
'completed': '已完成',
|
||||
'cancelled': '已取消'
|
||||
};
|
||||
return statusMap[status] || status;
|
||||
}
|
||||
|
||||
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'
|
||||
});
|
||||
}
|
||||
|
||||
// 页面加载时获取详情
|
||||
document.addEventListener('DOMContentLoaded', loadTicketDetail);
|
||||
</script>
|
||||
</body>
|
||||
</html>
|
||||
Reference in New Issue
Block a user