diff --git a/public/css/style.css b/public/css/style.css index fea506a..6dfda74 100644 --- a/public/css/style.css +++ b/public/css/style.css @@ -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; @@ -1001,4 +1062,293 @@ main { background: linear-gradient(135deg, #555, #666); 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; + } } \ No newline at end of file diff --git a/public/index.html b/public/index.html index a778455..9e53c83 100644 --- a/public/index.html +++ b/public/index.html @@ -21,17 +21,19 @@
-
+
产品图片
-
-

高级产品

-

这是我们的高级产品，质量优秀

-
- $ - 99.99 - USDT +
+

高级产品

+

这是我们的高级产品，质量优秀

+
+ $99.99 USDT +
+
+
💰 购买2个享受9.5折优惠
+
🎉 购买5个及以上享受9折优惠
@@ -56,61 +58,49 @@ 单价： $99.99 USDT
- -
+ -
+ @@ -234,6 +224,93 @@
+ + + \ No newline at end of file diff --git a/public/js/main.js b/public/js/main.js index ba1ddb4..66bcb6e 100644 --- a/public/js/main.js +++ b/public/js/main.js @@ -73,12 +73,32 @@ 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); @@ -490,4 +576,150 @@ document.addEventListener('DOMContentLoaded', function() { } }); } -}); \ No newline at end of file +}); + +// 处理配送信息提交并直接下单 +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 = ` +
+
+
+ +
+

正在跳转到支付页面...

+

请在新页面完成USDT支付

+
+
+ `; + 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); + } +} \ No newline at end of file diff --git a/public/success.html b/public/success.html index 3f1f69d..bc14479 100644 --- a/public/success.html +++ b/public/success.html @@ -8,155 +8,211 @@
-
-
-
✓
-
-

支付成功！

-

感谢您的购买，我们已收到您的USDT支付

- -
-

订单状态

-
- 支付状态： - 支付已完成 + +
+
+
+
✓
-
- 处理状态： - 等待发货 + +

支付成功！

+

感谢您的购买，订单已确认

+ +
+
+ 📦 + 我们将尽快安排发货 +
+
+ 🔔 + 发货后将第一时间通知您 +
-
-

✅ 支付已成功完成！

-

📦 我们将尽快为您安排发货

-

🔔 发货后会第一时间通知您

+ +
+
- -
- -
- - diff --git a/server.js b/server.js index 7355d21..67252ec 100644 --- a/server.js +++ b/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: '这是我们的比特币刮刮乐，质量优秀' } };