update
This commit is contained in:
aaron
parent
1946650566
commit
09086bc6a3
@ -86,7 +86,7 @@ main {
|
||||
box-shadow: 0 8px 25px rgba(40, 167, 69, 0.5);
|
||||
}
|
||||
|
||||
/* 产品卡片 */
|
||||
/* 产品展示区域 - 全新设计 */
|
||||
.product-section {
|
||||
background: linear-gradient(145deg, #1a1a1a 0%, #2d2d2d 100%);
|
||||
border-radius: 20px;
|
||||
@ -98,7 +98,7 @@ main {
|
||||
}
|
||||
|
||||
.product-card {
|
||||
text-align: center;
|
||||
display: block;
|
||||
}
|
||||
|
||||
.product-image {
|
||||
@ -106,7 +106,7 @@ main {
|
||||
height: 280px;
|
||||
background: linear-gradient(135deg, #333 0%, #444 100%);
|
||||
border-radius: 15px;
|
||||
margin-bottom: 25px;
|
||||
margin-bottom: 30px;
|
||||
display: flex;
|
||||
align-items: center;
|
||||
justify-content: center;
|
||||
@ -130,39 +130,77 @@ main {
|
||||
width: 100%;
|
||||
height: 100%;
|
||||
object-fit: cover;
|
||||
object-position: center;
|
||||
border-radius: 10px;
|
||||
}
|
||||
|
||||
.product-info h2 {
|
||||
/* 产品信息区域 */
|
||||
.product-details {
|
||||
text-align: center;
|
||||
}
|
||||
|
||||
.product-title {
|
||||
color: #ffffff;
|
||||
font-size: 2.5em;
|
||||
font-weight: 700;
|
||||
margin-bottom: 15px;
|
||||
font-size: 2em;
|
||||
font-weight: 600;
|
||||
}
|
||||
|
||||
.product-description {
|
||||
.product-desc {
|
||||
color: #b0b0b0;
|
||||
margin-bottom: 25px;
|
||||
font-size: 1.2em;
|
||||
line-height: 1.6;
|
||||
font-size: 1.1em;
|
||||
margin-bottom: 30px;
|
||||
}
|
||||
|
||||
.price {
|
||||
font-size: 2.2em;
|
||||
font-weight: bold;
|
||||
margin-bottom: 20px;
|
||||
background: linear-gradient(45deg, #ffd700, #ffed4a);
|
||||
-webkit-background-clip: text;
|
||||
-webkit-text-fill-color: transparent;
|
||||
background-clip: text;
|
||||
text-shadow: 0 0 20px rgba(255, 215, 0, 0.3);
|
||||
.product-price {
|
||||
margin-bottom: 30px;
|
||||
}
|
||||
|
||||
.price .currency,
|
||||
.price .unit {
|
||||
font-size: 0.7em;
|
||||
color: #888;
|
||||
.price-text {
|
||||
font-size: 3em;
|
||||
font-weight: 900;
|
||||
color: #ffd700;
|
||||
text-shadow: 0 0 30px rgba(255, 215, 0, 0.6);
|
||||
}
|
||||
|
||||
/* 优惠信息 */
|
||||
.product-offers {
|
||||
background: linear-gradient(145deg, #0f1419, #1a2332);
|
||||
border-radius: 15px;
|
||||
padding: 20px;
|
||||
border: 1px solid #2c3e50;
|
||||
position: relative;
|
||||
overflow: hidden;
|
||||
}
|
||||
|
||||
.product-offers::before {
|
||||
content: '';
|
||||
position: absolute;
|
||||
top: 0;
|
||||
left: 0;
|
||||
right: 0;
|
||||
height: 3px;
|
||||
background: linear-gradient(90deg, #ffd700, #ffed4a, #ffd700);
|
||||
}
|
||||
|
||||
.offer-item {
|
||||
color: #e0e0e0;
|
||||
font-size: 15px;
|
||||
font-weight: 500;
|
||||
margin-bottom: 10px;
|
||||
display: flex;
|
||||
align-items: center;
|
||||
justify-content: center;
|
||||
}
|
||||
|
||||
.offer-item:last-child {
|
||||
margin-bottom: 0;
|
||||
}
|
||||
|
||||
.offer-item strong {
|
||||
color: #ffd700;
|
||||
font-weight: 700;
|
||||
margin: 0 4px;
|
||||
}
|
||||
|
||||
/* 订单表单 */
|
||||
@ -255,6 +293,11 @@ main {
|
||||
font-weight: 600;
|
||||
}
|
||||
|
||||
.discount-line.no-discount {
|
||||
color: #888 !important;
|
||||
font-weight: normal;
|
||||
}
|
||||
|
||||
.subtotal-line {
|
||||
color: #ffc107;
|
||||
text-decoration: line-through;
|
||||
@ -755,6 +798,24 @@ main {
|
||||
padding: 25px;
|
||||
}
|
||||
|
||||
/* 移动端产品展示优化 */
|
||||
.product-title {
|
||||
font-size: 2.1em;
|
||||
}
|
||||
|
||||
.product-desc {
|
||||
font-size: 1.1em;
|
||||
}
|
||||
|
||||
.price-text {
|
||||
font-size: 2.5em;
|
||||
}
|
||||
|
||||
.offer-item {
|
||||
font-size: 14px;
|
||||
text-align: center;
|
||||
}
|
||||
|
||||
.modal-content {
|
||||
width: 95%;
|
||||
margin: 10px;
|
||||
@ -1002,3 +1063,292 @@ main {
|
||||
transform: translateY(-2px);
|
||||
box-shadow: 0 4px 12px rgba(0,0,0,0.3);
|
||||
}
|
||||
|
||||
/* 配送信息模态框样式 - 重新设计 */
|
||||
.shipping-modal-content {
|
||||
max-width: 600px;
|
||||
width: 95%;
|
||||
max-height: 90vh;
|
||||
display: flex;
|
||||
flex-direction: column;
|
||||
}
|
||||
|
||||
.shipping-modal-body {
|
||||
padding: 0;
|
||||
flex: 1;
|
||||
overflow-y: auto;
|
||||
}
|
||||
|
||||
/* 滚动条样式优化 */
|
||||
.shipping-modal-body::-webkit-scrollbar {
|
||||
width: 6px;
|
||||
}
|
||||
|
||||
.shipping-modal-body::-webkit-scrollbar-track {
|
||||
background: #1a1a1a;
|
||||
border-radius: 3px;
|
||||
}
|
||||
|
||||
.shipping-modal-body::-webkit-scrollbar-thumb {
|
||||
background: linear-gradient(135deg, #ffd700, #ffed4a);
|
||||
border-radius: 3px;
|
||||
transition: background 0.3s ease;
|
||||
}
|
||||
|
||||
.shipping-modal-body::-webkit-scrollbar-thumb:hover {
|
||||
background: linear-gradient(135deg, #ffed4a, #fff700);
|
||||
}
|
||||
|
||||
/* Firefox 滚动条样式 */
|
||||
.shipping-modal-body {
|
||||
scrollbar-width: thin;
|
||||
scrollbar-color: #ffd700 #1a1a1a;
|
||||
}
|
||||
|
||||
/* 订单汇总卡片 - 紧凑设计 */
|
||||
.order-summary-card {
|
||||
background: linear-gradient(145deg, #0a0a0a, #1a1a1a);
|
||||
margin: 0 30px 25px;
|
||||
border-radius: 15px;
|
||||
padding: 25px;
|
||||
border: 1px solid #333;
|
||||
box-shadow: 0 8px 20px rgba(0, 0, 0, 0.3);
|
||||
}
|
||||
|
||||
.summary-header {
|
||||
display: flex;
|
||||
justify-content: space-between;
|
||||
align-items: center;
|
||||
margin-bottom: 20px;
|
||||
padding-bottom: 15px;
|
||||
border-bottom: 1px solid #333;
|
||||
}
|
||||
|
||||
.product-info {
|
||||
display: flex;
|
||||
align-items: center;
|
||||
flex: 1;
|
||||
}
|
||||
|
||||
.product-thumb {
|
||||
width: 50px;
|
||||
height: 50px;
|
||||
object-fit: cover;
|
||||
border-radius: 8px;
|
||||
margin-right: 12px;
|
||||
border: 1px solid #444;
|
||||
}
|
||||
|
||||
.product-details h4 {
|
||||
color: #ffffff;
|
||||
margin: 0 0 4px 0;
|
||||
font-size: 1.1em;
|
||||
font-weight: 600;
|
||||
}
|
||||
|
||||
.product-details p {
|
||||
color: #b0b0b0;
|
||||
margin: 0;
|
||||
font-size: 0.85em;
|
||||
}
|
||||
|
||||
.quantity-display {
|
||||
text-align: center;
|
||||
padding: 8px 16px;
|
||||
background: linear-gradient(145deg, #1a1a1a, #2d2d2d);
|
||||
border-radius: 8px;
|
||||
border: 1px solid #444;
|
||||
}
|
||||
|
||||
.quantity-label {
|
||||
display: block;
|
||||
color: #b0b0b0;
|
||||
font-size: 0.8em;
|
||||
margin-bottom: 2px;
|
||||
}
|
||||
|
||||
.quantity-value {
|
||||
display: block;
|
||||
color: #ffd700;
|
||||
font-weight: bold;
|
||||
font-size: 1.1em;
|
||||
}
|
||||
|
||||
/* 价格明细 */
|
||||
.price-breakdown {
|
||||
display: flex;
|
||||
flex-direction: column;
|
||||
gap: 8px;
|
||||
}
|
||||
|
||||
.price-row {
|
||||
display: flex;
|
||||
justify-content: space-between;
|
||||
align-items: center;
|
||||
padding: 6px 0;
|
||||
color: #e0e0e0;
|
||||
font-size: 0.95em;
|
||||
}
|
||||
|
||||
.price-row.discount-row {
|
||||
color: #28a745;
|
||||
font-weight: 500;
|
||||
}
|
||||
|
||||
.price-row.discount-row.no-discount {
|
||||
color: #888;
|
||||
font-weight: normal;
|
||||
}
|
||||
|
||||
.price-row.total-row {
|
||||
margin-top: 8px;
|
||||
padding-top: 12px;
|
||||
border-top: 2px solid #444;
|
||||
font-weight: bold;
|
||||
font-size: 1.1em;
|
||||
}
|
||||
|
||||
.discount-value {
|
||||
color: #28a745;
|
||||
}
|
||||
|
||||
.total-value {
|
||||
color: #ffd700;
|
||||
font-weight: bold;
|
||||
}
|
||||
|
||||
/* 配送信息表单 */
|
||||
.shipping-form-section {
|
||||
padding: 0 30px 30px;
|
||||
}
|
||||
|
||||
.form-section-title {
|
||||
color: #ffffff;
|
||||
margin-bottom: 20px;
|
||||
font-size: 1.2em;
|
||||
font-weight: 600;
|
||||
border-bottom: 2px solid #ffd700;
|
||||
padding-bottom: 8px;
|
||||
}
|
||||
|
||||
.shipping-form-grid {
|
||||
display: flex;
|
||||
flex-direction: column;
|
||||
gap: 20px;
|
||||
}
|
||||
|
||||
.form-row {
|
||||
display: flex;
|
||||
gap: 20px;
|
||||
}
|
||||
|
||||
.form-col {
|
||||
flex: 1;
|
||||
display: flex;
|
||||
flex-direction: column;
|
||||
}
|
||||
|
||||
.form-col.full-width {
|
||||
flex: 1;
|
||||
}
|
||||
|
||||
.form-col label {
|
||||
color: #ffffff;
|
||||
margin-bottom: 6px;
|
||||
font-weight: 600;
|
||||
font-size: 0.95em;
|
||||
}
|
||||
|
||||
.form-col input,
|
||||
.form-col textarea {
|
||||
width: 100%;
|
||||
padding: 12px;
|
||||
border: 2px solid #444;
|
||||
border-radius: 8px;
|
||||
font-size: 15px;
|
||||
background: #0a0a0a;
|
||||
color: #e0e0e0;
|
||||
transition: all 0.3s ease;
|
||||
box-sizing: border-box;
|
||||
}
|
||||
|
||||
.form-col input:focus,
|
||||
.form-col textarea:focus {
|
||||
outline: none;
|
||||
border-color: #ffd700;
|
||||
box-shadow: 0 0 15px rgba(255, 215, 0, 0.2);
|
||||
background: #1a1a1a;
|
||||
}
|
||||
|
||||
.form-col input::placeholder,
|
||||
.form-col textarea::placeholder {
|
||||
color: #666;
|
||||
}
|
||||
|
||||
.form-col textarea {
|
||||
resize: vertical;
|
||||
min-height: 60px;
|
||||
}
|
||||
|
||||
/* 响应式设计 */
|
||||
@media (max-width: 768px) {
|
||||
.shipping-modal-content {
|
||||
width: 98%;
|
||||
max-width: none;
|
||||
margin: 5px;
|
||||
max-height: 95vh;
|
||||
}
|
||||
|
||||
.order-summary-card {
|
||||
margin: 0 20px 20px;
|
||||
padding: 20px;
|
||||
}
|
||||
|
||||
.summary-header {
|
||||
flex-direction: column;
|
||||
gap: 15px;
|
||||
align-items: stretch;
|
||||
}
|
||||
|
||||
.product-info {
|
||||
justify-content: center;
|
||||
}
|
||||
|
||||
.quantity-display {
|
||||
align-self: center;
|
||||
min-width: 80px;
|
||||
}
|
||||
|
||||
.shipping-form-section {
|
||||
padding: 0 20px 25px;
|
||||
}
|
||||
|
||||
.form-section-title {
|
||||
font-size: 1.1em;
|
||||
margin-bottom: 15px;
|
||||
}
|
||||
|
||||
.form-row {
|
||||
flex-direction: column;
|
||||
gap: 15px;
|
||||
}
|
||||
|
||||
.form-col input,
|
||||
.form-col textarea {
|
||||
font-size: 16px; /* 防止iOS缩放 */
|
||||
padding: 14px;
|
||||
}
|
||||
|
||||
.product-thumb {
|
||||
width: 45px;
|
||||
height: 45px;
|
||||
}
|
||||
|
||||
.product-details h4 {
|
||||
font-size: 1em;
|
||||
}
|
||||
|
||||
.product-details p {
|
||||
font-size: 0.8em;
|
||||
}
|
||||
}
|
||||
@ -21,17 +21,19 @@
|
||||
<main>
|
||||
<!-- 产品展示区 -->
|
||||
<section class="product-section">
|
||||
<div class="product-card" id="product-card">
|
||||
<div class="product-card">
|
||||
<div class="product-image">
|
||||
<img src="/images/image01.jpg" alt="产品图片" id="product-img">
|
||||
</div>
|
||||
<div class="product-info">
|
||||
<h2 id="product-name">高级产品</h2>
|
||||
<p class="product-description" id="product-description">这是我们的高级产品，质量优秀</p>
|
||||
<div class="price">
|
||||
<span class="currency">$</span>
|
||||
<span id="product-price">99.99</span>
|
||||
<span class="unit">USDT</span>
|
||||
<div class="product-details">
|
||||
<h2 id="product-name" class="product-title">高级产品</h2>
|
||||
<p id="product-description" class="product-desc">这是我们的高级产品，质量优秀</p>
|
||||
<div class="product-price">
|
||||
<span class="price-text">$<span id="product-price">99.99</span> USDT</span>
|
||||
</div>
|
||||
<div class="product-offers">
|
||||
<div class="offer-item">💰 购买2个享受<strong>9.5折</strong>优惠</div>
|
||||
<div class="offer-item">🎉 购买5个及以上享受<strong>9折</strong>优惠</div>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
@ -56,61 +58,49 @@
|
||||
<span>单价：</span>
|
||||
<span>$<span id="unit-price">99.99</span> USDT</span>
|
||||
</div>
|
||||
<div class="price-line discount-line" id="discount-line" style="display: none;">
|
||||
<div class="price-line discount-line" id="discount-line">
|
||||
<span>优惠：</span>
|
||||
<span id="discount-text"></span>
|
||||
<span id="discount-text">$0.00 USDT (无优惠)</span>
|
||||
</div>
|
||||
<div class="price-line subtotal-line" id="subtotal-line" style="display: none;">
|
||||
<div class="price-line subtotal-line" id="subtotal-line">
|
||||
<span>小计：</span>
|
||||
<span id="subtotal-price"></span>
|
||||
<span id="subtotal-price">$99.99 USDT</span>
|
||||
</div>
|
||||
<div class="price-line total-line">
|
||||
<span>总价：</span>
|
||||
<span id="total-price">$99.99 USDT</span>
|
||||
</div>
|
||||
</div>
|
||||
|
||||
<!-- 优惠提示 -->
|
||||
<div class="discount-tips">
|
||||
<div class="tip-item">
|
||||
<span class="tip-badge">💰</span>
|
||||
<span>购买2个享受<strong>9.5折</strong>优惠</span>
|
||||
</div>
|
||||
<div class="tip-item">
|
||||
<span class="tip-badge">🎉</span>
|
||||
<span>购买5个及以上享受<strong>9折</strong>优惠</span>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
|
||||
<!-- 配送信息分割线 -->
|
||||
<div class="section-divider"></div>
|
||||
<div class="section-divider" style="display: none;"></div>
|
||||
|
||||
<!-- 配送信息 -->
|
||||
<div class="shipping-info-section">
|
||||
<div class="shipping-info-section" style="display: none;">
|
||||
<h3 class="section-title">配送信息</h3>
|
||||
|
||||
<div class="form-group">
|
||||
<label for="customer_name">收货人姓名：*</label>
|
||||
<input type="text" id="customer_name" name="customer_name" required>
|
||||
<input type="text" id="customer_name" name="customer_name">
|
||||
</div>
|
||||
|
||||
<div class="form-group">
|
||||
<label for="customer_phone">联系电话：*</label>
|
||||
<input type="tel" id="customer_phone" name="customer_phone" required
|
||||
<input type="tel" id="customer_phone" name="customer_phone"
|
||||
placeholder="请输入11位手机号码">
|
||||
</div>
|
||||
|
||||
<div class="form-group">
|
||||
<label for="customer_email">邮箱地址：*</label>
|
||||
<input type="email" id="customer_email" name="customer_email" required
|
||||
<input type="email" id="customer_email" name="customer_email"
|
||||
placeholder="请输入邮箱地址">
|
||||
</div>
|
||||
|
||||
<!-- 收货地址 -->
|
||||
<div class="form-group">
|
||||
<label for="shipping_address">详细地址：*</label>
|
||||
<textarea id="shipping_address" name="shipping_address" rows="3" required
|
||||
<textarea id="shipping_address" name="shipping_address" rows="3"
|
||||
placeholder="请输入详细的收货地址，包括省市区县和具体地址"></textarea>
|
||||
</div>
|
||||
</div>
|
||||
@ -234,6 +224,93 @@
|
||||
</div>
|
||||
</div>
|
||||
|
||||
<!-- 配送信息模态框 -->
|
||||
<div id="shippingInfoModal" class="modal" style="display: none;">
|
||||
<div class="modal-content shipping-modal-content">
|
||||
<div class="modal-header">
|
||||
<h3>确认订单信息</h3>
|
||||
<span class="close" id="closeShippingModal">×</span>
|
||||
</div>
|
||||
<div class="modal-body shipping-modal-body">
|
||||
<!-- 订单汇总（顶部卡片） -->
|
||||
<div class="order-summary-card">
|
||||
<div class="summary-header">
|
||||
<div class="product-info">
|
||||
<img src="/images/image01.jpg" alt="产品图片" class="product-thumb">
|
||||
<div class="product-details">
|
||||
<h4 id="summary-product-name">高级产品</h4>
|
||||
<p id="summary-product-desc">产品描述</p>
|
||||
</div>
|
||||
</div>
|
||||
<div class="quantity-display">
|
||||
<span class="quantity-label">数量</span>
|
||||
<span id="summary-quantity" class="quantity-value">1</span>
|
||||
</div>
|
||||
</div>
|
||||
|
||||
<div class="price-breakdown">
|
||||
<div class="price-row">
|
||||
<span>单价</span>
|
||||
<span id="summary-unit-price">$99.00 USDT</span>
|
||||
</div>
|
||||
<div class="price-row discount-row">
|
||||
<span>优惠</span>
|
||||
<span id="summary-discount-text" class="discount-value">$0.00 USDT (无优惠)</span>
|
||||
</div>
|
||||
<div class="price-row total-row">
|
||||
<span>总计</span>
|
||||
<span id="summary-total-price" class="total-value">$99.00 USDT</span>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
|
||||
<!-- 配送信息表单 -->
|
||||
<div class="shipping-form-section">
|
||||
<h4 class="form-section-title">配送信息</h4>
|
||||
<form id="shippingForm" class="shipping-form-grid">
|
||||
<div class="form-row">
|
||||
<div class="form-col">
|
||||
<label for="modal_customer_name">收货人姓名 *</label>
|
||||
<input type="text" id="modal_customer_name" name="customer_name" required>
|
||||
</div>
|
||||
<div class="form-col">
|
||||
<label for="modal_customer_phone">联系电话 *</label>
|
||||
<input type="tel" id="modal_customer_phone" name="customer_phone" required
|
||||
placeholder="请输入11位手机号码">
|
||||
</div>
|
||||
</div>
|
||||
|
||||
<div class="form-row">
|
||||
<div class="form-col full-width">
|
||||
<label for="modal_customer_email">邮箱地址 *</label>
|
||||
<input type="email" id="modal_customer_email" name="customer_email" required
|
||||
placeholder="请输入邮箱地址">
|
||||
</div>
|
||||
</div>
|
||||
|
||||
<div class="form-row">
|
||||
<div class="form-col full-width">
|
||||
<label for="modal_shipping_address">收货地址 *</label>
|
||||
<textarea id="modal_shipping_address" name="shipping_address" rows="2" required
|
||||
placeholder="请输入详细的收货地址，包括省市区县和具体地址"></textarea>
|
||||
</div>
|
||||
</div>
|
||||
|
||||
<!-- 确认下单按钮 -->
|
||||
<div class="form-row">
|
||||
<div class="form-col full-width">
|
||||
<button type="submit" id="submit-shipping-order" class="order-btn">
|
||||
<span class="btn-text">确认下单并支付</span>
|
||||
<span class="btn-loading" style="display: none;">处理中...</span>
|
||||
</button>
|
||||
</div>
|
||||
</div>
|
||||
</form>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
|
||||
<script src="/js/main.js"></script>
|
||||
</body>
|
||||
</html>
|
||||
@ -73,13 +73,33 @@ function setupEventListeners() {
|
||||
}
|
||||
});
|
||||
|
||||
// 表单提交
|
||||
orderForm.addEventListener('submit', handleOrderSubmit);
|
||||
// 表单提交 - 显示配送信息模态框
|
||||
orderForm.addEventListener('submit', function(e) {
|
||||
e.preventDefault();
|
||||
showShippingInfoModal();
|
||||
});
|
||||
|
||||
// 模态框控制
|
||||
document.getElementById('closeModal').addEventListener('click', closeOrderModal);
|
||||
document.getElementById('pay-now-btn').addEventListener('click', handlePayNow);
|
||||
|
||||
// 配送信息模态框控制
|
||||
document.getElementById('closeShippingModal').addEventListener('click', closeShippingInfoModal);
|
||||
document.getElementById('shippingForm').addEventListener('submit', handleShippingOrderSubmit);
|
||||
|
||||
// 手机号验证 - 模态框中的
|
||||
document.getElementById('modal_customer_phone').addEventListener('blur', function() {
|
||||
validatePhoneField(this);
|
||||
});
|
||||
document.getElementById('modal_customer_phone').addEventListener('input', function(e) {
|
||||
// 只允许输入数字
|
||||
e.target.value = e.target.value.replace(/[^0-9]/g, '');
|
||||
// 限制长度为11位
|
||||
if (e.target.value.length > 11) {
|
||||
e.target.value = e.target.value.slice(0, 11);
|
||||
}
|
||||
});
|
||||
|
||||
// 支付状态检查
|
||||
document.getElementById('check-status-btn').addEventListener('click', checkPaymentStatus);
|
||||
|
||||
@ -120,23 +140,89 @@ function updateTotalPrice() {
|
||||
const discountTextElement = document.getElementById('discount-text');
|
||||
const subtotalPriceElement = document.getElementById('subtotal-price');
|
||||
|
||||
// 始终显示优惠和小计信息
|
||||
if (discount > 0) {
|
||||
// 显示优惠信息
|
||||
discountLine.style.display = 'flex';
|
||||
subtotalLine.style.display = 'flex';
|
||||
|
||||
const discountAmount = originalTotal - finalTotal;
|
||||
discountTextElement.textContent = `-$${discountAmount.toFixed(2)} USDT (${discountText})`;
|
||||
subtotalPriceElement.textContent = `$${originalTotal.toFixed(2)} USDT`;
|
||||
discountLine.classList.remove('no-discount');
|
||||
} else {
|
||||
// 隐藏优惠信息
|
||||
discountLine.style.display = 'none';
|
||||
subtotalLine.style.display = 'none';
|
||||
// 显示无优惠
|
||||
discountTextElement.textContent = `$0.00 USDT (无优惠)`;
|
||||
subtotalPriceElement.textContent = `$${originalTotal.toFixed(2)} USDT`;
|
||||
discountLine.classList.add('no-discount');
|
||||
}
|
||||
|
||||
discountLine.style.display = 'flex';
|
||||
subtotalLine.style.display = 'flex';
|
||||
|
||||
totalPriceElement.textContent = `$${finalTotal.toFixed(2)} USDT`;
|
||||
}
|
||||
|
||||
// 显示配送信息模态框
|
||||
function showShippingInfoModal() {
|
||||
if (!currentProduct) return;
|
||||
|
||||
const quantity = parseInt(quantityInput.value) || 1;
|
||||
const unitPrice = currentProduct.price;
|
||||
const originalTotal = unitPrice * quantity;
|
||||
let finalTotal = originalTotal;
|
||||
let discountText = '';
|
||||
let hasDiscount = false;
|
||||
|
||||
// 计算折扣
|
||||
if (quantity >= 5) {
|
||||
finalTotal = originalTotal * 0.9;
|
||||
discountText = '9折优惠 (-10%)';
|
||||
hasDiscount = true;
|
||||
} else if (quantity >= 2) {
|
||||
finalTotal = originalTotal * 0.95;
|
||||
discountText = '9.5折优惠 (-5%)';
|
||||
hasDiscount = true;
|
||||
}
|
||||
|
||||
// 更新订单汇总信息
|
||||
document.getElementById('summary-product-name').textContent = currentProduct.name;
|
||||
document.getElementById('summary-product-desc').textContent = currentProduct.description;
|
||||
document.getElementById('summary-quantity').textContent = quantity;
|
||||
document.getElementById('summary-unit-price').textContent = `$${unitPrice.toFixed(2)} USDT`;
|
||||
document.getElementById('summary-total-price').textContent = `$${finalTotal.toFixed(2)} USDT`;
|
||||
|
||||
// 更新折扣信息
|
||||
const discountRow = document.querySelector('.discount-row');
|
||||
const discountTextElement = document.getElementById('summary-discount-text');
|
||||
|
||||
if (hasDiscount) {
|
||||
const discountAmount = originalTotal - finalTotal;
|
||||
discountTextElement.textContent = `-$${discountAmount.toFixed(2)} USDT (${discountText})`;
|
||||
discountRow.classList.remove('no-discount');
|
||||
} else {
|
||||
discountTextElement.textContent = `$0.00 USDT (无优惠)`;
|
||||
discountRow.classList.add('no-discount');
|
||||
}
|
||||
|
||||
document.getElementById('shippingInfoModal').style.display = 'flex';
|
||||
}
|
||||
|
||||
// 关闭配送信息模态框
|
||||
function closeShippingInfoModal() {
|
||||
document.getElementById('shippingInfoModal').style.display = 'none';
|
||||
}
|
||||
|
||||
// 验证手机号字段（通用函数）
|
||||
function validatePhoneField(phoneInput) {
|
||||
const phone = phoneInput.value.trim();
|
||||
|
||||
if (phone && !validatePhoneNumber(phone)) {
|
||||
phoneInput.style.borderColor = '#ff4757';
|
||||
showFieldError(phoneInput, '请输入正确的11位手机号码');
|
||||
} else {
|
||||
phoneInput.style.borderColor = '#444';
|
||||
hideFieldError(phoneInput);
|
||||
}
|
||||
}
|
||||
|
||||
// 验证数量
|
||||
function validateQuantity() {
|
||||
const value = parseInt(quantityInput.value);
|
||||
@ -491,3 +577,149 @@ document.addEventListener('DOMContentLoaded', function() {
|
||||
});
|
||||
}
|
||||
});
|
||||
|
||||
// 处理配送信息提交并直接下单
|
||||
async function handleShippingOrderSubmit(e) {
|
||||
e.preventDefault();
|
||||
|
||||
if (!currentProduct) {
|
||||
alert('产品信息加载中，请稍后重试');
|
||||
return;
|
||||
}
|
||||
|
||||
// 获取表单数据
|
||||
const formData = new FormData(e.target);
|
||||
const quantity = parseInt(quantityInput.value);
|
||||
|
||||
// 计算最终价格（包含折扣）
|
||||
const unitPrice = currentProduct.price;
|
||||
const originalTotal = unitPrice * quantity;
|
||||
let finalTotal = originalTotal;
|
||||
|
||||
if (quantity >= 5) {
|
||||
finalTotal = originalTotal * 0.9; // 9折
|
||||
} else if (quantity >= 2) {
|
||||
finalTotal = originalTotal * 0.95; // 9.5折
|
||||
}
|
||||
|
||||
const orderData = {
|
||||
product_id: currentProduct.id,
|
||||
quantity: quantity,
|
||||
unit_price: unitPrice,
|
||||
total_amount: finalTotal, // 使用折扣后的价格
|
||||
customer_name: formData.get('customer_name').trim(),
|
||||
customer_email: formData.get('customer_email').trim(),
|
||||
customer_phone: formData.get('customer_phone').trim(),
|
||||
shipping_address: formData.get('shipping_address').trim()
|
||||
};
|
||||
|
||||
// 验证必填字段
|
||||
if (!orderData.customer_name || !orderData.customer_phone || !orderData.customer_email || !orderData.shipping_address) {
|
||||
alert('请填写所有必填信息');
|
||||
return;
|
||||
}
|
||||
|
||||
// 验证手机号格式
|
||||
if (!validatePhoneNumber(orderData.customer_phone)) {
|
||||
alert('请输入正确的11位手机号码');
|
||||
return;
|
||||
}
|
||||
|
||||
// 验证邮箱格式
|
||||
if (!validateEmail(orderData.customer_email)) {
|
||||
alert('请输入正确的邮箱地址');
|
||||
return;
|
||||
}
|
||||
|
||||
// 禁用提交按钮
|
||||
const submitBtn = document.getElementById('submit-shipping-order');
|
||||
const btnText = submitBtn.querySelector('.btn-text');
|
||||
const btnLoading = submitBtn.querySelector('.btn-loading');
|
||||
|
||||
submitBtn.disabled = true;
|
||||
btnText.style.display = 'none';
|
||||
btnLoading.style.display = 'inline';
|
||||
|
||||
try {
|
||||
// 创建订单
|
||||
const orderResponse = await fetch('/api/orders', {
|
||||
method: 'POST',
|
||||
headers: {
|
||||
'Content-Type': 'application/json'
|
||||
},
|
||||
body: JSON.stringify(orderData)
|
||||
});
|
||||
|
||||
const orderResult = await orderResponse.json();
|
||||
|
||||
if (orderResult.success) {
|
||||
// 创建支付
|
||||
const paymentResponse = await fetch('/api/payment/create', {
|
||||
method: 'POST',
|
||||
headers: {
|
||||
'Content-Type': 'application/json'
|
||||
},
|
||||
body: JSON.stringify({
|
||||
order_id: orderResult.order_id
|
||||
})
|
||||
});
|
||||
|
||||
const paymentResult = await paymentResponse.json();
|
||||
|
||||
if (paymentResult.success) {
|
||||
// 关闭配送信息模态框
|
||||
closeShippingInfoModal();
|
||||
|
||||
if (paymentResult.manual_mode) {
|
||||
// 手动支付模式
|
||||
window.location.href = paymentResult.payment_url;
|
||||
} else {
|
||||
// 显示跳转提示并直接跳转到UPay支付页面
|
||||
const jumpTip = document.createElement('div');
|
||||
jumpTip.innerHTML = `
|
||||
<div class="jump-tip-overlay">
|
||||
<div class="jump-tip-content">
|
||||
<div class="jump-tip-icon">
|
||||
<div class="loading-spinner-gold"></div>
|
||||
</div>
|
||||
<h3>正在跳转到支付页面...</h3>
|
||||
<p>请在新页面完成USDT支付</p>
|
||||
</div>
|
||||
</div>
|
||||
`;
|
||||
document.body.appendChild(jumpTip);
|
||||
|
||||
// 3秒后跳转到UPay支付页面
|
||||
setTimeout(() => {
|
||||
window.location.href = paymentResult.payment_url;
|
||||
}, 3000);
|
||||
}
|
||||
} else {
|
||||
throw new Error(paymentResult.error || '创建支付失败');
|
||||
}
|
||||
} else {
|
||||
throw new Error(orderResult.error || '订单创建失败');
|
||||
}
|
||||
} catch (error) {
|
||||
console.error('下单失败:', error);
|
||||
alert('下单失败: ' + error.message);
|
||||
} finally {
|
||||
// 恢复提交按钮
|
||||
submitBtn.disabled = false;
|
||||
btnText.style.display = 'inline';
|
||||
btnLoading.style.display = 'none';
|
||||
}
|
||||
}
|
||||
|
||||
// 验证手机号字段（通用函数）
|
||||
function validatePhoneField(phoneInput) {
|
||||
const phone = phoneInput.value.trim();
|
||||
|
||||
if (phone && !validatePhoneNumber(phone)) {
|
||||
phoneInput.style.borderColor = '#ff4757';
|
||||
showFieldError(phoneInput, '请输入正确的11位手机号码');
|
||||
} else {
|
||||
phoneInput.style.borderColor = '#444';
|
||||
hideFieldError(phoneInput);
|
||||
}
|
||||
}
|
||||
@ -8,155 +8,211 @@
|
||||
</head>
|
||||
<body>
|
||||
<div class="container">
|
||||
<div class="success-page">
|
||||
<div class="success-icon">
|
||||
<div class="checkmark">✓</div>
|
||||
</div>
|
||||
<h1>支付成功！</h1>
|
||||
<p>感谢您的购买，我们已收到您的USDT支付</p>
|
||||
<!-- 支付成功内容 -->
|
||||
<div class="success-container">
|
||||
<div class="success-card">
|
||||
<div class="success-icon">
|
||||
<div class="success-checkmark">✓</div>
|
||||
</div>
|
||||
|
||||
<div class="order-details" id="orderDetails">
|
||||
<h3>订单状态</h3>
|
||||
<div class="detail-item">
|
||||
<span>支付状态：</span>
|
||||
<span class="status-success">支付已完成</span>
|
||||
</div>
|
||||
<div class="detail-item">
|
||||
<span>处理状态：</span>
|
||||
<span class="status-pending">等待发货</span>
|
||||
</div>
|
||||
<div class="success-message">
|
||||
<p>✅ 支付已成功完成！</p>
|
||||
<p>📦 我们将尽快为您安排发货</p>
|
||||
<p>🔔 发货后会第一时间通知您</p>
|
||||
</div>
|
||||
</div>
|
||||
<h2 class="success-title">支付成功！</h2>
|
||||
<p class="success-message">感谢您的购买，订单已确认</p>
|
||||
|
||||
<div class="actions">
|
||||
<button onclick="window.location.href='/'" class="btn-primary">继续购物</button>
|
||||
<div class="success-info">
|
||||
<div class="info-item">
|
||||
<span class="info-icon">📦</span>
|
||||
<span>我们将尽快安排发货</span>
|
||||
</div>
|
||||
<div class="info-item">
|
||||
<span class="info-icon">🔔</span>
|
||||
<span>发货后将第一时间通知您</span>
|
||||
</div>
|
||||
</div>
|
||||
|
||||
<div class="success-actions">
|
||||
<button onclick="window.location.href='/'" class="success-btn">
|
||||
继续购物
|
||||
</button>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
|
||||
<script>
|
||||
// 成功页面无需JavaScript逻辑，直接显示支付成功信息
|
||||
</script>
|
||||
|
||||
<style>
|
||||
.success-page {
|
||||
/* 支付成功页面样式 - 黑金主题 */
|
||||
.success-container {
|
||||
display: flex;
|
||||
justify-content: center;
|
||||
align-items: center;
|
||||
min-height: 60vh;
|
||||
padding: 40px 20px;
|
||||
}
|
||||
|
||||
.success-card {
|
||||
background: linear-gradient(145deg, #1a1a1a, #2d2d2d);
|
||||
border-radius: 20px;
|
||||
padding: 50px 40px;
|
||||
text-align: center;
|
||||
max-width: 500px;
|
||||
margin: 100px auto;
|
||||
padding: 40px;
|
||||
background: white;
|
||||
border-radius: 15px;
|
||||
box-shadow: 0 10px 30px rgba(0,0,0,0.1);
|
||||
border: 1px solid #333;
|
||||
box-shadow:
|
||||
0 25px 50px rgba(0, 0, 0, 0.5),
|
||||
inset 0 1px 0 rgba(255, 255, 255, 0.1);
|
||||
max-width: 480px;
|
||||
width: 100%;
|
||||
position: relative;
|
||||
overflow: hidden;
|
||||
}
|
||||
|
||||
.success-card::before {
|
||||
content: '';
|
||||
position: absolute;
|
||||
top: 0;
|
||||
left: 0;
|
||||
right: 0;
|
||||
height: 4px;
|
||||
background: linear-gradient(90deg, #ffd700, #ffed4a, #ffd700);
|
||||
}
|
||||
|
||||
.success-icon {
|
||||
width: 100px;
|
||||
height: 100px;
|
||||
margin: 0 auto 30px;
|
||||
background: #27ae60;
|
||||
background: linear-gradient(135deg, #ffd700, #ffed4a);
|
||||
border-radius: 50%;
|
||||
display: flex;
|
||||
align-items: center;
|
||||
justify-content: center;
|
||||
box-shadow:
|
||||
0 20px 40px rgba(255, 215, 0, 0.3),
|
||||
0 0 60px rgba(255, 215, 0, 0.2);
|
||||
animation: successPulse 2s ease-in-out infinite alternate;
|
||||
}
|
||||
|
||||
.checkmark {
|
||||
color: white;
|
||||
font-size: 60px;
|
||||
font-weight: bold;
|
||||
@keyframes successPulse {
|
||||
0% {
|
||||
box-shadow:
|
||||
0 20px 40px rgba(255, 215, 0, 0.3),
|
||||
0 0 60px rgba(255, 215, 0, 0.2);
|
||||
}
|
||||
100% {
|
||||
box-shadow:
|
||||
0 25px 50px rgba(255, 215, 0, 0.4),
|
||||
0 0 80px rgba(255, 215, 0, 0.3);
|
||||
}
|
||||
}
|
||||
|
||||
.success-page h1 {
|
||||
color: #27ae60;
|
||||
.success-checkmark {
|
||||
color: #000;
|
||||
font-size: 50px;
|
||||
font-weight: 900;
|
||||
text-shadow: 0 2px 4px rgba(0, 0, 0, 0.2);
|
||||
}
|
||||
|
||||
.success-title {
|
||||
color: #ffffff;
|
||||
font-size: 2.2em;
|
||||
font-weight: 700;
|
||||
margin-bottom: 15px;
|
||||
}
|
||||
|
||||
.success-page p {
|
||||
color: #7f8c8d;
|
||||
margin-bottom: 30px;
|
||||
}
|
||||
|
||||
.order-details {
|
||||
background: #f8f9fa;
|
||||
padding: 20px;
|
||||
border-radius: 10px;
|
||||
margin-bottom: 30px;
|
||||
text-align: left;
|
||||
}
|
||||
|
||||
.order-details h3 {
|
||||
margin-bottom: 15px;
|
||||
color: #2c3e50;
|
||||
}
|
||||
|
||||
.detail-item {
|
||||
display: flex;
|
||||
justify-content: space-between;
|
||||
margin-bottom: 10px;
|
||||
padding: 8px 0;
|
||||
border-bottom: 1px solid #e0e6ed;
|
||||
}
|
||||
|
||||
.status-success {
|
||||
color: #27ae60;
|
||||
font-weight: bold;
|
||||
}
|
||||
|
||||
.status-pending {
|
||||
color: #f39c12;
|
||||
font-weight: bold;
|
||||
text-shadow: 0 2px 15px rgba(255, 255, 255, 0.1);
|
||||
}
|
||||
|
||||
.success-message {
|
||||
margin-top: 20px;
|
||||
padding: 15px;
|
||||
background: #d5edda;
|
||||
border: 1px solid #c3e6cb;
|
||||
border-radius: 8px;
|
||||
color: #b8b8b8;
|
||||
font-size: 1.2em;
|
||||
margin-bottom: 35px;
|
||||
line-height: 1.6;
|
||||
}
|
||||
|
||||
.success-info {
|
||||
margin-bottom: 40px;
|
||||
padding: 25px;
|
||||
background: linear-gradient(145deg, #0a0a0a, #1a1a1a);
|
||||
border-radius: 15px;
|
||||
border: 1px solid #444;
|
||||
}
|
||||
|
||||
.info-item {
|
||||
display: flex;
|
||||
align-items: center;
|
||||
justify-content: center;
|
||||
margin-bottom: 15px;
|
||||
color: #e0e0e0;
|
||||
font-size: 1.1em;
|
||||
font-weight: 500;
|
||||
}
|
||||
|
||||
.info-item:last-child {
|
||||
margin-bottom: 0;
|
||||
}
|
||||
|
||||
.info-icon {
|
||||
font-size: 20px;
|
||||
margin-right: 12px;
|
||||
}
|
||||
|
||||
.success-actions {
|
||||
text-align: center;
|
||||
}
|
||||
|
||||
.success-message p {
|
||||
margin: 8px 0;
|
||||
color: #155724;
|
||||
font-size: 14px;
|
||||
}
|
||||
|
||||
.actions {
|
||||
display: flex;
|
||||
gap: 15px;
|
||||
justify-content: center;
|
||||
}
|
||||
|
||||
.btn-primary, .btn-secondary {
|
||||
padding: 12px 24px;
|
||||
.success-btn {
|
||||
background: linear-gradient(135deg, #ffd700, #ffed4a);
|
||||
color: #000;
|
||||
border: none;
|
||||
border-radius: 8px;
|
||||
font-size: 16px;
|
||||
padding: 16px 40px;
|
||||
border-radius: 12px;
|
||||
font-size: 18px;
|
||||
font-weight: bold;
|
||||
cursor: pointer;
|
||||
transition: all 0.3s;
|
||||
transition: all 0.3s ease;
|
||||
text-transform: uppercase;
|
||||
letter-spacing: 1px;
|
||||
position: relative;
|
||||
overflow: hidden;
|
||||
}
|
||||
|
||||
.btn-primary {
|
||||
background: #667eea;
|
||||
color: white;
|
||||
.success-btn::before {
|
||||
content: '';
|
||||
position: absolute;
|
||||
top: 0;
|
||||
left: -100%;
|
||||
width: 100%;
|
||||
height: 100%;
|
||||
background: linear-gradient(90deg, transparent, rgba(255, 255, 255, 0.2), transparent);
|
||||
transition: left 0.5s;
|
||||
}
|
||||
|
||||
.btn-primary:hover {
|
||||
background: #5a67d8;
|
||||
.success-btn:hover::before {
|
||||
left: 100%;
|
||||
}
|
||||
|
||||
.btn-secondary {
|
||||
background: #e0e6ed;
|
||||
color: #2c3e50;
|
||||
.success-btn:hover {
|
||||
transform: translateY(-3px);
|
||||
box-shadow: 0 15px 35px rgba(255, 215, 0, 0.4);
|
||||
}
|
||||
|
||||
.btn-secondary:hover {
|
||||
background: #d1d9e0;
|
||||
/* 移动端优化 */
|
||||
@media (max-width: 768px) {
|
||||
.success-card {
|
||||
padding: 40px 25px;
|
||||
margin: 20px;
|
||||
}
|
||||
|
||||
.success-title {
|
||||
font-size: 1.8em;
|
||||
}
|
||||
|
||||
.success-message {
|
||||
font-size: 1.1em;
|
||||
}
|
||||
|
||||
.info-item {
|
||||
font-size: 1em;
|
||||
}
|
||||
|
||||
.success-btn {
|
||||
padding: 14px 30px;
|
||||
font-size: 16px;
|
||||
}
|
||||
}
|
||||
</style>
|
||||
</body>
|
||||
|
||||
14
server.js
14
server.js
@ -42,19 +42,19 @@ db.serialize(() => {
|
||||
});
|
||||
|
||||
// UPay 配置
|
||||
// const UPAY_APP_ID = 'E7c4dss9';
|
||||
// const UPAY_APP_SECRET = 'Hwc56INsabRau2yn';
|
||||
// const UPAY_API_URL = 'https://api.upay.ink/v1/api/open';
|
||||
const UPAY_APP_ID = 'E7c4dss9';
|
||||
const UPAY_APP_SECRET = 'Hwc56INsabRau2yn';
|
||||
const UPAY_API_URL = 'https://api.upay.ink/v1/api/open';
|
||||
|
||||
const UPAY_APP_ID = 'M1C40DvS';
|
||||
const UPAY_APP_SECRET = 'a2nqkkqRb09LIe87';
|
||||
const UPAY_API_URL = 'https://api-test.upay.ink/v1/api/open';
|
||||
// const UPAY_APP_ID = 'M1C40DvS';
|
||||
// const UPAY_APP_SECRET = 'a2nqkkqRb09LIe87';
|
||||
// const UPAY_API_URL = 'https://api-test.upay.ink/v1/api/open';
|
||||
|
||||
// 产品配置
|
||||
const PRODUCTS = {
|
||||
'premium-product': {
|
||||
name: 'Bitaxe 601 比特币刮刮乐',
|
||||
price: 100,
|
||||
price: 99,
|
||||
description: '这是我们的比特币刮刮乐，质量优秀'
|
||||
}
|
||||
};
|
||||
|
||||
Loading…
Reference in New Issue
Block a user