chun_qiu
bc5076ee41
- 触控小键盘补回 3×4 网格样式：上一版重写 CSS 时漏掉了 .keypad/.key， 按钮退化成行内小方块；现在恢复 46px 圆角键、⌫/✓ 功能键和「触控」开关态。 - 通行证（原「包赛季」）：整段有效期在独立日历上按套餐色连续着色（18% 透明度）， 每一格显示同一个「已完成 / 总单数」（0/1 或 1/1）；完成后色块保留并显示 1/1。 沿用 season_done 记录完成日期，交互动线不变。 - 新增深渊模式：套餐设置周期天数 N 与周期数 X；开通时从开始日排出 X 个 N 天周期， 结束日 = 开始日 + N×X − 1。周期内任意一天完成即算该周期完成；同一周期重复完成 不重复计数；撤销该周期最后一条完成打卡会回退计数。独立日历连续着色，每格显示 同一个「已完成周期 / 总周期数」。 - 全量把「包赛季」改名为「通行证」；套餐表单新增通行证 / 深渊选项，深渊显示 N/X 字段； 客户开通表单、套餐批量开通、订阅列表、客户订阅卡片、日历待办行同步适配， 通行证 / 深渊不再显示「追加时长」（提交也会被服务端拒绝）。 - 快速完成 / 批量完成对通行证改为整段完成，对深渊走周期打卡，不再错误地按日写打卡。 - 配色改为淡蓝 / 暗蓝：亮色用暗蓝主色 + 淡蓝纸底，暗色用海军蓝底 + 淡蓝强调； 默认套餐色改为 #3B6EA5；大屏同步蓝调并修正热力图例与今日数字的对比度。 - 大屏页签排除通行证 / 深渊（它们不计每日热力，避免点开是空日历）；「今日待打」 仍会列出待处理的通行证 / 深渊。 - 数据迁移：packages.abyss / packages.cycle_days / subscriptions.abyss / subscriptions.cycle_days，老库启动自动补列。 - 修复手机端整段色块把 7 列日历撑出屏幕：日历改成 minmax(0,1fr)，小屏色块缩小。 - 版本号 1.10.0 → 1.11.0。 验证：gofmt / go vet / go test 全绿；亮暗两套、1440 与 390 两档截图走查； 通行证 0/1 → 1/1、深渊 1/4 → 2/4、同周期重复完成不重复计数、撤销回退均实测通过。
365 lines
14 KiB
JavaScript
365 lines
14 KiB
JavaScript
/* 代打台 · 交互增强（无框架，全部渐进增强） */
|
|
(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();
|
|
});
|
|
})();
|
|
|
|
/* ---------- 亮色 / 暗色切换 ----------
|
|
唯一状态源是 <html data-bs-theme>：服务端按 Cookie 直出，
|
|
没有 Cookie 时由 <head> 里的内联脚本按系统偏好补上。 */
|
|
(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) {
|
|
// 键盘是表单的兄弟节点（不在 <form> 内），所以先找输入框，再用 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(); }
|
|
}
|
|
});
|
|
});
|
|
})();
|