FireCard – 创建订单
* {
margin: 0;
padding: 0;
box-sizing: border-box;
}
body {
font-family: ‘Segoe UI’, Tahoma, Geneva, Verdana, sans-serif;
background: linear-gradient(135deg, #667eea 0%, #764ba2 100%);
min-height: 100vh;
color: #333;
padding: 20px;
}
.container {
max-width: 800px;
margin: 0 auto;
background: white;
border-radius: 15px;
box-shadow: 0 10px 30px rgba(0,0,0,0.2);
overflow: hidden;
}
.header {
background: linear-gradient(135deg, #667eea 0%, #764ba2 100%);
color: white;
padding: 30px;
text-align: center;
}
.header h1 {
font-size: 2.5rem;
margin-bottom: 10px;
}
.header p {
font-size: 1.1rem;
opacity: 0.9;
}
.form-container {
padding: 40px;
}
.form-group {
margin-bottom: 25px;
}
.form-group label {
display: block;
margin-bottom: 8px;
font-weight: 600;
color: #555;
font-size: 16px;
}
.form-group input,
.form-group select,
.form-group textarea {
width: 100%;
padding: 15px;
border: 2px solid #e1e5e9;
border-radius: 8px;
font-size: 16px;
transition: border-color 0.3s ease;
}
.form-group input:focus,
.form-group select:focus,
.form-group textarea:focus {
outline: none;
border-color: #667eea;
box-shadow: 0 0 0 3px rgba(102, 126, 234, 0.1);
}
.form-group textarea {
resize: vertical;
min-height: 100px;
}
.form-row {
display: grid;
grid-template-columns: 1fr 1fr;
gap: 20px;
}
.payment-options {
background: #f8f9fa;
padding: 20px;
border-radius: 10px;
margin-bottom: 25px;
}
.payment-options h3 {
margin-bottom: 15px;
color: #495057;
}
.payment-methods {
display: grid;
grid-template-columns: repeat(auto-fit, minmax(150px, 1fr));
gap: 15px;
margin-bottom: 20px;
}
.payment-method {
display: flex;
align-items: center;
gap: 8px;
}
.payment-method input[type=”radio”] {
width: auto;
margin: 0;
}
.payment-channels {
display: grid;
grid-template-columns: repeat(auto-fit, minmax(150px, 1fr));
gap: 15px;
}
.payment-channel {
display: flex;
align-items: center;
gap: 8px;
}
.payment-channel input[type=”radio”] {
width: auto;
margin: 0;
}
.submit-btn {
background: linear-gradient(135deg, #667eea 0%, #764ba2 100%);
color: white;
border: none;
padding: 15px 30px;
border-radius: 8px;
font-size: 18px;
font-weight: 600;
cursor: pointer;
transition: all 0.3s ease;
width: 100%;
}
.submit-btn:hover {
transform: translateY(-2px);
box-shadow: 0 5px 15px rgba(102, 126, 234, 0.4);
}
.submit-btn:disabled {
opacity: 0.6;
cursor: not-allowed;
transform: none;
}
.result-section {
margin-top: 30px;
padding: 20px;
background: #f8f9fa;
border-radius: 10px;
display: none;
}
.result-section h3 {
margin-bottom: 15px;
color: #495057;
}
.qr-code {
text-align: center;
margin: 20px 0;
}
.qr-code img {
max-width: 200px;
border: 1px solid #ddd;
border-radius: 8px;
}
.payment-url {
background: #e9ecef;
padding: 15px;
border-radius: 8px;
margin: 15px 0;
word-break: break-all;
}
.copy-btn {
background: #28a745;
color: white;
border: none;
padding: 8px 15px;
border-radius: 5px;
cursor: pointer;
margin-left: 10px;
}
.copy-btn:hover {
background: #218838;
}
.error {
background: #f8d7da;
color: #721c24;
padding: 15px;
border-radius: 8px;
margin: 15px 0;
border: 1px solid #f5c6cb;
}
.success {
background: #d4edda;
color: #155724;
padding: 15px;
border-radius: 8px;
margin: 15px 0;
border: 1px solid #c3e6cb;
}
.loading {
text-align: center;
padding: 20px;
color: #6c757d;
}
.spinner {
border: 4px solid #f3f3f3;
border-top: 4px solid #667eea;
border-radius: 50%;
width: 40px;
height: 40px;
animation: spin 1s linear infinite;
margin: 0 auto 15px;
}
@keyframes spin {
0% { transform: rotate(0deg); }
100% { transform: rotate(360deg); }
}
.wechat-notice {
background: #d1ecf1;
color: #0c5460;
padding: 15px;
border-radius: 8px;
margin: 15px 0;
border: 1px solid #bee5eb;
}
@media (max-width: 768px) {
.form-row {
grid-template-columns: 1fr;
}
.container {
margin: 10px;
}
.form-container {
padding: 20px;
}
}
🚀 创建订单并支付
// 获取客户端IP地址
async function getClientIP() {
try {
const response = await fetch(‘https://api.ipify.org?format=json’);
const data = await response.json();
return data.ip;
} catch (error) {
console.error(‘获取IP失败:’, error);
return ‘127.0.0.1’; // 默认IP
}
}
// 表单提交处理
document.getElementById(‘orderForm’).addEventListener(‘submit’, async function(e) {
e.preventDefault();
// 显示加载状态
const submitBtn = document.getElementById(‘submitBtn’);
const originalText = submitBtn.innerHTML;
submitBtn.disabled = true;
submitBtn.innerHTML = ‘ 正在创建订单…’;
try {
// 获取客户端IP
const clientIP = await getClientIP();
// 获取表单数据
const formData = new FormData(this);
const orderData = {
user_name: formData.get(‘userName’),
user_email: formData.get(‘userEmail’),
user_phone: formData.get(‘userPhone’),
user_address: formData.get(‘userAddress’),
item_name: formData.get(‘itemName’),
item_quantity: parseInt(formData.get(‘itemQuantity’)),
unit_price: parseFloat(formData.get(‘unitPrice’)),
payment_method: formData.get(‘paymentMethod’),
payment_channel: formData.get(‘paymentChannel’),
client_ip: clientIP
};
// 计算总金额
const totalAmount = orderData.unit_price * orderData.item_quantity;
console.log(‘订单数据:’, orderData);
console.log(‘总金额:’, totalAmount);
console.log(‘客户端IP:’, clientIP);
// 调用API创建订单 – 使用新端口5002
const response = await fetch(‘http://111.229.107.184:5002/api/create_order’, {
method: ‘POST’,
headers: {
‘Content-Type’: ‘application/json’
},
body: JSON.stringify(orderData)
});
const result = await response.json();
// 显示结果
showResult(result, orderData);
} catch (error) {
console.error(‘创建订单失败:’, error);
showError(‘创建订单失败: ‘ + error.message);
} finally {
// 恢复按钮状态
submitBtn.disabled = false;
submitBtn.innerHTML = originalText;
}
});
// 显示结果
function showResult(result, orderData) {
const resultSection = document.getElementById(‘resultSection’);
const resultContent = document.getElementById(‘resultContent’);
if (result.code === 200) {
// 成功
const totalAmount = orderData.unit_price * orderData.item_quantity;
let resultHTML = `
`;
if (orderData.payment_method === ‘微信’) {
// 微信H5支付
resultHTML += `
})
`;
} else {
// 支付宝二维码支付
resultHTML += `
`;
}
resultContent.innerHTML = resultHTML;
} else {
// 失败
resultContent.innerHTML = `
`;
}
resultSection.style.display = ‘block’;
// 滚动到结果区域
resultSection.scrollIntoView({ behavior: ‘smooth’ });
}
// 显示错误
function showError(message) {
const resultSection = document.getElementById(‘resultSection’);
const resultContent = document.getElementById(‘resultContent’);
resultContent.innerHTML = `
`;
resultSection.style.display = ‘block’;
resultSection.scrollIntoView({ behavior: ‘smooth’ });
}
// 复制到剪贴板
function copyToClipboard(text) {
navigator.clipboard.writeText(text).then(function() {
alert(‘支付链接已复制到剪贴板！’);
}).catch(function(err) {
console.error(‘复制失败:’, err);
// 备用方案
const textArea = document.createElement(‘textarea’);
textArea.value = text;
document.body.appendChild(textArea);
textArea.select();
document.execCommand(‘copy’);
document.body.removeChild(textArea);
alert(‘支付链接已复制到剪贴板！’);
});
}
// 实时计算总金额
document.getElementById(‘itemQuantity’).addEventListener(‘change’, calculateTotal);
document.getElementById(‘unitPrice’).addEventListener(‘input’, calculateTotal);
function calculateTotal() {
const quantity = parseInt(document.getElementById(‘itemQuantity’).value) || 0;
const price = parseFloat(document.getElementById(‘unitPrice’).value) || 0;
const total = quantity * price;
if (total > 0) {
document.getElementById(‘submitBtn’).innerHTML = `🚀 创建订单并支付 (总计: ¥${total.toFixed(2)})`;
} else {
document.getElementById(‘submitBtn’).innerHTML = ‘🚀 创建订单并支付’;
}
}
🔥 FireCard
在线卡牌购物 – 创建订单
用户名 *
邮箱
电话
购买数量 *
请选择数量
1
2
3
4
5
6
7
8
9
10
收货地址 *
商品名称 *
单价 (元) *
📊 订单创建结果
✅ 订单创建成功！
订单号: ${result.data.order_id}
商品名称: ${orderData.item_name}
购买数量: ${orderData.item_quantity}
总金额: ¥${totalAmount.toFixed(2)}
支付方式: ${orderData.payment_method}
支付渠道: ${orderData.payment_channel}
客户端IP: ${result.data.user_ip}
📱 请扫描二维码完成微信支付
📱 微信H5支付
请扫描上方二维码或点击下方链接完成微信支付，支付成功后会自动跳转到FireCard首页。
支付链接:
${result.data.payment_url}
复制链接
订单状态: 待支付
创建时间: ${new Date().toLocaleString(‘zh-CN’)}
支付类型: 微信H5支付
📱 请扫描二维码完成支付宝支付
支付链接:
${result.data.payment_url}
复制链接
订单状态: 待支付
创建时间: ${new Date().toLocaleString(‘zh-CN’)}
支付类型: 支付宝二维码支付
❌ 订单创建失败
错误信息: ${result.message}
❌ 操作失败
${message}
FIRE CARD 集換站 