要在页面中实现一个Tabs标签，用于切换显示已结清、停催和诉讼的合同，你可以按照以下步骤进行修改：
1. HTML 结构
首先，在你的HTML中添加一个Tabs的结构。你可以使用Bootstrap或自定义样式来创建Tabs。
<div>
<ul class="nav nav-tabs" id="contractTabs">
<li class="nav-item">
<a class="nav-link active" data-toggle="tab" href="#settledContracts">已结清</a>
</li>
<li class="nav-item">
<a class="nav-link" data-toggle="tab" href="#stoppedContracts">停催</a>
</li>
<li class="nav-item">
<a class="nav-link" data-toggle="tab" href="#litigationContracts">诉讼</a>
</li>
</ul>
<div class="tab-content">
<div id="settledContracts" class="tab-pane fade show active"></div>
<div id="stoppedContracts" class="tab-pane fade"></div>
<div id="litigationContracts" class="tab-pane fade"></div>
</div>
</div>
2. JavaScript 修改
然后，修改你的JavaScript代码，以根据不同的合同状态填充这些Tabs。你需要在success回调函数中处理数据并将其分配到相应的Tabs。
$.ajax({
method: "POST",
url: "../d/detail/keyInfo",
data: { custId: custId },
success: function(result) {
var jsonRes = JSON.parse(result);
// 用于存储不同状态的贷款信息
const settledLoans = [];
const stoppedLoans = [];
const litigationLoans = [];
for (const item of jsonRes) {
if (item.code === 'loan') {
for (const loan of item.child) {
// ...（其他现有逻辑保持不变）
// 根据合同状态分类贷款信息
if (loan.status === 'settled') {
settledLoans.push(loan);
} else if (loan.status === 'stopped') {
stoppedLoans.push(loan);
} else if (loan.status === 'litigation') {
litigationLoans.push(loan);
}
}
}
}
// 将贷款信息插入到对应的tabs中
renderLoanInfo('#settledContracts', settledLoans);
renderLoanInfo('#stoppedContracts', stoppedLoans);
renderLoanInfo('#litigationContracts', litigationLoans);
me.keyInfo = jsonRes;
me.form.initForm(jsonRes);
}
});
// 函数用于渲染贷款信息到指定元素
function renderLoanInfo(container, loans) {
let htmlContent = '';
loans.forEach(loan => {
// 创建每个贷款的信息展示，假设每个贷款有一个title和value字段，具体可根据实际需求调整。
htmlContent += `<div>${loan.title}: ${loan.value}</div>`;
});
$(container).html(htmlContent);
}
3. 样式与功能完善
确保你已经引入了必要的CSS和JavaScript库（如jQuery和Bootstrap），以使得Tab功能正常工作。
- 注意：请根据你的API返回的数据格式，适当调整对
status,title, 和value字段的访问。此外，可以增强用户体验，比如通过加载动画等方式，让用户知道数据正在加载。
这样，就能够实现在不同Tab之间切换时，根据合同状态展示不同的合同信息。
内容由零声教学AI助手提供，问题来源于学员提问
