枫叶Fy 2017-09-15 02:37 采纳率: 0%
浏览 3973

微信支付成功后，怎么设置默认关注？

微信支付成功后，怎么设置关注按钮是灰色的，而且显示订单的详细信息？
图一是我做的支付页面，只有一个金额显示，没有详细信息，
关注按钮也需要点击完成以后才会关注。
图二是看到别人做的页面，有订单的详细信息，而且关注按钮变成灰色，
证明已经强制关注了该公众号，这个是怎么配置的？

图一图片说明
图二图片说明

  • 写回答

1条回答 默认 最新

  • 你知我知皆知 2024-08-06 22:33
    关注

    以下回答参考 皆我百晓生、券券喵儿 等免费微信小程序相关内容作答，并由本人整理回复。

    要实现将微信支付后的关注按钮设为灰色并显示订单详细信息的功能，你需要使用JavaScript和HTML。以下是具体的步骤：

    1. 首先，在你的HTML文件中添加一个输入框（用于展示支付金额）和一个表单元素（用于提交支付）。例如：
    <!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>支付确认</title>
</head>
<body>
    <h1>支付确认</h1>
    <div id="amount">支付金额：<input type="text" value="0.00"></div>
    <button id="pay">支付</button>

    <script src="payment.js"></script>
</body>
</html>
    1. 接下来，在同一个HTML文件中创建一个名为payment.js的JavaScript文件，并添加以下代码来处理支付和关注功能：
    function pay() {
    // 获取支付金额
    const amount = document.getElementById('amount').value;

    // 将支付金额转换为字符串
    const paymentStr = String(amount);

    // 创建一个新的订单对象
    const order = {
        amount,
        status: '未支付',
        paymentMethod: '微信支付',
        userId: '用户ID'
    };

    // 使用WebSocket连接向服务器发送订单数据
    const socket = new WebSocket('ws://your-server-url');
    socket.onmessage = function(event) {
        console.log('收到消息', event.data);
        if (event.data === 'success') {
            // 如果支付成功，则获取订单详情并更新订单状态
            fetch('/get_order_details', {
                method: 'POST',
                headers: {
                    'Content-Type': 'application/json'
                },
                body: JSON.stringify(order)
            })
            .then(response => response.json())
            .then(data => {
                const orderId = data.orderId;
                const detailsUrl = `/details/${orderId}`;
                
                // 更新订单状态和关注按钮
                updateOrderStatusAndFocus(detailsUrl);
            });
        }
    };
}

function updateOrderStatusAndFocus(detailsUrl) {
    // 发送请求到服务器以获取订单详情
    fetch(detailsUrl, {
        method: 'GET'
    }).then(response => response.json()).then(data => {
        console.log('订单详情:', data);

        // 更新订单状态
        const status = data.status;
        if (status === '已支付' || status === '已完成') {
            updatePaymentButton(status);
        } else {
            updatePaymentButton('未完成');
        }

        // 更新关注按钮
        const focusButton = document.getElementById('focus-button');
        focusButton.style.display = 'block';
    });
}

// 设置关注按钮的状态
function setFocusButtonStatus(status) {
    const focusButton = document.getElementById('focus-button');
    focusButton.style.display = status === '已关注' ? 'none' : 'block';
}

    在这个示例中，我们首先定义了一个函数pay()，它会计算支付金额并将结果保存在order对象中。然后，我们创建了一个WebSocket实例，并监听从服务器接收到的消息。当收到成功的支付消息时，我们将调用updateOrderStatusAndFocus()函数，该函数根据订单状态更新订单详情并调整关注按钮的状态。

    请注意，你可能需要根据实际情况替换your-server-url、/get_order_details等URL和API端点。此外，为了安全起见，请确保在实际部署前对上述代码进行适当的测试和调试。

    评论

报告相同问题？