SPA 收入支出/技师提成主动统计系统——东方仙盟

嚴華 · 2025-2-17 07:18:03

马上注册，结交更多好友，享用更多功能，让你轻松玩转社区。

您需要登录才可以下载或查看，没有账号？立即注册

x

代码

<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>

复制代码

使用和体验

免责声明：如果侵犯了您的权益，请联系站长，我们会及时删除侵权内容，谢谢合作！更多信息从访问主页：qidao123.com:ToB企服之家，中国第一个企服评测及商务社交产业平台。

		自动登录	找回密码
密码			立即注册

SPA 收入支出/技师提成主动统计系统——东方仙盟

马上注册，结交更多好友，享用更多功能，让你轻松玩转社区。

0 个回复

快速回复

楼主热帖

标签云

浏览过的版块