<!DOCTYPE html>
<html lang="zh-cmn-Hans" class="h-full">
    <head>
        <meta charset="UTF-8" />
        <meta name="viewport" content="width=device-width, initial-scale=1.0, user-scalable=no" />
        <meta http-equiv="X-UA-Compatible" content="ie=edge" />
        <link
            rel="stylesheet"
            type="text/css"
            href="https://res.wx.qq.com/t/wx_fed/weui-source/res/2.5.16/weui.min.css"
        />
        <script type="text/javascript" src="https://unpkg.com/jquery@3.3.1/dist/jquery.min.js"></script>
        <script src="https://unpkg.com/eruda@3.0.0/eruda.js"></script>
        <script src="https://cdn.tailwindcss.com"></script>
        <script src="https://res.wx.qq.com/open/js/jweixin-1.6.0.js"></script>
        <title>支付</title>
        <style>
            body {
                margin: 0;
                background-color: var(--weui-BG-0);
            }

            html {
            }
        </style>
    </head>

    <body class="h-full">
        <div id="pay" class="weui-msg" style="display: none">
            <div class="weui-msg__text-area">
                <p class="weui-msg__desc text-5xl">¥{{price}}</p>
                <p class="weui-msg__desc-primary text-lg">ChillGPT会员</p>
            </div>
            <div class="weui-msg__opr-area">
                <p class="weui-btn-area">
                    <a href="javascript:pay();" role="button" class="weui-btn weui-btn_primary">立即支付</a>
                </p>
            </div>
        </div>

        <div id="success" class="weui-msg h-full" style="display: none">
            <div class="weui-msg__icon-area">
                <i class="weui-icon-success weui-icon_msg"></i>
            </div>
            <div class="weui-msg__text-area">
                <h2 class="weui-msg__title">支付成功</h2>
                {{!--
                <p class="weui-msg__desc">内容详情，可根据实际需要安排，如果换行则不超过规定长度，居中展现</p>
                --}}
            </div>
            <div class="weui-msg__opr-area">
                <p class="weui-btn-area">
                    <a href="javascript:history.back();" role="button" class="weui-btn weui-btn_primary">关闭</a>
                </p>
            </div>
        </div>

        <div id="error" class="weui-msg" style="display: none">
            <div class="weui-msg__icon-area">
                <i class="weui-icon-warn weui-icon_msg"></i>
            </div>
            <div class="weui-msg__text-area">
                <h2 id="errtitle" class="weui-msg__title">操作失败</h2>
                <p id="errmsg" class="weui-msg__desc"></p>
            </div>
            <div class="weui-msg__opr-area">
                <p class="weui-btn-area">
                    <a href="javascript:history.back();" role="button" class="weui-btn weui-btn_default">关闭</a>
                </p>
            </div>
        </div>
        <script>
            eruda.init();
        </script>
        <script>
            var viewData = {
                success: {{ success }},
                message: '{{ message }}',
                errorCode: {{ errorCode }},
                data: {{{ jsapiData}}},
            };

            $.post('/api/weixin/jsapiSign', { url: window.location.href }, function (res) {
                res.jsApiList = [
                    'chooseWXPay',
                    'updateAppMessageShareData',
                    'updateTimelineShareData',
                    'hideAllNonBaseMenuItem',
                    'scanQRCode',
                ];
                wx.config(res);
                wx.error(function (res) {
                    console.log('jssdk error', res);
                });
            });
            if (!viewData.success) {
                $('#errtitle').html('发生错误');
                $('#errmsg').html(viewData.message);
                $('#error').show();
            } else {
                $('#pay').show();
                wx.ready(function (res) {
                    console.log('jssdk ready', res);
                    pay();
                });
            }

            function pay() {
                var config = viewData.data;
                config.success = function () {
                    showSuccess('支付成功');
                };
                wx.chooseWXPay(config);
            }
        </script>
    </body>
</html>
