微信扫码登录或注册
以下是一个简单的实现，使用jQuery和Spring Boot：
HTML界面：
<!DOCTYPE html>
<html>
<head>
<title>双方签署协议</title>
<script src="https://code.jquery.com/jquery-3.6.0.min.js"></script>
</head>
<body>
<h1>双方签署协议</h1>
<p>甲方点一个确定，乙方那里能看到甲方已点了确定，并且要乙方也点同意才能产生下一个成交交互。</p>
<div>
<label>甲方账号：</label>
<input type="text" id="partyA">
</div>
<div>
<label>乙方账号：</label>
<input type="text" id="partyB">
</div>
<div>
<button id="agreeA">甲方同意</button>
<button id="agreeB" disabled>乙方同意</button>
</div>
<script>
$(document).ready(function() {
// 获取甲方账号和乙方账号
var partyA = $('#partyA').val();
var partyB = $('#partyB').val();
// 甲方同意按钮点击事件
$('#agreeA').click(function() {
// 向后端发送请求，记录甲方同意
$.ajax({
url: '/agreement',
method: 'POST',
data: {
party: 'A',
agreed: true
},
success: function() {
// 甲方同意后，禁用甲方同意按钮，启用乙方同意按钮
$('#agreeA').prop('disabled', true);
$('#agreeB').prop('disabled', false);
}
});
});
// 乙方同意按钮点击事件
$('#agreeB').click(function() {
// 向后端发送请求，记录乙方同意
$.ajax({
url: '/agreement',
method: 'POST',
data: {
party: 'B',
agreed: true
},
success: function() {
// 乙方同意后，提示协议签署完成
alert('协议签署完成');
}
});
});
});
</script>
</body>
</html>
Spring Boot后端：
@RestController
public class AgreementController {
private boolean partyA = false;
private boolean partyB = false;
@PostMapping("/agreement")
public void agree(@RequestParam String party, @RequestParam boolean agreed) {
if (party.equals("A")) {
partyA = agreed;
} else if (party.equals("B")) {
partyB = agreed;
}
}
@GetMapping("/agreement")
public String getAgreement() {
if (partyA && partyB) {
return "Agreement signed";
} else {
return "Agreement not signed";
}
}
}
这个实现中，当甲方点击同意按钮时，会向后端发送一个POST请求，记录甲方同意。当乙方点击同意按钮时，会向后端发送一个POST请求，记录乙方同意。后端会记录甲方和乙方是否同意，并提供一个GET接口，用于查询协议是否签署完成。当甲方同意后，禁用甲方同意按钮，启用乙方同意按钮。当乙方同意后，提示协议签署完成。
