other_project/safe
7
0
Fork 0
Code Issues Pull Requests Projects Releases Wiki Activity

111

Browse Source
This commit is contained in:
myTest383
2025-04-30 17:49:53 +08:00
parent 49d281dcc3
commit 1d353f4af3
9 changed files with 1147 additions and 177 deletions
Download Patch File Download Diff File Expand all files Collapse all files

385
business.html Normal file
View File

@@ -0,0 +1,385 @@
<!DOCTYPE html>
<html lang="zh-CN">
<head>
<meta charset="UTF-8">
<meta content="width=device-width, initial-scale=1.0" name="viewport">
<link href="./css/business.css" rel="stylesheet">
<title>个人中心</title>
</head>
<!-- 嵌入头部 -->
<script src="./js/jquery.js" type="text/javascript"></script>
<script>
$(function () {
$("#header").load("./header.html");
});
$(function () {
$("#footer").load("./footer.html");
});
</script>
<body>
<div class="secure">
<div class="secure-box">
<!-- 头部占位 -->
<div id="header"></div>
<!-- 页面内容 -->
<div class="secure-content-wrap">
<div class="secure-content" style="display: flex;flex-direction: column;width: 100%;min-height: 200px">
<h1 style="margin-top: -30px">带分页的网络数据表格</h1>
<div class="controls">
<div>
<button id="fetchData">获取数据</button>
<!-- <button id="clearData">清空表格</button>-->
</div>
<div>
每页显示:
<select id="pageSize" class="page-size-selector">
<option value="2">2</option>
<option value="5">5</option>
<option selected value="10">10</option>
<option value="20">20</option>
<option value="50">50</option>
</select>
</div>
</div>
<div id="loading" class="loading" style="display: none;">正在加载数据...</div>
<div id="error" class="error" style="display: none;"></div>
<div id="tableContainer">
<table id="dataTable">
<thead>
<tr>
<th style="background-color: #334863;text-align: center;color: #ffffff">序号</th>
<th style="background-color: #4CC3A5;text-align: center;color: #ffffff">客户名称</th>
<th style="background-color: #334863;text-align: center;color: #ffffff">录入人名称</th>
<th style="background-color: #4CC3A5;text-align: center;color: #ffffff">我方签订人</th>
<th style="background-color: #334863;text-align: center;color: #ffffff">甲方签订人</th>
<th style="background-color: #4CC3A5;text-align: center;color: #ffffff">签定时间</th>
<th style="background-color: #334863;text-align: center;color: #ffffff">终止时间</th>
<th style="background-color: #4CC3A5;text-align: center;color: #ffffff">合同金额</th>
<th style="background-color: #334863;text-align: center;color: #ffffff">发票情况</th>
<th style="background-color: #4CC3A5;text-align: center;color: #ffffff">回款情况</th>
<th style="background-color: #334863;text-align: center;color: #ffffff">备注</th>
</tr>
</thead>
<tbody id="tableBody" style="background-color: #ffffff">
<!-- 数据将通过JavaScript动态插入 -->
</tbody>
</table>
</div>
<div class="pagination">
<button id="firstPage">首页</button>
<button id="prevPage">上一页</button>
<span id="pageInfo" class="page-info">第 0 页 / 共 0 页</span>
<button id="nextPage">下一页</button>
<button id="lastPage">末页</button>
</div>
</div>
</div>
</div>
<!-- 底部占位 -->
<div id="footer"></div>
</div>
</body>
<script>
const fetchBtn = document.getElementById('fetchData');
const clearBtn = document.getElementById('clearData');
const tableBody = document.getElementById('tableBody');
const loadingDiv = document.getElementById('loading');
const errorDiv = document.getElementById('error');
const pageSizeSelect = document.getElementById('pageSize');
// 分页按钮
const firstPageBtn = document.getElementById('firstPage');
const prevPageBtn = document.getElementById('prevPage');
const nextPageBtn = document.getElementById('nextPage');
const lastPageBtn = document.getElementById('lastPage');
const pageInfoSpan = document.getElementById('pageInfo');
// 分页状态
let currentPage = 1;
let totalPages = 0;
let pageSize = 10;
let allData = [];
// 初始化按钮状态
updatePaginationButtons();
// 获取数据按钮点击事件
fetchBtn.addEventListener('click', fetchData);
// 清空表格按钮点击事件
// clearBtn.addEventListener('click', function () {
// tableBody.innerHTML = '';
// errorDiv.style.display = 'none';
// allData = [];
// currentPage = 1;
// totalPages = 0;
// updatePageInfo();
// updatePaginationButtons();
// });
// 分页按钮事件
firstPageBtn.addEventListener('click', () => goToPage(1));
prevPageBtn.addEventListener('click', () => goToPage(currentPage - 1));
nextPageBtn.addEventListener('click', () => goToPage(currentPage + 1));
lastPageBtn.addEventListener('click', () => goToPage(totalPages));
// 每页显示数量变化事件
pageSizeSelect.addEventListener('change', function () {
pageSize = parseInt(this.value);
if (allData.length > 0) {
totalPages = Math.ceil(allData.length / pageSize);
currentPage = Math.min(currentPage, totalPages);
renderTable();
updatePageInfo();
updatePaginationButtons();
}
});
// 获取数据函数
function fetchData() {
// 显示加载中
loadingDiv.style.display = 'block';
errorDiv.style.display = 'none';
// 设置Cookie
document.cookie = localStorage.getItem('token');
$.post('http://aos.yyundong.com/ycsafe/website/contract/list', {
'pageIndex': pageSize,
'limit': currentPage,
}, function(resp) {
console.log(">>>>>>>>>>>>>>",resp);
});
// 使用JSONPlaceholder API作为示例数据源
// fetch('https://jsonplaceholder.typicode.com/users')
// .then(response => {
// if (!response.ok) {
// throw new Error('网络响应不正常');
// }
// return response.json();
// })
// .then(data => {
// allData = data;
// pageSize = parseInt(pageSizeSelect.value);
// totalPages = Math.ceil(allData.length / pageSize);
// currentPage = 1;
//
// renderTable();
// updatePageInfo();
// updatePaginationButtons();
//
// loadingDiv.style.display = 'none';
// })
// .catch(error => {
// console.error('获取数据出错:', error);
// loadingDiv.style.display = 'none';
// errorDiv.textContent = '获取数据失败: ' + error.message;
// errorDiv.style.display = 'block';
// });
}
// 渲染表格函数
function renderTable() {
// 清空表格
tableBody.innerHTML = '';
// 计算当前页的数据范围
const startIndex = (currentPage - 1) * pageSize;
const endIndex = Math.min(startIndex + pageSize, allData.length);
// 填充当前页的数据到表格
for (let i = startIndex; i < endIndex; i++) {
const user = allData[i];
const row = document.createElement('tr');
const idCell = document.createElement('td');
idCell.textContent = i+1;
row.appendChild(idCell);
const customerName_ = document.createElement('td');
customerName_.textContent = user.customerName_;
row.appendChild(customerName_);
const accountName_ = document.createElement('td');
accountName_.textContent = user.accountName_;
row.appendChild(accountName_);
const staffName_ = document.createElement('td');
staffName_.textContent = user.staffName_;
row.appendChild(staffName_);
const customerSignatory_ = document.createElement('td');
customerSignatory_.textContent = user.address.customerSignatory_;
row.appendChild(customerSignatory_);
const signTime = document.createElement('td');
signTime.textContent = user.address.signTime;
row.appendChild(signTime);
const endTime = document.createElement('td');
endTime.textContent = user.address.endTime;
row.appendChild(endTime);
const amount = document.createElement('td');
amount.textContent = user.address.amount;
row.appendChild(amount);
const fapiao = document.createElement('td');
fapiao.textContent = user.address.fapiao;
row.appendChild(fapiao);
const dso = document.createElement('td');
dso.textContent = user.address.dso;
row.appendChild(dso);
const content = document.createElement('td');
content.textContent = user.address.content;
row.appendChild(content);
tableBody.appendChild(row);
}
}
// 跳转到指定页
function goToPage(page) {
console.log("goToPage>>>>>>>",page);
console.log("goToPage>>>>>>>",totalPages);
console.log("goToPage>>>>>>>",currentPage);
if (page < 1 || page > totalPages || page === currentPage) return;
currentPage = page;
renderTable();
updatePageInfo();
updatePaginationButtons();
}
// 更新分页信息
function updatePageInfo() {
pageInfoSpan.textContent = `第 ${currentPage} 页 / 共 ${totalPages} 页`;
}
// 更新分页按钮状态
function updatePaginationButtons() {
firstPageBtn.disabled = currentPage === 1 || totalPages === 0;
prevPageBtn.disabled = currentPage === 1 || totalPages === 0;
nextPageBtn.disabled = currentPage === totalPages || totalPages === 0;
lastPageBtn.disabled = currentPage === totalPages || totalPages === 0;
}
</script>
<script>
function openPopuptc() {
// 判断是否登录
// if(!isLogin){
// window.location.href = 'login.html';
// }else {
// document.getElementById("tcpopup").style.display = "block";
// }
document.getElementById("tcpopup").style.display = "block";
}
function closePopuptc() {
document.getElementById("tcpopup").style.display = "none";
}
function openPopup() {
document.getElementById("popup").style.display = "block";
document.getElementById("mask").style.display = "block";
time = Date.now()
$('#codeImg').attr('src', 'http://aos.yyundong.com/ycsafe/captcha/captchaImage?type=math&timestamp=' + Date
.now());
}
function closePopup() {
document.getElementById("popup").style.display = "none";
document.getElementById("mask").style.display = "none";
}
// 提交名字函数
function submitName() {
let name = $('#inputName').val();
let telephone = $('#inputPhone').val();
let companyName = $('#inputCompany').val();
let captcha = $('#inputCode').val();
$("#inputName").blur(function () {
if (!name) {
$(this).removeClass("warning");
}
});
$("#inputPhone").blur(function () {
if (!telephone) {
$(this).removeClass("warning");
}
});
$("#inputCompany").blur(function () {
if (!companyName) {
$(this).removeClass("warning");
}
});
$("#inputCode").blur(function () {
if (!captcha) {
$(this).removeClass("warning");
}
});
if (!name) {
document.getElementById("inputName").classList.add("warning");
document.getElementById("inputName").setAttribute("placeholder", "请输入您的姓名");
}
if (!telephone) {
document.getElementById("inputPhone").classList.add("warning");
document.getElementById("inputPhone").setAttribute("placeholder", "请输入您的电话");
}
if (!companyName) {
document.getElementById("inputCompany").classList.add("warning");
document.getElementById("inputCompany").setAttribute("placeholder", "请输入公司名称");
}
if (!captcha) {
document.getElementById("inputCode").classList.add("warning");
document.getElementById("inputCode").setAttribute("placeholder", "请输入验证码");
return;
}
$.post('http://aos.yyundong.com/ycsafe//business/buy/9', {
'name': name,
'telephone': telephone,
'companyName': companyName,
'captcha': captcha,
'timestamp': time,
}, function (resp) {
if (!!resp && !!resp.result) {
alert('您的意向信息已提交，我们将尽快与您取得联系！');
document.getElementById("popup").style.display = "none";
document.getElementById("mask").style.display = "none";
document.getElementById("inputName").value = ''
document.getElementById("inputPhone").value = ''
document.getElementById("inputCompany").value = ''
document.getElementById("inputCode").value = ''
} else {
document.getElementById("inputName").value = ''
alert(resp.message);
}
});
}
function changeCodeImg() {
time = Date.now()
$('#codeImg').attr('src', 'http://aos.yyundong.com/ycsafe/captcha/captchaImage?type=math&timestamp=' + Date
.now());
}
</script>
</html>