@@ -0,0 +1,108 @@
|
||||
/* 代打台 · 交互增强(无框架,全部渐进增强) */
|
||||
(function () {
|
||||
'use strict';
|
||||
|
||||
/* 提示条自动淡出 */
|
||||
document.querySelectorAll('[data-flash]').forEach(function (el) {
|
||||
setTimeout(function () {
|
||||
el.classList.add('hide');
|
||||
setTimeout(function () { el.remove(); }, 450);
|
||||
}, 4200);
|
||||
});
|
||||
|
||||
/* 按 / 聚焦搜索框 */
|
||||
document.addEventListener('keydown', function (e) {
|
||||
if (e.key !== '/' || e.metaKey || e.ctrlKey || e.altKey) return;
|
||||
var tag = (document.activeElement && document.activeElement.tagName) || '';
|
||||
if (/^(INPUT|TEXTAREA|SELECT)$/.test(tag)) return;
|
||||
var s = document.querySelector('[data-search]');
|
||||
if (s) { e.preventDefault(); s.focus(); s.select(); }
|
||||
});
|
||||
|
||||
/* 危险操作确认 */
|
||||
document.querySelectorAll('form[data-confirm]').forEach(function (f) {
|
||||
f.addEventListener('submit', function (e) {
|
||||
if (!window.confirm(f.getAttribute('data-confirm'))) e.preventDefault();
|
||||
});
|
||||
});
|
||||
|
||||
/* 追加时长面板:点日历挑终止日 + 实时反算 */
|
||||
function parseDay(s) { return new Date(s + 'T00:00:00'); }
|
||||
function diffDays(a, b) { return Math.round((b.getTime() - a.getTime()) / 86400000); }
|
||||
|
||||
document.querySelectorAll('form[data-extend]').forEach(function (form) {
|
||||
var base = parseDay(form.getAttribute('data-base'));
|
||||
var today = parseDay(form.getAttribute('data-today'));
|
||||
var input = form.querySelector('[data-end-input]');
|
||||
var endLabel = form.querySelector('[data-end-label]');
|
||||
var daysEl = form.querySelector('[data-days]');
|
||||
var remainEl = form.querySelector('[data-remain]');
|
||||
var buttons = form.querySelectorAll('.miniday');
|
||||
if (!input) return;
|
||||
|
||||
function paint(date) {
|
||||
if (!date) return;
|
||||
var d = parseDay(date);
|
||||
input.value = date;
|
||||
if (endLabel) endLabel.textContent = date;
|
||||
var days = diffDays(base, d) + 1;
|
||||
if (daysEl) daysEl.textContent = days > 0 ? days : 0;
|
||||
var remain = diffDays(today, d) + 1;
|
||||
if (remainEl) remainEl.textContent = remain > 0 ? remain : 0;
|
||||
buttons.forEach(function (b) {
|
||||
b.classList.toggle('picked', b.getAttribute('data-date') === date);
|
||||
});
|
||||
}
|
||||
|
||||
buttons.forEach(function (b) {
|
||||
b.addEventListener('click', function () {
|
||||
if (!b.disabled) paint(b.getAttribute('data-date'));
|
||||
});
|
||||
});
|
||||
input.addEventListener('change', function () { paint(input.value); });
|
||||
if (input.value) paint(input.value);
|
||||
});
|
||||
|
||||
/* 新订阅表单:按套餐类型切换「天数 / 次数 / 终止日」 */
|
||||
document.querySelectorAll('form[data-sub-form]').forEach(function (form) {
|
||||
var sel = form.querySelector('[data-pkg-select]');
|
||||
var daysWrap = form.querySelector('[data-days-wrap]');
|
||||
var countWrap = form.querySelector('[data-count-wrap]');
|
||||
var endWrap = form.querySelector('[data-end-wrap]');
|
||||
if (!sel) return;
|
||||
|
||||
function sync() {
|
||||
var opt = sel.options[sel.selectedIndex];
|
||||
var unit = opt && opt.getAttribute('data-unit');
|
||||
var amount = opt && opt.getAttribute('data-amount');
|
||||
if (unit === 'count') {
|
||||
if (daysWrap) daysWrap.hidden = true;
|
||||
if (countWrap) { countWrap.hidden = false; if (amount) countWrap.querySelector('input').value = amount; }
|
||||
if (endWrap) endWrap.hidden = true;
|
||||
} else if (unit === 'day') {
|
||||
if (daysWrap) { daysWrap.hidden = false; if (amount) daysWrap.querySelector('input').value = amount; }
|
||||
if (countWrap) countWrap.hidden = true;
|
||||
if (endWrap) endWrap.hidden = false;
|
||||
} else {
|
||||
if (daysWrap) daysWrap.hidden = false;
|
||||
if (countWrap) countWrap.hidden = true;
|
||||
if (endWrap) endWrap.hidden = true;
|
||||
}
|
||||
}
|
||||
sel.addEventListener('change', sync);
|
||||
sync();
|
||||
});
|
||||
|
||||
/* 套餐表单:切换默认量单位文案 */
|
||||
document.querySelectorAll('form[data-package-form]').forEach(function (form) {
|
||||
var label = form.querySelector('[data-unit-label]');
|
||||
var radios = form.querySelectorAll('input[name="unit"]');
|
||||
function sync() {
|
||||
var v = 'day';
|
||||
radios.forEach(function (r) { if (r.checked) v = r.value; });
|
||||
if (label) label.textContent = v === 'count' ? '次' : '天';
|
||||
}
|
||||
radios.forEach(function (r) { r.addEventListener('change', sync); });
|
||||
sync();
|
||||
});
|
||||
})();
|
||||
Reference in New Issue
Block a user