苹果CMS微信扫码支付页面模板源码搭建教程

发布时间：2025-02-21共9人阅读

一、微信支付模板功能概述

苹果CMS微信支付模板是用户选择微信充值方式后跳转的专属支付页面，主要用于展示用户当前充值订单信息、渲染微信支付二维码，并定时检测订单支付状态，用户扫码支付成功后自动跳转至会员中心页面。

模板文件存放路径：html/user/payment_weixin.html

二、微信支付页面完整源码

页面采用表单提交结构，隐藏传输订单核心参数，可视化展示订单编号、支付金额与扫码二维码，搭配前端定时器实现支付状态自动监听，无需手动刷新页面。

<form method="post" target="_blank" action="{:url('user/gopay')}">
    <input type="hidden" name="order_id" value="{$info.order_id}">
    <input type="hidden" name="order_code" value="{$info.order_code}">
    <div class="line40">
        <p><span class="xiang">订单编号：</span>{$order.order_code}</p>
        <p><span class="xiang">订单金额：</span>{$order.order_price}元</p>
        <p><img src="{:url('user/qrcode')}?data={$payment.code_url|urlencode}" width="150" height="150"/></p>
        <p>打开微信，扫码支付</p>
    </div>
</form>
<script>
	function check(){
		$.get("{:url('user/order_info')}" + '?order_id={$order.order_id}', function(data){
			if(data.info.order_status == 1){
				alert('支付完成，即将跳转到会员中心');
				window.location.href = "{:url('user/index')}";
			}
		});
	}
	$(function(){
		setInterval(function(){check()}, 5000);  //5秒查询一次支付是否成功
	})
</script>

三、页面核心模块解析

1. 订单参数传输模块

通过隐藏表单字段携带订单ID与订单编号参数，提交至系统支付接口，保证后台可以精准匹配当前充值订单，是支付功能正常运行的核心参数。

2. 订单信息展示模块

自动调取并展示当前充值订单的唯一编号与实际支付金额，搭配微信支付二维码，二维码通过系统二维码接口动态生成，适配实时支付链接。同时展示支付引导文字，提示用户使用微信扫码完成付款。

3. 支付状态监听脚本

前端设置5秒定时查询机制，循环请求订单状态接口，实时检测订单支付进度。一旦检测到订单状态为已支付，即刻弹出支付成功提示，并自动跳转至用户中心主页，完成整套充值流程。

四、模板使用与修改规范

所有系统接口地址为原生内置路由，禁止修改 user/gopay、user/order_info 等接口路径，避免支付功能失效。
订单变量、二维码生成参数为系统固定字段，不可随意更名，否则会出现订单信息、二维码加载异常问题。
页面样式、文字提示、二维码尺寸可根据模板风格自定义调整，不影响核心支付逻辑。
定时查询时间可按需调整，默认5秒查询一次，平衡页面性能与支付响应速度。

苹果cms教程