Files
nxxmdata/bank-frontend/test-loan-release-edit.html

374 lines
14 KiB
HTML
Raw Normal View History

<!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;
}
.form-group {
margin-bottom: 15px;
}
.form-group label {
display: block;
margin-bottom: 5px;
font-weight: bold;
}
.form-group input, .form-group select, .form-group textarea {
width: 100%;
padding: 8px;
border: 1px solid #d9d9d9;
border-radius: 4px;
}
.form-group textarea {
height: 80px;
resize: vertical;
}
</style>
</head>
<body>
<div class="container">
<h1>贷款解押编辑功能测试</h1>
<!-- 1. 获取解押列表 -->
<div class="test-section">
<h3>1. 获取解押申请列表</h3>
<button class="test-button" onclick="getLoanReleases()">获取解押列表</button>
<div id="releases-result" class="result"></div>
</div>
<!-- 2. 获取解押详情 -->
<div class="test-section">
<h3>2. 获取解押申请详情</h3>
<div class="form-group">
<label>解押ID:</label>
<input type="number" id="releaseId" value="1" placeholder="请输入解押ID">
</div>
<button class="test-button" onclick="getReleaseDetail()">获取详情</button>
<div id="detail-result" class="result"></div>
</div>
<!-- 3. 更新解押申请 -->
<div class="test-section">
<h3>3. 更新解押申请</h3>
<div class="form-group">
<label>解押ID:</label>
<input type="number" id="updateId" value="1" placeholder="请输入解押ID">
</div>
<div class="form-group">
<label>申请人姓名:</label>
<input type="text" id="applicantName" value="张三测试" placeholder="请输入申请人姓名">
</div>
<div class="form-group">
<label>申请人电话:</label>
<input type="text" id="applicantPhone" value="13800138000" placeholder="请输入申请人电话">
</div>
<div class="form-group">
<label>申请人身份证号:</label>
<input type="text" id="applicantIdNumber" value="511123199001010001" placeholder="请输入申请人身份证号">
</div>
<div class="form-group">
<label>贷款产品:</label>
<input type="text" id="productName" value="养殖贷款" placeholder="请输入贷款产品">
</div>
<div class="form-group">
<label>生资种类:</label>
<select id="assetType">
<option value="牛"></option>
<option value="羊"></option>
<option value="猪"></option>
<option value="其他">其他</option>
</select>
</div>
<div class="form-group">
<label>申请解押数量:</label>
<input type="text" id="releaseQuantity" value="5头" placeholder="请输入申请解押数量">
</div>
<div class="form-group">
<label>申请解押额度:</label>
<input type="number" id="releaseAmount" value="50000" step="0.01" placeholder="请输入申请解押额度">
</div>
<div class="form-group">
<label>申请养殖户:</label>
<input type="text" id="farmerName" value="张三" placeholder="请输入申请养殖户">
</div>
<div class="form-group">
<label>抵押物描述:</label>
<textarea id="collateralDescription" placeholder="请输入抵押物描述">测试抵押物描述</textarea>
</div>
<div class="form-group">
<label>申请原因:</label>
<textarea id="reason" placeholder="请输入申请原因">测试申请原因</textarea>
</div>
<div class="form-group">
<label>备注:</label>
<textarea id="remark" placeholder="请输入备注">测试备注</textarea>
</div>
<button class="test-button" onclick="updateRelease()">更新解押申请</button>
<div id="update-result" class="result"></div>
</div>
<!-- 4. 验证更新结果 -->
<div class="test-section">
<h3>4. 验证更新结果</h3>
<button class="test-button" onclick="verifyUpdate()">验证更新结果</button>
<div id="verify-result" class="result"></div>
</div>
</div>
<script>
const API_BASE = 'http://localhost:5301/bank/api';
let authToken = '';
// 登录获取token
async function login() {
try {
const response = await fetch(`${API_BASE}/auth/login`, {
method: 'POST',
headers: {
'Content-Type': 'application/json'
},
body: JSON.stringify({
username: 'admin',
password: '123456'
})
});
const data = await response.json();
if (data.success) {
authToken = data.data.token;
console.log('登录成功Token:', authToken.substring(0, 50) + '...');
return true;
} else {
throw new Error(data.message || '登录失败');
}
} catch (error) {
console.error('登录失败:', error);
return false;
}
}
// 获取解押列表
async function getLoanReleases() {
const resultDiv = document.getElementById('releases-result');
resultDiv.className = 'result info';
resultDiv.textContent = '正在获取解押列表...';
try {
if (!authToken) {
const loginSuccess = await login();
if (!loginSuccess) {
throw new Error('登录失败');
}
}
const response = await fetch(`${API_BASE}/loan-releases?page=1&pageSize=10`, {
headers: {
'Authorization': `Bearer ${authToken}`
}
});
const data = await response.json();
if (data.success) {
resultDiv.className = 'result success';
resultDiv.textContent = `获取成功!\n解押申请数量: ${data.data.releases.length}\n\n解押列表:\n${JSON.stringify(data.data.releases, null, 2)}`;
} else {
throw new Error(data.message || '获取失败');
}
} catch (error) {
resultDiv.className = 'result error';
resultDiv.textContent = `获取失败: ${error.message}`;
}
}
// 获取解押详情
async function getReleaseDetail() {
const resultDiv = document.getElementById('detail-result');
const releaseId = document.getElementById('releaseId').value;
resultDiv.className = 'result info';
resultDiv.textContent = '正在获取解押详情...';
try {
if (!authToken) {
const loginSuccess = await login();
if (!loginSuccess) {
throw new Error('登录失败');
}
}
const response = await fetch(`${API_BASE}/loan-releases/${releaseId}`, {
headers: {
'Authorization': `Bearer ${authToken}`
}
});
const data = await response.json();
if (data.success) {
resultDiv.className = 'result success';
resultDiv.textContent = `获取成功!\n解押详情:\n${JSON.stringify(data.data, null, 2)}`;
} else {
throw new Error(data.message || '获取失败');
}
} catch (error) {
resultDiv.className = 'result error';
resultDiv.textContent = `获取失败: ${error.message}`;
}
}
// 更新解押申请
async function updateRelease() {
const resultDiv = document.getElementById('update-result');
const releaseId = document.getElementById('updateId').value;
resultDiv.className = 'result info';
resultDiv.textContent = '正在更新解押申请...';
try {
if (!authToken) {
const loginSuccess = await login();
if (!loginSuccess) {
throw new Error('登录失败');
}
}
const updateData = {
customer_name: document.getElementById('applicantName').value,
customer_phone: document.getElementById('applicantPhone').value,
customer_id_card: document.getElementById('applicantIdNumber').value,
farmer_name: document.getElementById('farmerName').value,
product_name: document.getElementById('productName').value,
collateral_type: document.getElementById('assetType').value === '牛' ? 'livestock' : document.getElementById('assetType').value,
release_quantity: document.getElementById('releaseQuantity').value,
release_amount: parseFloat(document.getElementById('releaseAmount').value),
collateral_description: document.getElementById('collateralDescription').value,
application_reason: document.getElementById('reason').value,
remark: document.getElementById('remark').value
};
console.log('更新数据:', updateData);
const response = await fetch(`${API_BASE}/loan-releases/${releaseId}`, {
method: 'PUT',
headers: {
'Content-Type': 'application/json',
'Authorization': `Bearer ${authToken}`
},
body: JSON.stringify(updateData)
});
const data = await response.json();
if (data.success) {
resultDiv.className = 'result success';
resultDiv.textContent = `更新成功!\n响应数据:\n${JSON.stringify(data, null, 2)}`;
} else {
throw new Error(data.message || '更新失败');
}
} catch (error) {
resultDiv.className = 'result error';
resultDiv.textContent = `更新失败: ${error.message}`;
}
}
// 验证更新结果
async function verifyUpdate() {
const resultDiv = document.getElementById('verify-result');
const releaseId = document.getElementById('updateId').value;
resultDiv.className = 'result info';
resultDiv.textContent = '正在验证更新结果...';
try {
if (!authToken) {
const loginSuccess = await login();
if (!loginSuccess) {
throw new Error('登录失败');
}
}
const response = await fetch(`${API_BASE}/loan-releases/${releaseId}`, {
headers: {
'Authorization': `Bearer ${authToken}`
}
});
const data = await response.json();
if (data.success) {
resultDiv.className = 'result success';
resultDiv.textContent = `验证成功!\n更新后的解押详情:\n${JSON.stringify(data.data, null, 2)}`;
} else {
throw new Error(data.message || '验证失败');
}
} catch (error) {
resultDiv.className = 'result error';
resultDiv.textContent = `验证失败: ${error.message}`;
}
}
// 页面加载时自动登录
window.onload = function() {
login();
};
</script>
</body>
</html>