|
|
@@ -264,6 +264,154 @@
|
|
|
</div>
|
|
|
|
|
|
<div id="footer-placeholder"></div>
|
|
|
-<script src="../js/footer.js"></script>
|
|
|
+
|
|
|
+<!-- 底部固定支付栏 -->
|
|
|
+<style>
|
|
|
+.sticky-bar{position:fixed;bottom:0;left:0;right:0;background:rgba(255,255,255,0.97);backdrop-filter:blur(12px);border-top:1px solid #e2e8f0;padding:0.8rem 1.5rem;z-index:999;display:flex;align-items:center;justify-content:space-between;box-shadow:0 -4px 20px rgba(0,0,0,0.06)}
|
|
|
+.sticky-bar .price{font-size:1.5rem;font-weight:800;color:#0d9488}
|
|
|
+.sticky-bar .label{font-size:0.8rem;color:var(--text-muted);margin-bottom:0.1rem}
|
|
|
+.sticky-btn{background:linear-gradient(135deg,#0d9488,#14b8a6);color:#fff;border:none;border-radius:8px;padding:0.7rem 2rem;font-size:1rem;font-weight:600;cursor:pointer;transition:all .2s;white-space:nowrap}
|
|
|
+.sticky-btn:hover{transform:translateY(-1px);box-shadow:0 4px 12px rgba(20,184,166,0.3)}
|
|
|
+body{padding-bottom:70px}
|
|
|
+</style>
|
|
|
+<div class="sticky-bar">
|
|
|
+ <div>
|
|
|
+ <div class="label">Enagic UKON Sigma 姜黄素</div>
|
|
|
+ <div><span class="price">¥6,700</span></div>
|
|
|
+ </div>
|
|
|
+ <button class="sticky-btn" onclick="document.getElementById('orderForm').style.visibility='visible';document.getElementById('orderForm').style.opacity='1'">立即购买</button>
|
|
|
+</div>
|
|
|
+
|
|
|
+<!-- Order Form Modal -->
|
|
|
+<div id="orderForm" style="position:fixed;top:0;left:0;right:0;bottom:0;background:rgba(0,0,0,0.5);z-index:1000;display:flex;align-items:center;justify-content:center;visibility:hidden;opacity:0;transition:opacity 0.2s;" onclick="if(event.target===this){this.style.visibility='hidden';this.style.opacity='0'}">
|
|
|
+ <div style="background:#fff;border-radius:16px;padding:2rem;max-width:420px;width:90%;position:relative;">
|
|
|
+ <button style="position:absolute;top:12px;right:12px;background:none;border:none;font-size:24px;cursor:pointer;color:#999" onclick="var f=document.getElementById('orderForm');f.style.visibility='hidden';f.style.opacity='0'">×</button>
|
|
|
+ <h3 style="margin-bottom:1.2rem;font-size:1.2rem;">Enagic 姜黄素 · 下单</h3>
|
|
|
+ <div style="margin-bottom:1rem">
|
|
|
+ <label style="display:block;font-size:0.85rem;color:var(--text-secondary);margin-bottom:0.3rem">联系人</label>
|
|
|
+ <input id="orderName" type="text" placeholder="请输入您的姓名" style="width:100%;padding:0.6rem 0.8rem;border:1px solid #e2e8f0;border-radius:8px;font-size:0.95rem;box-sizing:border-box">
|
|
|
+ </div>
|
|
|
+ <div style="margin-bottom:1rem">
|
|
|
+ <label style="display:block;font-size:0.85rem;color:var(--text-secondary);margin-bottom:0.3rem">手机号</label>
|
|
|
+ <input id="orderPhone" type="tel" placeholder="请输入手机号" style="width:100%;padding:0.6rem 0.8rem;border:1px solid #e2e8f0;border-radius:8px;font-size:0.95rem;box-sizing:border-box">
|
|
|
+ </div>
|
|
|
+ <div style="margin-bottom:1rem">
|
|
|
+ <label style="display:block;font-size:0.85rem;color:var(--text-secondary);margin-bottom:0.3rem">收件地址</label>
|
|
|
+ <input id="orderAddress" type="text" placeholder="省/市/区 + 详细地址" style="width:100%;padding:0.6rem 0.8rem;border:1px solid #e2e8f0;border-radius:8px;font-size:0.95rem;box-sizing:border-box">
|
|
|
+ </div>
|
|
|
+ <div style="margin-bottom:1.2rem;padding:0.8rem;background:#f0fdfa;border-radius:8px;display:flex;justify-content:space-between;align-items:center">
|
|
|
+ <span style="font-size:0.9rem;color:var(--text-secondary)">合计</span>
|
|
|
+ <span style="font-size:1.5rem;font-weight:800;color:#0d9488">¥6,700</span>
|
|
|
+ </div>
|
|
|
+ <button id="payBtn" onclick="submitOrder(670000,'Enagic UKON Sigma姜黄素')" style="width:100%;padding:0.8rem;background:linear-gradient(135deg,#0d9488,#14b8a6);color:#fff;border:none;border-radius:8px;font-size:1rem;font-weight:600;cursor:pointer">微信支付</button>
|
|
|
+ <p style="font-size:0.75rem;color:var(--text-muted);margin-top:0.8rem;text-align:center">支付由微信支付安全处理</p>
|
|
|
+ </div>
|
|
|
+</div>
|
|
|
+
|
|
|
+<script>
|
|
|
+function submitOrder(amount, productName) {
|
|
|
+ var name = document.getElementById('orderName').value.trim();
|
|
|
+ var phone = document.getElementById('orderPhone').value.trim();
|
|
|
+ var address = document.getElementById('orderAddress').value.trim();
|
|
|
+ if (!name) { alert('请输入联系人姓名'); return; }
|
|
|
+ if (!phone || !/^1\d{10}$/.test(phone)) { alert('请输入正确的手机号'); return; }
|
|
|
+ if (!address) { alert('请输入收件地址'); return; }
|
|
|
+
|
|
|
+ var btn = document.getElementById('payBtn');
|
|
|
+ btn.disabled = true;
|
|
|
+ btn.textContent = '提交中...';
|
|
|
+
|
|
|
+ var orderNo = 'TUR' + Date.now() + Math.random().toString(36).substr(2,4).toUpperCase();
|
|
|
+ window._orderContact = { name: name, phone: phone, address: address };
|
|
|
+
|
|
|
+ fetch('/api/payment/wechat/native', {
|
|
|
+ method: 'POST',
|
|
|
+ headers: { 'Content-Type': 'application/json' },
|
|
|
+ body: JSON.stringify({
|
|
|
+ orderNo: orderNo,
|
|
|
+ description: productName,
|
|
|
+ amount: amount,
|
|
|
+ contactName: name,
|
|
|
+ contactPhone: phone,
|
|
|
+ contactAddress: address
|
|
|
+ })
|
|
|
+ })
|
|
|
+ .then(function(r) { return r.json(); })
|
|
|
+ .then(function(data) {
|
|
|
+ if (data.code === 200 && data.data && data.data.codeUrl) {
|
|
|
+ document.getElementById('orderForm').style.visibility = 'hidden';
|
|
|
+ document.getElementById('orderForm').style.opacity = '0';
|
|
|
+ showQrCode(data.data.codeUrl, orderNo, productName, amount);
|
|
|
+ } else {
|
|
|
+ alert('下单失败: ' + (data.message || ''));
|
|
|
+ btn.disabled = false;
|
|
|
+ btn.textContent = '微信支付';
|
|
|
+ }
|
|
|
+ })
|
|
|
+ .catch(function() {
|
|
|
+ alert('网络请求失败');
|
|
|
+ btn.disabled = false;
|
|
|
+ btn.textContent = '微信支付';
|
|
|
+ });
|
|
|
+}
|
|
|
+
|
|
|
+function showQrCode(codeUrl, orderNo, productName, amount) {
|
|
|
+ var c = window._orderContact || {};
|
|
|
+ var div = document.createElement('div');
|
|
|
+ div.style.cssText = 'position:fixed;top:0;left:0;right:0;bottom:0;background:rgba(0,0,0,0.5);z-index:1000;display:flex;align-items:center;justify-content:center';
|
|
|
+ div.onclick = function(e) { if (e.target === this) this.remove(); };
|
|
|
+ div.innerHTML = '<div style="background:#fff;border-radius:16px;padding:2rem;text-align:center;max-width:340px">' +
|
|
|
+ '<h3 style="margin-bottom:0.8rem;font-size:1.1rem;">请使用微信扫码支付</h3>' +
|
|
|
+ '<div style="background:#f0fdfa;border-radius:8px;padding:0.8rem;margin-bottom:0.8rem;text-align:left">' +
|
|
|
+ '<div style="font-size:0.85rem;color:var(--text-secondary);margin-bottom:0.3rem">' + productName + '</div>' +
|
|
|
+ '<div style="display:flex;justify-content:space-between;align-items:center;margin-bottom:0.3rem">' +
|
|
|
+ '<span style="font-size:0.8rem;color:var(--text-muted)">1份</span>' +
|
|
|
+ '<span style="font-size:1.1rem;font-weight:700;color:#0d9488">¥' + (amount/100).toLocaleString() + '</span>' +
|
|
|
+ '</div>' +
|
|
|
+ '<div style="border-top:1px dashed #e2e8f0;margin:0.5rem 0;padding-top:0.5rem;font-size:0.8rem;color:var(--text-muted)">' +
|
|
|
+ '<div>联系人: ' + (c.name || '') + '</div>' +
|
|
|
+ '<div>手机号: ' + (c.phone || '') + '</div>' +
|
|
|
+ '<div>地址: ' + (c.address || '') + '</div>' +
|
|
|
+ '</div>' +
|
|
|
+ '</div>' +
|
|
|
+ '<div style="width:200px;height:200px;margin:0 auto 0.8rem;display:flex;align-items:center;justify-content:center;border-radius:8px;overflow:hidden">' +
|
|
|
+ '<img src="/api/payment/qrcode?text=' + encodeURIComponent(codeUrl) + '" alt="支付二维码" style="width:200px;height:200px">' +
|
|
|
+ '</div>' +
|
|
|
+ '<p style="font-size:0.8rem;color:#999">打开微信「扫一扫」完成支付</p>' +
|
|
|
+ '<button onclick="this.closest(\'div[style]\').remove()" style="margin-top:0.8rem;padding:0.5rem 2rem;border:1px solid #e2e8f0;border-radius:8px;background:#fff;cursor:pointer">取消支付</button>' +
|
|
|
+ '</div>';
|
|
|
+ document.body.appendChild(div);
|
|
|
+
|
|
|
+ var pollTimer = setInterval(function() {
|
|
|
+ fetch('/api/payment/wechat/status', {
|
|
|
+ method: 'POST',
|
|
|
+ headers: { 'Content-Type': 'application/json' },
|
|
|
+ body: JSON.stringify({ orderNo: orderNo })
|
|
|
+ })
|
|
|
+ .then(function(r) { return r.json(); })
|
|
|
+ .then(function(data) {
|
|
|
+ if (data.code === 200 && data.data === true) {
|
|
|
+ clearInterval(pollTimer);
|
|
|
+ div.innerHTML = '<div style="background:#fff;border-radius:16px;padding:2rem;text-align:center;max-width:320px">' +
|
|
|
+ '<div style="font-size:3rem;margin-bottom:0.5rem">✅</div>' +
|
|
|
+ '<h3 style="color:#0d9488;font-size:1.2rem;margin-bottom:0.5rem">支付成功！</h3>' +
|
|
|
+ '<div style="background:#f0fdfa;border-radius:8px;padding:0.8rem;margin-bottom:1rem;text-align:left">' +
|
|
|
+ '<div style="font-size:0.85rem;color:var(--text-secondary);margin-bottom:0.3rem">' + productName + '</div>' +
|
|
|
+ '<div style="display:flex;justify-content:space-between;align-items:center">' +
|
|
|
+ '<span style="font-size:0.8rem;color:var(--text-muted)">已付款</span>' +
|
|
|
+ '<span style="font-size:1.1rem;font-weight:700;color:#0d9488">¥' + (amount/100).toLocaleString() + '</span>' +
|
|
|
+ '</div>' +
|
|
|
+ '</div>' +
|
|
|
+ '<p style="font-size:0.85rem;color:#999;margin-bottom:0.5rem">我们将在24小时内与您联系确认</p>' +
|
|
|
+ '<p style="font-size:0.75rem;color:#bbb">窗口将在3秒后自动关闭</p>' +
|
|
|
+ '</div>';
|
|
|
+ setTimeout(function() { div.remove(); }, 3000);
|
|
|
+ }
|
|
|
+ })
|
|
|
+ .catch(function() {});
|
|
|
+ }, 3000);
|
|
|
+ setTimeout(function() { clearInterval(pollTimer); }, 120000);
|
|
|
+}
|
|
|
+</script>
|
|
|
</body>
|
|
|
</html>
|
