You can not select more than 25 topics
Topics must start with a letter or number, can include dashes ('-') and can be up to 35 characters long.
385 lines
13 KiB
385 lines
13 KiB
<!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×tamp=' + 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×tamp=' + Date
|
|
.now());
|
|
}
|
|
</script>
|
|
</html>
|
|
|