349 lines
13 KiB
HTML
349 lines
13 KiB
HTML
|
<!DOCTYPE html>
|
|||
|
|
<html xmlns:th="http://www.thymeleaf.org">
|
|||
|
|
<head>
|
|||
|
|
<meta charset="UTF-8">
|
|||
|
|
<meta name="viewport" content="width=device-width, initial-scale=1.0">
|
|||
|
|
<title>支付订单</title>
|
|||
|
|
<link href="https://cdn.jsdelivr.net/npm/bootstrap@5.1.3/dist/css/bootstrap.min.css" rel="stylesheet">
|
|||
|
|
<link rel="stylesheet" href="https://cdn.jsdelivr.net/npm/bootstrap-icons@1.11.0/font/bootstrap-icons.css">
|
|||
|
|
<style>
|
|||
|
|
:root {
|
|||
|
|
--bg-body: #f8fafc;
|
|||
|
|
--primary: #0f172a;
|
|||
|
|
--accent: #3b82f6;
|
|||
|
|
}
|
|||
|
|
body {
|
|||
|
|
background: var(--bg-body);
|
|||
|
|
padding-bottom: 120px;
|
|||
|
|
font-family: -apple-system, sans-serif;
|
|||
|
|
color: #334155;
|
|||
|
|
}
|
|||
|
|
|
|||
|
|
/* 顶部导航 */
|
|||
|
|
.nav-header {
|
|||
|
|
position: fixed; top: 0; left: 0; right: 0; height: 50px;
|
|||
|
|
background: #fff; display: flex; align-items: center; justify-content: space-between;
|
|||
|
|
padding: 0 16px; z-index: 1000; box-shadow: 0 1px 0 rgba(0,0,0,0.05);
|
|||
|
|
}
|
|||
|
|
.nav-title { font-size: 16px; font-weight: 600; }
|
|||
|
|
.btn-back { border: none; background: transparent; font-size: 20px; padding: 0; }
|
|||
|
|
|
|||
|
|
/* 通用卡片 */
|
|||
|
|
.section-card {
|
|||
|
|
background: #fff; margin: 16px; padding: 16px; border-radius: 16px;
|
|||
|
|
box-shadow: 0 1px 2px rgba(0,0,0,0.02);
|
|||
|
|
}
|
|||
|
|
.card-header {
|
|||
|
|
font-size: 14px; font-weight: 700; margin-bottom: 12px; display: flex; align-items: center;
|
|||
|
|
}
|
|||
|
|
.card-header i { margin-right: 6px; color: #64748b; font-size: 16px; }
|
|||
|
|
|
|||
|
|
/* 订单金额 */
|
|||
|
|
.amount-display {
|
|||
|
|
text-align: center; padding: 24px 0;
|
|||
|
|
}
|
|||
|
|
.amount-label {
|
|||
|
|
font-size: 13px; color: #94a3b8; margin-bottom: 8px;
|
|||
|
|
}
|
|||
|
|
.amount-value {
|
|||
|
|
font-size: 36px; font-weight: 800; color: var(--primary);
|
|||
|
|
}
|
|||
|
|
|
|||
|
|
/* 商品简要信息 */
|
|||
|
|
.product-summary {
|
|||
|
|
display: flex; align-items: center; margin-bottom: 12px;
|
|||
|
|
}
|
|||
|
|
.product-summary:last-child { margin-bottom: 0; }
|
|||
|
|
.summary-img {
|
|||
|
|
width: 50px; height: 50px; border-radius: 8px; object-fit: cover;
|
|||
|
|
background: #f1f5f9; margin-right: 12px; flex-shrink: 0;
|
|||
|
|
}
|
|||
|
|
.summary-info { flex: 1; }
|
|||
|
|
.summary-name {
|
|||
|
|
font-size: 14px; font-weight: 600; color: var(--primary);
|
|||
|
|
margin-bottom: 2px;
|
|||
|
|
}
|
|||
|
|
.summary-detail {
|
|||
|
|
font-size: 12px; color: #94a3b8;
|
|||
|
|
}
|
|||
|
|
.summary-price {
|
|||
|
|
font-size: 14px; font-weight: 600; color: var(--primary);
|
|||
|
|
}
|
|||
|
|
|
|||
|
|
/* 支付方式 */
|
|||
|
|
.pay-option {
|
|||
|
|
display: flex; align-items: center; padding: 16px; border-radius: 12px;
|
|||
|
|
border: 2px solid #f1f5f9; margin-bottom: 12px; cursor: pointer;
|
|||
|
|
transition: all 0.2s; background: #fff;
|
|||
|
|
}
|
|||
|
|
.pay-option:last-child { margin-bottom: 0; }
|
|||
|
|
.pay-option:hover {
|
|||
|
|
border-color: var(--accent);
|
|||
|
|
background: #f8fafc;
|
|||
|
|
}
|
|||
|
|
.pay-option.selected {
|
|||
|
|
border-color: var(--primary);
|
|||
|
|
background: #f8fafc;
|
|||
|
|
}
|
|||
|
|
.pay-icon {
|
|||
|
|
font-size: 32px; margin-right: 16px; width: 40px; text-align: center;
|
|||
|
|
}
|
|||
|
|
.pay-wechat { color: #07c160; }
|
|||
|
|
.pay-alipay { color: #1677ff; }
|
|||
|
|
.pay-info { flex: 1; }
|
|||
|
|
.pay-name {
|
|||
|
|
font-size: 15px; font-weight: 600; color: var(--primary);
|
|||
|
|
margin-bottom: 2px;
|
|||
|
|
}
|
|||
|
|
.pay-desc {
|
|||
|
|
font-size: 12px; color: #94a3b8;
|
|||
|
|
}
|
|||
|
|
.pay-radio {
|
|||
|
|
width: 20px; height: 20px; accent-color: var(--primary);
|
|||
|
|
}
|
|||
|
|
|
|||
|
|
/* 底部操作栏 */
|
|||
|
|
.bottom-bar {
|
|||
|
|
position: fixed; bottom: 0; left: 0; right: 0;
|
|||
|
|
background: #fff; padding: 12px 20px 30px;
|
|||
|
|
box-shadow: 0 -4px 16px rgba(0,0,0,0.05);
|
|||
|
|
display: flex; justify-content: space-between; align-items: center; z-index: 100;
|
|||
|
|
}
|
|||
|
|
.total-area { display: flex; flex-direction: column; align-items: flex-end; }
|
|||
|
|
.total-label { font-size: 12px; color: #64748b; }
|
|||
|
|
.total-val { font-size: 24px; font-weight: 800; color: var(--primary); }
|
|||
|
|
.btn-pay {
|
|||
|
|
background: var(--primary); color: #fff; border: none;
|
|||
|
|
padding: 14px 40px; border-radius: 12px; font-weight: 600; font-size: 16px;
|
|||
|
|
}
|
|||
|
|
.btn-pay:active { transform: scale(0.98); opacity: 0.9; }
|
|||
|
|
.btn-pay:disabled { background: #cbd5e1; }
|
|||
|
|
</style>
|
|||
|
|
</head>
|
|||
|
|
<body>
|
|||
|
|
<!-- 顶部导航 -->
|
|||
|
|
<div class="nav-header">
|
|||
|
|
<button class="btn-back" onclick="history.back()"><i class="bi bi-arrow-left"></i></button>
|
|||
|
|
<span class="nav-title">支付订单</span>
|
|||
|
|
<div style="width: 24px;"></div>
|
|||
|
|
</div>
|
|||
|
|
|
|||
|
|
<div style="height: 50px;"></div>
|
|||
|
|
|
|||
|
|
<!-- 订单金额 -->
|
|||
|
|
<div class="section-card">
|
|||
|
|
<div class="amount-display">
|
|||
|
|
<div class="amount-label">需支付</div>
|
|||
|
|
<div class="amount-value" id="totalAmount">¥0.00</div>
|
|||
|
|
</div>
|
|||
|
|
</div>
|
|||
|
|
|
|||
|
|
<!-- 商品简要信息 -->
|
|||
|
|
<div class="section-card">
|
|||
|
|
<div class="card-header"><i class="bi bi-bag-fill"></i> 订单商品</div>
|
|||
|
|
<div id="productList"></div>
|
|||
|
|
</div>
|
|||
|
|
|
|||
|
|
<!-- 支付方式 -->
|
|||
|
|
<div class="section-card">
|
|||
|
|
<div class="card-header"><i class="bi bi-credit-card-fill"></i> 选择支付方式</div>
|
|||
|
|
<label class="pay-option" id="payWechat">
|
|||
|
|
<i class="bi bi-wechat pay-icon pay-wechat"></i>
|
|||
|
|
<div class="pay-info">
|
|||
|
|
<div class="pay-name">微信支付</div>
|
|||
|
|
<div class="pay-desc">推荐使用微信支付</div>
|
|||
|
|
</div>
|
|||
|
|
<input type="radio" name="payMethod" value="wechat" class="pay-radio" checked>
|
|||
|
|
</label>
|
|||
|
|
<label class="pay-option" id="payAlipay">
|
|||
|
|
<i class="bi bi-alipay pay-icon pay-alipay"></i>
|
|||
|
|
<div class="pay-info">
|
|||
|
|
<div class="pay-name">支付宝</div>
|
|||
|
|
<div class="pay-desc">安全便捷的支付方式</div>
|
|||
|
|
</div>
|
|||
|
|
<input type="radio" name="payMethod" value="alipay" class="pay-radio">
|
|||
|
|
</label>
|
|||
|
|
</div>
|
|||
|
|
|
|||
|
|
<!-- 底部操作栏 -->
|
|||
|
|
<div class="bottom-bar">
|
|||
|
|
<div class="total-area">
|
|||
|
|
<span class="total-label">合计</span>
|
|||
|
|
<span class="total-val" id="bottomTotal">¥0.00</span>
|
|||
|
|
</div>
|
|||
|
|
<button class="btn-pay" onclick="submitPayment()">立即支付</button>
|
|||
|
|
</div>
|
|||
|
|
|
|||
|
|
<script src="https://cdn.jsdelivr.net/npm/bootstrap@5.1.3/dist/js/bootstrap.bundle.min.js"></script>
|
|||
|
|
<script src="/static/js/ui-enhancements.js"></script>
|
|||
|
|
<script src="/static/js/custom-modal.js"></script>
|
|||
|
|
<script>
|
|||
|
|
let orderId = null;
|
|||
|
|
let orderData = null;
|
|||
|
|
|
|||
|
|
// 初始化
|
|||
|
|
(async () => {
|
|||
|
|
// 从URL获取订单ID
|
|||
|
|
const params = new URLSearchParams(location.search);
|
|||
|
|
orderId = params.get('orderId');
|
|||
|
|
|
|||
|
|
if (!orderId) {
|
|||
|
|
alert('订单ID不存在');
|
|||
|
|
history.back();
|
|||
|
|
return;
|
|||
|
|
}
|
|||
|
|
|
|||
|
|
try {
|
|||
|
|
await loadOrderDetail();
|
|||
|
|
} catch(e) {
|
|||
|
|
console.error('初始化失败:', e);
|
|||
|
|
alert('页面加载失败，请刷新重试');
|
|||
|
|
}
|
|||
|
|
})();
|
|||
|
|
|
|||
|
|
// 加载订单详情
|
|||
|
|
async function loadOrderDetail() {
|
|||
|
|
try {
|
|||
|
|
const res = await fetch(`/order/orders/${orderId}`, { credentials: 'include' });
|
|||
|
|
if (!res.ok) {
|
|||
|
|
throw new Error(`HTTP错误: ${res.status}`);
|
|||
|
|
}
|
|||
|
|
const data = await res.json();
|
|||
|
|
console.log('订单详情响应:', data);
|
|||
|
|
|
|||
|
|
if (data.code === 200 && data.data) {
|
|||
|
|
orderData = data.data;
|
|||
|
|
console.log('订单数据:', orderData);
|
|||
|
|
renderOrder();
|
|||
|
|
} else {
|
|||
|
|
const errorMsg = data.message || '加载订单失败';
|
|||
|
|
console.error('加载订单失败:', errorMsg, data);
|
|||
|
|
alert(errorMsg);
|
|||
|
|
history.back();
|
|||
|
|
}
|
|||
|
|
} catch(e) {
|
|||
|
|
console.error('加载订单详情失败:', e);
|
|||
|
|
alert('加载失败: ' + (e.message || '网络错误'));
|
|||
|
|
history.back();
|
|||
|
|
}
|
|||
|
|
}
|
|||
|
|
|
|||
|
|
function renderOrder() {
|
|||
|
|
if (!orderData || !orderData.order) {
|
|||
|
|
alert('订单数据异常');
|
|||
|
|
history.back();
|
|||
|
|
return;
|
|||
|
|
}
|
|||
|
|
|
|||
|
|
const order = orderData.order;
|
|||
|
|
const items = orderData.items || [];
|
|||
|
|
const productImages = orderData.productImages || {};
|
|||
|
|
|
|||
|
|
// 显示金额
|
|||
|
|
const totalAmount = order.totalAmount || 0;
|
|||
|
|
document.getElementById('totalAmount').textContent = '¥' + totalAmount.toFixed(2);
|
|||
|
|
document.getElementById('bottomTotal').textContent = '¥' + totalAmount.toFixed(2);
|
|||
|
|
|
|||
|
|
// 显示商品列表（最多显示3个，超过显示"等X件商品"）
|
|||
|
|
if (items.length === 0) {
|
|||
|
|
document.getElementById('productList').innerHTML = '<div class="text-center text-muted small py-2">暂无商品信息</div>';
|
|||
|
|
} else {
|
|||
|
|
const displayItems = items.slice(0, 3);
|
|||
|
|
const moreCount = items.length - 3;
|
|||
|
|
|
|||
|
|
let html = '';
|
|||
|
|
displayItems.forEach(item => {
|
|||
|
|
if (!item) return;
|
|||
|
|
const productId = item.productId || item.id;
|
|||
|
|
const image = (productImages && productImages[productId]) || '/static/images/default.jpg';
|
|||
|
|
const productName = item.productName || '商品';
|
|||
|
|
const specName = item.specName || '';
|
|||
|
|
const quantity = item.quantity || 1;
|
|||
|
|
const price = item.price || 0;
|
|||
|
|
|
|||
|
|
html += `
|
|||
|
|
<div class="product-summary">
|
|||
|
|
<img src="${image}" class="summary-img" alt="${productName}">
|
|||
|
|
<div class="summary-info">
|
|||
|
|
<div class="summary-name">${productName}</div>
|
|||
|
|
<div class="summary-detail">${specName ? specName + ' ' : ''}x${quantity}</div>
|
|||
|
|
</div>
|
|||
|
|
<div class="summary-price">¥${parseFloat(price).toFixed(2)}</div>
|
|||
|
|
</div>
|
|||
|
|
`;
|
|||
|
|
});
|
|||
|
|
|
|||
|
|
if (moreCount > 0) {
|
|||
|
|
html += `<div class="text-center text-muted small mt-2">等${items.length}件商品</div>`;
|
|||
|
|
}
|
|||
|
|
|
|||
|
|
document.getElementById('productList').innerHTML = html;
|
|||
|
|
}
|
|||
|
|
|
|||
|
|
// 绑定支付方式选择
|
|||
|
|
document.querySelectorAll('input[name="payMethod"]').forEach(radio => {
|
|||
|
|
radio.addEventListener('change', function() {
|
|||
|
|
document.querySelectorAll('.pay-option').forEach(opt => {
|
|||
|
|
opt.classList.remove('selected');
|
|||
|
|
});
|
|||
|
|
if (this.value === 'wechat') {
|
|||
|
|
document.getElementById('payWechat').classList.add('selected');
|
|||
|
|
} else {
|
|||
|
|
document.getElementById('payAlipay').classList.add('selected');
|
|||
|
|
}
|
|||
|
|
});
|
|||
|
|
});
|
|||
|
|
|
|||
|
|
// 默认选中微信支付
|
|||
|
|
document.getElementById('payWechat').classList.add('selected');
|
|||
|
|
}
|
|||
|
|
|
|||
|
|
// 提交支付
|
|||
|
|
async function submitPayment() {
|
|||
|
|
const payMethod = document.querySelector('input[name="payMethod"]:checked').value;
|
|||
|
|
const btn = document.querySelector('.btn-pay');
|
|||
|
|
|
|||
|
|
// 确认支付
|
|||
|
|
const confirmed = await new Promise((resolve) => {
|
|||
|
|
if (typeof confirmAction !== 'undefined') {
|
|||
|
|
confirmAction('确认支付？', '确认支付', '确认', '取消').then(resolve);
|
|||
|
|
} else {
|
|||
|
|
resolve(confirm('确认支付？'));
|
|||
|
|
}
|
|||
|
|
});
|
|||
|
|
if (!confirmed) return;
|
|||
|
|
|
|||
|
|
btn.disabled = true;
|
|||
|
|
btn.textContent = '支付中...';
|
|||
|
|
|
|||
|
|
try {
|
|||
|
|
const res = await fetch(`/order/${orderId}/pay`, {
|
|||
|
|
method: 'POST',
|
|||
|
|
headers: {'Content-Type': 'application/json'},
|
|||
|
|
body: JSON.stringify({ paymentMethod: payMethod }),
|
|||
|
|
credentials: 'include'
|
|||
|
|
});
|
|||
|
|
const d = await res.json();
|
|||
|
|
|
|||
|
|
if (d.code === 200) {
|
|||
|
|
// 跳转到支付成功页面
|
|||
|
|
const order = orderData && orderData.order ? orderData.order : {};
|
|||
|
|
const orderNo = order.orderNo || '';
|
|||
|
|
const amount = order.totalAmount || 0;
|
|||
|
|
window.location.href = `/payment-success.html?orderId=${orderId}&orderNo=${orderNo}&amount=${amount}`;
|
|||
|
|
} else {
|
|||
|
|
alert(d.message || '支付失败');
|
|||
|
|
btn.disabled = false;
|
|||
|
|
btn.textContent = '立即支付';
|
|||
|
|
}
|
|||
|
|
} catch(e) {
|
|||
|
|
console.error(e);
|
|||
|
|
alert('支付失败，请重试');
|
|||
|
|
btn.disabled = false;
|
|||
|
|
btn.textContent = '立即支付';
|
|||
|
|
}
|
|||
|
|
}
|
|||
|
|
</script>
|
|||
|
|
</body>
|
|||
|
|
</html>
|