diff --git a/front/templates/payPage.html b/front/templates/payPage.html index 6c842d6..8faa222 100644 --- a/front/templates/payPage.html +++ b/front/templates/payPage.html @@ -113,6 +113,12 @@ .payment-option input[type="radio"] { margin-right: 15px; } + + /* 选中状态样式 */ + .payment-option.selected { + border-color: #007BFF; + background-color: #f0f7ff; + } @@ -160,6 +166,11 @@ return getQueryParam('callback') === 'true'; } + // 获取预设的支付方式 + function getPresetPaymentMethod() { + return getQueryParam('preset_method') || null; + } + // 检查订单状态 function checkOrderStatus(orderNo) { return fetch(`/pay/front/api/v1/payPage/status?no=${orderNo}`, { @@ -235,7 +246,9 @@ // 获取支付方式列表 function fetchPaymentMethods() { const id = getQueryParam('no'); - console.log('Order no:', id); + const presetMethod = getPresetPaymentMethod(); + console.log('Order no:', id, 'Preset method:', presetMethod); + if (id) { fetch(`/pay/front/api/v1/payPage/list?id=${id}`, { method: 'POST', @@ -263,7 +276,7 @@ showLoading(); window.location.href = `/pay/front/api/v1/payPage/submit?pay_channel_id=${data.data[0].pay_channel_id}&no=${id}`; } else { - renderPaymentMethods(data.data); + renderPaymentMethods(data.data, presetMethod); } }) .catch(error => { @@ -277,13 +290,15 @@ } // 渲染支付方式列表 - function renderPaymentMethods(paymentMethods) { + function renderPaymentMethods(paymentMethods, presetMethod) { const pay = document.getElementById('pay'); pay.innerHTML = '

请选择支付方式

'; const paymentList = document.getElementById('payment-list'); paymentList.innerHTML = ''; + let hasPresetMethod = false; + paymentMethods.forEach(method => { const listItem = document.createElement('li'); listItem.className = 'payment-option'; @@ -294,6 +309,13 @@ radioInput.value = method.pay_channel_id; radioInput.id = `method-${method.pay_channel_id}`; + // 检查是否是预设的支付方式 + if (presetMethod && (method.pay_channel_id === presetMethod || method.pay_name.includes(presetMethod))) { + radioInput.checked = true; + listItem.classList.add('selected'); + hasPresetMethod = true; + } + const label = document.createElement('label'); label.htmlFor = `method-${method.pay_channel_id}`; label.textContent = method.pay_name; @@ -312,10 +334,25 @@ // 点击整个区域也可以选择 listItem.addEventListener('click', () => { + // 移除所有选中样式 + document.querySelectorAll('.payment-option').forEach(item => { + item.classList.remove('selected'); + }); + // 添加当前选中样式 + listItem.classList.add('selected'); radioInput.checked = true; }); }); + // 如果没有匹配的预设支付方式,默认选中第一个 + if (!hasPresetMethod && paymentMethods.length > 0) { + const firstItem = document.querySelector('.payment-option'); + if (firstItem) { + firstItem.classList.add('selected'); + firstItem.querySelector('input[type="radio"]').checked = true; + } + } + // 添加提交按钮 const submitButton = document.createElement('button'); submitButton.type = 'button';