102 lines
9.2 KiB
PHP
102 lines
9.2 KiB
PHP
<section class="agreement-form-section" data-credential-section hidden>
|
||
<h3 class="agreement-section-heading">证件签署留档（按需）</h3>
|
||
<label class="agreement-checkbox-choice"><input type="checkbox" name="credential_required" value="1" data-credential-required disabled><span><strong style="display: block">本次需要补充证件并签署留档</strong><span class="agreement-help" style="display: block">默认不勾选，仅发送给本次选中的合作方。</span></span></label>
|
||
<div data-credential-content hidden style="display: grid; gap: .875rem; margin-top: 1rem">
|
||
<div class="agreement-field" style="margin-top: 1rem">
|
||
<label for="agreement-credential-signer">证件签署方</label>
|
||
<select id="agreement-credential-signer" class="agreement-control" name="credential_signer" data-credential-signer disabled></select>
|
||
<p class="agreement-help">每张推送单仅由所选签署方签字或盖章一次。营业执照须由企业盖章。</p>
|
||
</div>
|
||
<div class="agreement-form-grid">
|
||
@foreach (\App\Support\CourierAgreementCredentials::IMAGES as $key => $label)
|
||
<div class="agreement-field" data-credential-image-field="{{ $key }}">
|
||
<label for="agreement-credential-{{ $key }}">{{ $label }} <span class="agreement-required">*</span></label>
|
||
<input class="agreement-control" id="agreement-credential-{{ $key }}" name="credential_images[{{ $key }}]" type="file" accept="image/jpeg,image/png" data-credential-image="{{ $key }}" disabled>
|
||
<img data-credential-thumbnail="{{ $key }}" alt="{{ $label }}预览" hidden style="max-width: 100%; height: 100px; object-fit: contain; margin-top: .5rem">
|
||
<button class="agreement-inline-button" type="button" data-credential-remove="{{ $key }}" style="align-self: flex-start" hidden>删除图片</button>
|
||
</div>
|
||
@endforeach
|
||
</div>
|
||
<p class="agreement-help">JPG / PNG，每张不超过 10 MB，宽高不超过 5000 像素。请遮挡银行卡安全码。</p>
|
||
<p class="agreement-help" data-credential-description></p>
|
||
</div>
|
||
<div class="agreement-template-note" style="margin-top: 1rem" aria-live="polite"><span class="material-icons-outlined" aria-hidden="true">description</span><div><strong>本次发送清单</strong><p data-credential-send-list>仅发送当前签署文件</p></div></div>
|
||
</section>
|
||
<script>
|
||
(function () {
|
||
function initializeCredentials() {
|
||
var root = document.querySelector('[data-agreement-signing]');
|
||
if (!root || root.dataset.credentialsInitialized) return;
|
||
var form = root.querySelector('[data-agreement-form]');
|
||
if (!form) return;
|
||
root.dataset.credentialsInitialized = 'true';
|
||
var type = form.querySelector('[name="document_type"]'), section = root.querySelector('[data-credential-section]');
|
||
var required = root.querySelector('[data-credential-required]'), content = root.querySelector('[data-credential-content]');
|
||
var signer = root.querySelector('[data-credential-signer]'), preview = root.querySelector('[data-credential-preview]');
|
||
var images = Array.from(root.querySelectorAll('[data-credential-image]')), urls = {}, previousType = null;
|
||
var definitions = {
|
||
authorization: [{name: '身份证推送单', keys: ['id_front', 'id_back']}, {name: '银行卡推送单', keys: ['bank_front', 'bank_back']}],
|
||
'entity-change': [{name: '营业执照盖章推送单', keys: ['license']}, {name: '身份证推送单', keys: ['id_front', 'id_back']}, {name: '银行卡推送单', keys: ['bank_front', 'bank_back']}]
|
||
};
|
||
function release(key) { if (urls[key]) URL.revokeObjectURL(urls[key]); delete urls[key]; }
|
||
function imageControl(key) { return images.find(function (input) { return input.dataset.credentialImage === key; }); }
|
||
function update() {
|
||
var supported = Boolean(definitions[type.value]);
|
||
if (previousType !== type.value) {
|
||
required.checked = false; signer.replaceChildren();
|
||
(type.value === 'entity-change' ? ['变更前主体', '变更后主体'] : ['委托方', '受托方']).forEach(function (label, index) {
|
||
var option = document.createElement('option'); option.value = String(index); option.textContent = label; signer.append(option);
|
||
});
|
||
signer.value = type.value === 'entity-change' ? '1' : '0';
|
||
images.forEach(function (input) { input.value = ''; release(input.dataset.credentialImage); }); previousType = type.value;
|
||
}
|
||
section.hidden = !supported; required.disabled = !supported;
|
||
var signerNames = type.value === 'entity-change' ? ['former_company_name', 'changed_company_name'] : ['principal_name', 'trustee_name'];
|
||
var roleNames = type.value === 'entity-change' ? ['变更前主体', '变更后主体'] : ['委托方', '受托方'];
|
||
Array.from(signer.options).forEach(function (option, index) {
|
||
var input = form.querySelector('[name="' + signerNames[index] + '"]');
|
||
option.textContent = roleNames[index] + '：' + (input && input.value.trim() || '待填写');
|
||
});
|
||
var active = supported && required.checked; content.hidden = !active; signer.disabled = !active;
|
||
var sheets = active ? definitions[type.value] : [], keys = sheets.flatMap(function (sheet) { return sheet.keys; });
|
||
images.forEach(function (input) {
|
||
var key = input.dataset.credentialImage, visible = keys.includes(key);
|
||
input.disabled = !visible; input.required = visible;
|
||
root.querySelector('[data-credential-image-field="' + key + '"]').hidden = !visible;
|
||
var img = root.querySelector('[data-credential-thumbnail="' + key + '"]');
|
||
img.hidden = !urls[key]; if (urls[key]) img.src = urls[key]; else img.removeAttribute('src');
|
||
root.querySelector('[data-credential-remove="' + key + '"]').hidden = !input.files.length;
|
||
input.setCustomValidity(input.files.length && (!['image/jpeg', 'image/png'].includes(input.files[0].type) || input.files[0].size > 10 * 1024 * 1024) ? '请选择不超过 10 MB 的 JPG 或 PNG 图片' : '');
|
||
});
|
||
root.querySelector('[data-credential-description]').textContent = type.value === 'entity-change'
|
||
? '营业执照单独一页盖章；身份证、银行卡正反面各合成一页，各签字或盖章一次。'
|
||
: '身份证正反面合为一页，银行卡正反面合为另一页，每页各签字或盖章一次。';
|
||
var selectedName = type.options[type.selectedIndex].textContent.trim();
|
||
root.querySelector('[data-credential-send-list]').textContent = [selectedName + '.pdf'].concat(sheets.map(function (sheet) { return sheet.name + '.pdf'; })).join('；') + '。分别回传、独立留档。';
|
||
preview.replaceChildren(); preview.hidden = !active;
|
||
sheets.forEach(function (sheet) {
|
||
var paper = document.createElement('article'); paper.className = 'agreement-preview-paper';
|
||
var title = document.createElement('h3'); title.textContent = sheet.name; paper.append(title);
|
||
sheet.keys.forEach(function (key) {
|
||
var block = document.createElement('div'); block.className = 'agreement-preview-account';
|
||
if (urls[key]) { var img = document.createElement('img'); img.src = urls[key]; img.alt = imageControl(key).previousElementSibling.textContent; img.style.cssText = 'width:100%;height:130px;object-fit:contain'; block.append(img); }
|
||
else block.textContent = imageControl(key).previousElementSibling.textContent.replace('*', '').trim() + ' · 待上传'; paper.append(block);
|
||
});
|
||
var sign = document.createElement('div'); sign.className = 'agreement-preview-account';
|
||
sign.textContent = (sheet.keys[0] === 'license' ? '盖章' : '签字 / 盖章') + '位置 · 本页 1 处'; paper.append(sign); preview.append(paper);
|
||
});
|
||
}
|
||
images.forEach(function (input) { input.addEventListener('change', function () {
|
||
var key = input.dataset.credentialImage; release(key);
|
||
if (input.files[0] && ['image/jpeg', 'image/png'].includes(input.files[0].type) && input.files[0].size <= 10 * 1024 * 1024) urls[key] = URL.createObjectURL(input.files[0]); update();
|
||
}); });
|
||
root.querySelectorAll('[data-credential-remove]').forEach(function (button) { button.addEventListener('click', function () { var key = button.dataset.credentialRemove; imageControl(key).value = ''; release(key); update(); }); });
|
||
type.addEventListener('change', update); required.addEventListener('change', update);
|
||
form.addEventListener('input', update); form.addEventListener('change', update);
|
||
form.addEventListener('reset', function () { setTimeout(function () { previousType = null; update(); }, 0); });
|
||
update();
|
||
}
|
||
if (document.readyState === 'loading') document.addEventListener('DOMContentLoaded', initializeCredentials); else initializeCredentials();
|
||
})();
|
||
</script>
|