-
Notifications
You must be signed in to change notification settings - Fork 0
/
flower-order-states.html
147 lines (132 loc) · 5.27 KB
/
flower-order-states.html
1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24
25
26
27
28
29
30
31
32
33
34
35
36
37
38
39
40
41
42
43
44
45
46
47
48
49
50
51
52
53
54
55
56
57
58
59
60
61
62
63
64
65
66
67
68
69
70
71
72
73
74
75
76
77
78
79
80
81
82
83
84
85
86
87
88
89
90
91
92
93
94
95
96
97
98
99
100
101
102
103
104
105
106
107
108
109
110
111
112
113
114
115
116
117
118
119
120
121
122
123
124
125
126
127
128
129
130
131
132
133
134
135
136
137
138
139
140
141
142
143
144
145
146
147
<!DOCTYPE html>
<html lang="zh">
<head>
<meta charset="UTF-8">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<title>订单确认</title>
<link rel="stylesheet" href="flower-order-states.css">
<style>
/* 模态框的样式 */
.modal {
display: none;
position: fixed;
z-index: 1;
left: 0;
top: 0;
width: 100%;
height: 100%;
overflow: auto;
background-color: rgba(0, 0, 0, 0.5);
}
.modal-content {
background-color: #fefefe;
margin: 15% auto;
padding: 20px;
border: 1px solid #888;
width: 80%;
}
.close {
color: #aaa;
float: right;
font-size: 28px;
font-weight: bold;
}
.close:hover,
.close:focus {
color: black;
text-decoration: none;
cursor: pointer;
}
.music-controls button {
font-size: 24px;
}
</style>
</head>
<body>
<div class="container">
<h1>订单确认</h1>
<div class="order-details">
<h2>订单信息</h2>
<p><strong>订购人姓名：</strong><span id="name"></span></p>
<p><strong>订单名称：</strong><span id="order-name"></span></p>
<p><strong>订单编号：</strong><span id="order-number"></span></p>
<p><strong>订购人联系姓名：</strong><span id="orderer-names"></span></p>
<p><strong>是否开具发票：</strong><span id="invoice"></span></p>
<div id="invoice-info" style="display: none;">
<p><strong>公司名称：</strong><span id="company-name"></span></p>
<p><strong>收件人姓名：</strong><span id="recipient-name"></span></p>
<p><strong>收件人地址：</strong><span id="recipient-address"></span></p>
</div>
</div>
<div class="order-details">
<h2>落款人名单</h2>
<ul id="signer-names"></ul>
</div>
<div class="cart-items">
<h2>购物车</h2>
<ul id="cartItems"></ul>
</div>
<button class="button" onclick="submitOrder()">确认并付款</button>
<a class="button red" href="flower-order.html">返回修改</a>
<div class="music-controls">
<button id="play-music" class="music-button">🔊</button>
<button id="stop-music" class="music-button" style="display: none;">🔇</button>
<audio id="background-music" src="your-music-file.mp3"></audio>
</div>
</div>
<!-- 感谢模态框 -->
<div id="thankYouModal" class="modal">
<div class="modal-content">
<span class="close" onclick="closeThankYouModal()">×</span>
<h2>感谢您的订单！</h2>
<p>我们已经收到您的订单，并会尽快处理。请查看您的电子邮件以获取订单确认和进一步的指示。</p>
<p>如果您有任何问题，请随时联系我们。</p>
<button onclick="redirectToObituary()">查看訃闻</button>
</div>
</div>
<script>
async function submitOrder() {
const orderData = {
name: document.getElementById('name').textContent,
orderName: document.getElementById('order-name').textContent,
orderNumber: document.getElementById('order-number').textContent,
ordererNames: document.getElementById('orderer-names').textContent,
invoice: document.getElementById('invoice').textContent,
invoiceInfo: {
companyName: document.getElementById('company-name').textContent,
recipientName: document.getElementById('recipient-name').textContent,
recipientAddress: document.getElementById('recipient-address').textContent,
},
signerNames: Array.from(document.getElementById('signer-names').getElementsByTagName('li')).map(li => li.textContent),
cartItems: Array.from(document.getElementById('cartItems').getElementsByTagName('li')).map(li => li.textContent),
};
try {
const response = await fetch('/api/orders', {
method: 'POST',
headers: {
'Content-Type': 'application/json'
},
body: JSON.stringify(orderData)
});
if (response.ok) {
showThankYouModal();
// 5秒後自動重定向到指定頁面
setTimeout(() => window.location.href = 'obituary-page-url.html', 5000);
} else {
alert('提交订单失败，请重试。');
}
} catch (error) {
console.error('提交订单时发生错误:', error);
alert('提交订单失败，请重试。');
}
}
function showThankYouModal() {
document.getElementById('thankYouModal').style.display = 'block';
}
function closeThankYouModal() {
document.getElementById('thankYouModal').style.display = 'none';
}
function redirectToObituary() {
window.location.href = 'obituary-page-url.html';
}
</script>