更新列表
This commit is contained in:
李琦
125
index.html
125
index.html
@@ -313,6 +313,36 @@
|
||||
</main>
|
||||
</div>
|
||||
|
||||
<!-- ================================================================== -->
|
||||
<!-- 姓名填写模态框 -->
|
||||
<!-- ================================================================== -->
|
||||
<div id="nameModal" class="fixed inset-0 z-50 hidden items-center justify-center bg-black/80 backdrop-blur-sm">
|
||||
<div class="relative w-full max-w-sm mx-4">
|
||||
<div class="bg-white dark:bg-gray-900 rounded-2xl shadow-2xl overflow-hidden">
|
||||
<!-- 头部 -->
|
||||
<div class="px-6 py-4 border-b border-gray-200 dark:border-gray-700">
|
||||
<h3 class="text-lg font-semibold text-gray-900 dark:text-gray-100">请输入签署人姓名</h3>
|
||||
<p class="text-sm text-gray-500 dark:text-gray-400 mt-1">归档前需要填写签署人姓名</p>
|
||||
</div>
|
||||
<!-- 输入框 -->
|
||||
<div class="px-6 py-4">
|
||||
<input type="text" id="modalSignerName"
|
||||
class="w-full bg-gray-50 dark:bg-gray-800 border border-gray-200 dark:border-gray-700 rounded-lg px-4 py-3 text-lg font-medium text-gray-900 dark:text-gray-100 focus:border-gray-900 dark:focus:border-gray-100 outline-none transition-colors placeholder-gray-400 dark:placeholder-gray-500"
|
||||
placeholder="请输入姓名">
|
||||
</div>
|
||||
<!-- 按钮 -->
|
||||
<div class="px-6 py-4 border-t border-gray-200 dark:border-gray-700 flex items-center justify-end gap-3">
|
||||
<button id="cancelNameBtn" class="px-4 py-2 text-sm font-medium text-gray-600 dark:text-gray-400 hover:text-gray-900 dark:hover:text-gray-100 transition-colors">
|
||||
取消
|
||||
</button>
|
||||
<button id="confirmNameBtn" class="px-6 py-2 bg-gray-900 dark:bg-gray-100 text-white dark:text-gray-900 text-sm font-medium rounded-lg shadow-lg hover:shadow-xl transition-all duration-200">
|
||||
确认归档
|
||||
</button>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
|
||||
<!-- ================================================================== -->
|
||||
<!-- 签名预览模态框 -->
|
||||
<!-- ================================================================== -->
|
||||
@@ -385,6 +415,12 @@
|
||||
const loginErrorText = document.getElementById('loginErrorText');
|
||||
const loginSubmitBtn = document.getElementById('loginSubmitBtn');
|
||||
|
||||
// 姓名填写模态框
|
||||
const nameModal = document.getElementById('nameModal');
|
||||
const modalSignerName = document.getElementById('modalSignerName');
|
||||
const cancelNameBtn = document.getElementById('cancelNameBtn');
|
||||
const confirmNameBtn = document.getElementById('confirmNameBtn');
|
||||
|
||||
// 签名画布
|
||||
const canvas = document.getElementById('signatureCanvas');
|
||||
const ctx = canvas.getContext('2d');
|
||||
@@ -842,23 +878,86 @@
|
||||
// 上传签名
|
||||
// ==================================================================
|
||||
saveBtn.addEventListener('click', async () => {
|
||||
const name = signerNameInput.value.trim();
|
||||
|
||||
// 验证姓名
|
||||
if (!name) {
|
||||
showToast('error', '信息缺失', '请在保存前输入您的姓名。');
|
||||
signerNameInput.focus();
|
||||
signerNameInput.classList.add('border-red-500');
|
||||
setTimeout(() => signerNameInput.classList.remove('border-red-500'), 2000);
|
||||
return;
|
||||
}
|
||||
|
||||
// 验证签名
|
||||
if (pathHistory.length === 0) {
|
||||
showToast('error', '画布为空', '请先进行签名。');
|
||||
return;
|
||||
}
|
||||
|
||||
const name = signerNameInput.value.trim();
|
||||
|
||||
// 名字为空，弹出模态框让用户填写
|
||||
if (!name) {
|
||||
openNameModal();
|
||||
return;
|
||||
}
|
||||
|
||||
// 执行上传
|
||||
await uploadSignature(name);
|
||||
});
|
||||
|
||||
/**
|
||||
* 打开姓名填写模态框
|
||||
*/
|
||||
function openNameModal() {
|
||||
modalSignerName.value = '';
|
||||
nameModal.classList.remove('hidden');
|
||||
nameModal.classList.add('flex');
|
||||
document.body.style.overflow = 'hidden';
|
||||
setTimeout(() => modalSignerName.focus(), 100);
|
||||
}
|
||||
|
||||
/**
|
||||
* 关闭姓名填写模态框
|
||||
*/
|
||||
function closeNameModal() {
|
||||
nameModal.classList.add('hidden');
|
||||
nameModal.classList.remove('flex');
|
||||
document.body.style.overflow = '';
|
||||
}
|
||||
|
||||
// 取消按钮事件
|
||||
cancelNameBtn.addEventListener('click', closeNameModal);
|
||||
|
||||
// 点击背景关闭
|
||||
nameModal.addEventListener('click', (e) => {
|
||||
if (e.target === nameModal) {
|
||||
closeNameModal();
|
||||
}
|
||||
});
|
||||
|
||||
// 确认归档按钮事件
|
||||
confirmNameBtn.addEventListener('click', async () => {
|
||||
const name = modalSignerName.value.trim();
|
||||
if (!name) {
|
||||
modalSignerName.classList.add('border-red-500');
|
||||
setTimeout(() => modalSignerName.classList.remove('border-red-500'), 2000);
|
||||
return;
|
||||
}
|
||||
signerNameInput.value = name;
|
||||
closeNameModal();
|
||||
await uploadSignature(name);
|
||||
});
|
||||
|
||||
// 回车确认
|
||||
modalSignerName.addEventListener('keydown', (e) => {
|
||||
if (e.key === 'Enter') {
|
||||
confirmNameBtn.click();
|
||||
}
|
||||
});
|
||||
|
||||
// ESC 关闭
|
||||
document.addEventListener('keydown', (e) => {
|
||||
if (e.key === 'Escape' && !nameModal.classList.contains('hidden')) {
|
||||
closeNameModal();
|
||||
}
|
||||
});
|
||||
|
||||
/**
|
||||
* 执行签名上传
|
||||
* @param {string} name - 签署人姓名
|
||||
*/
|
||||
async function uploadSignature(name) {
|
||||
// 禁用按钮，显示加载状态
|
||||
const originalHTML = saveBtn.innerHTML;
|
||||
saveBtn.disabled = true;
|
||||
@@ -877,7 +976,7 @@
|
||||
|
||||
if (result.success) {
|
||||
showToast('success', '归档成功', '签名已安全保存至服务器。');
|
||||
// 清空画布和输入
|
||||
// 清空画布
|
||||
setTimeout(() => {
|
||||
pathHistory = [];
|
||||
undoHistory = [];
|
||||
@@ -895,7 +994,7 @@
|
||||
saveBtn.disabled = false;
|
||||
saveBtn.innerHTML = originalHTML;
|
||||
}
|
||||
});
|
||||
}
|
||||
|
||||
// ==================================================================
|
||||
// 签名列表
|
||||
|
||||
Reference in New Issue
Block a user