269 lines
12 KiB
HTML
269 lines
12 KiB
HTML
<!-- 发票管理页 -->
|
||
<style>
|
||
.fi-seg-wrap{margin-bottom:16px;}
|
||
.fi-stats{display:grid;grid-template-columns:repeat(3,1fr);gap:16px;margin-bottom:16px;}
|
||
.fi-stat-card{background:#fff;border-radius:var(--g-radius);padding:18px 20px;box-shadow:var(--g-shadow-sm);transition:var(--g-transition);}
|
||
.fi-stat-card:hover{box-shadow:var(--g-shadow-md);}
|
||
.fi-stat-label{font-size:13px;color:var(--g-text-secondary);margin-bottom:8px;display:flex;align-items:center;gap:6px;}
|
||
.fi-stat-label i{width:16px;height:16px;}
|
||
.fi-stat-val{font-size:24px;font-weight:700;color:var(--g-text);}
|
||
.fi-stat-sub{font-size:12px;color:var(--g-text-muted);margin-top:4px;}
|
||
.fi-stat-card.warn .fi-stat-val{color:var(--g-warning);}
|
||
.fi-stat-card.danger .fi-stat-val{color:var(--g-danger);}
|
||
.fi-toolbar{display:flex;align-items:center;gap:10px;margin-bottom:16px;background:#fff;padding:12px 16px;border-radius:var(--g-radius);box-shadow:var(--g-shadow-sm);flex-wrap:wrap;}
|
||
.fi-toolbar input[type=date],.fi-toolbar select{height:34px;padding:0 10px;border:1px solid #e5e7eb;border-radius:6px;font-size:13px;outline:none;background:#fff;transition:var(--g-transition);}
|
||
.fi-toolbar input[type=date]:focus,.fi-toolbar select:focus{border-color:var(--primary);box-shadow:0 0 0 3px color-mix(in srgb,var(--primary) 12%,transparent);}
|
||
.fi-toolbar .fi-search{height:34px;padding:0 10px 0 32px;border:1px solid #e5e7eb;border-radius:6px;font-size:13px;outline:none;width:200px;background:#fff url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='16' height='16' viewBox='0 0 24 24' fill='none' stroke='%239ca3af' stroke-width='2' stroke-linecap='round' stroke-linejoin='round'%3E%3Ccircle cx='11' cy='11' r='8'/%3E%3Cpath d='m21 21-4.3-4.3'/%3E%3C/svg%3E") 10px center no-repeat;transition:var(--g-transition);}
|
||
.fi-toolbar .fi-search:focus{border-color:var(--primary);box-shadow:0 0 0 3px color-mix(in srgb,var(--primary) 12%,transparent);}
|
||
.fi-date-sep{color:var(--g-text-muted);font-size:13px;}
|
||
.fi-mono{font-family:ui-monospace,SFMono-Regular,Menlo,monospace;font-size:13px;}
|
||
.fi-tag-purple{background:#f9f0ff;color:#722ed1;}
|
||
.fi-section-hd{font-size:15px;font-weight:600;color:var(--g-text);padding-left:10px;border-left:3px solid var(--primary);margin-bottom:16px;}
|
||
.fi-form-grid{display:grid;grid-template-columns:1fr 1fr;gap:14px 24px;}
|
||
.fi-toggle-row{display:flex;align-items:center;gap:10px;margin-bottom:14px;}
|
||
.fi-toggle-label{font-size:13px;font-weight:500;color:var(--g-text);}
|
||
.fi-toggle-hint{font-size:12px;color:var(--g-text-muted);margin-left:4px;}
|
||
.fi-save-bar{margin-top:20px;display:flex;justify-content:flex-end;gap:8px;}
|
||
@media(max-width:768px){.fi-stats{grid-template-columns:1fr;}.fi-form-grid{grid-template-columns:1fr;}}
|
||
</style>
|
||
|
||
<!-- 分段控制器 -->
|
||
<div class="fi-seg-wrap">
|
||
<div class="g-seg">
|
||
<div class="g-seg-item active" onclick="switchFiTab(this)" data-tab="records">开票记录</div>
|
||
<div class="g-seg-item" onclick="switchFiTab(this)" data-tab="settings">发票设置</div>
|
||
</div>
|
||
</div>
|
||
|
||
<!-- Tab1: 开票记录 -->
|
||
<div id="fiTabRecords">
|
||
<!-- 统计卡片 -->
|
||
<div class="fi-stats">
|
||
<div class="fi-stat-card">
|
||
<div class="fi-stat-label"><i data-lucide="receipt-text"></i>本月开票</div>
|
||
<div class="fi-stat-val">¥12,400</div>
|
||
<div class="fi-stat-sub">共 32 张</div>
|
||
</div>
|
||
<div class="fi-stat-card warn">
|
||
<div class="fi-stat-label"><i data-lucide="clock"></i>待开票</div>
|
||
<div class="fi-stat-val">5</div>
|
||
<div class="fi-stat-sub">张待处理</div>
|
||
</div>
|
||
<div class="fi-stat-card danger">
|
||
<div class="fi-stat-label"><i data-lucide="ban"></i>已作废</div>
|
||
<div class="fi-stat-val">2</div>
|
||
<div class="fi-stat-sub">张已作废</div>
|
||
</div>
|
||
</div>
|
||
|
||
<!-- 筛选工具栏 -->
|
||
<div class="fi-toolbar">
|
||
<input type="date" value="2026-01-01" />
|
||
<span class="fi-date-sep">至</span>
|
||
<input type="date" value="2026-01-31" />
|
||
<select>
|
||
<option>全部状态</option>
|
||
<option>待开票</option>
|
||
<option>已开票</option>
|
||
<option>已作废</option>
|
||
</select>
|
||
<select>
|
||
<option>全部类型</option>
|
||
<option>普通发票</option>
|
||
<option>专用发票</option>
|
||
</select>
|
||
<div style="flex:1;"></div>
|
||
<input class="fi-search" type="text" placeholder="搜索发票号码/公司名" />
|
||
</div>
|
||
|
||
<!-- 发票记录表格 -->
|
||
<div class="g-card" style="padding:0;">
|
||
<table class="g-table">
|
||
<thead>
|
||
<tr>
|
||
<th>发票号码</th>
|
||
<th>申请人 / 公司名</th>
|
||
<th>发票类型</th>
|
||
<th>金额</th>
|
||
<th>关联订单</th>
|
||
<th>状态</th>
|
||
<th>申请时间</th>
|
||
<th>操作</th>
|
||
</tr>
|
||
</thead>
|
||
<tbody>
|
||
<tr>
|
||
<td><span class="fi-mono">INV20260115001</span></td>
|
||
<td>北京鼎盛餐饮有限公司</td>
|
||
<td><span class="g-tag g-tag-blue">普票</span></td>
|
||
<td>¥860.00</td>
|
||
<td><span class="fi-mono">ORD20260115032</span></td>
|
||
<td><span class="g-tag g-tag-orange">待开票</span></td>
|
||
<td>2026-01-15 14:30</td>
|
||
<td><a class="g-action" href="javascript:;">开票</a></td>
|
||
</tr>
|
||
<tr>
|
||
<td><span class="fi-mono">INV20260114008</span></td>
|
||
<td>上海云帆科技有限公司</td>
|
||
<td><span class="g-tag fi-tag-purple">专票</span></td>
|
||
<td>¥2,400.00</td>
|
||
<td><span class="fi-mono">ORD20260114021</span></td>
|
||
<td><span class="g-tag g-tag-green">已开票</span></td>
|
||
<td>2026-01-14 10:15</td>
|
||
<td><a class="g-action" href="javascript:;">查看</a><a class="g-action g-action-danger" href="javascript:;">作废</a></td>
|
||
</tr>
|
||
<tr>
|
||
<td><span class="fi-mono">INV20260113005</span></td>
|
||
<td>张伟</td>
|
||
<td><span class="g-tag g-tag-blue">普票</span></td>
|
||
<td>¥156.00</td>
|
||
<td><span class="fi-mono">ORD20260113044</span></td>
|
||
<td><span class="g-tag g-tag-green">已开票</span></td>
|
||
<td>2026-01-13 18:42</td>
|
||
<td><a class="g-action" href="javascript:;">查看</a><a class="g-action g-action-danger" href="javascript:;">作废</a></td>
|
||
</tr>
|
||
<tr>
|
||
<td><span class="fi-mono">INV20260112003</span></td>
|
||
<td>深圳市万达商贸有限公司</td>
|
||
<td><span class="g-tag fi-tag-purple">专票</span></td>
|
||
<td>¥5,200.00</td>
|
||
<td><span class="fi-mono">ORD20260112018</span></td>
|
||
<td><span class="g-tag g-tag-orange">待开票</span></td>
|
||
<td>2026-01-12 09:20</td>
|
||
<td><a class="g-action" href="javascript:;">开票</a></td>
|
||
</tr>
|
||
<tr>
|
||
<td><span class="fi-mono">INV20260111007</span></td>
|
||
<td>李明</td>
|
||
<td><span class="g-tag g-tag-blue">普票</span></td>
|
||
<td>¥88.50</td>
|
||
<td><span class="fi-mono">ORD20260111055</span></td>
|
||
<td><span class="g-tag g-tag-gray">已作废</span></td>
|
||
<td>2026-01-11 20:10</td>
|
||
<td><a class="g-action" href="javascript:;">查看</a></td>
|
||
</tr>
|
||
<tr>
|
||
<td><span class="fi-mono">INV20260110002</span></td>
|
||
<td>广州天河餐饮管理有限公司</td>
|
||
<td><span class="g-tag g-tag-blue">普票</span></td>
|
||
<td>¥1,320.00</td>
|
||
<td><span class="fi-mono">ORD20260110009</span></td>
|
||
<td><span class="g-tag g-tag-green">已开票</span></td>
|
||
<td>2026-01-10 11:35</td>
|
||
<td><a class="g-action" href="javascript:;">查看</a><a class="g-action g-action-danger" href="javascript:;">作废</a></td>
|
||
</tr>
|
||
<tr>
|
||
<td><span class="fi-mono">INV20260109006</span></td>
|
||
<td>王芳</td>
|
||
<td><span class="g-tag g-tag-blue">普票</span></td>
|
||
<td>¥45.00</td>
|
||
<td><span class="fi-mono">ORD20260109071</span></td>
|
||
<td><span class="g-tag g-tag-gray">已作废</span></td>
|
||
<td>2026-01-09 16:50</td>
|
||
<td><a class="g-action" href="javascript:;">查看</a></td>
|
||
</tr>
|
||
</tbody>
|
||
</table>
|
||
</div>
|
||
|
||
<!-- 分页 -->
|
||
<div class="g-pagination" style="margin-top:16px;">
|
||
<button class="g-page-btn" disabled>«</button>
|
||
<button class="g-page-btn active">1</button>
|
||
<button class="g-page-btn">2</button>
|
||
<button class="g-page-btn">3</button>
|
||
<button class="g-page-btn">»</button>
|
||
</div>
|
||
</div>
|
||
|
||
<!-- Tab2: 发票设置 -->
|
||
<div id="fiTabSettings" style="display:none;">
|
||
<!-- 企业信息 -->
|
||
<div class="g-card" style="margin-bottom:16px;">
|
||
<div class="fi-section-hd">企业开票信息</div>
|
||
<div class="fi-form-grid">
|
||
<div class="g-form-group">
|
||
<label class="g-form-label required">企业名称</label>
|
||
<input class="g-input" value="北京老三家餐饮管理有限公司" placeholder="请输入企业全称" />
|
||
</div>
|
||
<div class="g-form-group">
|
||
<label class="g-form-label required">纳税人识别号</label>
|
||
<input class="g-input" value="91110105MA01ABCD5X" placeholder="请输入统一社会信用代码" />
|
||
</div>
|
||
<div class="g-form-group">
|
||
<label class="g-form-label">注册地址</label>
|
||
<input class="g-input" value="北京市朝阳区建国路88号" placeholder="请输入注册地址" />
|
||
</div>
|
||
<div class="g-form-group">
|
||
<label class="g-form-label">注册电话</label>
|
||
<input class="g-input" value="010-88886666" placeholder="请输入注册电话" />
|
||
</div>
|
||
<div class="g-form-group">
|
||
<label class="g-form-label">开户银行</label>
|
||
<input class="g-input" value="中国工商银行北京朝阳支行" placeholder="请输入开户银行名称" />
|
||
</div>
|
||
<div class="g-form-group">
|
||
<label class="g-form-label">银行账号</label>
|
||
<input class="g-input" value="0200 0461 1920 1234 567" placeholder="请输入银行账号" />
|
||
</div>
|
||
</div>
|
||
</div>
|
||
|
||
<!-- 发票类型设置 -->
|
||
<div class="g-card" style="margin-bottom:16px;">
|
||
<div class="fi-section-hd">发票类型设置</div>
|
||
<div class="fi-toggle-row">
|
||
<button class="g-toggle on" onclick="toggleSwitch(this)"></button>
|
||
<span class="fi-toggle-label">电子普通发票</span>
|
||
</div>
|
||
<div class="fi-toggle-row">
|
||
<button class="g-toggle" onclick="toggleSwitch(this)"></button>
|
||
<span class="fi-toggle-label">电子专用发票</span>
|
||
<span class="fi-toggle-hint">（需先完成税务资质认证）</span>
|
||
</div>
|
||
</div>
|
||
|
||
<!-- 自动开票设置 -->
|
||
<div class="g-card" style="margin-bottom:16px;">
|
||
<div class="fi-section-hd">自动开票设置</div>
|
||
<div class="fi-toggle-row">
|
||
<button class="g-toggle" onclick="toggleSwitch(this)"></button>
|
||
<span class="fi-toggle-label">自动开票</span>
|
||
<span class="fi-toggle-hint">开启后，顾客申请发票将自动开具</span>
|
||
</div>
|
||
<div class="g-divider" style="margin:14px 0;"></div>
|
||
<div class="g-form-group" style="max-width:320px;">
|
||
<label class="g-form-label">单张发票最大金额</label>
|
||
<div style="display:flex;align-items:center;gap:6px;">
|
||
<span style="font-size:13px;color:var(--g-text-secondary);">¥</span>
|
||
<input class="g-input" type="number" value="10000" placeholder="如：10000" />
|
||
</div>
|
||
<span class="g-hint">超过此金额的发票需人工审核后开具</span>
|
||
</div>
|
||
</div>
|
||
|
||
<!-- 保存按钮 -->
|
||
<div class="fi-save-bar">
|
||
<button class="g-btn">重置</button>
|
||
<button class="g-btn g-btn-primary">保存设置</button>
|
||
</div>
|
||
</div>
|
||
|
||
<script>
|
||
function switchFiTab(el) {
|
||
var tab = el.getAttribute('data-tab');
|
||
el.parentElement.querySelectorAll('.g-seg-item').forEach(function(item) {
|
||
item.classList.remove('active');
|
||
});
|
||
el.classList.add('active');
|
||
document.getElementById('fiTabRecords').style.display = tab === 'records' ? '' : 'none';
|
||
document.getElementById('fiTabSettings').style.display = tab === 'settings' ? '' : 'none';
|
||
}
|
||
|
||
function toggleSwitch(el) {
|
||
el.classList.toggle('on');
|
||
}
|
||
|
||
if (typeof lucide !== 'undefined') { lucide.createIcons(); }
|
||
</script>
|