feat: 页面1

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;
+            }
         </style>
     </head>
 
@@ -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 = '<h3>请选择支付方式</h3>';
 
             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';