kylx365
/
miaoguo_system_server


			
				
					
						
						
							123456789101112131415161718192021222324252627282930313233343536373839404142434445464748495051525354555657585960616263646566676869707172737475767778798081828384858687888990919293949596979899100101102103104105106107108109110111112113114115116117118119120121122123124125126127128129130131132133134135136137138139140141142143144145146147148149150151152153154155156157158159160161162163164165166167168169170171172173174175176177178179180181182183184185186187188189190191192193194195196197198199200201202203204205206207208209210211212213214215216217218219220221222223224225226227228229230231232233234235236237238239240241242243244245246247248249250251252253254255256257258259260261262263264265266267268269270271272273274275276277278279280281282283284285286287288289290291292293294295296297298299300301302303304305306307308309310311312313314315316317318319320321322323324325326327328329330331332333334335336337338339340341342343344345346347348349350351352353354355356357358359360361362363364365366367368369370371372373374375376377378379380381382383384385386387388389390391392393394395396397398399400401402403404405406407408409410411412413414415416417418419420421422423424425426427428429430431432433434435436437438439440441442443444445446447448449450
							<!DOCTYPE html>
<html>
<head>
    <meta charset="UTF-8">
    <meta http-equiv="Content-Type" content="text/html; charset=utf-8">
    <meta name ="viewport" content ="initial-scale=1, maximum-scale=3, minimum-scale=1, user-scalable=no">
    <title>开通新手包</title>
    <style>

        .FlexColumn {
            display: flex;
            flex-direction: column;
            align-items: center;
            justify-content: center;
        }

        .FlexRow {
            display: flex;
            flex-direction: row;
            align-items: center;
            justify-content: center;
        }

        .container {
            width:100%;
            padding: 0;
            margin: auto 0;
            background-color: #f8f8f8;
        }

        .panelBottom{
            width:100%;
            height:100%;
            background-color: rgba(0,0,0,0.5);
            position: fixed;
            top:0;
            z-index: 20;
            display: none;
        }

        .panelBottom1{
            background-color: #29365C;
            width:100%;
            height:350px;
            position: fixed;
            bottom:0;
            color:#fff;
            justify-content: flex-start;
        }
        .text1{
            font-size:18px;
            margin-top:38px;
            text-align: center;
        }
        .text2{
            font-size:32px;
            margin-top:15px;
        }

        .btnPayClass{
            width:290px;
            height:75px;
            border-radius: 10px;
            background-color: #FF970C;
            text-align: center;
            margin-top: 15px;
        }

        .btnMore{
            border:1px solid #d2d2d2;
            background-color: #fff;
            border-radius: 5px;
            text-align: center;
            width:325px;
            height:65px;
            line-height: 65px;
            font-size:18px;
            cursor: pointer;
            margin: 30px 0 60px 0;
        }

        .btnPayStart{
            width:100%;
            height:70px;
            justify-content: flex-start;
            background-color: #f8f8f8;
            z-index: 10;
            position: fixed;
            bottom: 0;
        }
        .btnPayClass2{
            width:365px;
            height:50px;
            border-radius: 5px;
            background-color: #FF970C;
            text-align: center;
            margin-top: 5px;
        }

        .bm_sy_banner-bm{
            width:104px;
            height:30px;
        }

        .moreImg{
            display: none;
        }

        .img1{
            width:100%;
        }
        .bm_sy_banner-zf{
            width:52px;
            height:30px;
        }

        .bm_sy_bg{
            width:100%;
            height:99px;
            position: fixed;
            bottom:0;
        }

        .panelBottom11{
            position: absolute;
            top:258px;
            left:60px;
            align-items: flex-start;
        }
        .text3{
            font-size:14px;
        }
        .text4{
            font-size:14px;
            margin-top:0px;
        }

        .btnClose{
            width:50px;
            height:50px;
            position: absolute;
            top:0;
            right:0;
            color: #d2d2d2;
            text-align: center;
            line-height: 50px;
            font-size:14px;
        }

        .practise_index_board_close{
            width:35px;
            height:35px;
        }

        .audio{
            display: none;
        }

        .payStatus{
            min-height: 20px;
            margin-top: 7px;
            color: #fff;
            font-size: 14px;
            z-index: 2;
        }

        .btnPayClass.isBusy{
            opacity: 0.65;
            pointer-events: none;
        }
    </style>
    <script>
        const createPayEndpoint = '[支付链接]';
        const orderStatusEndpoint = '[查询链接]';
        const assetRoot = 'https://miaguo-1253256735.file.myqcloud.com/web/';
        let paymentBusy = false;
        let activePayParameters = null;

        function apiDataUrl(encryptedEndpoint) {
            return '/apiData/' + encodeURIComponent(encryptedEndpoint);
        }

        function setPaymentState(busy, message) {
            paymentBusy = busy;
            const button = document.getElementById('btnPay');
            const status = document.getElementById('payStatus');
            button.classList.toggle('isBusy', busy);
            button.setAttribute('aria-disabled', busy ? 'true' : 'false');
            status.textContent = message || '';
        }

        async function postApi(encryptedEndpoint, params) {
            const response = await fetch(apiDataUrl(encryptedEndpoint), {
                method: 'POST',
                headers: { 'Content-Type': 'application/x-www-form-urlencoded;charset=UTF-8' },
                body: new URLSearchParams(params).toString(),
                credentials: 'same-origin',
                cache: 'no-store'
            });
            const data = await response.json();
            if (!response.ok || Number(data.errcode) !== 10000)
                throw new Error(data.errStr || '服务端支付接口调用失败');
            return data.result || {};
        }

        function invokeWechatPay(payParameters) {
            return new Promise(function (resolve, reject) {
                let settled = false;
                const timeout = window.setTimeout(function () {
                    if (!settled) {
                        settled = true;
                        reject(new Error('微信支付组件没有准备好，请在微信中重新打开本页'));
                    }
                }, 8000);

                function invoke() {
                    if (settled) return;
                    if (typeof WeixinJSBridge === 'undefined') return;
                    WeixinJSBridge.invoke('getBrandWCPayRequest', payParameters, function (result) {
                        if (settled) return;
                        settled = true;
                        window.clearTimeout(timeout);
                        resolve(result || {});
                    });
                }

                if (typeof WeixinJSBridge === 'undefined') {
                    document.addEventListener('WeixinJSBridgeReady', invoke, { once: true });
                } else {
                    invoke();
                }
            });
        }

        function delay(milliseconds) {
            return new Promise(function (resolve) {
                window.setTimeout(resolve, milliseconds);
            });
        }

        async function waitForPaidOrder(tradeNo, attempts) {
            let lastError = null;
            for (let index = 0; index < attempts; index += 1) {
                try {
                    const result = await postApi(orderStatusEndpoint, { TradeNo: tradeNo });
                    if (Number(result.Status) === 1 || result.TradeState === 'SUCCESS') return true;
                    if (['CLOSED', 'REVOKED', 'PAYERROR'].includes(result.TradeState))
                        throw new Error('微信支付订单未完成（' + result.TradeState + '）');
                } catch (error) {
                    lastError = error;
                }
                if (index < attempts - 1) await delay(1500);
            }
            if (lastError) throw lastError;
            return false;
        }

        async function startPayment(event) {
            event.stopPropagation();
            if (paymentBusy) return;
            let bridgeAccepted = false;
            if (!/MicroMessenger/i.test(navigator.userAgent)) {
                window.alert('请在微信内打开本页面后支付');
                return;
            }

            const code = new URLSearchParams(window.location.search).get('code');
            if (!code) {
                window.alert('微信授权信息已失效，请重新打开支付页面');
                window.location.href = '/webpay';
                return;
            }

            try {
                let payParameters = activePayParameters;
                if (!payParameters) {
                    setPaymentState(true, '正在创建 1 元支付订单…');
                    payParameters = await postApi(createPayEndpoint, { code: code });
                    if (!payParameters.TradeNo || !payParameters.package || !payParameters.paySign)
                        throw new Error('服务端返回的支付参数不完整');
                    activePayParameters = payParameters;
                }

                setPaymentState(true, '请完成微信支付…');
                const bridgeResult = await invokeWechatPay({
                    appId: payParameters.appId,
                    timeStamp: payParameters.timeStamp,
                    nonceStr: payParameters.nonceStr,
                    package: payParameters.package,
                    signType: payParameters.signType,
                    paySign: payParameters.paySign
                });
                const message = String(bridgeResult.err_msg || '');
                bridgeAccepted = message === 'get_brand_wcpay_request:ok';
                if (message === 'get_brand_wcpay_request:cancel') {
                    setPaymentState(false, '您已取消支付，可以重新操作');
                    return;
                }

                setPaymentState(true, '正在向微信确认支付结果…');
                const paid = await waitForPaidOrder(payParameters.TradeNo,
                    message === 'get_brand_wcpay_request:ok' ? 10 : 3);
                if (paid) {
                    setPaymentState(true, '支付成功，正在开通新手包…');
                    window.location.href = 'https://www.kylx365.com/webpay?url=webpayok';
                    return;
                }

                if (message === 'get_brand_wcpay_request:ok') {
                    setPaymentState(true, '支付已受理，系统正在确认，请勿重复支付');
                    return;
                }
                throw new Error(bridgeResult.err_desc || '支付未完成，请稍后重试');
            } catch (error) {
                if (bridgeAccepted) {
                    setPaymentState(true, '支付已受理，系统正在确认，请勿重复支付');
                    window.alert('微信支付已受理，但系统确认稍有延迟，请勿重复支付');
                    return;
                }
                setPaymentState(false, error.message || '支付未完成，请稍后重试');
                window.alert(error.message || '支付未完成，请稍后重试');
            }
        }

        document.addEventListener('DOMContentLoaded', function () {
            const audio = document.getElementById('audio1');
            const playButton = document.querySelector('.btnPlay');
            const panel = document.querySelector('.panelBottom');

            document.getElementById('btnPay').addEventListener('click', startPayment);
            document.querySelectorAll('.btnGoto').forEach(function (element) {
                element.addEventListener('click', function () {
                    window.location.href = '/wcs/' + element.getAttribute('title') + '.html';
                });
            });
            playButton.addEventListener('click', function () {
                if (audio.paused) {
                    audio.play();
                    playButton.src = assetRoot + 'bm_sy_banner-zc_pause.png';
                } else {
                    audio.pause();
                    playButton.src = assetRoot + 'bm_sy_banner-zc_play.png';
                }
            });
            audio.addEventListener('ended', function () {
                playButton.src = assetRoot + 'bm_sy_banner-zc_play.png';
            });
            document.querySelector('.btnMore').addEventListener('click', function (event) {
                document.querySelector('.moreImg').style.display = 'block';
                event.currentTarget.style.display = 'none';
            });
            document.querySelectorAll('.btnPayShow').forEach(function (element) {
                element.addEventListener('click', function () {
                    panel.style.display = 'block';
                });
            });
            document.querySelector('.btnClose').addEventListener('click', function (event) {
                event.stopPropagation();
                if (!paymentBusy) panel.style.display = 'none';
            });
        });
    </script>
</head>
<body class="container FlexColumn">
<img class="img1" src="https://miaguo-1253256735.file.myqcloud.com/web/bm_sy_01.png" />
<img class="img1" src="https://miaguo-1253256735.file.myqcloud.com/web/bm_sy_02.png" />
<img class="img1 btnPayShow" src="https://miaguo-1253256735.file.myqcloud.com/web/bm_sy_03.png" />

<img class="img1 btnGoto" title="product" src="https://miaguo-1253256735.file.myqcloud.com/web/bm_sy_banner-flashcardhistory.png" />

<img class="img1" src="https://miaguo-1253256735.file.myqcloud.com/web/bm_sy_04.png" />

<img class="img1 btnGoto" title="strategy" src="https://miaguo-1253256735.file.myqcloud.com/web/bm_sy_banner-method.png" />

<img class="img1" src="https://miaguo-1253256735.file.myqcloud.com/web/bm_sy_05.png" />
<img class="img1" src="https://miaguo-1253256735.file.myqcloud.com/web/bm_sy_06.png" />
<img class="img1" src="https://miaguo-1253256735.file.myqcloud.com/web/bm_sy_07.png" />
<img class="img1" src="https://miaguo-1253256735.file.myqcloud.com/web/bm_sy_08.png" />

<img class="img1 btnPlay" src="https://miaguo-1253256735.file.myqcloud.com/web/bm_sy_banner-zc_play.png" />

<img class="img1" src="https://miaguo-1253256735.file.myqcloud.com/web/bm_sy_09.png" />
<img class="img1" src="https://miaguo-1253256735.file.myqcloud.com/web/bm_sy_10.png" />
<img class="img1" src="https://miaguo-1253256735.file.myqcloud.com/web/bm_sy_11.png" />

<img class="img1" src="https://miaguo-1253256735.file.myqcloud.com/web/bm_sy_12.png" />
<img class="img1" src="https://miaguo-1253256735.file.myqcloud.com/web/bm_sy_14.png" />
<img class="img1" src="https://miaguo-1253256735.file.myqcloud.com/web/bm_sy_15.png" />
<img class="img1 btnGoto" title="payPy03" src="https://miaguo-1253256735.file.myqcloud.com/web/bm_sy_16.png" />
<img class="img1 btnGoto" title="payPy01" src="https://miaguo-1253256735.file.myqcloud.com/web/bm_sy_17.png" />
<img class="img1" src="https://miaguo-1253256735.file.myqcloud.com/web/bm_sy_18.png" />
<img class="img1 btnGoto" title="payPy02" src="https://miaguo-1253256735.file.myqcloud.com/web/bm_sy_19.png" />
<img class="img1 btnGoto" title="payPy04" src="https://miaguo-1253256735.file.myqcloud.com/web/bm_sy_20.png" />

<div class="btnMore">更多评语</div>
<div id="moreImg" class="moreImg">
    <img class="img1" src="https://miaguo-1253256735.file.myqcloud.com/web/bm_pyindex_01.png" />
    <img class="img1" src="https://miaguo-1253256735.file.myqcloud.com/web/bm_pyindex_02.png" />
    <img class="img1 btnGoto" title="payPy02" src="https://miaguo-1253256735.file.myqcloud.com/web/bm_pyindex_03.png" />
    <img class="img1 btnGoto" title="payPy04" src="https://miaguo-1253256735.file.myqcloud.com/web/bm_pyindex_04.png" />
    <img class="img1" src="https://miaguo-1253256735.file.myqcloud.com/web/bm_pyindex_05.png" />
    <img class="img1 btnGoto" title="payPy06" src="https://miaguo-1253256735.file.myqcloud.com/web/bm_pyindex_06.png" />
    <img class="img1 btnGoto" title="payPy01" src="https://miaguo-1253256735.file.myqcloud.com/web/bm_pyindex_07.png" />
    <img class="img1 btnGoto" title="payPy05" src="https://miaguo-1253256735.file.myqcloud.com/web/bm_pyindex_08.png" />
    <img class="img1" src="https://miaguo-1253256735.file.myqcloud.com/web/bm_pyindex_09.png" />
    <img class="img1" src="https://miaguo-1253256735.file.myqcloud.com/web/bm_pyindex_10.png" />
    <img class="img1 btnGoto" title="payPy07" src="https://miaguo-1253256735.file.myqcloud.com/web/bm_pyindex_11.png" />
    <img class="img1" src="https://miaguo-1253256735.file.myqcloud.com/web/bm_pyindex_12.png" />
    <img class="img1" src="https://miaguo-1253256735.file.myqcloud.com/web/bm_pyindex_13.png" />
    <img class="img1" src="https://miaguo-1253256735.file.myqcloud.com/web/bm_pyindex_14.png" />
    <img class="img1" src="https://miaguo-1253256735.file.myqcloud.com/web/bm_pyindex_15.png" />
    <img class="img1" src="https://miaguo-1253256735.file.myqcloud.com/web/bm_pyindex_16.png" />
    <img class="img1" src="https://miaguo-1253256735.file.myqcloud.com/web/bm_pyindex_17.png" />
    <img class="img1" src="https://miaguo-1253256735.file.myqcloud.com/web/bm_pyindex_18.png" />
    <img class="img1 btnGoto" title="payPy08" src="https://miaguo-1253256735.file.myqcloud.com/web/bm_pyindex_19.png" />
    <img class="img1" src="https://miaguo-1253256735.file.myqcloud.com/web/bm_pyindex_20.png" />
</div>

<div class="btnPayShow btnPayStart FlexColumn">
    <div class="btnPayClass2 btnPayClass FlexColumn">
        <img class="bm_sy_banner-bm" src="https://miaguo-1253256735.file.myqcloud.com/web/bm_sy_banner-bm.png" />
    </div>
</div>
<div class="panelBottom container FlexColumn">
    <div class="panelBottom1 FlexColumn">
        <div class="text1">欢迎您<br />报名秒过新手培训</div>
        <div class="text2">新手包仅售1元</div>
        <div id="btnPay" class="btnPay btnPayClass FlexRow" role="button" aria-disabled="false">
            <img class="bm_sy_banner-zf" src="https://miaguo-1253256735.file.myqcloud.com/web/bm_sy_banner-zf.png" />
        </div>
        <div id="payStatus" class="payStatus" aria-live="polite"></div>
        <img class="bm_sy_bg" src="https://miaguo-1253256735.file.myqcloud.com/web/bm_sy_bg.png" />
        <div class="panelBottom11 FlexColumn">
            <div class="text3">7天手把手</div>
            <div class="text4">教您上手新方法</div>
        </div>
        <div class="btnClose">

            <img class="practise_index_board_close" src="https://miaguo-1253256735.file.myqcloud.com/web/practise_index_board_close.png" />
        </div>
    </div>
</div>

<div style="height:50px"></div>
<audio id="audio1" src="https://miaguo-1253256735.file.myqcloud.com/web/_lesson/nuannuanbazhici.m4a" class="audio" >
    Your browser does not support the audio element.
</audio>
</body>
</html>