subtrack/internal/web/static/app.js

/* 代打台 · 交互增强（无框架，全部渐进增强） */
(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');
    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;
      }
    }

    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') {
        if (daysWrap) daysWrap.hidden = true;
        if (countWrap) countWrap.hidden = true;
        if (endWrap) endWrap.hidden = true;
        if (startWrap) startWrap.hidden = true;
        if (startInput) startInput.required = false;
        return;
      }

      if (startWrap) startWrap.hidden = false;
      if (startInput) startInput.required = true;

      if (unit === 'count') {
        if (daysWrap) daysWrap.hidden = true;
        if (countWrap) { countWrap.hidden = false; if (amount) countWrap.querySelector('input').value = amount; }
        if (endWrap) endWrap.hidden = false;
        if (validity > 0 && startInput && startInput.value) setAutoEnd(addDays(startInput.value, validity - 1));
      } 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);
    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 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' ? '次' : '天';
      var seasonWrap = form.querySelector('[data-season-wrap]');
      var validityWrap = form.querySelector('[data-validity-wrap]');
      if (seasonWrap) {
        seasonWrap.hidden = v !== 'season';
        seasonWrap.querySelectorAll('input').forEach(function (i) { i.required = v === 'season'; });
      }
      if (validityWrap) { validityWrap.hidden = v !== 'count'; }
    }
    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(); }
      }
    });
  });
})();