199 lines
7.6 KiB
HTML
199 lines
7.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, maximum-scale=1.0, user-scalable=no">
|
||
<title>拍照上传与OCR - OA系统</title>
|
||
<style>
|
||
* { margin:0; padding:0; box-sizing:border-box; }
|
||
body {
|
||
font-family: -apple-system, BlinkMacSystemFont, 'Segoe UI', Roboto, 'Helvetica Neue', Arial, sans-serif;
|
||
background: #f5f5f5;
|
||
max-width: 414px;
|
||
margin: 0 auto;
|
||
min-height: 100vh;
|
||
padding-bottom: 60px;
|
||
}
|
||
.header {
|
||
background: #1890ff;
|
||
color: white;
|
||
padding: 12px 16px;
|
||
display: flex;
|
||
align-items: center;
|
||
justify-content: space-between;
|
||
position: sticky;
|
||
top: 0;
|
||
z-index: 100;
|
||
}
|
||
.header-left { display:flex; align-items:center; gap:12px; }
|
||
.back-btn { background:none; border:none; color:white; font-size:18px; cursor:pointer; }
|
||
.header-title { font-size:18px; font-weight:bold; }
|
||
.content { padding:16px; }
|
||
.card {
|
||
background:white;
|
||
border-radius:10px;
|
||
padding:16px;
|
||
box-shadow:0 2px 8px rgba(0,0,0,0.05);
|
||
margin-bottom:12px;
|
||
}
|
||
.section-title { font-size:16px; font-weight:500; color:#333; margin-bottom:10px; }
|
||
.upload-box {
|
||
border:1px dashed #1890ff;
|
||
border-radius:8px;
|
||
padding:16px;
|
||
text-align:center;
|
||
color:#1890ff;
|
||
cursor:pointer;
|
||
}
|
||
.preview {
|
||
margin-top:12px;
|
||
width:100%;
|
||
border-radius:8px;
|
||
overflow:hidden;
|
||
background:#fafafa;
|
||
}
|
||
.preview img { width:100%; display:block; }
|
||
.textarea {
|
||
width:100%;
|
||
min-height:120px;
|
||
border:1px solid #e5e5e5;
|
||
border-radius:8px;
|
||
padding:10px;
|
||
font-size:14px;
|
||
margin-top:8px;
|
||
}
|
||
.tag-row { display:flex; gap:6px; flex-wrap:wrap; margin-top:8px; }
|
||
.tag { padding:6px 10px; border-radius:14px; border:1px solid #e5e5e5; font-size:12px; color:#666; }
|
||
.btn-primary {
|
||
width:100%; padding:12px; background:#1890ff; color:#fff; border:none; border-radius:8px; font-size:16px; cursor:pointer;
|
||
}
|
||
.btn-ghost {
|
||
width:100%; padding:12px; background:#fff; color:#1890ff; border:1px solid #1890ff; border-radius:8px; font-size:16px; cursor:pointer;
|
||
margin-top:8px;
|
||
}
|
||
.badge { background:#52c41a; color:white; padding:2px 8px; border-radius:10px; font-size:12px; margin-left:8px; }
|
||
.toast {
|
||
position: fixed;
|
||
top: 20px;
|
||
left: 50%;
|
||
transform: translateX(-50%);
|
||
background: rgba(0,0,0,0.75);
|
||
color: #fff;
|
||
padding: 10px 16px;
|
||
border-radius: 6px;
|
||
font-size: 14px;
|
||
z-index: 200;
|
||
}
|
||
</style>
|
||
</head>
|
||
<body>
|
||
<div class="header">
|
||
<div class="header-left">
|
||
<button class="back-btn" onclick="history.back()">←</button>
|
||
<div class="header-title">拍照上传与OCR <span class="badge" id="draftFlag" style="display:none;">草稿</span></div>
|
||
</div>
|
||
<div style="font-size:14px;" onclick="loadDraft()">恢复</div>
|
||
</div>
|
||
|
||
<div class="content">
|
||
<div class="card">
|
||
<div class="section-title">拍照/相册上传</div>
|
||
<label class="upload-box">
|
||
📷 拍照或从相册选择
|
||
<input id="fileInput" type="file" accept="image/*" capture="environment" style="display:none" onchange="handleFile(event)">
|
||
</label>
|
||
<div class="preview" id="preview" style="display:none;"></div>
|
||
</div>
|
||
|
||
<div class="card">
|
||
<div class="section-title">OCR识别结果</div>
|
||
<div class="tag-row">
|
||
<div class="tag">发票</div>
|
||
<div class="tag">合同</div>
|
||
<div class="tag">票据</div>
|
||
<div class="tag">其他</div>
|
||
</div>
|
||
<textarea id="ocrResult" class="textarea" placeholder="拍照后自动识别，也可手动编辑"></textarea>
|
||
<button class="btn-ghost" onclick="mockOcr()">重新识别</button>
|
||
</div>
|
||
|
||
<div class="card">
|
||
<div class="section-title">离线草稿</div>
|
||
<div style="color:#666;font-size:13px;">无网可保存草稿，联网后再提交。</div>
|
||
<div class="tag-row">
|
||
<div class="tag">自动保存</div>
|
||
<div class="tag">本地存储</div>
|
||
<div class="tag">可恢复</div>
|
||
</div>
|
||
</div>
|
||
|
||
<button class="btn-primary" onclick="submitData()">提交</button>
|
||
<button class="btn-ghost" onclick="saveDraft()">保存草稿</button>
|
||
</div>
|
||
|
||
<script>
|
||
let draft = JSON.parse(localStorage.getItem('scanDraft') || '{}');
|
||
|
||
function toast(msg) {
|
||
const t = document.createElement('div');
|
||
t.className = 'toast';
|
||
t.innerText = msg;
|
||
document.body.appendChild(t);
|
||
setTimeout(()=>t.remove(), 1500);
|
||
}
|
||
|
||
function handleFile(e) {
|
||
const file = e.target.files[0];
|
||
if (!file) return;
|
||
const url = URL.createObjectURL(file);
|
||
const preview = document.getElementById('preview');
|
||
preview.innerHTML = `<img src="${url}" alt="preview">`;
|
||
preview.style.display = 'block';
|
||
toast('已选择图片，开始识别...');
|
||
setTimeout(()=>mockOcr(), 500);
|
||
}
|
||
|
||
function mockOcr() {
|
||
const sample = '识别结果示例：\n- 发票代码：044001900111\n- 金额：¥12,345.67\n- 开票日期：2025-01-15';
|
||
document.getElementById('ocrResult').value = sample;
|
||
toast('OCR识别完成');
|
||
}
|
||
|
||
function saveDraft() {
|
||
draft = {
|
||
ocr: document.getElementById('ocrResult').value,
|
||
hasImg: document.getElementById('preview').style.display === 'block'
|
||
};
|
||
localStorage.setItem('scanDraft', JSON.stringify(draft));
|
||
document.getElementById('draftFlag').style.display = 'inline-block';
|
||
toast('草稿已保存');
|
||
}
|
||
|
||
function loadDraft() {
|
||
const d = JSON.parse(localStorage.getItem('scanDraft') || '{}');
|
||
if (!d.ocr && !d.hasImg) { toast('无草稿'); return; }
|
||
document.getElementById('ocrResult').value = d.ocr || '';
|
||
if (d.hasImg) {
|
||
document.getElementById('preview').style.display = 'block';
|
||
document.getElementById('preview').innerHTML = '<div style="padding:20px;text-align:center;color:#999;">已保存的照片（示意）</div>';
|
||
}
|
||
document.getElementById('draftFlag').style.display = 'inline-block';
|
||
toast('草稿已恢复');
|
||
}
|
||
|
||
function submitData() {
|
||
const text = document.getElementById('ocrResult').value.trim();
|
||
if (!text) { toast('请先拍照并识别'); return; }
|
||
toast('提交成功');
|
||
localStorage.removeItem('scanDraft');
|
||
document.getElementById('draftFlag').style.display = 'none';
|
||
}
|
||
|
||
if (draft.ocr || draft.hasImg) {
|
||
document.getElementById('draftFlag').style.display = 'inline-block';
|
||
}
|
||
</script>
|
||
</body>
|
||
</html>
|
||
|