207 lines
15 KiB
HTML
207 lines
15 KiB
HTML
<!DOCTYPE html>
|
||
<html lang="zh-CN">
|
||
<head>
|
||
<meta charset="utf-8">
|
||
<meta name="viewport" content="width=device-width,initial-scale=1,maximum-scale=1,user-scalable=no,viewport-fit=cover">
|
||
<meta name="format-detection" content="telephone=no">
|
||
<title>我的投稿</title>
|
||
<!-- 孕妈广场 · 我的投稿（2026-11-02 独立成页）
|
||
用户原话：「我的投稿不要放在右上角……可以放到大家在聊的瀑布流上，给它一个单独页面」
|
||
· 入口：广场「全部」瀑布流第一张卡（data-mine）；首页审核提醒 guangchang/?mine=1 也转到这里。
|
||
· 数据：GET /api/mp/public/mama-box/plaza/mine → {list, unread}；打开本页即把 unread 标为已提醒（POST mine/seen），条目上挂「新」。
|
||
· 写新故事 / 修改后重投 → ../?write=1（广场页打开写稿层）；已通过的稿件 → ../?n=u-<id> 打开广场详情。hash（身份）原样带上。
|
||
· 禁止下拉回弹：固定外壳 + 容器滚动 + touchmove 拦截（同广场页）。 -->
|
||
<style>
|
||
:root{--ink:#2B2320;--muted:#9A8380;--bg:#F8F3EF;--btn:linear-gradient(135deg,#F77B55,#EE5A3E)}
|
||
*{box-sizing:border-box;-webkit-tap-highlight-color:transparent}
|
||
html,body{margin:0;padding:0;height:100%;overflow:hidden;overscroll-behavior:none}
|
||
body{background:var(--bg);font-family:-apple-system,BlinkMacSystemFont,"PingFang SC","Hiragino Sans GB","Microsoft YaHei","Segoe UI",Roboto,sans-serif;
|
||
color:var(--ink);-webkit-font-smoothing:antialiased;font-size:14px;line-height:1.5;-webkit-text-size-adjust:100%}
|
||
button{font:inherit;color:inherit;border:0;background:none;padding:0;cursor:pointer}
|
||
.ic{width:16px;height:16px;flex:none;display:inline-block;vertical-align:middle;fill:none;stroke:currentColor;stroke-width:2;stroke-linecap:round;stroke-linejoin:round}
|
||
#sc{position:fixed;inset:0;overflow-y:auto;overflow-x:hidden;-webkit-overflow-scrolling:touch;overscroll-behavior:none;padding-bottom:calc(96px + env(safe-area-inset-bottom));
|
||
background:radial-gradient(260px 200px at 100% 0,rgba(255,196,214,.5),rgba(255,196,214,0) 70%),radial-gradient(240px 200px at 0 60px,rgba(255,206,170,.45),rgba(255,206,170,0) 70%),var(--bg)}
|
||
#sc::-webkit-scrollbar{display:none}
|
||
.nav{position:sticky;top:0;z-index:10;display:flex;align-items:center;height:46px;padding:env(safe-area-inset-top) 10px 0;background:rgba(248,243,239,.88);-webkit-backdrop-filter:blur(14px);backdrop-filter:blur(14px)}
|
||
.nav .bk{width:36px;height:36px;display:grid;place-items:center;border-radius:50%}
|
||
.nav .bk .ic{width:22px;height:22px}
|
||
.nav h1{flex:1;margin:0;text-align:center;font-size:17px;font-weight:900;letter-spacing:.5px}
|
||
.nav h1 span{background:linear-gradient(transparent 60%,#FFD0DC 60%,#FFD0DC 92%,transparent 92%);padding:0 3px}
|
||
.nav i{width:36px}
|
||
main{padding:6px 16px 0}
|
||
|
||
/* 头卡：投稿统计 + 奖励说明 */
|
||
.hero{position:relative;padding:18px 18px 16px;border-radius:24px;overflow:hidden;color:#fff;background:linear-gradient(135deg,#FF8A65,#F0607E 70%,#D8609E);box-shadow:0 14px 28px -18px #E8506E}
|
||
.hero::after{content:"";position:absolute;right:-40px;top:-50px;width:170px;height:170px;border-radius:50%;background:rgba(255,255,255,.14)}
|
||
.hero small{position:relative;font-size:12px;opacity:.9}
|
||
.hero b{position:relative;display:block;margin-top:2px;font-size:21px;font-weight:900;line-height:1.35}
|
||
.hero .rw{position:relative;display:inline-flex;align-items:center;gap:5px;margin-top:8px;height:26px;padding:0 10px;border-radius:99px;background:rgba(255,255,255,.2);font-size:12px;font-weight:700}
|
||
.hero .rw em{font-style:normal;font-weight:900;color:#FFF1B8}
|
||
.stat{position:relative;display:grid;grid-template-columns:repeat(3,1fr);margin-top:14px;padding:10px 0;border-radius:16px;background:rgba(255,255,255,.95);color:var(--ink)}
|
||
.stat div{text-align:center}
|
||
.stat div+div{border-left:1px solid #F3E6E1}
|
||
.stat strong{display:block;font-size:20px;font-weight:900;line-height:1.2;font-family:Georgia,serif}
|
||
.stat span{font-size:11.5px;color:var(--muted)}
|
||
.stat .p strong{color:#D98A1E}.stat .a strong{color:#21A08A}.stat .r strong{color:#A08B85}
|
||
|
||
/* 筛选 */
|
||
.fl{display:flex;gap:8px;margin:18px 0 4px;overflow-x:auto;scrollbar-width:none}
|
||
.fl::-webkit-scrollbar{display:none}
|
||
.fl button{flex:none;height:32px;padding:0 14px;border-radius:99px;background:#fff;border:1px solid #F0E2DA;font-size:13px;font-weight:800;color:#7A6663}
|
||
.fl button.on{background:#2B2320;border-color:#2B2320;color:#fff}
|
||
.fl button i{font-style:normal;margin-left:3px;opacity:.6}
|
||
|
||
/* 稿件卡 */
|
||
.it{position:relative;margin-top:12px;padding:14px 14px 13px;border-radius:20px;background:#fff;box-shadow:0 4px 14px rgba(170,110,90,.08);animation:in .3s ease both}
|
||
@keyframes in{from{opacity:0;transform:translateY(8px)}to{opacity:1;transform:none}}
|
||
.it::before{content:"";position:absolute;left:0;top:18px;bottom:18px;width:4px;border-radius:0 4px 4px 0;background:var(--sc)}
|
||
.it.pending{--sc:#F2A93B;--sl:#FFF4E2;--st:#B8700E}
|
||
.it.approved{--sc:#2BB39A;--sl:#E0F5F0;--st:#1D7A69}
|
||
.it.rejected{--sc:#C9B6B0;--sl:#F4EEEC;--st:#8A7570}
|
||
.ih{display:flex;align-items:center;gap:6px;font-size:12px;color:var(--muted)}
|
||
.ih .st{flex:none;display:inline-flex;align-items:center;gap:3px;height:22px;padding:0 8px;border-radius:7px;background:var(--sl);color:var(--st);font-size:11.5px;font-weight:800}
|
||
.ih .st .ic{width:12px;height:12px;stroke-width:2.6}
|
||
.ih .tn{flex:1;min-width:0;white-space:nowrap;overflow:hidden;text-overflow:ellipsis}
|
||
.ih .nw{flex:none;height:18px;padding:0 6px;border-radius:99px;background:#F0453A;color:#fff;font-size:10.5px;font-style:normal;font-weight:800;line-height:18px}
|
||
.it h3{margin:9px 0 0;font-size:16px;font-weight:900;line-height:1.45}
|
||
.it .bd{margin:4px 0 0;font-size:13px;line-height:1.65;color:#7A6663;display:-webkit-box;-webkit-line-clamp:2;-webkit-box-orient:vertical;overflow:hidden}
|
||
.pics{display:flex;gap:6px;margin-top:10px}
|
||
.pics img{width:72px;height:72px;border-radius:10px;object-fit:cover;background:#F3EAE5}
|
||
.pics span{width:72px;height:72px;border-radius:10px;display:grid;place-items:center;background:#F6F0EE;color:var(--muted);font-size:13px;font-weight:800}
|
||
.nt{margin-top:11px;padding:9px 11px;border-radius:12px;background:var(--sl);font-size:12.5px;line-height:1.6;color:var(--st)}
|
||
.nt em{font-style:normal;font-weight:900;color:#E8473A}
|
||
.ia{display:flex;justify-content:flex-end;gap:8px;margin-top:10px}
|
||
.ia button{height:30px;padding:0 13px;border-radius:99px;border:1px solid #EBDDD7;font-size:12.5px;font-weight:800;color:#6E5A55}
|
||
.ia button.pr{border-color:transparent;background:var(--sc);color:#fff}
|
||
|
||
/* 空 / 未登录 */
|
||
.em{margin-top:16px;padding:30px 20px 26px;border-radius:22px;background:#fff;text-align:center}
|
||
.em svg{width:86px;height:86px}
|
||
.em b{display:block;margin-top:8px;font-size:16px;font-weight:900}
|
||
.em p{margin:4px 0 0;font-size:13px;color:var(--muted);line-height:1.6}
|
||
.sk{height:120px;margin-top:12px;border-radius:20px;background:linear-gradient(90deg,#F4ECE8 0,#FBF6F3 40%,#F4ECE8 80%);background-size:200% 100%;animation:sk 1.2s linear infinite}
|
||
@keyframes sk{to{background-position:-200% 0}}
|
||
|
||
/* 底部写稿 */
|
||
.wb{position:fixed;left:0;right:0;bottom:0;z-index:10;padding:12px 16px calc(12px + env(safe-area-inset-bottom));background:linear-gradient(rgba(248,243,239,0),rgba(248,243,239,.95) 35%)}
|
||
.wb button{display:flex;align-items:center;justify-content:center;gap:6px;width:100%;height:48px;border-radius:99px;background:var(--btn);color:#fff;font-size:16px;font-weight:900;box-shadow:0 10px 20px -10px #EE5A3E}
|
||
.wb .ic{width:18px;height:18px;stroke-width:2.4}
|
||
</style>
|
||
</head>
|
||
<body>
|
||
<div id="sc">
|
||
<div class="nav">
|
||
<button class="bk" id="back" type="button" aria-label="返回"><svg class="ic" viewBox="0 0 24 24"><path d="M15 5l-7 7 7 7"/></svg></button>
|
||
<h1><span>我的投稿</span></h1><i></i>
|
||
</div>
|
||
<main>
|
||
<div class="hero" id="hero"><small>分享你的孕育故事</small><b>写下的每一篇，都可能帮到另一个妈妈</b>
|
||
<span class="rw">被选中可得 <em>¥30</em> 现金 + <em>500</em> 兜豆</span>
|
||
<div class="stat"><div class="p"><strong id="nP">–</strong><span>审核中</span></div><div class="a"><strong id="nA">–</strong><span>已通过</span></div><div class="r"><strong id="nR">–</strong><span>未通过</span></div></div>
|
||
</div>
|
||
<div class="fl" id="fl"></div>
|
||
<div id="list"><div class="sk"></div><div class="sk"></div></div>
|
||
</main>
|
||
</div>
|
||
<div class="wb"><button type="button" id="write"><svg class="ic" viewBox="0 0 24 24"><path d="M12 20h9M16.5 3.5a2.1 2.1 0 013 3L7 19l-4 1 1-4z"/></svg>写新的故事</button></div>
|
||
|
||
<script src="../topics.js?v=26110243"></script>
|
||
<script>
|
||
(function () {
|
||
'use strict';
|
||
var $ = function (s) { return document.querySelector(s); };
|
||
var esc = function (s) { return String(s == null ? '' : s).replace(/[&<>"]/g, function (c) { return { '&': '&', '<': '<', '>': '>', '"': '"' }[c]; }); };
|
||
function param(name) {
|
||
try {
|
||
var h = (location.hash.slice(1) || '') + '&' + (location.search.slice(1) || '');
|
||
var m = h.match(new RegExp('(?:^|[&#])' + name + '=([^&#]*)'));
|
||
return m ? decodeURIComponent(m[1]).split('?')[0] : '';
|
||
} catch (e) { return ''; }
|
||
}
|
||
var OPENID = param('openid'), UNION = param('unionid');
|
||
var API = '/api/mp/public/mama-box/plaza';
|
||
var idq = function () { return 'openid=' + encodeURIComponent(OPENID) + (UNION ? '&unionid=' + encodeURIComponent(UNION) : ''); };
|
||
var TBY = {}; (window.GC_TOPICS || []).forEach(function (t) { TBY[t.id] = t; });
|
||
var ST = { pending: ['审核中', 'M12 3a9 9 0 100 18 9 9 0 000-18zM12 7.5V12l3 2'], approved: ['已通过', 'M5 12l5 5 9-10'], rejected: ['未通过', 'M7 7l10 10M17 7L7 17'] };
|
||
var LIST = [], NEW = {}, F = '';
|
||
var plaza = function (q) { return '../' + (q ? '?' + q : '') + location.hash; };
|
||
var fmtDay = function (ms) { var d = new Date(ms); return (d.getMonth() + 1) + '月' + d.getDate() + '日'; };
|
||
|
||
function render() {
|
||
var n = { pending: 0, approved: 0, rejected: 0 };
|
||
LIST.forEach(function (p) { if (n[p.status] != null) n[p.status]++; });
|
||
$('#nP').textContent = n.pending; $('#nA').textContent = n.approved; $('#nR').textContent = n.rejected;
|
||
$('#fl').innerHTML = LIST.length ? [['', '全部', LIST.length], ['pending', '审核中', n.pending], ['approved', '已通过', n.approved], ['rejected', '未通过', n.rejected]].map(function (f) {
|
||
return '<button type="button" data-f="' + f[0] + '"' + (F === f[0] ? ' class="on"' : '') + '>' + f[1] + '<i>' + f[2] + '</i></button>';
|
||
}).join('') : '';
|
||
var l = LIST.filter(function (p) { return !F || p.status === F; });
|
||
if (!LIST.length) { $('#list').innerHTML = empty('还没有投稿', '孕期的小发现、踩过的坑、温暖的瞬间，<br>都值得写下来分享给其他妈妈'); return; }
|
||
if (!l.length) { $('#list').innerHTML = '<div class="em"><p>这里暂时没有稿件</p></div>'; return; }
|
||
$('#list').innerHTML = l.map(function (p, i) {
|
||
var t = TBY[p.topic], s = ST[p.status] || ['', ''], im = p.images || [];
|
||
return '<div class="it ' + p.status + '" style="animation-delay:' + Math.min(i, 8) * 40 + 'ms">' +
|
||
'<div class="ih"><span class="st"><svg class="ic" viewBox="0 0 24 24"><path d="' + s[1] + '"/></svg>' + s[0] + '</span>' +
|
||
'<span class="tn">' + ((t ? t.name : p.topicName) ? '#' + esc(t ? t.name : p.topicName) + '# · ' : '') + fmtDay(p.at) + '</span>' + (NEW[p.id] ? '<em class="nw">新结果</em>' : '') + '</div>' +
|
||
'<h3>' + esc(p.title) + '</h3>' + (p.body ? '<p class="bd">' + esc(p.body) + '</p>' : '') +
|
||
(im.length ? '<div class="pics">' + im.slice(0, 3).map(function (u) { return '<img src="' + esc(u) + '" alt="" loading="lazy">'; }).join('') + (im.length > 3 ? '<span>+' + (im.length - 3) + '</span>' : '') + '</div>' : '') +
|
||
(p.status === 'pending' ? '<div class="nt">正在审核中，有结果会第一时间提醒你</div>' : '') +
|
||
(p.status === 'rejected' ? '<div class="nt">没通过的原因：' + esc(p.reason || '暂不符合展示要求') + '</div><div class="ia"><button type="button" class="pr" data-w="' + esc(p.topic) + '">修改后重新投稿</button></div>' : '') +
|
||
(p.status === 'approved' ? '<div class="nt">已被选中，奖励 <em>¥30</em> 现金 + <em>500</em> 兜豆 · ' + (p.reward === 'paid' ? '已发放' : '待发放') + '</div><div class="ia"><button type="button" class="pr" data-n="' + esc(p.id) + '">去广场看看</button></div>' : '') +
|
||
'</div>';
|
||
}).join('');
|
||
}
|
||
function empty(b, p) {
|
||
return '<div class="em"><svg viewBox="0 0 86 86"><circle cx="43" cy="43" r="40" fill="#FFEDE6"/><rect x="25" y="20" width="36" height="46" rx="6" fill="#fff" stroke="#F0A08A" stroke-width="3"/>' +
|
||
'<path d="M32 33h22M32 42h22M32 51h13" stroke="#F6C2B3" stroke-width="3" stroke-linecap="round"/><path d="M52 58l12-12 4 4-12 12-5 1z" fill="#F77B55"/></svg><b>' + b + '</b><p>' + p + '</p></div>';
|
||
}
|
||
|
||
if (!OPENID) {
|
||
$('#list').innerHTML = empty('请从小程序里打开', '从小程序进入孕妈广场后，才能查看你的投稿');
|
||
$('#nP').textContent = $('#nA').textContent = $('#nR').textContent = '0';
|
||
} else {
|
||
fetch(API + '/mine?' + idq()).then(function (r) { return r.json(); }).then(function (j) {
|
||
var r = (j && j.result) || {};
|
||
LIST = r.list || [];
|
||
var un = r.unread || [];
|
||
un.forEach(function (p) { NEW[p.id] = 1; });
|
||
render();
|
||
if (un.length) fetch(API + '/mine/seen?' + idq(), { method: 'POST', headers: { 'Content-Type': 'application/json' }, body: JSON.stringify({ ids: un.map(function (p) { return p.id; }) }) }).catch(function () {});
|
||
}).catch(function () { $('#list').innerHTML = empty('暂时没加载出来', '网络好像不太顺畅，稍后再试试'); });
|
||
}
|
||
|
||
$('#fl').addEventListener('click', function (e) { var b = e.target.closest('[data-f]'); if (b) { F = b.dataset.f; render(); } });
|
||
$('#list').addEventListener('click', function (e) {
|
||
var w = e.target.closest('[data-w]'); if (w) { location.href = plaza('write=1' + (w.dataset.w ? '&t=' + encodeURIComponent(w.dataset.w) : '')); return; }
|
||
var n = e.target.closest('[data-n]'); if (n) location.href = plaza('n=u-' + encodeURIComponent(n.dataset.n));
|
||
});
|
||
$('#write').addEventListener('click', function () { location.href = plaza('write=1'); });
|
||
$('#back').addEventListener('click', function () {
|
||
var ref = document.referrer || '';
|
||
if (history.length > 1 && ref.indexOf('/guangchang/') >= 0) history.back(); else location.href = plaza('');
|
||
});
|
||
|
||
/* 禁止下拉回弹（同广场页） */
|
||
var sx = 0, sy = 0;
|
||
document.addEventListener('touchstart', function (e) { if (e.touches.length === 1) { sx = e.touches[0].clientX; sy = e.touches[0].clientY; } }, { passive: true });
|
||
document.addEventListener('touchmove', function (e) {
|
||
if (e.touches.length !== 1) { if (e.cancelable) e.preventDefault(); return; }
|
||
var dx = e.touches[0].clientX - sx, dy = e.touches[0].clientY - sy;
|
||
if (Math.abs(dy) <= Math.abs(dx)) return;
|
||
var el = e.target;
|
||
while (el && el !== document.body && el !== document.documentElement) {
|
||
if (el.nodeType === 1) {
|
||
var oy = getComputedStyle(el).overflowY;
|
||
if ((oy === 'auto' || oy === 'scroll') && el.scrollHeight > el.clientHeight + 1) {
|
||
if (dy > 0 && el.scrollTop > 0) return;
|
||
if (dy < 0 && el.scrollTop + el.clientHeight < el.scrollHeight - 1) return;
|
||
}
|
||
}
|
||
el = el.parentNode;
|
||
}
|
||
if (e.cancelable) e.preventDefault();
|
||
}, { passive: false });
|
||
})();
|
||
</script>
|
||
</body>
|
||
</html>
|