mama-box/demo/gch/v5.js

/* 首页「孕妈广场」效果稿 V5 · 今日一问 + 话题横滑（只在 ?gcv=5 时加载；不改仓库其他文件） */
(function () {
  var sec = document.getElementById('gcHome'), T = window.GC_TOPICS;
  if (!sec || !Array.isArray(T) || !T.length) return;

  var esc = function (s) { return String(s == null ? '' : s).replace(/[&<>"]/g, function (c) { return { '&': '&amp;', '<': '&lt;', '>': '&gt;', '"': '&quot;' }[c]; }); };
  var num = function (n) { return String(n).replace(/\B(?=(\d{3})+(?!\d))/g, ','); };
  var kfmt = function (n) { return n >= 10000 ? (n / 10000).toFixed(1).replace(/\.0$/, '') + '万' : n >= 1000 ? (n / 1000).toFixed(1).replace(/\.0$/, '') + 'k' : String(n); };
  var hash = function (s) { var x = 7; for (var i = 0; i < s.length; i++) x = (x * 31 + s.charCodeAt(i)) | 0; return Math.abs(x); };
  var ava = function (n) { return 'assets/img/mom/' + n + '.jpg'; };
  var MOMS = []; for (var i = 1; i <= 22; i++) MOMS.push('m' + (i < 10 ? '0' : '') + i); for (i = 1; i <= 14; i++) MOMS.push('p' + (i < 10 ? '0' : '') + i);
  var go = function (id) { location.href = 'guangchang/' + (id ? '?t=' + encodeURIComponent(id) : '') + location.hash; };
  var CAT_CN = { family: '家庭婚姻', work: '职场', baby: '经验' }, CATS = ['family', 'work', 'baby'];

  /* 今日一问：按北京日期在热门话题里轮换；问法 + 两个立场是效果稿占位文案 */
  var Q = {
    f01: ['怀孕之后，家里的唠叨变多了吗？', '真的变多了', '还好，能接受'],
    f02: ['长辈按老经验养胎，你会怎么回？', '笑笑不接话', '直接讲清楚'],
    f05: ['被“关心”到喘不过气，你会说出来吗？', '会委婉说', '忍一忍算了'],
    m01: ['怀孕后，家里的分工变了吗？', '他做得更多了', '基本没变'],
    m06: ['孕期更想要礼物，还是被看见？', '被看见更重要', '礼物也要有'],
    m10: ['他懂你养胎其实很累吗？', '他挺懂的', '还差得远'],
    w01: ['孕期上班，不舒服你会直接说吗？', '会直接说', '能忍就忍'],
    w02: ['产检请假，你会提前心里预演吗？', '每次都预演', '直接请就好'],
    w10: ['上班孕妈的累，同事看得见吗？', '大多看得见', '基本看不见'],
    b01: ['孕期的难受，你会跟别人讲吗？', '会讲出来', '自己消化'],
    b03: ['育儿内容，越看越心慌吗？', '是的，少看了', '看了更安心'],
    b08: ['偶尔害怕生孩子，你也有过吗？', '我也有过', '还好不怕']
  };
  var DAY = Math.floor((Date.now() + 8 * 3600e3) / 864e5);
  var DATE = new Date(DAY * 864e5).toISOString().slice(0, 10);
  var hot = T.filter(function (t) { return t.hot && Q[t.id]; });
  var qt = hot[DAY % hot.length], q = Q[qt.id];
  var seed = hash(qt.id + DATE), pctA = 38 + seed % 27;            // 占位比例 38%~64%
  var voters = 1200 + seed % 900;                                   // 占位表态人数
  var KEY = 'gcv5_vote';
  var vote = null;
  try { var sv = JSON.parse(localStorage.getItem(KEY) || 'null'); if (sv && sv.d === DATE && sv.t === qt.id) vote = sv.v; } catch (e) {}
  var avs = [0, 1, 2, 3].map(function (k) { return MOMS[(seed + k * 7) % MOMS.length]; });

  function pick(cat) {
    if (cat) { var l = T.filter(function (t) { return t.cat === cat && t.ph; }); return l.filter(function (t) { return t.hot; }).concat(l.filter(function (t) { return !t.hot; })); }
    var by = CATS.map(function (c) { return T.filter(function (t) { return t.cat === c && t.hot && t.ph; }); }), out = [];
    for (var r = 0; r < 10; r++) by.forEach(function (l) { if (l[r]) out.push(l[r]); });
    return out;
  }

  function resultHTML() {
    var a = pctA + (vote === 0 ? 1 : 0), b = 100 - a;
    return '<div class="q5-res' + (vote === 0 ? ' pa' : ' pb') + '">' +
      '<div class="q5-lab"><span class="la">' + (vote === 0 ? '<i>✓</i>' : '') + esc(q[1]) + ' <b>' + a + '%</b></span>' +
      '<span class="lb"><b>' + b + '%</b> ' + esc(q[2]) + (vote === 1 ? '<i>✓</i>' : '') + '</span></div>' +
      '<div class="q5-bar"><span class="ba" style="--w:' + a + '%"></span><span class="bb"></span></div>' +
      '<button type="button" class="q5-see" data-t="' + esc(qt.id) + '">看看 ' + num(voters + 1) + ' 位妈妈怎么说 <i>›</i></button></div>';
  }
  function actHTML() {
    if (vote != null) return resultHTML();
    return '<div class="q5-btns"><button type="button" class="q5-v a" data-v="0">' + esc(q[1]) + '</button>' +
      '<button type="button" class="q5-v b" data-v="1">' + esc(q[2]) + '</button></div>';
  }

  var mo = new Date(DAY * 864e5), dlab = (mo.getUTCMonth() + 1) + '月' + mo.getUTCDate() + '日';
  sec.innerHTML =
    '<div class="g5-head"><h2 class="g5-title"><span>孕妈广场</span></h2><small class="g5-tag">效果稿 V5</small>' +
    '<button type="button" class="g5-more" data-t="">去广场 <i>›</i></button></div>' +
    '<div class="q5" id="q5">' +
      '<div class="q5-top"><span class="q5-k"><i></i>今日广场一问</span><span class="q5-d">' + dlab + ' · ' + CAT_CN[qt.cat] + '</span></div>' +
      '<p class="q5-q">' + esc(q[0]) + '</p>' +
      '<div class="q5-act" id="q5Act">' + actHTML() + '</div>' +
      '<div class="q5-who"><span class="q5-avs">' + avs.map(function (n) { return '<img src="' + ava(n) + '" alt="" loading="lazy">'; }).join('') + '</span>' +
      '<span id="q5Cnt"><b>' + num(voters + (vote != null ? 1 : 0)) + '</b> 位妈妈已表态</span></div>' +
    '</div>' +
    '<div class="g5-cat" role="tablist" aria-label="话题分类"><button type="button" class="on" data-cat="">全部</button><button type="button" data-cat="family">家庭婚姻</button><button type="button" data-cat="work">职场</button><button type="button" data-cat="baby">经验</button></div>' +
    '<div class="g5-row" id="g5Row"></div>';
  sec.classList.add('gv5');
  sec.classList.remove('hide');

  var row = document.getElementById('g5Row');
  function paint(cat) {
    row.innerHTML = pick(cat).map(function (t) {
      return '<button type="button" class="g5-c" data-t="' + esc(t.id) + '" style="--ink:' + t.ink + ';--c1:' + t.c[0] + '">' +
        '<span class="g5-p"><img src="' + esc(t.ph) + '" alt="" loading="lazy">' + (cat ? '' : '<em>' + CAT_CN[t.cat] + '</em>') + (t.hot && cat ? '<em class="h">热</em>' : '') + '</span>' +
        '<span class="g5-n">' + esc(t.name) + '</span>' +
        '<span class="g5-m"><i></i>' + kfmt(t.talk) + ' 在聊</span></button>';
    }).join('') +
      '<button type="button" class="g5-c g5-sub" data-t=""><span class="g5-s1">你也来说说</span><span class="g5-s2">被选中得</span>' +
      '<span class="g5-s3"><b>¥30</b><span>+500兜豆</span></span><span class="g5-s4">去投稿 ›</span></button>';
    row.scrollLeft = 0;
  }
  paint('');

  sec.addEventListener('click', function (e) {
    var c = e.target.closest('[data-cat]');
    if (c && sec.contains(c)) {
      [].forEach.call(sec.querySelectorAll('.g5-cat button'), function (b) { b.classList.toggle('on', b === c); });
      paint(c.getAttribute('data-cat'));
      return;
    }
    var v = e.target.closest('.q5-v');
    if (v) {
      vote = +v.getAttribute('data-v');
      try { localStorage.setItem(KEY, JSON.stringify({ d: DATE, t: qt.id, v: vote })); } catch (er) {}
      var act = document.getElementById('q5Act');
      act.innerHTML = resultHTML();
      act.firstElementChild.classList.add('in');
      requestAnimationFrame(function () { requestAnimationFrame(function () { act.firstElementChild.classList.remove('in'); }); });
      document.getElementById('q5Cnt').innerHTML = '<b>' + num(voters + 1) + '</b> 位妈妈已表态';
      return;
    }
    var t = e.target.closest('[data-t]');
    if (t && sec.contains(t)) go(t.getAttribute('data-t'));
  });
})();