[{"data":1,"prerenderedAt":21},["ShallowReactive",2],{"$f1okeb1pz1f5z4":3},{"data":4},{"id":5,"slug":6,"title":7,"description":8,"category":9,"tags":10,"author":16,"image":17,"content":18,"publishedAt":19,"createdAt":20,"updatedAt":20},28,"tomde\u002Fnotes\u002Fhtml-template-9","[网站模板]web支付页面 - 微信支付，支付宝支付","移动端优先支付页面 ：专为手机端优化，同时适配桌面设备 双支付方式 ：支持支付宝和微信支付两种主流支付方式 订单信息展示 ：清晰展示商品名称、订单金额和订单号 安全支付标识 ：页面顶部和底部均有安全认证标识，增强用户信任 支付交互反馈 ：点击支付按钮后显示处理状态，模拟支付流程 响应式布局 ：在手机、平板和桌面设备上均有良好显示效果 适用场景 ：电商支付、会员购买、在线付费服务","notes",[11,12,13,14,15],"响应式","支付","电商","html网页模板","纯静态源码","tomde",null,"移动端优先支付页面\r\n：专为手机端优化，同时适配桌面设备\r\n双支付方式\r\n：支持支付宝和微信支付两种主流支付方式\r\n订单信息展示\r\n：清晰展示商品名称、订单金额和订单号\r\n安全支付标识\r\n：页面顶部和底部均有安全认证标识，增强用户信任\r\n支付交互反馈\r\n：点击支付按钮后显示处理状态，模拟支付流程\r\n响应式布局\r\n：在手机、平板和桌面设备上均有良好显示效果\r\n适用场景\r\n：电商支付、会员购买、在线付费服务\r\n```html\r\n\u003C!DOCTYPE html>\r\n\u003Chtml lang=\"zh-CN\">\r\n\u003Chead>\r\n    \u003Cmeta charset=\"UTF-8\">\r\n    \u003Cmeta name=\"viewport\" content=\"width=device-width, initial-scale=1.0\">\r\n    \u003Ctitle>安全支付\u003C\u002Ftitle>\r\n    \u003Cstyle>\r\n        * {\r\n            margin: 0;\r\n            padding: 0;\r\n            box-sizing: border-box;\r\n        }\r\n\r\n        body {\r\n            font-family: -apple-system, BlinkMacSystemFont, \"Segoe UI\", Roboto, Helvetica, Arial, sans-serif;\r\n            line-height: 1.6;\r\n            color: #333;\r\n            background-color: #f5f5f5;\r\n        }\r\n\r\n        .container {\r\n            max-width: 400px;\r\n            margin: 0 auto;\r\n            background: white;\r\n            min-height: 100vh;\r\n            box-shadow: 0 0 10px rgba(0,0,0,0.1);\r\n        }\r\n\r\n        \u002F* 头部样式 *\u002F\r\n        .header {\r\n            display: flex;\r\n            justify-content: space-between;\r\n            align-items: center;\r\n            padding: 15px;\r\n            border-bottom: 1px solid #eee;\r\n            background: white;\r\n        }\r\n\r\n        .brand {\r\n            display: flex;\r\n            align-items: center;\r\n            gap: 10px;\r\n        }\r\n\r\n        .logo {\r\n            width: 30px;\r\n            height: 30px;\r\n        }\r\n\r\n        .security-badge {\r\n            color: #52c41a;\r\n            font-size: 14px;\r\n        }\r\n\r\n        \u002F* 主内容区 *\u002F\r\n        .main-content {\r\n            padding: 20px;\r\n        }\r\n\r\n        .order-section, .payment-section {\r\n            margin-bottom: 30px;\r\n        }\r\n\r\n        h2 {\r\n            font-size: 18px;\r\n            margin-bottom: 15px;\r\n            color: #333;\r\n        }\r\n\r\n        .order-details {\r\n            background: #f8f9fa;\r\n            padding: 15px;\r\n            border-radius: 8px;\r\n        }\r\n\r\n        .order-item {\r\n            display: flex;\r\n            justify-content: space-between;\r\n            margin-bottom: 10px;\r\n        }\r\n\r\n        .order-item:last-child {\r\n            margin-bottom: 0;\r\n        }\r\n\r\n        .amount {\r\n            font-weight: bold;\r\n            color: #ff4d4f;\r\n            font-size: 18px;\r\n        }\r\n\r\n        \u002F* 支付方式 *\u002F\r\n        .payment-methods {\r\n            display: flex;\r\n            flex-direction: column;\r\n            gap: 10px;\r\n        }\r\n\r\n        .payment-option input[type=\"radio\"] {\r\n            display: none;\r\n        }\r\n\r\n        .payment-option label {\r\n            display: flex;\r\n            align-items: center;\r\n            padding: 15px;\r\n            border: 2px solid #e8e8e8;\r\n            border-radius: 8px;\r\n            cursor: pointer;\r\n            transition: all 0.3s ease;\r\n        }\r\n\r\n        .payment-option label:hover {\r\n            border-color: #1890ff;\r\n        }\r\n\r\n        .payment-option input[type=\"radio\"]:checked + label {\r\n            border-color: #1890ff;\r\n            background-color: #f0f8ff;\r\n        }\r\n\r\n        .payment-option img {\r\n            \u002F*width: 30px;*\u002F\r\n            height: 30px;\r\n            margin-right: 10px;\r\n        }\r\n\r\n        \u002F* 支付按钮 *\u002F\r\n        .action-section {\r\n            text-align: center;\r\n        }\r\n\r\n        .pay-button {\r\n            width: 100%;\r\n            padding: 15px;\r\n            background: #1890ff;\r\n            color: white;\r\n            border: none;\r\n            border-radius: 8px;\r\n            font-size: 16px;\r\n            font-weight: bold;\r\n            cursor: pointer;\r\n            transition: background 0.3s ease;\r\n            margin-bottom: 15px;\r\n        }\r\n\r\n        .pay-button:hover {\r\n            background: #40a9ff;\r\n        }\r\n\r\n        .pay-button:active {\r\n            transform: translateY(1px);\r\n        }\r\n\r\n        .security-notice {\r\n            font-size: 12px;\r\n            color: #666;\r\n        }\r\n\r\n        \u002F* 底部信任标识 *\u002F\r\n        .footer {\r\n            padding: 20px;\r\n            text-align: center;\r\n            border-top: 1px solid #eee;\r\n        }\r\n\r\n        .trust-badges {\r\n            display: flex;\r\n            justify-content: center;\r\n            gap: 15px;\r\n        }\r\n\r\n        .trust-badges img {\r\n            height: 30px;\r\n        }\r\n\r\n        \u002F* 响应式设计 *\u002F\r\n        @media (min-width: 768px) {\r\n            .container {\r\n                max-width: 500px;\r\n                margin: 20px auto;\r\n                min-height: auto;\r\n                border-radius: 12px;\r\n                overflow: hidden;\r\n            }\r\n\r\n            .header {\r\n                padding: 20px;\r\n            }\r\n\r\n            .main-content {\r\n                padding: 30px;\r\n            }\r\n        }\r\n\r\n        @media (max-width: 375px) {\r\n            .main-content {\r\n                padding: 15px;\r\n            }\r\n\r\n            .payment-option label {\r\n                padding: 12px;\r\n            }\r\n        }\r\n    \u003C\u002Fstyle>\r\n\u003C\u002Fhead>\r\n\u003Cbody>\r\n\u003Cdiv class=\"container\">\r\n    \u003Cheader class=\"header\">\r\n        \u003Cdiv class=\"brand\">\r\n            \u003C!--\u003Cimg src=\"logo.png\" alt=\"品牌logo\" class=\"logo\">-->\r\n            \u003Cspan>您的品牌名称\u003C\u002Fspan>\r\n        \u003C\u002Fdiv>\r\n        \u003Cdiv class=\"security-badge\">\r\n            \u003Cspan>🔒 安全支付\u003C\u002Fspan>\r\n        \u003C\u002Fdiv>\r\n    \u003C\u002Fheader>\r\n\r\n    \u003Cmain class=\"main-content\">\r\n        \u003C!-- 订单信息 -->\r\n        \u003Csection class=\"order-section\">\r\n            \u003Ch2>订单信息\u003C\u002Fh2>\r\n            \u003Cdiv class=\"order-details\">\r\n                \u003Cdiv class=\"order-item\">\r\n                    \u003Cspan>商品名称:\u003C\u002Fspan>\r\n                    \u003Cspan>高级会员套餐\u003C\u002Fspan>\r\n                \u003C\u002Fdiv>\r\n                \u003Cdiv class=\"order-item\">\r\n                    \u003Cspan>订单金额:\u003C\u002Fspan>\r\n                    \u003Cspan class=\"amount\">¥199.00\u003C\u002Fspan>\r\n                \u003C\u002Fdiv>\r\n                \u003Cdiv class=\"order-item\">\r\n                    \u003Cspan>订单号:\u003C\u002Fspan>\r\n                    \u003Cspan>DD202507210001\u003C\u002Fspan>\r\n                \u003C\u002Fdiv>\r\n            \u003C\u002Fdiv>\r\n        \u003C\u002Fsection>\r\n\r\n        \u003C!-- 支付方式选择 -->\r\n        \u003Csection class=\"payment-section\">\r\n            \u003Ch2>选择支付方式\u003C\u002Fh2>\r\n            \u003Cdiv class=\"payment-methods\">\r\n                \u003Cdiv class=\"payment-option\" data-method=\"alipay\">\r\n                    \u003Cinput type=\"radio\" id=\"alipay\" name=\"payment\" checked>\r\n                    \u003Clabel for=\"alipay\">\r\n                        \u003Cimg src=\"https:\u002F\u002Fpre.tomde.cloud\u002F7e21ff3f-1285-4e70-8023-52766d90b9b6\u002Falipay-logo.png\" alt=\"支付宝\">\r\n                        \u003Cspan>支付宝\u003C\u002Fspan>\r\n                    \u003C\u002Flabel>\r\n                \u003C\u002Fdiv>\r\n                \u003Cdiv class=\"payment-option\" data-method=\"wechat\">\r\n                    \u003Cinput type=\"radio\" id=\"wechat\" name=\"payment\">\r\n                    \u003Clabel for=\"wechat\">\r\n                        \u003Cimg src=\"https:\u002F\u002Fpre.tomde.cloud\u002F7e21ff3f-1285-4e70-8023-52766d90b9b6\u002Fwechat-pay-logo.png\" alt=\"微信支付\">\r\n                        \u003Cspan>\u003C\u002Fspan>\r\n                    \u003C\u002Flabel>\r\n                \u003C\u002Fdiv>\r\n            \u003C\u002Fdiv>\r\n        \u003C\u002Fsection>\r\n\r\n        \u003C!-- 支付按钮 -->\r\n        \u003Csection class=\"action-section\">\r\n            \u003Cbutton id=\"pay-button\" class=\"pay-button\">确认支付 ¥199.00\u003C\u002Fbutton>\r\n            \u003Cp class=\"security-notice\">🔒 您的支付信息已加密，安全处理\u003C\u002Fp>\r\n        \u003C\u002Fsection>\r\n    \u003C\u002Fmain>\r\n\r\n    \u003C!-- 信任标识 -->\r\n    \u003Cfooter class=\"footer\">\r\n        \u003Cdiv class=\"trust-badges\">\r\n            \u003Cimg src=\"https:\u002F\u002Fpre.tomde.cloud\u002F7e21ff3f-1285-4e70-8023-52766d90b9b6\u002Fverification-icon.webp\" alt=\"安全认证\">\r\n        \u003C\u002Fdiv>\r\n    \u003C\u002Ffooter>\r\n\u003C\u002Fdiv>\r\n\u003Cscript>\r\n    document.addEventListener('DOMContentLoaded', function() {\r\n        const payButton = document.getElementById('pay-button');\r\n        const paymentOptions = document.querySelectorAll('.payment-option');\r\n        let selectedMethod = 'alipay';\r\n\r\n        \u002F\u002F 支付方式选择\r\n        paymentOptions.forEach(option => {\r\n            option.addEventListener('click', function() {\r\n                const method = this.dataset.method;\r\n                selectedMethod = method;\r\n\r\n                \u002F\u002F 更新按钮文字\r\n                updatePayButtonText(method);\r\n            });\r\n        });\r\n\r\n        function updatePayButtonText(method) {\r\n            const amount = '¥199.00';\r\n            payButton.textContent = `确认支付 ${amount}`;\r\n        }\r\n\r\n        \u002F\u002F 支付按钮点击事件\r\n        payButton.addEventListener('click', function() {\r\n            \u002F\u002F 防止重复提交\r\n            payButton.disabled = true;\r\n            payButton.textContent = '支付处理中...';\r\n\r\n            \u002F\u002F 根据选择的支付方式调用不同的支付接口\r\n            initiatePayment(selectedMethod);\r\n        });\r\n\r\n        function initiatePayment(method) {\r\n            \u002F\u002F 在实际应用中，这里应该调用后端接口获取支付参数\r\n            \u002F\u002F 以下是模拟代码\r\n\r\n            const orderInfo = {\r\n                orderNo: 'DD202507210001',\r\n                amount: '199.00',\r\n                product: '高级会员套餐'\r\n            };\r\n\r\n            if (method === 'alipay') {\r\n                \u002F\u002F 调用支付宝支付\r\n                callAlipay(orderInfo);\r\n            } else if (method === 'wechat') {\r\n                \u002F\u002F 调用微信支付\r\n                callWechatPay(orderInfo);\r\n            }\r\n        }\r\n\r\n        function callAlipay(orderInfo) {\r\n            \u002F\u002F 模拟支付宝支付调用\r\n            \u002F\u002F 实际开发中需要从后端获取支付参数\r\n            console.log('调用支付宝支付:', orderInfo);\r\n\r\n            \u002F\u002F 示例：在实际项目中可能是这样的\r\n            \u002F\u002F AlipayJSBridge.call(\"tradePay\", {\r\n            \u002F\u002F     tradeNO: orderInfo.orderNo\r\n            \u002F\u002F }, function (data) {\r\n            \u002F\u002F     if (data.resultCode === \"9000\") {\r\n            \u002F\u002F         \u002F\u002F 支付成功\r\n            \u002F\u002F         alert('支付成功！');\r\n            \u002F\u002F     }\r\n            \u002F\u002F });\r\n\r\n            \u002F\u002F 模拟支付结果\r\n            setTimeout(() => {\r\n                alert('支付宝支付成功！');\r\n                resetPayButton();\r\n            }, 2000);\r\n        }\r\n\r\n        function callWechatPay(orderInfo) {\r\n            \u002F\u002F 模拟微信支付调用\r\n            console.log('调用微信支付:', orderInfo);\r\n\r\n            \u002F\u002F 示例：在实际项目中可能是这样的\r\n            \u002F\u002F WeixinJSBridge.invoke('getBrandWCPayRequest', {\r\n            \u002F\u002F     \"appId\": \"wx2421b1c4370ec43b\",\r\n            \u002F\u002F     \"timeStamp\": \"1395712654\",\r\n            \u002F\u002F     \"nonceStr\": \"e61463f8efa94090b1f366cccfbbb444\",\r\n            \u002F\u002F     \"package\": \"prepay_id=up_wx21201855730335ac86f8c43d1889123400\",\r\n            \u002F\u002F     \"signType\": \"MD5\",\r\n            \u002F\u002F     \"paySign\": \"70EA570631E4BB79628FBCA90534C63FF7FADD89\"\r\n            \u002F\u002F }, function(res) {\r\n            \u002F\u002F     if (res.err_msg === \"get_brand_wcpay_request:ok\") {\r\n            \u002F\u002F         \u002F\u002F 支付成功\r\n            \u002F\u002F     }\r\n            \u002F\u002F });\r\n\r\n            \u002F\u002F 模拟支付结果\r\n            setTimeout(() => {\r\n                alert('微信支付成功！');\r\n                resetPayButton();\r\n            }, 2000);\r\n        }\r\n\r\n        function resetPayButton() {\r\n            payButton.disabled = false;\r\n            payButton.textContent = `确认支付 ¥199.00`;\r\n        }\r\n    });\r\n\u003C\u002Fscript>\r\n\u003C\u002Fbody>\r\n\u003C\u002Fhtml>\r\n```\r\n预览地址：[https:\u002F\u002Fpreview.yunbimo.com\u002F7e21ff3f-1285-4e70-8023-52766d90b9b6](https:\u002F\u002Fpreview.yunbimo.com\u002F7e21ff3f-1285-4e70-8023-52766d90b9b6)\r\n","2026-07-08T23:43:40.000Z","2026-07-31T07:40:49.843Z",1785520922621]