muzhizhuan/app.js · 约 11011 字符
1/* 拇指赚 - 全局交互脚本（零依赖） */2(function () {3 "use strict";4 var D = window.DATA;5 var $ = function (s, el) { return (el || document).querySelector(s); };6 var $$ = function (s, el) { return Array.prototype.slice.call((el || document).querySelectorAll(s)); };78 /* ===== Toast ===== */9 var toastEl = null;10 function toast(msg) {11 if (!toastEl) {12 toastEl = document.createElement("div");13 toastEl.className = "toast";14 document.body.appendChild(toastEl);15 }16 toastEl.textContent = msg;17 toastEl.classList.add("show");18 clearTimeout(toast._t);19 toast._t = setTimeout(function () { toastEl.classList.remove("show"); }, 1800);20 }2122 /* ===== 金额格式化 ===== */23 function money(n) { return Number(n).toFixed(2); }2425 /* ===== 进度条宽度 ===== */26 function pct(quota, total) { return Math.max(4, Math.round((quota / total) * 100)); }2728 /* ===== 任务卡片 HTML ===== */29 function taskCard(t) {30 return '<div class="task-card" data-id="' + t.id + '">' +31 '<div class="tc-main">' +32 '<div class="tc-tags">' +33 (t.tags && t.tags.length ? t.tags.map(function (tag) {34 var cls = tag === "新" ? "new" : tag === "高额" ? "high" : tag === "推荐" ? "rec" : "hot";35 return '<span class="tag ' + cls + '">' + tag + '</span>';36 }).join("") : "") +37 (t.hot ? '<span class="tag hot">🔥 热门</span>' : "") +38 '</div>' +39 '<h3>' + t.title + '</h3>' +40 '<div class="tc-meta">⏱ <b>' + t.time + '</b> 📝 <b>' + t.count + '</b> ✅ 通过率 <b>' + t.pass + '</b></div>' +41 '<div class="tc-quota">剩余配额 ' + t.quota + ' 份 · ' + t.brand +42 '<span class="qbar"><i style="width:' + pct(t.quota, t.total) + '%"></i></span></div>' +43 '</div>' +44 '<div class="tc-right">' +45 '<div class="price"><small>¥</small>' + t.price + '</div>' +46 '<a class="go" href="task.html?id=' + t.id + '">去赚钱</a>' +47 '</div>' +48 '</div>';49 }5051 /* ===== 首页任务大厅渲染 ===== */52 function renderTasks() {53 var wrap = $("#taskList");54 if (!wrap) return;55 var cat = "全部";56 var tabs = $("#catTabs");57 if (tabs) {58 tabs.innerHTML = D.categories.map(function (c, i) {59 return '<a href="javascript:;" data-cat="' + c + '" class="' + (i === 0 ? "on" : "") + '">' + c + '</a>';60 }).join("");61 $$("a", tabs).forEach(function (a) {62 a.addEventListener("click", function () {63 $$("a", tabs).forEach(function (x) { x.classList.remove("on"); });64 a.classList.add("on");65 cat = a.getAttribute("data-cat");66 refresh();67 });68 });69 }70 function refresh() {71 var list = cat === "全部" ? D.tasks : D.tasks.filter(function (t) { return t.cat === cat; });72 wrap.innerHTML = list.length ? list.map(taskCard).join("") :73 '<div class="empty">该分类下暂无任务，看看别的吧～</div>';74 $$(".task-card", wrap).forEach(function (card) {75 card.addEventListener("click", function (e) {76 if (e.target.closest(".go")) return; /* 交给链接 */77 window.location.href = "task.html?id=" + card.getAttribute("data-id");78 });79 });80 }81 refresh();82 }8384 /* ===== 任务详情 ===== */85 function renderDetail() {86 if (!$("#dTitle")) return;87 var id = parseInt(new URLSearchParams(location.search).get("id") || "1", 10);88 var t = D.tasks.find(function (x) { return x.id === id; }) || D.tasks[0];89 var dd = D.taskDetail;9091 $("#dTitle").textContent = t.title;92 $("#dPrice").textContent = "¥" + t.price;93 $("#dMeta").innerHTML = '⏱ ' + t.time + ' 📝 ' + t.count + ' ✅ 通过率 ' + t.pass +94 ' <br>剩余配额 ' + t.quota + ' 份 · ' + t.brand;95 $("#dTags").innerHTML = (t.tags || []).map(function (tag) { return '<span>' + tag + '</span>'; }).join("") +96 (t.hot ? '<span>🔥 热门</span>' : "");97 $("#dQuota").textContent = "剩余配额 " + t.quota + " 份，先到先得";98 $("#dSteps").innerHTML = dd.steps.map(function (s) { return '<li>' + s + '</li>'; }).join("");99 $("#dNotice").textContent = dd.notice;100 $("#dAudit").textContent = "审核说明：" + dd.audit;101 $("#dBrand").textContent = "任务来源：" + t.brand;102103 var priceSmall = $("#dPriceSmall");104 if (priceSmall) priceSmall.textContent = "¥" + t.price;105106 var goBtn = $("#goTask");107 var submitBtn = $("#submitTask");108 if (goBtn) goBtn.addEventListener("click", function () {109 toast("任务已领取！完成后请提交凭证 💪");110 goBtn.style.display = "none";111 if (submitBtn) submitBtn.style.display = "block";112 });113 if (submitBtn) submitBtn.addEventListener("click", function () {114 toast("已提交凭证，审核通过后 ¥" + t.price + " 自动到账 ✅");115 });116 }117118 /* ===== 签到弹窗 ===== */119 function setupSign() {120 var mask = $("#signMask");121 var openers = $$("[data-open='sign']");122 if (!mask) return;123 openers.forEach(function (o) {124 o.addEventListener("click", function (e) {125 e.preventDefault();126 mask.classList.add("show");127 renderSign();128 });129 });130 var close = $("#signClose");131 if (close) close.addEventListener("click", function () { mask.classList.remove("show"); });132 mask.addEventListener("click", function (e) { if (e.target === mask) mask.classList.remove("show"); });133134 function renderSign() {135 var grid = $("#signGrid");136 if (!grid) return;137 var week = ["日", "一", "二", "三", "四", "五", "六"];138 grid.innerHTML = D.sign.days.map(function (d, i) {139 var cls = i < D.sign.done ? "done" : (i === D.sign.today ? "today" : "");140 var mark = i < D.sign.done ? "✓" : (i === D.sign.today ? "签" : d.extra || "");141 return '<div class="sign-day ' + cls + '">' +142 '<div class="dw">周' + week[i] + '</div>' +143 '<div class="dv">¥' + d.amount + '</div>' +144 '<div class="st">' + mark + '</div>' +145 '</div>';146 }).join("");147 }148149 var signBtn = $("#signBtn");150 if (signBtn) signBtn.addEventListener("click", function () {151 if (D.sign.done > D.sign.today) { toast("今天已签到，明天再来哦"); return; }152 var today = D.sign.days[D.sign.today];153 toast("签到成功！+¥" + today.amount + " 已入账 🎉");154 D.sign.done = D.sign.today + 1;155 renderSign();156 });157 }158159 /* ===== 提现弹窗 ===== */160 function setupWithdraw() {161 var mask = $("#withdrawMask");162 var openers = $$("[data-open='withdraw']");163 if (!mask) return;164 openers.forEach(function (o) {165 o.addEventListener("click", function (e) {166 e.preventDefault();167 mask.classList.add("show");168 });169 });170 var close = $("#wdClose");171 if (close) close.addEventListener("click", function () { mask.classList.remove("show"); });172 mask.addEventListener("click", function (e) { if (e.target === mask) mask.classList.remove("show"); });173174 var amountEl = $("#wdAmount");175 $$(".amount-chips a").forEach(function (a) {176 a.addEventListener("click", function (e) {177 e.preventDefault();178 $$(".amount-chips a").forEach(function (x) { x.classList.remove("on"); });179 a.classList.add("on");180 amountEl.value = a.getAttribute("data-v");181 });182 });183 var ok = $("#wdOk");184 if (ok) ok.addEventListener("click", function () {185 var v = parseFloat(amountEl.value || "0", 10);186 if (isNaN(v) || v <= 0) { toast("请输入正确的提现金额"); return; }187 if (v > parseFloat(D.site.user.balance, 10)) { toast("余额不足，先去赚点零花钱吧"); return; }188 toast("提现申请成功，预计 10 分钟内到账 🚀");189 mask.classList.remove("show");190 amountEl.value = "";191 });192 }193194 /* ===== 邀请页 ===== */195 function renderInvite() {196 if (!$("#inviteWrap")) return;197 $("#inviteCode").textContent = D.invite.code;198 $("#ruleList").innerHTML = D.invite.rules.map(function (r) {199 return '<div class="rule-item">' +200 '<div class="ri" style="background:#fff3e2">' + r.ico + '</div>' +201 '<div><div class="rt">' + r.t + '</div><div class="rs">' + r.s + '</div></div>' +202 '<div class="rm">' + r.m + '</div>' +203 '</div>';204 }).join("");205 $("#friendList").innerHTML = D.invite.friends.length ? D.invite.friends.map(function (f) {206 return '<div class="flow">' +207 '<div class="fi">👤</div>' +208 '<div><div class="ft">' + f.nick + '</div><div class="fs">' + f.time + '</div></div>' +209 '<div class="fa in">' + f.earn + '</div>' +210 '</div>';211 }).join("") : '<div class="empty">还没有邀请好友，快去分享吧</div>';212213 $("#copyInvite").addEventListener("click", function (e) {214 e.preventDefault();215 toast("邀请码已复制，快去分享吧 📋");216 });217 }218219 /* ===== 我的页 ===== */220 function setText(sel, val) { var el = $(sel); if (el) el.textContent = val; }221 function renderMine() {222 if (!$("#mineWrap")) return;223 setText("#meNick", D.site.user.nick);224 setText("#meId", "ID: " + D.site.user.id);225 setText("#meBalance", "¥" + D.site.user.balance);226 setText("#meToday", "¥" + D.site.user.today);227 setText("#statTotal", "¥" + money(parseFloat(D.site.user.balance) + 46.5));228 setText("#statBalance", "¥" + D.site.user.balance);229 setText("#statPending", "¥12.00");230 setText("#statWithdrawn", "¥88.00");231232 var flowList = $("#flowList");233 if (flowList) {234 flowList.innerHTML = D.flows.map(function (f) {235 return '<div class="flow">' +236 '<div class="fi">' + f.ico + '</div>' +237 '<div><div class="ft">' + f.t + '</div><div class="fs">' + f.s + '</div></div>' +238 '<div class="fa ' + (f.in ? "in" : "out") + '">' + f.v + '</div>' +239 '</div>';240 }).join("");241 }242243 var faqList = $("#faqList");244 if (faqList) {245 faqList.innerHTML = D.faqs.map(function (f) {246 return '<details><summary>' + f.q + '</summary><p>' + f.a + '</p></details>';247 }).join("");248 }249 }250251 /* ===== 新人红包 ===== */252 function setupNewbie() {253 var btn = $("#newbieBtn");254 if (btn) btn.addEventListener("click", function (e) {255 e.preventDefault();256 toast("已领取 1 元新人红包，完成新手任务再得 2 元 🧧");257 });258 }259260 /* ===== 初始化 ===== */261 document.addEventListener("DOMContentLoaded", function () {262 /* 品牌名注入（只改最后一个文本 span，不动 thumb 图标） */263 $$(".brand").forEach(function (brand) {264 var spans = $$("span", brand);265 var nameSpan = spans[spans.length - 1];266 if (nameSpan && nameSpan.children.length === 0) {267 nameSpan.textContent = D.site.name;268 }269 });270 renderTasks();271 renderDetail();272 setupSign();273 setupWithdraw();274 renderInvite();275 renderMine();276 setupNewbie();277 });278})();279