fix(identity): align application modal with reference
This commit is contained in:
kate522 committed
1 parent
59901b9e10
commit
67ec3c8aeb
3 files changed
+333
-44
No files matched your search
@@ -15,6 +15,10 @@
|
||||
return error && error.message ? error.message : fallback;
|
||||
}
|
||||
|
||||
function toast(message, type, time, id) {
|
||||
if (message && typeof window.notyf === 'function') window.notyf(message, type || 'success', time, id);
|
||||
}
|
||||
|
||||
function init(root) {
|
||||
if (!root || root.dataset.identityBound === '1') return;
|
||||
root.dataset.identityBound = '1';
|
||||
@@ -27,39 +31,154 @@
|
||||
function open() {
|
||||
runtime.open({
|
||||
html: template.innerHTML,
|
||||
height: 320,
|
||||
kind: 'identity',
|
||||
className: 'aksrt-identity-modal-shell',
|
||||
mobileBottom: true,
|
||||
onContent: function (_, session) {
|
||||
var shell = session && session.shell;
|
||||
var form = shell && shell.querySelector('[data-auth-create]');
|
||||
if (!form) return;
|
||||
form.addEventListener('submit', function (event) {
|
||||
event.preventDefault();
|
||||
var input = form.querySelector('[name="evidence[]"]');
|
||||
var message = form.querySelector('[data-auth-message]');
|
||||
var button = form.querySelector('[type="submit"]');
|
||||
var files = input ? Array.prototype.slice.call(input.files || []) : [];
|
||||
if (files.length > 3) {
|
||||
if (message) message.textContent = '证明材料最多上传 3 张';
|
||||
var input = form && form.querySelector('[data-auth-evidence]');
|
||||
var preview = form && form.querySelector('[data-auth-preview]');
|
||||
if (!form || !input || !preview) return;
|
||||
shell.setAttribute('aria-labelledby', 'uc-auth-modal-title');
|
||||
|
||||
var selectedFiles = [];
|
||||
function renderPreview() {
|
||||
preview.replaceChildren();
|
||||
selectedFiles.forEach(function (entry, index) {
|
||||
var item = document.createElement('div');
|
||||
item.className = 'preview-item';
|
||||
var image = document.createElement('img');
|
||||
image.className = 'fit-cover';
|
||||
image.src = entry.url;
|
||||
image.alt = entry.file.name;
|
||||
var remove = document.createElement('button');
|
||||
remove.type = 'button';
|
||||
remove.className = 'uc-auth-preview-remove';
|
||||
remove.dataset.authRemove = String(index);
|
||||
remove.setAttribute('aria-label', '移除 ' + entry.file.name);
|
||||
remove.textContent = '×';
|
||||
item.appendChild(image);
|
||||
item.appendChild(remove);
|
||||
preview.appendChild(item);
|
||||
});
|
||||
|
||||
if (selectedFiles.length < 3) {
|
||||
var add = document.createElement('button');
|
||||
add.type = 'button';
|
||||
add.className = 'add';
|
||||
add.dataset.authFilePicker = '';
|
||||
add.setAttribute('aria-label', '选择证明材料图片');
|
||||
preview.appendChild(add);
|
||||
}
|
||||
}
|
||||
|
||||
function releasePreviewUrls() {
|
||||
selectedFiles.forEach(function (entry) { window.URL.revokeObjectURL(entry.url); });
|
||||
selectedFiles = [];
|
||||
}
|
||||
|
||||
function onModalClose(event) {
|
||||
if (!event.detail || event.detail.shell !== shell) return;
|
||||
document.removeEventListener('aksrt:modal:close', onModalClose);
|
||||
releasePreviewUrls();
|
||||
}
|
||||
|
||||
document.addEventListener('aksrt:modal:close', onModalClose);
|
||||
preview.addEventListener('click', function (event) {
|
||||
var remove = event.target.closest('[data-auth-remove]');
|
||||
if (remove) {
|
||||
var index = Number(remove.dataset.authRemove);
|
||||
var entry = selectedFiles[index];
|
||||
if (entry) window.URL.revokeObjectURL(entry.url);
|
||||
selectedFiles.splice(index, 1);
|
||||
renderPreview();
|
||||
return;
|
||||
}
|
||||
if (event.target.closest('[data-auth-file-picker]')) input.click();
|
||||
});
|
||||
input.addEventListener('change', function () {
|
||||
var files = Array.prototype.slice.call(input.files || []);
|
||||
input.value = '';
|
||||
if (!files.length) return;
|
||||
|
||||
var unsupported = files.some(function (file) { return !/^image\/(gif|jpe?g|png)$/i.test(file.type); });
|
||||
if (unsupported) {
|
||||
toast('证明材料仅支持 GIF、JPG、PNG 图片', 'danger');
|
||||
return;
|
||||
}
|
||||
if (files.some(function (file) { return file.size > 2 * 1024 * 1024; })) {
|
||||
if (message) message.textContent = '单张证明材料不能超过 2MB';
|
||||
toast('单张证明材料不能超过 2MB', 'danger');
|
||||
return;
|
||||
}
|
||||
|
||||
if (button) button.disabled = true;
|
||||
if (message) message.textContent = '';
|
||||
var uniqueFiles = files.filter(function (file, index) {
|
||||
var key = [file.name, file.size, file.lastModified].join(':');
|
||||
return !selectedFiles.some(function (entry) { return entry.key === key; }) &&
|
||||
files.findIndex(function (candidate) {
|
||||
return [candidate.name, candidate.size, candidate.lastModified].join(':') === key;
|
||||
}) === index;
|
||||
});
|
||||
if (selectedFiles.length + uniqueFiles.length > 3) {
|
||||
toast('证明材料最多上传 3 张', 'danger');
|
||||
return;
|
||||
}
|
||||
|
||||
uniqueFiles.forEach(function (file) {
|
||||
selectedFiles.push({
|
||||
file: file,
|
||||
key: [file.name, file.size, file.lastModified].join(':'),
|
||||
url: window.URL.createObjectURL(file),
|
||||
});
|
||||
});
|
||||
renderPreview();
|
||||
});
|
||||
|
||||
var header = shell.querySelector('.uc-auth-modal__header');
|
||||
if (header) {
|
||||
var touchStartY = null;
|
||||
header.addEventListener('touchstart', function (event) {
|
||||
touchStartY = event.touches.length ? event.touches[0].clientY : null;
|
||||
}, { passive: true });
|
||||
header.addEventListener('touchend', function (event) {
|
||||
var touchEndY = event.changedTouches.length ? event.changedTouches[0].clientY : null;
|
||||
if (touchStartY !== null && touchEndY !== null && touchEndY - touchStartY > 60 &&
|
||||
runtime.getActive && runtime.getActive() === shell) {
|
||||
runtime.close('swipe');
|
||||
}
|
||||
touchStartY = null;
|
||||
}, { passive: true });
|
||||
}
|
||||
|
||||
form.addEventListener('submit', function (event) {
|
||||
event.preventDefault();
|
||||
var invalidField = form.querySelector(':invalid');
|
||||
if (!form.checkValidity()) {
|
||||
toast((invalidField && invalidField.validationMessage) || '请检查申请信息是否填写完整', 'danger');
|
||||
if (invalidField && typeof invalidField.focus === 'function') invalidField.focus();
|
||||
return;
|
||||
}
|
||||
var button = form.querySelector('[type="submit"]');
|
||||
var formData = new FormData(form);
|
||||
selectedFiles.forEach(function (entry) {
|
||||
formData.append('evidence[]', entry.file, entry.file.name);
|
||||
});
|
||||
var submitLabel = button ? button.innerHTML : '';
|
||||
if (button) {
|
||||
button.disabled = true;
|
||||
button.innerHTML = '<i class="fa fa-spinner fa-spin mr6" aria-hidden="true"></i>正在提交…';
|
||||
}
|
||||
toast('正在提交申请…', 'load', '', 'aksrt_identity_submit');
|
||||
window.AksrtRequest.request(config.restBase, {
|
||||
method: 'POST',
|
||||
credentials: 'same-origin',
|
||||
headers: { 'X-WP-Nonce': config.nonce || '' },
|
||||
body: new FormData(form),
|
||||
body: formData,
|
||||
}).then(function (response) {
|
||||
var result = parseResponse(response);
|
||||
if (!result || result.success === false) throw new Error((result && result.message) || '申请提交失败，请稍后重试');
|
||||
if (message) message.textContent = '申请已提交，请耐心等待管理员审核。';
|
||||
toast('申请已提交，请耐心等待管理员审核。', 'success', '', 'aksrt_identity_submit');
|
||||
var summary = root.querySelector('[data-auth-summary]');
|
||||
if (summary) {
|
||||
summary.replaceChildren();
|
||||
@@ -101,9 +220,12 @@
|
||||
}
|
||||
if (runtime.getActive && runtime.getActive() === shell) runtime.close('submit');
|
||||
}).catch(function (error) {
|
||||
if (message) message.textContent = errorMessage(error, '申请提交失败，请稍后重试');
|
||||
toast(errorMessage(error, '申请提交失败，请稍后重试'), 'danger', '', 'aksrt_identity_submit');
|
||||
}).finally(function () {
|
||||
if (button) button.disabled = false;
|
||||
if (button) {
|
||||
button.disabled = false;
|
||||
button.innerHTML = submitLabel;
|
||||
}
|
||||
});
|
||||
});
|
||||
},
|
||||
|
||||
Reference in new issue
Block a user