/* 代打台 · 交互增强(无框架,全部渐进增强) */ (function () { 'use strict'; /* ---------- 工具:本地日期,禁止用 toISOString 做“自然日”计算 ---------- */ function pad2(n) { return n < 10 ? '0' + n : '' + n; } function parseDay(s) { return new Date(s + 'T00:00:00'); } function fmtDay(d) { return d.getFullYear() + '-' + pad2(d.getMonth() + 1) + '-' + pad2(d.getDate()); } function addDays(s, n) { var d = parseDay(s); d.setDate(d.getDate() + n); return fmtDay(d); } function diffDays(a, b) { return Math.round((b.getTime() - a.getTime()) / 86400000); } /* ---------- 提示条:自动淡出(.flash 固定定位,不会顶动页面) ---------- */ document.querySelectorAll('[data-flash]').forEach(function (el) { setTimeout(function () { el.classList.add('hide'); setTimeout(function () { el.remove(); }, 400); }, 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(); }); }); /* ---------- 追加时长面板:点日历挑终止日 + 实时反算 ---------- */ 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]'); var startWrap = form.querySelector('[data-start-wrap]'); var startInput = form.querySelector('input[name="start_date"]'); var endInput = endWrap && endWrap.querySelector('input'); var cyclesWrap = form.querySelector('[data-cycles-wrap]'); var cyclesInput = cyclesWrap && cyclesWrap.querySelector('input'); if (!sel) return; /* 只覆盖“上一次自动填的”终止日,不碰用户手填的值 */ function setAutoEnd(v) { if (!endInput || !v) return; if (!endInput.value || endInput.dataset.auto === endInput.value) { endInput.value = v; endInput.dataset.auto = v; } } /* 显示/隐藏一组字段;隐藏时一并 disable,避免同名字段重复提交 */ function setWrap(wrap, show) { if (!wrap) return; wrap.hidden = !show; wrap.querySelectorAll('input, select, textarea').forEach(function (el) { el.disabled = !show; }); } function sync() { var opt = sel.options[sel.selectedIndex]; var unit = opt && opt.getAttribute('data-unit'); var amount = opt && opt.getAttribute('data-amount'); var validity = opt && parseInt(opt.getAttribute('data-validity') || '0', 10); if (unit === 'season') { setWrap(daysWrap, false); setWrap(countWrap, false); setWrap(endWrap, false); setWrap(startWrap, false); setWrap(cyclesWrap, false); if (startInput) startInput.required = false; return; } setWrap(startWrap, true); if (startInput) startInput.required = true; if (unit === 'abyss') { setWrap(daysWrap, false); setWrap(countWrap, false); setWrap(endWrap, false); setWrap(cyclesWrap, true); if (cyclesInput) { cyclesInput.required = true; if (amount) cyclesInput.value = amount; } return; } setWrap(cyclesWrap, false); if (cyclesInput) cyclesInput.required = false; if (unit === 'count') { setWrap(daysWrap, false); setWrap(countWrap, true); setWrap(endWrap, true); if (amount) countWrap.querySelector('input').value = amount; if (validity > 0 && startInput && startInput.value) setAutoEnd(addDays(startInput.value, validity - 1)); } else if (unit === 'day') { setWrap(daysWrap, true); setWrap(countWrap, false); setWrap(endWrap, true); if (amount) daysWrap.querySelector('input').value = amount; } else { setWrap(daysWrap, true); setWrap(countWrap, false); setWrap(endWrap, false); } } sel.addEventListener('change', sync); if (startInput) { startInput.addEventListener('change', function () { var opt = sel.options[sel.selectedIndex]; var validity = opt && parseInt(opt.getAttribute('data-validity') || '0', 10); if (opt && opt.getAttribute('data-unit') === 'count' && validity > 0 && startInput.value) { setAutoEnd(addDays(startInput.value, validity - 1)); } }); } sync(); }); /* ---------- 套餐表单:切换计费方式与对应字段 ---------- */ document.querySelectorAll('form[data-package-form]').forEach(function (form) { var label = form.querySelector('[data-unit-label]'); var amountTitle = form.querySelector('[data-amount-title]'); var radios = form.querySelectorAll('input[name="unit"]'); var seasonWrap = form.querySelector('[data-season-wrap]'); var validityWrap = form.querySelector('[data-validity-wrap]'); var abyssWrap = form.querySelector('[data-abyss-wrap]'); var amountWrap = form.querySelector('[data-amount-wrap]'); var cycleInput = form.querySelector('input[name="cycle_days"]'); function setWrap(wrap, show) { if (!wrap) return; wrap.hidden = !show; wrap.querySelectorAll('input, select, textarea').forEach(function (el) { el.disabled = !show; }); } function sync() { var v = 'day'; radios.forEach(function (r) { if (r.checked) v = r.value; }); if (label) label.textContent = v === 'count' ? '次' : (v === 'abyss' ? '个' : '天'); if (amountTitle) amountTitle.textContent = v === 'abyss' ? '周期数' : '默认量'; setWrap(seasonWrap, v === 'season'); setWrap(validityWrap, v === 'count'); setWrap(abyssWrap, v === 'abyss'); setWrap(amountWrap, v !== 'season'); if (seasonWrap) { seasonWrap.querySelectorAll('input').forEach(function (i) { i.required = v === 'season'; }); } if (cycleInput) cycleInput.required = v === 'abyss'; } radios.forEach(function (r) { r.addEventListener('change', sync); }); sync(); }); /* ---------- 批量开通:表头全选 + 半选状态 ---------- */ document.querySelectorAll('[data-select-all]').forEach(function (box) { var form = box.closest('form') || document; var boxes = form.querySelectorAll('input[name="customer_ids"]'); function refresh() { var total = 0, checked = 0; boxes.forEach(function (c) { if (c.disabled) return; total++; if (c.checked) checked++; }); box.checked = total > 0 && checked === total; box.indeterminate = checked > 0 && checked < total; } box.addEventListener('change', function () { boxes.forEach(function (c) { if (!c.disabled) c.checked = box.checked; }); box.indeterminate = false; }); boxes.forEach(function (c) { c.addEventListener('change', refresh); }); refresh(); }); })(); /* ---------- 亮色 / 暗色切换 ---------- 唯一状态源是 :服务端按 Cookie 直出, 没有 Cookie 时由 里的内联脚本按系统偏好补上。 */ (function () { 'use strict'; var KEY = 'daili_theme'; var root = document.documentElement; var btns = document.querySelectorAll('[data-theme-toggle]'); if (!btns.length) return; function current() { return root.getAttribute('data-bs-theme') === 'dark' ? 'dark' : 'light'; } function paint() { var dark = current() === 'dark'; btns.forEach(function (b) { b.setAttribute('aria-pressed', dark ? 'true' : 'false'); }); } btns.forEach(function (btn) { btn.addEventListener('click', function () { var next = current() === 'dark' ? 'light' : 'dark'; root.setAttribute('data-bs-theme', next); document.cookie = KEY + '=' + next + '; path=/; max-age=31536000; SameSite=Lax'; paint(); }); }); paint(); })(); /* ---------- 触摸小键盘 + 抽屉时钟 + 更多菜单 ---------- */ (function () { 'use strict'; /* 时钟:精确到秒 */ var clocks = document.querySelectorAll('[data-clock]'); function tick() { var d = new Date(); var pad = function (n) { return n < 10 ? '0' + n : '' + n; }; var t = pad(d.getHours()) + ':' + pad(d.getMinutes()) + ':' + pad(d.getSeconds()); clocks.forEach(function (el) { el.textContent = t; }); } if (clocks.length) { tick(); setInterval(tick, 1000); } /* 小键盘:输入手机尾号 关键点:鼠标按下时阻止默认行为,否则按钮会先抢走输入框焦点; 每次按键后再把焦点和光标送回输入框末尾。 */ document.querySelectorAll('[data-keypad]').forEach(function (pad) { // 键盘是表单的兄弟节点(不在
内),所以先找输入框,再用 input.form 反查表单 var scope = pad.closest('.drawer-block') || pad.parentElement || document; var input = scope.querySelector('input[name="tail"]'); if (!input) { return; } var form = input.form; if (!form) { return; } function keepFocus() { try { input.focus({ preventScroll: true }); } catch (err) { input.focus(); } var end = input.value.length; try { input.setSelectionRange(end, end); } catch (err) { /* number 类型时忽略 */ } } // mousedown 会触发“按钮获得焦点”,先拦下来;pointerdown 再兜底一次 pad.addEventListener('mousedown', function (e) { e.preventDefault(); keepFocus(); }); pad.addEventListener('pointerdown', function () { // 这里不能 preventDefault:会连带取消后面的 click 事件 keepFocus(); }); pad.addEventListener('click', function (e) { var btn = e.target.closest('button[data-key]'); if (!btn) return; var key = btn.getAttribute('data-key'); if (key === 'back') { input.value = input.value.slice(0, -1); } else if (key === 'ok') { if (input.value) { if (form.requestSubmit) { form.requestSubmit(); } else { form.submit(); } } return; } else if (input.value.length < 8) { input.value += key; } keepFocus(); }); }); /* 更多菜单:点开一个时收起其它,点空白处关闭 */ document.addEventListener('click', function (e) { document.querySelectorAll('.more-actions[open]').forEach(function (d) { if (!d.contains(e.target)) { d.removeAttribute('open'); } }); }); })(); /* ---------- 触控/PC 小键盘模式 ---------- */ (function () { 'use strict'; var KEY = 'daili_keypad_mode'; function applyMode(touch) { document.querySelectorAll('[data-keypad]').forEach(function (pad) { pad.hidden = !touch; var block = pad.closest('.drawer-block') || document; var input = block.querySelector('input[name="tail"]'); if (input) { input.readOnly = touch; input.setAttribute('inputmode', touch ? 'none' : 'numeric'); input.setAttribute('placeholder', touch ? '点下方键盘输入尾号' : '输入手机尾号,回车即可完成'); } var btn = block.querySelector('[data-keypad-toggle]'); if (btn) { btn.textContent = touch ? '触控' : '⌨'; btn.classList.toggle('on', touch); btn.title = touch ? '当前触控模式,点此切回 PC' : '当前 PC 模式,点此打开触控键盘'; } }); } var touchMode = false; try { touchMode = localStorage.getItem(KEY) === 'touch'; } catch (err) { } applyMode(touchMode); document.querySelectorAll('[data-keypad-toggle]').forEach(function (btn) { btn.addEventListener('click', function () { touchMode = !touchMode; try { localStorage.setItem(KEY, touchMode ? 'touch' : 'pc'); } catch (err) { } applyMode(touchMode); if (!touchMode) { var block = btn.closest('.drawer-block') || document; var input = block.querySelector('input[name="tail"]'); if (input) { input.focus(); } } }); }); })();