89 lines
5.5 KiB
JavaScript
89 lines
5.5 KiB
JavaScript
/* 11-02 首页「孕妈广场」效果稿 V1 · 广场头条（杂志式精选）：左大图故事卡 + 右「本期要目」3 条，细文字 tab 切换分类 */
|
||
(function () {
|
||
var sec = document.getElementById('gcHome');
|
||
var T = window.GC_TOPICS;
|
||
if (!sec || !T || !T.length) return;
|
||
|
||
var esc = function (s) { return String(s).replace(/[&<>"']/g, function (c) { return { '&': '&', '<': '<', '>': '>', '"': '"', "'": ''' }[c]; }); };
|
||
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 fmtNum = function (n) { return String(n).replace(/\B(?=(\d{3})+(?!\d))/g, ','); };
|
||
var byId = {}; T.forEach(function (t) { byId[t.id] = t; });
|
||
var CAT = { family: { name: '家庭婚姻', ink: '#E0566F' }, work: { name: '职场', ink: '#3A72B8' }, baby: { name: '经验', ink: '#2E8A7C' } };
|
||
|
||
/* 精选头条（摘自 guangchang/data.js 各话题第一篇照片笔记，占位） */
|
||
var LEAD = {
|
||
all: { t: 'f01', title: '怀孕后我妈每天三个电话，第四个是我爸打的', author: '栗子慢慢', stage: '孕 22 周', av: 'm03', photo: 'guangchang/img/28953c83dbbc.jpg' },
|
||
family: { t: 'm01', title: '孕12周起，倒垃圾和换猫砂彻底归他了', author: '小满月', stage: '孕 26 周', av: 'm08', photo: 'guangchang/img/17c2ced9b0fb.jpg' },
|
||
work: { t: 'w01', title: '孕 11 周还没告诉领导，周会上差点没忍住吐出来', author: '青柠半杯', stage: '孕 16 周', av: 'm12', photo: 'guangchang/img/fdcdb8d99742.jpg' },
|
||
baby: { t: 'b08', title: '孕32周，大家都在期待，我却在被窝里偷偷哭了一次', author: '胆小的兔', stage: '孕 33 周', av: 'p05', photo: 'guangchang/img/bc1f4f0145b6.jpg' }
|
||
};
|
||
var LIST = {
|
||
all: ['m10', 'w10', 'b01'],
|
||
family: ['f02', 'f05', 'm06'],
|
||
work: ['w02', 'w10', 'w04'],
|
||
baby: ['b01', 'b03', 'b05']
|
||
};
|
||
var talkAll = T.reduce(function (a, t) { return a + (t.talk || 0); }, 0);
|
||
var d = new Date(Date.now() + (new Date().getTimezoneOffset() + 480) * 6e4); /* 北京时间 */
|
||
|
||
var tabs = [['', '全部'], ['family', '家庭婚姻'], ['work', '职场'], ['baby', '经验']].map(function (c, i) {
|
||
return '<button type="button" role="tab" data-cat="' + c[0] + '"' + (i ? '' : ' class="on" aria-selected="true"') + '>' + c[1] + '</button>';
|
||
}).join('');
|
||
|
||
sec.innerHTML =
|
||
'<div class="v1-head">' +
|
||
'<h2 class="v1-title"><span>孕妈广场</span></h2>' +
|
||
'<nav class="v1-tabs" role="tablist" aria-label="话题分类">' + tabs + '</nav>' +
|
||
'</div>' +
|
||
'<div class="v1-kicker"><span>本期头条</span><i></i><em>' + (d.getMonth() + 1) + '月' + d.getDate() + '日 · 效果稿 V1</em></div>' +
|
||
'<div class="v1-body" id="v1Body"></div>' +
|
||
'<div class="v1-foot">' +
|
||
'<button type="button" class="v1-live" data-go="all"><span class="v1-avs" aria-hidden="true">' +
|
||
['m05', 'p02'].map(function (a) { return '<img src="assets/img/mom/' + a + '.jpg" alt="" loading="lazy">'; }).join('') +
|
||
'</span><span class="v1-lv"><b>' + fmtNum(talkAll) + '</b> 位妈妈在聊</span></button>' +
|
||
'<button type="button" class="v1-gift" data-go="all">投稿选中 <b>¥30+500兜豆</b><i aria-hidden="true">›</i></button>' +
|
||
'</div>';
|
||
sec.classList.remove('hide');
|
||
sec.classList.add('gv1');
|
||
|
||
var body = sec.querySelector('#v1Body');
|
||
function render(cat) {
|
||
var k = cat || 'all', L = LEAD[k], lt = byId[L.t], lc = CAT[lt.cat];
|
||
var items = LIST[k].map(function (id, i) {
|
||
var t = byId[id], c = CAT[t.cat];
|
||
return '<button type="button" class="v1-item" data-t="' + t.id + '" style="--ink:' + c.ink + '">' +
|
||
'<span class="v1-it"><span class="v1-row"><span class="v1-no">0' + (i + 2) + '</span><span class="v1-tag">' + c.name + '</span></span>' +
|
||
'<span class="v1-name">' + esc(t.name) + '</span>' +
|
||
'<span class="v1-talk"><i></i>' + kfmt(t.talk) + ' 在聊</span></span></button>';
|
||
}).join('');
|
||
body.innerHTML =
|
||
'<button type="button" class="v1-lead" data-t="' + lt.id + '" style="--ink:' + lc.ink + '">' +
|
||
'<img class="v1-ph" src="' + L.photo + '" alt="" loading="lazy">' +
|
||
'<span class="v1-shade"></span>' +
|
||
'<span class="v1-badge"><b>01</b>' + lc.name + '</span>' +
|
||
'<span class="v1-cap">' +
|
||
'<span class="v1-lt">' + esc(L.title) + '</span>' +
|
||
'<span class="v1-by"><img src="assets/img/mom/' + L.av + '.jpg" alt="" loading="lazy"><span class="v1-au">' + esc(L.author) + '</span><span class="v1-st">' + L.stage.replace(/ /g, '') + '</span></span>' +
|
||
'</span>' +
|
||
'</button>' +
|
||
'<div class="v1-list"><span class="v1-lh">本期要目</span>' + items + '</div>';
|
||
body.classList.remove('in'); void body.offsetWidth; body.classList.add('in');
|
||
}
|
||
render('');
|
||
|
||
sec.addEventListener('click', function (e) {
|
||
var b = e.target.closest('button');
|
||
if (!b || !sec.contains(b)) return;
|
||
if (b.hasAttribute('data-cat')) {
|
||
if (b.classList.contains('on')) return;
|
||
sec.querySelectorAll('.v1-tabs button').forEach(function (x) { x.classList.remove('on'); x.removeAttribute('aria-selected'); });
|
||
b.classList.add('on'); b.setAttribute('aria-selected', 'true');
|
||
render(b.getAttribute('data-cat'));
|
||
} else if (b.hasAttribute('data-t')) {
|
||
location.href = 'guangchang/?t=' + b.getAttribute('data-t') + location.hash;
|
||
} else if (b.hasAttribute('data-go')) {
|
||
location.href = 'guangchang/' + location.hash;
|
||
}
|
||
});
|
||
})();
|