JavaScript动态价格计算器：实现弹窗价格随支付周期调整

function printPreisstaffel(preisstaffel, idelement) {
  document.getElementById(idelement).innerHTML = ""; // 清空现有内容

  // 获取当前选定的支付类型
  var paymenttype = document.querySelector("#zahlrythmus").value;

  for (var key in preisstaffel) {
    var price;
    if (paymenttype === "M") {
      // 如果是按月支付，价格增加20%
      price = (preisstaffel[key] * 1.2).toFixed(2);
    } else {
      // 否则（按年支付），价格保持不变
      price = preisstaffel[key].toFixed(2);
    }
    // 将计算后的价格插入到HTML中
    document.getElementById(idelement).innerHTML += `<div class="price-container"><span class="text">Bis ${key} Benutzer:</span> <span class="value">${price}€ </span></div>`;
  }
}

  // ... 其他变量定义和百分比计算 ...

  if (paymenttype == "M") {
    percent = 1.2; //standardvalue for monthly
  }else{
    percent = 1;   //standardvalue for annual
  }

  // ... 后端价格计算 ...
  // ... App价格计算 ...

  // 确保在支付类型变更后，重新渲染价格阶梯显示
  printPreisstaffel(pricingapp, "preisstaffelapp"); // 更新App价格阶梯
  if (backendtype == "ZR"){
    printPreisstaffel(pricingbackendzr, "preisstaffelbackend"); // 更新后端(ZR)价格阶梯
  }else{
    printPreisstaffel(pricingbackendz, "preisstaffelbackend"); // 更新后端(Z)价格阶梯
  }  

  // ... 剩余的总和计算和UI更新 ...

var percent = 1; // Standardvalue for yearly

apppreis = 7.5;
backendpreis = 35;
// Preisstaffelung Zeiterfassung+Rechnungswesen für Backendpreis
var pricingbackendzr = { 4: 35.00, 10: 32.50, 20: 30.00 };
var pricingbackendz = { 4: 20.00, 10: 18.00, 20: 16.00 };
var pricingapp = { 10: 7.50, 25: 7.00, 50: 6.50, 75: 6.00, 500: 5.50 };


document.addEventListener("DOMContentLoaded", function (event) {
  // ... (其他初始化代码，如滑块更新逻辑) ...

  // Initiale Anzeige der Daten
  calcSum(); // 确保初始加载时所有价格都正确显示
  // Initiale Anzeige für Backend Preisstaffel
  // updatePreisStaffelungBackend(); // 此处不再需要单独调用，因为 calcSum 会处理
});

function printPreisstaffel(preisstaffel, idelement) {
  document.getElementById(idelement).innerHTML = "";

  var paymenttype = document.querySelector("#zahlrythmus").value; // 获取支付类型

  for (var key in preisstaffel) {
    var price;
    if (paymenttype === "M") {
      price = (preisstaffel[key] * 1.2).toFixed(2); // 月付增加20%
    } else {
      price = preisstaffel[key].toFixed(2); // 年付保持不变
    }
    document.getElementById(idelement).innerHTML += `<div class="price-container"><span class="text">Bis ${key} Benutzer:</span> <span class="value">${price}€ </span></div>`;
  }
}

// ... (updateUser, calcPercent 函数不变) ...

function updatePreisStaffelungBackend() {
  // 此函数现在仅用于确保在后端功能类型更改时触发 calcSum，
  // 实际的 printPreisstaffel 调用已移至 calcSum
  calcSum();
}


function calcSum() {
  var preisproapp = document.querySelector('.proapp');
  var backendpreissum = document.querySelector('.backendpreissum');
  var appstk = document.querySelector('.appanzahl');
  var preisprobackend = document.querySelector('.probackend');
  var jaehrlich = document.querySelector('.jaehrlichsum');
  var summetext = document.querySelector('.summe');
  var rabatt = document.querySelector('.rabattsum');
  var backendanzahl = document.querySelector(".backenduser").value;
  var appanzahl = document.querySelector(".appuser").value;
  var paymenttype = document.querySelector("#zahlrythmus").value;
  var backendtype = document.querySelector("#backendfunktion").value;

  if (paymenttype == "M") {
    percent = 1.2; // standardvalue for monthly
  } else {
    percent = 1;   // standardvalue for annual
  }

  // If abfrage für Backend um Preisstaffel anzeigen zu lassen
  if (backendtype == "ZR") {
    backendpreis = getPrice(pricingbackendzr, percent, backendanzahl);
  } else {
    backendpreis = getPrice(pricingbackendz, percent, backendanzahl);
  }

  apppreis = getPrice(pricingapp, percent, appanzahl);

  // 重新渲染价格阶梯显示，确保弹窗内容与当前支付类型匹配
  printPreisstaffel(pricingapp, "preisstaffelapp");
  if (backendtype == "ZR") {
    printPreisstaffel(pricingbackendzr, "preisstaffelbackend");
  } else {
    printPreisstaffel(pricingbackendz, "preisstaffelbackend");
  }

  var mytext = (((backendanzahl * backendpreis + +appanzahl * apppreis) * 1)).toFixed(2);
  summetext.textContent = mytext + "€";
  // Rechnung für Backendpreissumme
  var backendpreissumme = (backendanzahl * backendpreis).toFixed(2);
  backendpreissum.textContent = backendpreissumme + "€";
  // Rechnung für Apppreissumme
  var apppreissumme = (appanzahl * apppreis).toFixed(2);
  appstk.textContent = apppreissumme + "€";
  // Rechnung für Preis pro Backendbenutzer
  var probackend2 = ((backendpreis * backendanzahl) / (backendanzahl)).toFixed(2);
  preisprobackend.textContent = probackend2;
  // Rechnung für Preis pro App-Benutzer
  var proapp2 = appanzahl > 0 ? ((apppreis * appanzahl) / (appanzahl)).toFixed(2) : apppreis.toFixed(2);
  preisproapp.textContent = proapp2;
  // If Abfrage wenn "Jaehrlich" ausgewaehlt wird
  if (paymenttype == "J") {
    var jaehrlicherrabatt = ((backendanzahl * backendpreis + +appanzahl * apppreis) * 12).toFixed(2);
    jaehrlich.textContent = jaehrlicherrabatt + "€";
  }
  // Rechnung für Ersparnis
  var rabattsum = (jaehrlicherrabatt * 0.2).toFixed(2); // 这里可能需要根据实际业务逻辑调整，原始代码有误
  rabatt.textContent = "-" + rabattsum + "€";

}
// ... (checkHide, getPrice 函数不变) ...