陈世睿
267 lines
15 KiB
HTML
267 lines
15 KiB
HTML
<!DOCTYPE html>
|
||
<html lang="zh-CN">
|
||
<head>
|
||
|
||
<meta charset="UTF-8">
|
||
<link rel="stylesheet" href="../shared/fonts.css">
|
||
<meta name="viewport" content="width=device-width, initial-scale=1.0, maximum-scale=1.0, user-scalable=no, viewport-fit=cover">
|
||
<title>反馈历史 · 傻瓜比价</title>
|
||
<style>
|
||
* { margin: 0; padding: 0; box-sizing: border-box; -webkit-tap-highlight-color: transparent; }
|
||
|
||
:root {
|
||
--color-primary: #FFD600;
|
||
--color-on-primary: #1A1A1A;
|
||
--color-surface-page: #F5F5F5;
|
||
--color-surface-card: #FFFFFF;
|
||
--color-surface-muted: #FAFAFA;
|
||
--color-ink: #1A1A1A;
|
||
--color-ink-muted: #666666;
|
||
--color-ink-subtle: #999999;
|
||
--color-ink-disabled: #CCCCCC;
|
||
--color-divider: #F0F0F0;
|
||
--color-divider-strong: #E5E5E5;
|
||
--color-state-success-dark: #2E7D32;
|
||
--color-state-success-bg: #E8F5E9;
|
||
--color-state-warning-bg: #FFF3E0;
|
||
--color-state-warning-ink: #B57400;
|
||
--color-state-danger: #E53935;
|
||
--color-state-danger-bg: #FFEBEE;
|
||
--color-coin-deep: #5A3A00;
|
||
--radius: 14px;
|
||
--radius-sm: 10px;
|
||
--radius-pill: 999px;
|
||
--shadow-card: 0 1px 2px rgba(0,0,0,.03);
|
||
--font-num: 'DIN Alternate', 'DIN Pro', 'SF Pro Display', system-ui;
|
||
}
|
||
|
||
html, body { height: 100%; overflow: hidden; }
|
||
/* 【去框】原型 body 黑底 + flex 居中（浏览器预览用）→ 铺页面色、不居中。 */
|
||
body {
|
||
font-family: 'PuHuiTi', -apple-system, BlinkMacSystemFont, 'PingFang SC', 'Helvetica Neue', sans-serif;
|
||
background: var(--color-surface-page);
|
||
color: var(--color-ink);
|
||
}
|
||
/* 【去框】原型 .device 375x812 预览框 → 全屏自适应容器。 */
|
||
.device { position: relative; width: 100%; height: 100%; background: var(--color-surface-page); overflow: hidden; }
|
||
.screen { position: absolute; inset: 0; display: flex; flex-direction: column; overflow: hidden; }
|
||
|
||
/* 隐藏原型假状态栏（顶部状态栏交给原生） */
|
||
.statusbar { display: none; }
|
||
|
||
.topnav { height: 48px; display: flex; align-items: center; padding: 0 12px; background: var(--color-surface-page); flex-shrink: 0; position: relative; }
|
||
.topnav-back { width: 32px; height: 32px; display: flex; align-items: center; justify-content: center; cursor: pointer; background: none; border: none; padding: 0; }
|
||
.topnav-back:active { opacity: .5; }
|
||
.topnav-title { position: absolute; left: 50%; transform: translateX(-50%); font-size: 17px; font-weight: 600; color: var(--color-ink); }
|
||
|
||
.scroll { flex: 1; overflow-y: auto; -webkit-overflow-scrolling: touch; padding: 8px 14px calc(24px + env(safe-area-inset-bottom, 0px)); }
|
||
.scroll::-webkit-scrollbar { display: none; }
|
||
|
||
/* === 顶部汇总：反馈采纳累计奖励 === */
|
||
.fb-summary { display: flex; align-items: center; justify-content: space-between; background: linear-gradient(135deg, #FFF3CC 0%, #FFE9A8 100%); border-radius: var(--radius); padding: 14px 16px; margin: 4px 0 14px; box-shadow: inset 0 1px 0 rgba(255,255,255,.6), 0 2px 8px rgba(255,179,0,.18); }
|
||
.fb-summary-label { font-size: 12px; font-weight: 400; color: var(--color-coin-deep); opacity: .8; }
|
||
.fb-summary-num { font-family: var(--font-num); font-size: 28px; font-weight: 700; color: var(--color-coin-deep); line-height: 1.2; margin-top: 2px; }
|
||
.fb-summary-num .unit { font-family: 'PuHuiTi', -apple-system, 'PingFang SC', sans-serif; font-size: 13px; font-weight: 600; margin-left: 4px; }
|
||
.fb-summary-sub { font-size: 11px; font-weight: 400; color: var(--color-coin-deep); opacity: .7; margin-top: 4px; }
|
||
.fb-summary-coin { width: 52px; height: 52px; flex-shrink: 0; }
|
||
|
||
.filter-row { display: flex; gap: 8px; padding: 0 0 12px; overflow-x: auto; }
|
||
.filter-row::-webkit-scrollbar { display: none; }
|
||
.filter-chip { flex-shrink: 0; padding: 6px 14px; border-radius: var(--radius-pill); font-size: 13px; font-weight: 400; color: var(--color-ink-muted); background: var(--color-surface-card); border: .5px solid var(--color-divider-strong); cursor: pointer; }
|
||
.filter-chip.active { background: var(--color-ink); color: #fff; font-weight: 600; border-color: var(--color-ink); }
|
||
.filter-chip .count { margin-left: 4px; opacity: .7; font-weight: 400; }
|
||
|
||
.rec-card { background: var(--color-surface-card); border-radius: var(--radius); padding: 14px; margin-bottom: 12px; box-shadow: var(--shadow-card); overflow: hidden; }
|
||
.rec-head { display: flex; align-items: flex-start; justify-content: space-between; gap: 10px; }
|
||
.fb-headtext { flex: 1; min-width: 0; }
|
||
.fb-type-row { display: flex; align-items: center; gap: 8px; }
|
||
.fb-date { font-size: 12px; font-weight: 400; color: var(--color-ink-subtle); font-family: var(--font-num); }
|
||
.fb-content { font-size: 14px; font-weight: 400; color: var(--color-ink); line-height: 1.6; margin-top: 8px; word-break: break-word; }
|
||
|
||
/* 截图缩略 */
|
||
.fb-shots { display: flex; flex-wrap: wrap; gap: 6px; margin-top: 10px; }
|
||
.fb-shot { width: 48px; height: 48px; border-radius: 8px; background: var(--color-divider); border: .5px solid var(--color-divider-strong); overflow: hidden; display: flex; align-items: center; justify-content: center; flex-shrink: 0; }
|
||
.fb-shot img { width: 100%; height: 100%; object-fit: cover; display: block; }
|
||
|
||
.badge { flex-shrink: 0; display: inline-flex; align-items: center; gap: 3px; padding: 3px 8px; border-radius: var(--radius-pill); font-size: 11px; font-weight: 700; line-height: 1.2; white-space: nowrap; }
|
||
.badge svg { width: 12px; height: 12px; }
|
||
.badge-pending { background: var(--color-state-warning-bg); color: var(--color-state-warning-ink); }
|
||
.badge-success { background: var(--color-state-success-bg); color: var(--color-state-success-dark); }
|
||
.badge-danger { background: var(--color-state-danger-bg); color: var(--color-state-danger); }
|
||
|
||
/* 已采纳：金币奖励条 */
|
||
.rec-reward { margin-top: 12px; background: linear-gradient(90deg, #FFF8E1 0%, #FFFDE7 100%); border-radius: var(--radius-sm); padding: 8px 12px; display: flex; align-items: center; gap: 4px; font-size: 13px; color: var(--color-coin-deep); font-weight: 400; }
|
||
.rec-reward img { width: 16px; height: 16px; margin-right: 2px; }
|
||
.rec-reward-num { font-family: var(--font-num); font-size: 15px; font-weight: 700; }
|
||
|
||
/* 审核中：进度提示 */
|
||
.fb-pending-note { margin-top: 12px; background: var(--color-surface-muted); border-radius: var(--radius-sm); padding: 8px 12px; font-size: 12px; color: var(--color-ink-subtle); line-height: 1.5; }
|
||
|
||
/* 未采纳：原因 */
|
||
.rec-reject { margin-top: 12px; background: var(--color-state-danger-bg); border-radius: var(--radius-sm); padding: 10px 12px; font-size: 13px; color: var(--color-state-danger); line-height: 1.5; }
|
||
.rec-reject b { font-weight: 600; }
|
||
|
||
.list-end { text-align: center; padding: 24px 0 8px; font-size: 12px; color: var(--color-ink-disabled); font-weight: 400; }
|
||
.list-empty { text-align: center; padding: 56px 0; font-size: 13px; color: var(--color-ink-subtle); }
|
||
|
||
/* === 空态：无任何反馈记录 === */
|
||
.empty-wrap { flex: 1; display: none; flex-direction: column; align-items: center; justify-content: center; text-align: center; padding: 0 40px 80px; }
|
||
.empty-icon { width: 96px; height: 96px; border-radius: 50%; background: var(--color-divider); display: flex; align-items: center; justify-content: center; margin-bottom: 20px; }
|
||
.empty-icon svg { width: 44px; height: 44px; }
|
||
.empty-title { font-size: 17px; font-weight: 600; color: var(--color-ink); margin-bottom: 8px; }
|
||
.empty-sub { font-size: 13px; font-weight: 400; color: var(--color-ink-subtle); line-height: 1.6; margin-bottom: 28px; }
|
||
.empty-cta { border: none; cursor: pointer; font-family: inherit; font-size: 15px; font-weight: 700; color: var(--color-on-primary); padding: 0 32px; height: 44px; border-radius: 24px; background: linear-gradient(180deg, #FFE066 0%, #FFD600 100%); box-shadow: inset 0 1px 0 rgba(255,255,255,.7), 0 6px 18px rgba(255,179,0,.35); transition: transform .12s ease, opacity .15s ease; }
|
||
.empty-cta:active { transform: translateY(1px); opacity: .9; }
|
||
</style>
|
||
</head>
|
||
<body>
|
||
|
||
<div class="device" id="app">
|
||
<div class="screen active" id="feedbackHistory">
|
||
<div class="topnav">
|
||
<button class="topnav-back" onclick="goBack()" aria-label="返回">
|
||
<svg width="22" height="22" viewBox="0 0 24 24" fill="none" stroke="#1A1A1A" stroke-width="2.2" stroke-linecap="round" stroke-linejoin="round"><path d="M15 18l-6-6 6-6"/></svg>
|
||
</button>
|
||
<div class="topnav-title">反馈历史</div>
|
||
</div>
|
||
|
||
<div class="scroll" id="fbhScroll">
|
||
<div class="fb-summary" id="fbhSummary" style="display: none;">
|
||
<div>
|
||
<div class="fb-summary-label">反馈采纳累计奖励</div>
|
||
<div class="fb-summary-num"><span id="fbhCoinSum">0</span><span class="unit">金币</span></div>
|
||
<div class="fb-summary-sub">已采纳 <span id="fbhAdoptCount">0</span> 条 · 反馈越真实详细，奖励越高</div>
|
||
</div>
|
||
<img class="fb-summary-coin" src="assets/welfare/index/checkin-coin-single.png" alt="">
|
||
</div>
|
||
|
||
<div class="filter-row">
|
||
<div class="filter-chip active" data-st="all">全部<span class="count" id="fbhCntAll">0</span></div>
|
||
<div class="filter-chip" data-st="pending">审核中<span class="count" id="fbhCntPending">0</span></div>
|
||
<div class="filter-chip" data-st="adopted">已采纳<span class="count" id="fbhCntAdopted">0</span></div>
|
||
<div class="filter-chip" data-st="rejected">未采纳<span class="count" id="fbhCntRejected">0</span></div>
|
||
</div>
|
||
|
||
<div id="fbhList"></div>
|
||
<div class="list-end" id="fbhListEnd" style="display: none;"></div>
|
||
</div>
|
||
|
||
<div class="empty-wrap" id="fbhEmpty">
|
||
<div class="empty-icon">
|
||
<svg viewBox="0 0 24 24" fill="none" stroke="#B3B3B3" stroke-width="1.6" stroke-linecap="round" stroke-linejoin="round"><path d="M21 11.5a8.38 8.38 0 0 1-.9 3.8 8.5 8.5 0 0 1-7.6 4.7 8.38 8.38 0 0 1-3.8-.9L3 21l1.9-5.7a8.38 8.38 0 0 1-.9-3.8 8.5 8.5 0 0 1 4.7-7.6 8.38 8.38 0 0 1 3.8-.9h.5a8.48 8.48 0 0 1 8 8v.5z"/><path d="M8.5 11h.01M12 11h.01M15.5 11h.01"/></svg>
|
||
</div>
|
||
<div class="empty-title">还没有反馈记录</div>
|
||
<div class="empty-sub">你的每条建议我们都会认真查看<br>被采纳还能领金币奖励</div>
|
||
<button class="empty-cta" onclick="goBack()">去反馈</button>
|
||
</div>
|
||
</div>
|
||
</div>
|
||
|
||
<script src="../shared/bridge.js"></script>
|
||
<script src="../shared/api.js"></script>
|
||
<script>
|
||
(function () {
|
||
var scroll = document.getElementById('fbhScroll');
|
||
var listEl = document.getElementById('fbhList');
|
||
var emptyEl = document.getElementById('fbhEmpty');
|
||
var summaryEl = document.getElementById('fbhSummary');
|
||
var listEnd = document.getElementById('fbhListEnd');
|
||
var RECORDS = [], COUNTS = { all: 0, pending: 0, adopted: 0, rejected: 0 };
|
||
var filter = 'all';
|
||
|
||
function esc(s) { return String(s == null ? '' : s).replace(/[&<>"']/g, function (c) { return { '&': '&', '<': '<', '>': '>', '"': '"', "'": ''' }[c]; }); }
|
||
// created_at 取前 10 位（YYYY-MM-DD），避免时区换算偏移
|
||
function fmtDate(iso) { var s = String(iso || ''); return s.length >= 10 ? s.slice(0, 10) : s; }
|
||
|
||
var COIN = 'assets/welfare/index/checkin-coin-single.png';
|
||
var BADGE = {
|
||
pending: { cls: 'badge-pending', text: '审核中', icon: '<svg viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="2.5" stroke-linecap="round" stroke-linejoin="round"><circle cx="12" cy="12" r="9"/><path d="M12 7v5l3 2"/></svg>' },
|
||
adopted: { cls: 'badge-success', text: '已采纳', icon: '<svg viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="2.8" stroke-linecap="round" stroke-linejoin="round"><path d="M5 12.5l4.5 4.5L19 7"/></svg>' },
|
||
rejected: { cls: 'badge-danger', text: '未采纳', icon: '<svg viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="2.6" stroke-linecap="round" stroke-linejoin="round"><circle cx="12" cy="12" r="9"/><path d="M9 9l6 6M15 9l-6 6"/></svg>' }
|
||
};
|
||
|
||
function cardHtml(rec) {
|
||
var st = BADGE[rec.status] || BADGE.pending;
|
||
var shots = '';
|
||
if (rec.images && rec.images.length) {
|
||
shots = '<div class="fb-shots">' + rec.images.map(function (u) { return '<div class="fb-shot"><img src="' + esc(u) + '" alt=""></div>'; }).join('') + '</div>';
|
||
}
|
||
var extra = '';
|
||
if (rec.status === 'adopted') {
|
||
extra = '<div class="rec-reward"><img src="' + COIN + '" alt=""><span>+</span><span class="rec-reward-num">' + (rec.reward_coins || 0) + '</span><span>金币已到账</span></div>';
|
||
} else if (rec.status === 'rejected') {
|
||
extra = '<div class="rec-reject"><b>未采纳原因：</b>' + esc(rec.reject_reason || '经评估，本次反馈暂未采纳。') + '</div>';
|
||
} else {
|
||
extra = '<div class="fb-pending-note">我们正在认真查看，预计 5 个工作日内完成审核，采纳后金币自动到账。</div>';
|
||
}
|
||
return '<div class="rec-card"><div class="rec-head"><div class="fb-headtext"><div class="fb-type-row"><span class="fb-date">' + esc(fmtDate(rec.created_at)) + '</span></div><div class="fb-content">' + esc(rec.content) + '</div></div><span class="badge ' + st.cls + '">' + st.icon + st.text + '</span></div>' + shots + extra + '</div>';
|
||
}
|
||
|
||
function currentList() { return filter === 'all' ? RECORDS : RECORDS.filter(function (r) { return r.status === filter; }); }
|
||
|
||
// 汇总卡：当前筛选视图里有「已采纳」≥1 才显示（对齐原型 refreshSummary）
|
||
function refreshSummary(view) {
|
||
var adopted = view.filter(function (r) { return r.status === 'adopted'; });
|
||
if (!adopted.length) { summaryEl.style.display = 'none'; return; }
|
||
summaryEl.style.display = 'flex';
|
||
var sum = adopted.reduce(function (s, r) { return s + (r.reward_coins || 0); }, 0);
|
||
document.getElementById('fbhCoinSum').textContent = sum.toLocaleString('en-US');
|
||
document.getElementById('fbhAdoptCount').textContent = adopted.length;
|
||
}
|
||
|
||
// chip 计数：用后端全量 counts（固定，不随筛选变）
|
||
function renderCounts() {
|
||
document.getElementById('fbhCntAll').textContent = COUNTS.all || 0;
|
||
document.getElementById('fbhCntPending').textContent = COUNTS.pending || 0;
|
||
document.getElementById('fbhCntAdopted').textContent = COUNTS.adopted || 0;
|
||
document.getElementById('fbhCntRejected').textContent = COUNTS.rejected || 0;
|
||
}
|
||
|
||
function render() {
|
||
if (!RECORDS.length) { scroll.style.display = 'none'; emptyEl.style.display = 'flex'; return; }
|
||
emptyEl.style.display = 'none'; scroll.style.display = '';
|
||
var view = currentList();
|
||
if (!view.length) {
|
||
listEl.innerHTML = '<div class="list-empty">暂无该状态的反馈</div>';
|
||
listEnd.style.display = 'none';
|
||
} else {
|
||
listEl.innerHTML = view.map(cardHtml).join('');
|
||
listEnd.style.display = '';
|
||
listEnd.textContent = '— 已显示全部 ' + view.length + ' 条 —';
|
||
}
|
||
refreshSummary(view);
|
||
}
|
||
|
||
Array.prototype.slice.call(document.querySelectorAll('.filter-chip')).forEach(function (chip) {
|
||
chip.addEventListener('click', function () {
|
||
document.querySelectorAll('.filter-chip').forEach(function (c) { c.classList.remove('active'); });
|
||
chip.classList.add('active');
|
||
filter = chip.getAttribute('data-st') || 'all';
|
||
render();
|
||
});
|
||
});
|
||
|
||
async function load() {
|
||
var data = null;
|
||
try { if (window.SGApi) data = await SGApi.get('/feedback/records'); } catch (e) {}
|
||
if (data) { RECORDS = data.records || []; COUNTS = data.counts || COUNTS; }
|
||
else { RECORDS = []; }
|
||
renderCounts();
|
||
render();
|
||
}
|
||
load();
|
||
|
||
// 返回 / 「去反馈」：closePage 回意见反馈页（对齐原生 onGoFeedback = popBackStack）
|
||
window.goBack = function () {
|
||
if (window.SGBridge && SGBridge.closePage) { SGBridge.closePage(); }
|
||
else if (history.length > 1) { history.back(); }
|
||
};
|
||
|
||
// 回前台刷新
|
||
if (window.SGBridge && SGBridge.on) { SGBridge.on('onResume', load); }
|
||
})();
|
||
</script>
|
||
|
||
</body>
|
||
</html>
|