83 lines
4.6 KiB
JavaScript
83 lines
4.6 KiB
JavaScript
const HomePage = {
|
|
async render() {
|
|
return `<div id="home-content" style="max-width:800px;margin:0 auto;padding:30px 0">
|
|
<div class="tab-nav">
|
|
<button class="active" data-tab="report"><i class="fas fa-flag"></i> 举报</button>
|
|
<button data-tab="suggestion"><i class="fas fa-lightbulb"></i> 建议</button>
|
|
<button data-tab="appeal"><i class="fas fa-gavel"></i> 申诉</button>
|
|
<button data-tab="tracking"><i class="fas fa-search"></i> 追踪</button>
|
|
</div>
|
|
<div id="home-tab"></div>
|
|
</div>`;
|
|
},
|
|
|
|
mount() {
|
|
const tabBtns = document.querySelectorAll('.tab-nav button');
|
|
const tabContent = document.getElementById('home-tab');
|
|
let currentTab = 'report';
|
|
|
|
function switchTab(tab) {
|
|
currentTab = tab;
|
|
tabBtns.forEach(b => b.classList.toggle('active', b.dataset.tab === tab));
|
|
if (tab === 'tracking') renderTracking(tabContent);
|
|
else TicketCreate.render(tabContent, { type: tab, prefill: {}, backLink: null });
|
|
}
|
|
|
|
function renderTracking(ct) {
|
|
const token = document.cookie.split('; ').find(r => r.startsWith('tracking_token='))?.split('=')[1];
|
|
ct.innerHTML = `
|
|
<div class="card"><div class="card-b">
|
|
<div class="form-group"><label>追踪标识 (Cookie自动读取)</label>
|
|
<input id="track-token" value="${token || ''}" placeholder="粘贴追踪标识">
|
|
</div>
|
|
<button class="btn btn-p" onclick="HomePage.searchTracking()"><i class="fas fa-search"></i> 查找我的工单</button>
|
|
<div id="track-result" class="mt-4"></div>
|
|
</div></div>`;
|
|
}
|
|
|
|
tabBtns.forEach(b => b.onclick = () => switchTab(b.dataset.tab));
|
|
switchTab('report');
|
|
|
|
this.searchTracking = async () => {
|
|
const token = document.getElementById('track-token').value.trim();
|
|
if (!token) return alert('请输入追踪标识');
|
|
const ct = document.getElementById('track-result');
|
|
ct.innerHTML = '<div class="loading"><i class="fas fa-spinner"></i></div>';
|
|
try {
|
|
const tickets = await API.get(`/tickets/tracking?token=${token}`);
|
|
ct.innerHTML = tickets.length ? `
|
|
<div class="table-wrap"><table><thead><tr>
|
|
<th>#</th><th>类型</th><th>标题</th><th>状态</th><th>时间</th><th>操作</th>
|
|
</tr></thead><tbody>${tickets.map(t => `
|
|
<tr><td>${t.id}</td><td>${U.badge(t.type,'type')}</td><td>${U.esc(t.title)}</td>
|
|
<td>${U.badge(t.status,'status')}</td><td>${U.date(t.created_at)}</td>
|
|
<td><button class="btn btn-o btn-sm" onclick="App.navigate('tracking');App.showTrackDetail(${t.id},'${token}')">查看</button></td></tr>
|
|
`).join('')}</tbody></table></div>` : '<div class="empty"><i class="fas fa-inbox"></i><p>未找到工单</p></div>';
|
|
} catch (ex) { ct.innerHTML = `<div class="alert alert-e">${ex.message}</div>`; }
|
|
};
|
|
},
|
|
|
|
showTrackDetail(id, token) {
|
|
U.modal(`工单 #${id}`, `<div id="track-detail-content"></div>`, '700px');
|
|
const ct = document.getElementById('track-detail-content');
|
|
U.loading(ct);
|
|
API.get(`/tickets/tracking?token=${token}`).then(tickets => {
|
|
const t = tickets.find(x => x.id === id);
|
|
if (!t) { ct.innerHTML = '<p>未找到</p>'; return; }
|
|
ct.innerHTML = `
|
|
<div class="detail-section"><h4>基本信息</h4>
|
|
<div class="detail-row"><span class="lbl">标题</span><span class="val fb">${U.esc(t.title)}</span></div>
|
|
<div class="detail-row"><span class="lbl">类型</span><span class="val">${U.badge(t.type,'type')}</span></div>
|
|
<div class="detail-row"><span class="lbl">状态</span><span class="val">${U.badge(t.status,'status')}</span></div>
|
|
<div class="detail-row"><span class="lbl">提交者</span><span class="val">${U.esc(t.reporter_game_name)} (UID: ${U.esc(t.reporter_game_uid)})</span></div>
|
|
${t.type==='report'?`
|
|
<div class="detail-row"><span class="lbl">被举报人</span><span class="val">${U.esc(t.target_game_name||'?')} (UID: ${U.esc(t.target_game_uid||'?')})</span></div>
|
|
<div class="detail-row"><span class="lbl">原因</span><span class="val">${U.esc(t.reason)}</span></div>`:''}
|
|
${t.description?`<div class="detail-row"><span class="lbl">详情</span><span class="val">${U.esc(t.description)}</span></div>`:''}
|
|
<div class="detail-row"><span class="lbl">时间</span><span class="val">${U.date(t.created_at)}</span></div>
|
|
</div>
|
|
<p class="tm ts">如需回复，请<a href="#/register" style="color:var(--p)">注册账号</a>后关联此工单。</p>`;
|
|
}).catch(e => { ct.innerHTML = `<div class="alert alert-e">${e.message}</div>`; });
|
|
}
|
|
};
|