SPA 收入支出/技师提成自动统计系统—

本文链接：https://blog.csdn.net/cybersnow/article/details/145645158
代码

 <style>
    body {
      font-family: Arial, sans-serif;
    }

    h2 {
      margin-top: 20px;
    }

   .tabs {
      display: flex;
    }

  .tab {
      padding: 10px 20px;
      background-color: #f1f1f1;
      cursor: pointer;
    }

  .tab.active {
      background-color: #ddd;
	  border-top: 1px solid red;
	   border-left: 1px solid red;
	    border-right: 1px solid red;
    }

  .tab-content {
      display: none;
    }

  .tab-content.active {
      display: block;
	      border: 1px solid red;
    }

    table {
      width: 100%;
      border-collapse: collapse;
    }

    th {
      background-color: #ff9999; /* 中国红减淡 */
      color: black;
      border: 1px solid #ddd;
      padding: 8px;
      text-align: left;
    }

    td {
      border: 1px solid #ddd;
      padding: 8px;
      text-align: left;
    }

    tr:nth-child(even) {
      background-color: #f2f2f2;
    }

    input[type="text"],
    input[type="number"] {
      width: 100%;
      padding: 5px;
      box-sizing: border-box;
      border-radius: 8px;
      background-color: #ffcccc;
      color: #000;
    }

    button {
      padding: 10px 20px;
      background-color: #ff4500;
      color: white;
      border: none;
      cursor: pointer;
      border-radius: 8px;
    }

    button:hover {
      background-color: #cc3300;
    }

  .input-row {
      display: flex;
      gap: 10px;
    }

	.仙盟div{
	  display:inline-block;
	  max-width:50%;
	  min-width:300px;
	  width:40%;
border: 1px solid #f1f1f1;
border-radius: 20px;
background: aliceblue;
    margin-top: 10px;
	    margin-left: 10px;
	}
  </style>
  <style>
   input[type="text"]
   {
      width: 100px;
      padding: 5px;
      box-sizing: border-box;
      border-radius: 8px;
      background-color: #ffcccc;
      color: #000;
    }
   input[type="number"] {
      width: 60px;
      padding: 5px;
      box-sizing: border-box;
      border-radius: 8px;
      background-color: #ffcccc;
      color: #000;
    }
	</style>
 
</head>

<body>
  <h1>SPA 收入支出/技师提成自动统计系统——东方仙盟</h1>
 <h2>台账报表免费-自动统计系统，让中小企业台账报表不再烦恼</h2>
 
  <div class="tabs">
    <div class="tab active" onclick="showTab(0)">统计汇总</div>
    <div class="tab" onclick="showTab(1)">支出</div>
    <div class="tab" onclick="showTab(2)">SPA服务</div>
  </div>

  <div class="tab-content active">

  <cyberdiv class="仙盟div" style="width:90%;max-width: 90%;">
    <h2>利润汇总:总收入-支出-技师提成</h2>
    <table id="东方仙盟智慧经营利润汇总SummaryTable" style="width:300px;">
      <tr>
        <th>利润汇总</th>
        <th><div id="东方仙盟智慧经营profitSummary"></div></th>
      </tr>
    </table>
	 </cyberdiv>

    <cyberdiv class="仙盟div">
	 
    <h2>技师统计</h2>
    <table id="东方仙盟智慧经营technicianStatsTable">
	<thead>
        <th>技师</th>
        <th>服务次数汇总</th>
        <th>服务金额汇总</th>
        <th>提成汇总</th>
      </thead>
	  <tbody id="东方仙盟智慧经营technicianStatsTable_tbody">
      <tr>
        
      </tr>
	  </tbody>
    </table>
 </cyberdiv>
 <cyberdiv class="仙盟div">
    <h2>支出汇总</h2>
    <table id="东方仙盟智慧经营expenseSummaryTable">
	<thead>
      <tr>
        <th>项目</th>
        <th>支出总金额</th>
      </tr>
	    </thead>
		  <tbody id="东方仙盟智慧经营expenseSummaryTable_tbody">
      <tr>
        
      </tr>
	  </tbody>
    </table>

	 </cyberdiv>

  </div>

  <div class="tab-content">
    <h2>足浴支出</h2>
	 <div class="input-row">
      <input type="date" id="东方仙盟智慧经营expenseDate" />
      <input type="text" id="东方仙盟智慧经营expenseItem" placeholder="项目" />
      <input type="number" id="东方仙盟智慧经营expenseQuantity" placeholder="数量" />
      <input type="number" id="东方仙盟智慧经营expenseAmount" placeholder="金额" />
      <button onclick="addExpense()">添加支出</button>
    </div>
	<br>
    <table id="东方仙盟智慧经营expenseTable">
      <tr>
        <th>日期</th>
        <th>项目</th>
        <th>数量</th>
        <th>金额</th>
        <th>操作</th>
      </tr>
    </table>
   <br><br><br>
  </div>

  <div class="tab-content">
    <h2>足浴收入</h2>

	 <div class="input-row">
      <input type="date" id="东方仙盟智慧经营incomeDate" />
      <input type="text" id="东方仙盟智慧经营incomeItem" placeholder="项目" />
      <input type="text" id="东方仙盟智慧经营technician" placeholder="技师" />
      <input type="number" id="东方仙盟智慧经营incomeAmount" placeholder="消费金额" oninput="calculateCommission(this)" />
      <input type="number" id="东方仙盟智慧经营commissionRatio" placeholder="提成比例" oninput="calculateCommission(this)" />
      <input type="number" id="东方仙盟智慧经营commissionAmount" placeholder="提成金额" oninput="toggleCommissionCalculation(this)" />
      <button onclick="addIncome()">添加服务</button>
    </div>
<br>

    <table id="东方仙盟智慧经营incomeTable">
      <tr>
        <th>日期</th>
        <th>项目</th>
        <th>技师</th>
        <th>消费金额</th>
        <th>提成比例</th>
        <th>提成金额</th>
        <th>操作</th>
      </tr>
    </table>
	<br><br><br>
   
  </div>