{"id":3637,"date":"2024-12-27T16:32:06","date_gmt":"2024-12-27T08:32:06","guid":{"rendered":"https:\/\/www.evergroup.com.cn\/?page_id=3637"},"modified":"2024-12-31T09:36:30","modified_gmt":"2024-12-31T01:36:30","slug":"%e6%b8%af%e6%be%b3%e5%9b%bd%e9%99%85%e5%92%a8%e8%af%a2%e7%95%99%e5%ad%a6%e8%a7%84%e5%88%92%e6%9c%8d%e5%8a%a1","status":"publish","type":"page","link":"https:\/\/www.evergroup.com.cn\/zh\/%e6%b8%af%e6%be%b3%e5%9b%bd%e9%99%85%e5%92%a8%e8%af%a2%e7%95%99%e5%ad%a6%e8%a7%84%e5%88%92%e6%9c%8d%e5%8a%a1\/","title":{"rendered":"\u6e2f\u6fb3\u56fd\u9645\u54a8\u8be2\u7559\u5b66\u89c4\u5212\u670d\u52a1"},"content":{"rendered":"<div\n        style=\"display: flex; max-width: 1220px; margin: 0 auto; background-color: #fff; padding: 20px; border-radius: 5px;\">\n        <form id=\"multiStepForm\" style=\"flex: 2;\" action=\"\">\n            <!-- \u6b65\u9aa4\u6307\u793a\u5668 -->\n            <div style=\"display: flex; margin-bottom: 20px;width: 100%;\">\n                <div class=\"step active\"\n                    style=\"flex: 1; padding: 10px; text-align: center; background-color: #4CAF50; color: #fff; border-right: 1px solid #fff;\">\n                    \u6b65\u9aa4 1<\/div>\n                <div class=\"step\"\n                    style=\"flex: 1; padding: 10px; text-align: center; background-color: #e0e0e0; color: #000; border-right: 1px solid #fff;\">\n                    \u6b65\u9aa4 2<\/div>\n                <div class=\"step\"\n                    style=\"flex: 1; padding: 10px; text-align: center; background-color: #e0e0e0; color: #000;\">\u6b65\u9aa4 3\n                <\/div>\n            <\/div>\n\n            <!-- \u6b65\u9aa4 1 -->\n            <div class=\"form-step active\" style=\"display: block;\">\n                <h2 style=\"margin-top: 0;\">\u57fa\u672c\u4fe1\u606f<\/h2>\n                <label for=\"name\" style=\"display: block; margin: 10px 0 5px;\">\u59d3\u540d:<\/label>\n                <input type=\"text\" id=\"name\" name=\"name\" required\n style=\"box-sizing:border-box; width: 100%; padding: 8px; margin-bottom: 15px;\">\n                <button type=\"button\" class=\"next-btn\"\n                    style=\"padding: 10px 15px; background-color: #4CAF50; color: #fff; border: none; border-radius: 3px; cursor: pointer;\">\u4e0b\u4e00\u6b65<\/button>\n            <\/div>\n\n            <!-- \u6b65\u9aa4 2 -->\n            <div class=\"form-step\" style=\"display: none;\">\n                <h2 style=\"margin-top: 0;\">\u8054\u7cfb\u65b9\u5f0f<\/h2>\n                <label for=\"email\" style=\"display: block; margin: 10px 0 5px;\">\u90ae\u7bb1:<\/label>\n                <input type=\"email\" id=\"email\" name=\"email\" required\n style=\"box-sizing:border-box; width: 100%; padding: 8px; margin-bottom: 15px;\">\n                <label for=\"wechat\" style=\"display: block; margin: 10px 0 5px;\">\u5fae\u4fe1\u53f7:<\/label>\n                <input type=\"text\" id=\"wechat\" name=\"wechat\" required\n style=\"box-sizing:border-box; width: 100%; padding: 8px; margin-bottom: 15px;\">\n                <button type=\"button\" class=\"prev-btn\"\n                    style=\"padding: 10px 15px; background-color: #bbb; color: #fff; border: none; border-radius: 3px; cursor: pointer; margin-right: 10px;\">\u4e0a\u4e00\u6b65<\/button>\n                <button type=\"button\" class=\"next-btn\"\n                    style=\"padding: 10px 15px; background-color: #4CAF50; color: #fff; border: none; border-radius: 3px; cursor: pointer;\">\u4e0b\u4e00\u6b65<\/button>\n            <\/div>\n\n            <!-- \u6b65\u9aa4 3 -->\n            <div class=\"form-step\" style=\"display: none;\">\n                <h2 style=\"margin-top: 0;\">\u652f\u4ed8\u65b9\u5f0f<\/h2>\n                <label style=\"display: flex; align-items: center; margin: 10px 0;\">\n                    <input type=\"radio\" name=\"payment\" value=\"wechat\" checked style=\"margin-right: 10px;\">\n                    <img decoding=\"async\" src=\"https:\/\/www.evergroup.com.cn\/wp-content\/uploads\/2024\/12\/wechatpay.png\" alt=\"\"\n                        style=\"width:200px;height: 50px;\">\n                <\/label>\n                <!-- \u4ec5\u4fdd\u7559\u5fae\u4fe1\u652f\u4ed8\uff0c\u5176\u4ed6\u652f\u4ed8\u65b9\u5f0f\u5df2\u79fb\u9664 -->\n                <button type=\"button\" class=\"prev-btn\"\n                    style=\"padding: 10px 15px; background-color: #bbb; color: #fff; border: none; border-radius: 3px; cursor: pointer; margin-right: 10px;\">\u4e0a\u4e00\u6b65<\/button>\n                <button type=\"submit\" class=\"submit-btn\"\n                    style=\"padding: 10px 15px; background-color: #2196F3; color: #fff; border: none; border-radius: 3px; cursor: pointer;\">\u63d0\u4ea4<\/button>\n            <\/div>\n\n            <!--\u626b\u7801\u652f\u4ed8 -->\n            <div id=\"payResult\" style=\"display: none;text-align: center;\">\n                <canvas id=\"payCode\" width=\"200\" height=\"200\"><\/canvas>\n                <p>\u8bf7\u4f7f\u7528\u5fae\u4fe1\u626b\u7801\u652f\u4ed8<\/p>\n\n                <button id=\"payClose\" type=\"button\"\n                    style=\"padding: 10px 15px; background-color: #bbb; color: #fff; border: none; border-radius: 3px; cursor: pointer; margin-right: 10px;\">\u5173\u95ed<\/button>\n                <!-- \u6211\u5df2\u652f\u4ed8 -->\n                <button id=\"payDone\" type=\"button\"\n                    style=\"padding: 10px 15px; background-color: #2196F3; color: #fff; border: none; border-radius: 3px; cursor: pointer;\">\u6211\u5df2\u652f\u4ed8<\/button>\n            <\/div>\n        <input type=\"hidden\" name=\"trp-form-language\" value=\"zh\"\/><\/form>\n\n        <div style=\"flex: 1;display: flex;justify-content: center;\">\n            <div id=\"orderDetails\" style=\"display: none;\"><\/div>\n\n            <!-- \u8ba2\u5355\u6458\u8981 -->\n            <div class=\"order-summary\"\n                style=\"margin-left: 20px; background-color: #fafafa; padding: 15px; border: 1px solid #ddd; border-radius: 5px;\">\n                <h3 style=\"margin-top: 0;\">\u8ba2\u5355\u6458\u8981<\/h3>\n                <p>\u6e2f\u6fb3\u7559\u5b66\u54a8\u8be2\u670d\u52a1\u8d39\uff1a\u00a5<span id=\"serviceFee\">399.00<\/span><\/p>\n                <!-- \u5176\u4ed6\u8ba2\u5355\u4fe1\u606f\u53ef\u5728\u6b64\u6dfb\u52a0 -->\n                <p>\u8ba2\u5355\u53f7\uff1a<span id=\"orderId\">1234567890<\/span><\/p>\n                <!-- \u65f6\u95f4 -->\n                <p>\u8ba2\u5355\u521b\u5efa\u65f6\u95f4\uff1a<span id=\"timestamp\"><\/span><\/p>\n            <\/div>\n        <\/div>\n    <\/div>\n\n    <script src=\"https:\/\/cdn.bootcdn.net\/ajax\/libs\/qrcode\/1.5.1\/qrcode.min.js\"><\/script>\n    <script>\n        \/\/ \u63a5\u53e3api\n        const host = '119.23.251.194'\n        const orderStatusApi = `https:\/\/${host}\/pay\/status`\n        const payNotifyApi = `https:\/\/${host}\/pay\/notify`\n        const payApi = `https:\/\/${host}\/pay\/abroad`\n        const wsUrl = `wss:\/\/${host}\/ws`\n        const serviceFee = 399\n\n        const form = document.getElementById('multiStepForm');\n\n        function connectWebSocket(orderId) {\n            const ws = new WebSocket(`${wsUrl}?orderId=${orderId}`);\n\n            ws.onopen = function () {\n                console.log('WebSocket \u8fde\u63a5\u5df2\u5efa\u7acb');\n            };\n\n            ws.onmessage = function (event) {\n                const data = JSON.parse(event.data);\n                console.log('\u6536\u5230\u670d\u52a1\u5668\u63a8\u9001\u7684\u6d88\u606f\uff1a', data);\n                if (data.trade_state === 'SUCCESS' && data.out_trade_no === orderId) {\n                    alert('\u652f\u4ed8\u6210\u529f\uff01');\n                    \/\/ \u66f4\u65b0\u524d\u7aef\u754c\u9762\uff0c\u4f8b\u5982\u9690\u85cf\u652f\u4ed8\u4e8c\u7ef4\u7801\u7b49\n                    payResult.style.display = 'none';\n                    \/\/ \u663e\u793a\u8ba2\u5355\u8be6\u60c5\n                    showOrderDetails(orderId);\n                }\n            };\n\n            ws.onclose = function () {\n                console.log('WebSocket \u8fde\u63a5\u5df2\u5173\u95ed');\n            };\n        }\n\n        \/\/ \u65b0\u589e\u4e00\u4e2a\u51fd\u6570\uff0c\u7528\u4e8e\u663e\u793a\u8ba2\u5355\u8be6\u60c5\n        function showOrderDetails(orderId) {\n            \/\/ \u521b\u5efa\u4e00\u4e2a\u5bb9\u5668\u6765\u663e\u793a\u8ba2\u5355\u8be6\u60c5\n            const orderDetailsDiv = document.getElementById('orderDetails');\n            orderDetailsDiv.style.textAlign = 'center';\n            orderDetailsDiv.style.marginTop = '20px';\n            orderDetailsDiv.innerHTML = `\n                <h2>\u8ba2\u5355\u652f\u4ed8\u6210\u529f\uff01<\/h2>\n                <p>\u8ba2\u5355\u53f7\uff1a${orderId.toUpperCase()}<\/p>\n                <p>\u670d\u52a1\u8d39\u7528\uff1a\u00a5${serviceFee.toFixed(2)}<\/p>\n                <p>\u8ba2\u5355\u521b\u5efa\u65f6\u95f4\uff1a${new Date().toLocaleString()}<\/p>\n                <!-- \u53ef\u4ee5\u5728\u6b64\u6dfb\u52a0\u66f4\u591a\u8ba2\u5355\u8be6\u60c5 -->\n            `;\n            form.style.display = 'none';\n            orderDetailsDiv.style.display = 'block';\n        }\n\n        document.addEventListener('DOMContentLoaded', function () {\n            const nextBtns = document.querySelectorAll('.next-btn');\n            const prevBtns = document.querySelectorAll('.prev-btn');\n            const formSteps = document.querySelectorAll('.form-step');\n            const stepIndicators = document.querySelectorAll('.step-indicator .step, .step'); \/\/ \u66f4\u65b0\u9009\u62e9\u5668\u4ee5\u5339\u914d\u5185\u8054\u6837\u5f0f\u7684\u6b65\u9aa4\u6307\u793a\u5668\n            const serviceFeeElement = document.getElementById('serviceFee');\n            const orderIdElement = document.getElementById('orderId');\n            const timestampElement = document.getElementById('timestamp');\n            const payResult = document.getElementById('payResult');\n            const payCode = document.getElementById('payCode');\n            const payClose = document.getElementById('payClose');\n            const payDone = document.getElementById('payDone');\n            let currentStep = 0;\n            const orderId = generateOrderId();\n            orderIdElement.textContent = orderId.toLocaleUpperCase();\n            timestampElement.textContent = new Date().toLocaleString();\n            \/\/ \u8bbe\u7f6e\u670d\u52a1\u8d39\uff08\u53ef\u4ee5\u4ece\u540e\u53f0\u83b7\u53d6\u6216\u52a8\u6001\u8ba1\u7b97\uff09\n            const serviceFee = 399; \/\/ \u793a\u4f8b\u91d1\u989d\n            serviceFeeElement.textContent = serviceFee.toFixed(2);\n\n            nextBtns.forEach(btn => {\n                btn.addEventListener('click', () => {\n                    if (currentStep < formSteps.length - 1) {\n                        formSteps[currentStep].style.display = 'none';\n                        \/\/ \u66f4\u65b0\u6b65\u9aa4\u6307\u793a\u5668\u6837\u5f0f\n                        stepIndicators[currentStep].style.backgroundColor = '#e0e0e0';\n                        stepIndicators[currentStep].style.color = '#000';\n                        currentStep++;\n                        formSteps[currentStep].style.display = 'block';\n                        stepIndicators[currentStep].style.backgroundColor = '#4CAF50';\n                        stepIndicators[currentStep].style.color = '#fff';\n                    }\n                });\n            });\n\n            prevBtns.forEach(btn => {\n                btn.addEventListener('click', () => {\n                    if (currentStep > 0) {\n                        formSteps[currentStep].style.display = 'none';\n                        \/\/ \u66f4\u65b0\u6b65\u9aa4\u6307\u793a\u5668\u6837\u5f0f\n                        stepIndicators[currentStep].style.backgroundColor = '#e0e0e0';\n                        stepIndicators[currentStep].style.color = '#000';\n                        currentStep--;\n                        formSteps[currentStep].style.display = 'block';\n                        stepIndicators[currentStep].style.backgroundColor = '#4CAF50';\n                        stepIndicators[currentStep].style.color = '#fff';\n                    }\n                });\n            });\n\n            form.addEventListener('submit', function (e) {\n                e.preventDefault();\n\n                console.log('submit')\n                pay()\n            });\n\n            function generateOrderId() {\n                const chars = 'ABCDEFGHIJKLMNOPQRSTUVWXYZabcdefghijklmnopqrstuvwxyz0123456789';\n                let orderId = '';\n                for (let i = 0; i < 20; i++) { \/\/ \u751f\u621020\u4f4d\u957f\u5ea6\u7684\u8ba2\u5355\u53f7\uff0c\u53ef\u6839\u636e\u9700\u8981\u8c03\u6574\u957f\u5ea6\n                    orderId += chars.charAt(Math.floor(Math.random() * chars.length));\n                }\n                return orderId;\n            }\n\n            function pay() {\n                const payData = {\n                    out_trade_no: orderId,\n                    description: '\u6e2f\u6fb3\u7559\u5b66\u54a8\u8be2\u670d\u52a1\u8d39',\n                    notify_url: payNotifyApi\n                };\n\n                \/\/ \u521b\u5efa\u4e00\u4e2a\u65b0\u7684 AbortController \u5b9e\u4f8b\n                const controller = new AbortController();\n                const signal = controller.signal;\n\n                \/\/ \u8bbe\u7f6e 30 \u79d2\u7684\u8d85\u65f6\n                const timeoutId = setTimeout(() => {\n                    controller.abort();\n                    alert('\u8bf7\u6c42\u8d85\u65f6\uff0c\u8bf7\u7a0d\u540e\u91cd\u8bd5\u3002');\n                }, 30000);\n\n                fetch(payApi, {\n                    method: 'POST',\n                    headers: {\n                        'Content-Type': 'application\/json'\n                    },\n                    body: JSON.stringify(payData),\n                    signal: signal \/\/ \u5c06\u4fe1\u53f7\u4f20\u9012\u7ed9 fetch\n                })\n                    .then(response => response.json())\n                    .then(data => {\n                        \/\/ \u8bf7\u6c42\u6210\u529f\uff0c\u6e05\u9664\u8d85\u65f6\u8ba1\u65f6\u5668\n                        clearTimeout(timeoutId);\n\n                        console.log(data);\n                        payResult.style.display = 'block';\n                        QRCode.toCanvas(payCode, data.codeUrl);\n                        \/\/ \u5c55\u793a\u5fae\u4fe1\u4e8c\u7ef4\u7801\uff1aweixin:\/\/wxpay\/bizpayurl?pr=XQm9cedz3\n                    })\n                    .catch(error => {\n                        \/\/ \u5982\u679c\u8bf7\u6c42\u88ab\u4e2d\u6b62\uff0cerror.name \u5c06\u662f 'AbortError'\n                        if (error.name === 'AbortError') {\n                            console.error('\u8bf7\u6c42\u8d85\u65f6\uff0c\u88ab\u4e2d\u6b62\u3002');\n                        } else {\n                            console.error('\u9519\u8bef\uff1a', error);\n                        }\n                    });\n            }\n\n            connectWebSocket(orderId);\n        });\n\n        payClose.addEventListener('click', () => {\n            payResult.style.display = 'none';\n        });\n\n        payDone.addEventListener('click', () => {\n            payResult.style.display = 'none';\n        });\n    <\/script>\n\n\n\n<p><\/p>","protected":false},"excerpt":{"rendered":"<p>\u6b65\u9aa4 1 \u6b65\u9aa4 2 \u6b65\u9aa4 3 \u57fa\u672c\u4fe1\u606f \u59d3\u540d: \u4e0b\u4e00\u6b65 \u8054\u7cfb\u65b9\u5f0f \u90ae\u7bb1: \u5fae\u4fe1\u53f7: \u4e0a\u4e00\u6b65 \u4e0b\u4e00\u6b65 \u652f\u4ed8\u65b9\u5f0f  [&#8230;]","protected":false},"author":1,"featured_media":0,"parent":0,"menu_order":0,"comment_status":"closed","ping_status":"closed","template":"","meta":{"footnotes":""},"class_list":["post-3637","page","type-page","status-publish","hentry"],"_links":{"self":[{"href":"https:\/\/www.evergroup.com.cn\/zh\/wp-json\/wp\/v2\/pages\/3637","targetHints":{"allow":["GET"]}}],"collection":[{"href":"https:\/\/www.evergroup.com.cn\/zh\/wp-json\/wp\/v2\/pages"}],"about":[{"href":"https:\/\/www.evergroup.com.cn\/zh\/wp-json\/wp\/v2\/types\/page"}],"author":[{"embeddable":true,"href":"https:\/\/www.evergroup.com.cn\/zh\/wp-json\/wp\/v2\/users\/1"}],"replies":[{"embeddable":true,"href":"https:\/\/www.evergroup.com.cn\/zh\/wp-json\/wp\/v2\/comments?post=3637"}],"version-history":[{"count":59,"href":"https:\/\/www.evergroup.com.cn\/zh\/wp-json\/wp\/v2\/pages\/3637\/revisions"}],"predecessor-version":[{"id":3765,"href":"https:\/\/www.evergroup.com.cn\/zh\/wp-json\/wp\/v2\/pages\/3637\/revisions\/3765"}],"wp:attachment":[{"href":"https:\/\/www.evergroup.com.cn\/zh\/wp-json\/wp\/v2\/media?parent=3637"}],"curies":[{"name":"wp","href":"https:\/\/api.w.org\/{rel}","templated":true}]}}