132 lines
4.6 KiB
HTML
132 lines
4.6 KiB
HTML
|
<!DOCTYPE html>
|
||
|
|
<html lang="zh-CN">
|
||
|
|
<head>
|
||
|
|
<meta charset="UTF-8">
|
||
|
|
<title>创建订单</title>
|
||
|
|
<style>
|
||
|
|
/* 简单的样式 */
|
||
|
|
.hidden { display: none; }
|
||
|
|
.error { color: red; }
|
||
|
|
</style>
|
||
|
|
</head>
|
||
|
|
<body>
|
||
|
|
<h1>创建订单</h1>
|
||
|
|
<form id="order-form">
|
||
|
|
<label for="phone">手机号:</label>
|
||
|
|
<input type="text" id="phone" name="phone"><br><br>
|
||
|
|
|
||
|
|
<label for="email">邮箱:</label>
|
||
|
|
<input type="email" id="email" name="email"><br><br>
|
||
|
|
|
||
|
|
<label for="address">地址:</label>
|
||
|
|
<input type="text" id="address" name="address"><br><br>
|
||
|
|
|
||
|
|
<button type="submit">提交订单</button>
|
||
|
|
</form>
|
||
|
|
|
||
|
|
<div id="message" class="hidden"></div>
|
||
|
|
<div id="addresses" class="hidden">
|
||
|
|
<h2>请选择一个地址：</h2>
|
||
|
|
<ul id="address-list"></ul>
|
||
|
|
</div>
|
||
|
|
<div id="error" class="error hidden"></div>
|
||
|
|
|
||
|
|
<script>
|
||
|
|
async function createOrder(phone = "", email = "", address = "") {
|
||
|
|
try {
|
||
|
|
const response = await fetch('/create_order', {
|
||
|
|
method: 'POST',
|
||
|
|
headers: {
|
||
|
|
'Content-Type': 'application/json'
|
||
|
|
},
|
||
|
|
body: JSON.stringify({ phone, email, address })
|
||
|
|
});
|
||
|
|
|
||
|
|
const data = await response.json();
|
||
|
|
|
||
|
|
if (response.ok) {
|
||
|
|
if (data.order_id) {
|
||
|
|
handleOrderSuccess(data.order_id);
|
||
|
|
} else if (data.addresses && Array.isArray(data.addresses)) {
|
||
|
|
handleMultipleAddresses(data.addresses);
|
||
|
|
}
|
||
|
|
} else {
|
||
|
|
if (data.message === "地址不能为空，请输入地址。") {
|
||
|
|
promptUserForAddress();
|
||
|
|
} else {
|
||
|
|
handleError(data.message || '发生未知错误。');
|
||
|
|
}
|
||
|
|
}
|
||
|
|
} catch (error) {
|
||
|
|
console.error('网络或服务器错误:', error);
|
||
|
|
handleError('网络或服务器错误，请稍后再试。');
|
||
|
|
}
|
||
|
|
}
|
||
|
|
|
||
|
|
function handleOrderSuccess(orderId) {
|
||
|
|
document.getElementById('message').innerText = `订单创建成功！您的订单号是：${orderId}`;
|
||
|
|
document.getElementById('message').classList.remove('hidden');
|
||
|
|
document.getElementById('addresses').classList.add('hidden');
|
||
|
|
document.getElementById('error').classList.add('hidden');
|
||
|
|
}
|
||
|
|
|
||
|
|
function handleMultipleAddresses(addresses) {
|
||
|
|
const addressList = document.getElementById('address-list');
|
||
|
|
addressList.innerHTML = ''; // 清空现有列表
|
||
|
|
|
||
|
|
addresses.forEach((addr, index) => {
|
||
|
|
const li = document.createElement('li');
|
||
|
|
const button = document.createElement('button');
|
||
|
|
button.innerText = `选择地址 ${index + 1}`;
|
||
|
|
button.addEventListener('click', () => {
|
||
|
|
// 选择地址后重新提交订单
|
||
|
|
createOrder(null, null, addr);
|
||
|
|
});
|
||
|
|
li.innerText = addr + ' ';
|
||
|
|
li.appendChild(button);
|
||
|
|
addressList.appendChild(li);
|
||
|
|
});
|
||
|
|
|
||
|
|
document.getElementById('addresses').classList.remove('hidden');
|
||
|
|
document.getElementById('message').classList.add('hidden');
|
||
|
|
document.getElementById('error').classList.add('hidden');
|
||
|
|
}
|
||
|
|
|
||
|
|
function promptUserForAddress() {
|
||
|
|
const address = prompt('地址不能为空，请输入您的地址：');
|
||
|
|
if (address && address.trim() !== "") {
|
||
|
|
createOrder(null, null, address.trim());
|
||
|
|
} else {
|
||
|
|
handleError('地址输入为空，无法创建订单。');
|
||
|
|
}
|
||
|
|
}
|
||
|
|
|
||
|
|
function handleError(message) {
|
||
|
|
const errorDiv = document.getElementById('error');
|
||
|
|
errorDiv.innerText = `错误：${message}`;
|
||
|
|
errorDiv.classList.remove('hidden');
|
||
|
|
document.getElementById('message').classList.add('hidden');
|
||
|
|
document.getElementById('addresses').classList.add('hidden');
|
||
|
|
}
|
||
|
|
|
||
|
|
// 绑定表单提交事件
|
||
|
|
document.getElementById('order-form').addEventListener('submit', function(event) {
|
||
|
|
event.preventDefault(); // 阻止表单默认提交行为
|
||
|
|
|
||
|
|
// 获取表单输入值
|
||
|
|
const phone = document.getElementById('phone').value.trim();
|
||
|
|
const email = document.getElementById('email').value.trim();
|
||
|
|
const address = document.getElementById('address').value.trim();
|
||
|
|
|
||
|
|
// 清除之前的消息
|
||
|
|
document.getElementById('message').classList.add('hidden');
|
||
|
|
document.getElementById('addresses').classList.add('hidden');
|
||
|
|
document.getElementById('error').classList.add('hidden');
|
||
|
|
|
||
|
|
// 调用createOrder函数
|
||
|
|
createOrder(phone, email, address);
|
||
|
|
});
|
||
|
|
</script>
|
||
|
|
</body>
|
||
|
|
</html>
|