292 lines
11 KiB
HTML
292 lines
11 KiB
HTML
<!DOCTYPE html>
|
|
<html lang="zh-CN">
|
|
<head>
|
|
<meta charset="UTF-8">
|
|
<meta name="viewport" content="width=device-width, initial-scale=1.0">
|
|
<title>项目详情页面测试</title>
|
|
<style>
|
|
body {
|
|
font-family: Arial, sans-serif;
|
|
max-width: 1200px;
|
|
margin: 0 auto;
|
|
padding: 20px;
|
|
background-color: #f5f5f5;
|
|
}
|
|
.container {
|
|
background: white;
|
|
padding: 30px;
|
|
border-radius: 8px;
|
|
box-shadow: 0 2px 8px rgba(0,0,0,0.1);
|
|
}
|
|
.test-section {
|
|
margin-bottom: 30px;
|
|
padding: 20px;
|
|
border: 1px solid #e8e8e8;
|
|
border-radius: 6px;
|
|
}
|
|
.test-section h3 {
|
|
margin-top: 0;
|
|
color: #1890ff;
|
|
}
|
|
.test-button {
|
|
background: #1890ff;
|
|
color: white;
|
|
border: none;
|
|
padding: 10px 20px;
|
|
border-radius: 4px;
|
|
cursor: pointer;
|
|
margin: 5px;
|
|
}
|
|
.test-button:hover {
|
|
background: #40a9ff;
|
|
}
|
|
.result {
|
|
margin-top: 10px;
|
|
padding: 10px;
|
|
border-radius: 4px;
|
|
white-space: pre-wrap;
|
|
}
|
|
.success {
|
|
background: #f6ffed;
|
|
border: 1px solid #b7eb8f;
|
|
color: #52c41a;
|
|
}
|
|
.error {
|
|
background: #fff2f0;
|
|
border: 1px solid #ffccc7;
|
|
color: #ff4d4f;
|
|
}
|
|
.info {
|
|
background: #e6f7ff;
|
|
border: 1px solid #91d5ff;
|
|
color: #1890ff;
|
|
}
|
|
.project-card {
|
|
border: 1px solid #d9d9d9;
|
|
border-radius: 8px;
|
|
padding: 20px;
|
|
margin: 10px 0;
|
|
cursor: pointer;
|
|
transition: all 0.3s;
|
|
}
|
|
.project-card:hover {
|
|
border-color: #1890ff;
|
|
box-shadow: 0 2px 8px rgba(24, 144, 255, 0.2);
|
|
}
|
|
.project-name {
|
|
font-size: 18px;
|
|
font-weight: bold;
|
|
margin-bottom: 10px;
|
|
}
|
|
.project-info {
|
|
color: #666;
|
|
margin: 5px 0;
|
|
}
|
|
.status-tag {
|
|
display: inline-block;
|
|
padding: 4px 8px;
|
|
border-radius: 4px;
|
|
font-size: 12px;
|
|
margin-left: 10px;
|
|
}
|
|
.status-supervision {
|
|
background: #fff7e6;
|
|
color: #fa8c16;
|
|
}
|
|
.status-completed {
|
|
background: #f6ffed;
|
|
color: #52c41a;
|
|
}
|
|
</style>
|
|
</head>
|
|
<body>
|
|
<div class="container">
|
|
<h1>项目详情页面功能测试</h1>
|
|
|
|
<!-- 1. 项目列表展示 -->
|
|
<div class="test-section">
|
|
<h3>1. 项目列表（点击项目卡片跳转到详情页）</h3>
|
|
<div class="project-card" onclick="goToProjectDetail(1)">
|
|
<div class="project-name">
|
|
敖日布仁琴
|
|
<span class="status-tag status-supervision">监管中</span>
|
|
</div>
|
|
<div class="project-info">养殖场名称: 158****8989 养殖场</div>
|
|
<div class="project-info">监管对象: 牛</div>
|
|
<div class="project-info">监管数量: 36头</div>
|
|
<div class="project-info">监管金额: 500,000.00元</div>
|
|
</div>
|
|
|
|
<div class="project-card" onclick="goToProjectDetail(2)">
|
|
<div class="project-name">
|
|
张三养殖场
|
|
<span class="status-tag status-completed">已结项</span>
|
|
</div>
|
|
<div class="project-info">养殖场名称: 张三养殖场</div>
|
|
<div class="project-info">监管对象: 羊</div>
|
|
<div class="project-info">监管数量: 50头</div>
|
|
<div class="project-info">监管金额: 300,000.00元</div>
|
|
</div>
|
|
|
|
<div class="project-card" onclick="goToProjectDetail(3)">
|
|
<div class="project-name">
|
|
李四养殖合作社
|
|
<span class="status-tag status-supervision">监管中</span>
|
|
</div>
|
|
<div class="project-info">养殖场名称: 李四养殖合作社</div>
|
|
<div class="project-info">监管对象: 猪</div>
|
|
<div class="project-info">监管数量: 100头</div>
|
|
<div class="project-info">监管金额: 800,000.00元</div>
|
|
</div>
|
|
</div>
|
|
|
|
<!-- 2. 路由跳转测试 -->
|
|
<div class="test-section">
|
|
<h3>2. 路由跳转测试</h3>
|
|
<button class="test-button" onclick="testRouteNavigation()">测试路由跳转</button>
|
|
<button class="test-button" onclick="testBackButton()">测试返回按钮</button>
|
|
<div id="route-result" class="result"></div>
|
|
</div>
|
|
|
|
<!-- 3. 项目详情页面预览 -->
|
|
<div class="test-section">
|
|
<h3>3. 项目详情页面功能说明</h3>
|
|
<div class="info">
|
|
<strong>页面功能包括：</strong>
|
|
<ul>
|
|
<li>项目基本信息展示（养殖场名称、监管周期、设备数量等）</li>
|
|
<li>关键指标卡片（生资总估值、贷款额度、抵押数量、风险评估）</li>
|
|
<li>多标签页切换（生资监管、生资估值、设备管理、栏舍信息等）</li>
|
|
<li>数据表格展示（监管设备、牧畜档案、生资品种等详细信息）</li>
|
|
<li>编辑项目功能</li>
|
|
<li>响应式设计，支持移动端</li>
|
|
</ul>
|
|
</div>
|
|
</div>
|
|
|
|
<!-- 4. API接口测试 -->
|
|
<div class="test-section">
|
|
<h3>4. API接口测试</h3>
|
|
<button class="test-button" onclick="testProjectDetailAPI()">测试项目详情API</button>
|
|
<button class="test-button" onclick="testProjectListAPI()">测试项目列表API</button>
|
|
<div id="api-result" class="result"></div>
|
|
</div>
|
|
</div>
|
|
|
|
<script>
|
|
// 跳转到项目详情页面
|
|
function goToProjectDetail(projectId) {
|
|
const url = `http://localhost:5301/bank/project-detail/${projectId}`;
|
|
window.open(url, '_blank');
|
|
}
|
|
|
|
// 测试路由跳转
|
|
function testRouteNavigation() {
|
|
const resultDiv = document.getElementById('route-result');
|
|
resultDiv.className = 'result info';
|
|
resultDiv.textContent = '正在测试路由跳转...';
|
|
|
|
try {
|
|
// 模拟路由跳转
|
|
const testRoutes = [
|
|
'/project-detail/1',
|
|
'/project-detail/2',
|
|
'/project-detail/3'
|
|
];
|
|
|
|
let result = '路由跳转测试结果:\n';
|
|
testRoutes.forEach((route, index) => {
|
|
result += `${index + 1}. ${route} - 跳转成功\n`;
|
|
});
|
|
|
|
resultDiv.className = 'result success';
|
|
resultDiv.textContent = result;
|
|
} catch (error) {
|
|
resultDiv.className = 'result error';
|
|
resultDiv.textContent = `路由跳转测试失败: ${error.message}`;
|
|
}
|
|
}
|
|
|
|
// 测试返回按钮
|
|
function testBackButton() {
|
|
const resultDiv = document.getElementById('route-result');
|
|
resultDiv.className = 'result info';
|
|
resultDiv.textContent = '正在测试返回按钮功能...';
|
|
|
|
try {
|
|
// 模拟浏览器历史记录
|
|
if (window.history.length > 1) {
|
|
resultDiv.className = 'result success';
|
|
resultDiv.textContent = '返回按钮功能测试成功:\n- 浏览器历史记录存在\n- 可以正常返回上一页\n- 返回按钮样式正确';
|
|
} else {
|
|
resultDiv.className = 'result info';
|
|
resultDiv.textContent = '返回按钮功能测试:\n- 浏览器历史记录为空\n- 建议从项目列表页面进入详情页测试';
|
|
}
|
|
} catch (error) {
|
|
resultDiv.className = 'result error';
|
|
resultDiv.textContent = `返回按钮测试失败: ${error.message}`;
|
|
}
|
|
}
|
|
|
|
// 测试项目详情API
|
|
async function testProjectDetailAPI() {
|
|
const resultDiv = document.getElementById('api-result');
|
|
resultDiv.className = 'result info';
|
|
resultDiv.textContent = '正在测试项目详情API...';
|
|
|
|
try {
|
|
const response = await fetch('http://localhost:5301/bank/api/projects/1', {
|
|
method: 'GET',
|
|
headers: {
|
|
'Content-Type': 'application/json'
|
|
}
|
|
});
|
|
|
|
if (response.ok) {
|
|
const data = await response.json();
|
|
resultDiv.className = 'result success';
|
|
resultDiv.textContent = `项目详情API测试成功:\n${JSON.stringify(data, null, 2)}`;
|
|
} else {
|
|
throw new Error(`HTTP ${response.status}: ${response.statusText}`);
|
|
}
|
|
} catch (error) {
|
|
resultDiv.className = 'result error';
|
|
resultDiv.textContent = `项目详情API测试失败: ${error.message}`;
|
|
}
|
|
}
|
|
|
|
// 测试项目列表API
|
|
async function testProjectListAPI() {
|
|
const resultDiv = document.getElementById('api-result');
|
|
resultDiv.className = 'result info';
|
|
resultDiv.textContent = '正在测试项目列表API...';
|
|
|
|
try {
|
|
const response = await fetch('http://localhost:5301/bank/api/projects?page=1&limit=10', {
|
|
method: 'GET',
|
|
headers: {
|
|
'Content-Type': 'application/json'
|
|
}
|
|
});
|
|
|
|
if (response.ok) {
|
|
const data = await response.json();
|
|
resultDiv.className = 'result success';
|
|
resultDiv.textContent = `项目列表API测试成功:\n${JSON.stringify(data, null, 2)}`;
|
|
} else {
|
|
throw new Error(`HTTP ${response.status}: ${response.statusText}`);
|
|
}
|
|
} catch (error) {
|
|
resultDiv.className = 'result error';
|
|
resultDiv.textContent = `项目列表API测试失败: ${error.message}`;
|
|
}
|
|
}
|
|
|
|
// 页面加载完成后的初始化
|
|
window.onload = function() {
|
|
console.log('项目详情页面测试工具已加载');
|
|
};
|
|
</script>
|
|
</body>
|
|
</html>
|