keyissue-prototype/miniapp-prototype/app.js

const pages = document.querySelectorAll(".page");
const tabs = document.querySelectorAll("[data-tab]");
const jumpers = document.querySelectorAll("[data-jump]");
const toast = document.querySelector("#toast");

let feedbackCount = 18;
let redCount = 5;
let auditCount = 11;
let warningCount = 4;
let weeklyCount = 55;
let closureRate = 82;

function activatePage(name) {
  pages.forEach((page) => {
    page.classList.toggle("active", page.dataset.page === name);
    if (page.dataset.page === name) page.scrollTop = 0;
  });

  tabs.forEach((tab) => {
    tab.classList.toggle("active", tab.dataset.tab === name);
  });
}

function showToast(message) {
  toast.textContent = message;
  toast.classList.add("show");
  window.clearTimeout(showToast.timer);
  showToast.timer = window.setTimeout(() => {
    toast.textContent = "";
    toast.classList.remove("show");
  }, 2200);
}

function updateMetrics() {
  document.querySelector("#mobileFeedbackCount").textContent = feedbackCount;
  document.querySelector("#mobileRedCount").textContent = redCount;
  document.querySelector("#mobileAuditCount").textContent = auditCount;
  document.querySelector("#warningCount").textContent = `${warningCount} 项`;
  document.querySelector("#pendingAuditText").textContent = `${Math.max(0, auditCount - 8)} 个`;
  document.querySelector("#weeklyCount").textContent = weeklyCount;
  document.querySelector("#closureRate").textContent = `${closureRate}%`;
}

tabs.forEach((tab) => {
  tab.addEventListener("click", () => activatePage(tab.dataset.tab));
});

jumpers.forEach((button) => {
  button.addEventListener("click", () => activatePage(button.dataset.jump));
});

document.querySelectorAll(".segmented button").forEach((button) => {
  button.addEventListener("click", () => {
    button.parentElement.querySelectorAll("button").forEach((item) => {
      item.classList.toggle("selected", item === button);
    });
  });
});

document.querySelector("#feedbackForm").addEventListener("submit", (event) => {
  event.preventDefault();
  const data = new FormData(event.currentTarget);
  const customer = data.get("customer") || "新客户";
  const level = data.get("level");
  const type = data.get("type");
  const status = data.get("status") || "已巡查";

  feedbackCount += 1;
  weeklyCount += 1;
  warningCount += 1;
  if (level === "红色预警" || status === "异常") redCount += 1;

  document.querySelector("#warningList").insertAdjacentHTML("afterbegin", `
    <li>
      <b>${level.replace("预警", "")}</b>
      <div>
        <strong>${customer} · ${type}</strong>
        <p>${status}：${data.get("summary")}</p>
      </div>
    </li>
  `);
  document.querySelector("#detailCustomer").textContent = customer;
  document.querySelector("#detailLevel").textContent = level;
  document.querySelector("#detailType").textContent = type;
  document.querySelector("#detailTimeline").insertAdjacentHTML("afterbegin", `
    <li>
      <strong>新日查反馈</strong>
      <p>${data.get("summary")}</p>
      <span>刚刚</span>
    </li>
  `);

  updateMetrics();
  showToast("每日巡查已提交，异常项已同步预警。");
  activatePage("home");
});

document.querySelector("#actionForm").addEventListener("submit", (event) => {
  event.preventDefault();
  auditCount += 1;
  document.querySelector("#auditIssueName").textContent = "肖女士木作收口整改";
  document.querySelector("#auditIssueDesc").textContent = "处置记录已提交，等待监察部核查。";
  updateMetrics();
  showToast("处置记录和满意度已保存，状态已同步到待核查。");
});

document.querySelector("#auditPassBtn").addEventListener("click", () => {
  auditCount = Math.max(0, auditCount - 1);
  closureRate = Math.min(99, closureRate + 1);
  updateMetrics();
  showToast("核查通过，问题已处理并进入复盘。");
});

document.querySelector("#auditRejectBtn").addEventListener("click", () => {
  redCount += 1;
  auditCount = Math.max(0, auditCount - 1);
  warningCount += 1;
  updateMetrics();
  showToast("已驳回整改，问题升级为红色预警。");
});

updateMetrics();