苹果CMSV10用户充值页面调用教程

苹果CMS V10 用户中心提供在线充值和卡密充值两种常见的充值方式。充值页面文件通常位于 html/user/buy.html，可以根据模板设计需求修改页面样式和表单布局。

一、充值页面文件位置

用户充值页面文件：

html/user/buy.html

该页面主要用于展示用户充值表单，并根据后台配置提供在线充值或充值卡充值功能。

二、在线充值表单示例

在线充值表单通过输入充值金额创建充值订单，订单生成成功后跳转到支付页面继续完成付款。

<div class="line40">
   <p>充值的金额：<input type="text" name="price" value="{$config.min}" class="jifen-input"></p>
   <p><input type="button" class="jifen2-button" value="确认" id="btn_submit_pay"></p>
   <p class="hui">友情提示：最小充值金额为{$config.min}元，1元可以兑换{$config.scale}个积分</p>
</div>

<script>
	$('#btn_submit_pay').click(function(){
		var price = $("input[name='price']").val();

		if(Number(price) < 1){
			return;
		}

		if(confirm('确定要在线充值吗')) {
			$.ajax({
				url: "{:url('user/buy')}",
				type: "post",
				dataType: "json",
				data: {price: price, flag:'pay'},
				beforeSend: function () {
					$("#btn_submit_pay").css("background","#fd6a6a").val("loading...");
				},
				success: function (r) {
					if (r.code == 1) {
						// 生成订单后跳转支付页面
						location.href="{:url('user/pay')}?order_code=" + r.data.order_code;
					} else {
						alert(r.msg);
					}
				},
				complete: function () {
					$("#btn_submit_pay").css("background","#fa4646").val("提交");
				}
			});
		}
	});
</script>

三、在线充值代码说明

{$config.min}用于读取当前充值配置中的最低充值金额，作为充值输入框的默认值，同时在页面提示用户最低充值金额。

{$config.scale}用于显示充值金额与积分之间的兑换比例，例如后台设置为1元兑换10个积分，则页面会显示相应的兑换规则。

点击充值按钮后，JavaScript通过 AJAX 向 user/buy 提交充值金额，并通过 flag:'pay' 标识当前请求为在线充值。

当接口返回 r.code == 1 时，表示订单创建成功，此时通过返回的 order_code 跳转到用户支付页面：

{:url('user/pay')}?order_code=订单编号

如果订单创建失败，则通过 r.msg 输出服务器返回的错误提示。

四、卡密充值表单示例

除了在线支付之外，苹果CMS V10 还可以使用充值卡进行积分充值。用户输入充值卡号和充值密码后，系统会提交卡密进行验证。

<div class="line40">
   <p>
      充值卡号：
      <input type="text" name="card_no" value="" class="jifen-input">

      {if condition="$GLOBALS['config']['pay']['card']['url'] neq ''"}
      <a target="_blank" href="{$GLOBALS['config']['pay']['card']['url']}">点击购买卡密</a>
      {/if}
   </p>

   <p>
      充值密码：
      <input type="text" name="card_pwd" value="" class="jifen-input">
   </p>

   <p>
      <input type="button" class="jifen2-button" value="确认" id="btn_submit_card">
   </p>

   <p class="hui">友情提示：请到卡密平台购买充值卡</p>
</div>

<script>
   $('#btn_submit_card').click(function(){
		var no = $('input[name="card_no"]').val();
		var pwd = $('input[name="card_pwd"]').val();

		if(no == '' || pwd == ''){
			alert('请输入充值卡号和密码');
			return;
		}

		if(confirm('确定要使用充值卡充值吗')) {
			$.ajax({
				url: "{:url('user/buy')}",
				type: "post",
				dataType: "json",
				data: {card_no: no, card_pwd:pwd, flag:'card'},
				beforeSend: function () {
					$("#btn_submit_card").css("background","#fd6a6a").val("loading...");
				},
				success: function (r) {
					alert(r.msg);
				},
				complete: function () {
					$("#btn_submit_card").css("background","#fa4646").val("提交");
				}
			});
		}
	});
</script>

五、卡密充值代码说明

card_no用于获取用户输入的充值卡号，card_pwd用于获取充值卡密码。

提交之前会检查两个输入框是否为空。如果卡号或密码没有填写，则提示用户输入完整的充值卡信息。

卡密充值通过 AJAX 请求 user/buy，并使用：

flag:'card'

告诉后台当前提交的是充值卡充值请求。服务器处理完成后，将返回结果通过 r.msg 提示给用户。

六、卡密购买链接调用

代码通过以下配置判断是否存在充值卡购买地址：

$GLOBALS['config']['pay']['card']['url']

当该配置不为空时，页面显示“点击购买卡密”链接，并在新窗口打开对应地址。

{if condition="$GLOBALS['config']['pay']['card']['url'] neq ''"}
<a target="_blank" href="{$GLOBALS['config']['pay']['card']['url']}">点击购买卡密</a>
{/if}

如果后台没有配置卡密购买地址，则不会显示该链接。

七、在线充值与卡密充值的区别

八、修改充值页面时的注意事项

如果只是修改页面的 HTML 结构和 CSS 样式，一般不会影响充值接口。修改时应尽量保留原有的表单字段名称以及苹果CMS模板标签。

• 在线充值需要保留 price 参数。

• 在线充值请求需要使用 flag:'pay'。

• 充值成功后需要使用返回的 order_code 跳转支付页面。

• 卡密充值需要保留 card_no 和 card_pwd 参数。

• 卡密充值请求需要使用 flag:'card'。

• 修改按钮的 id 时，需要同步修改 JavaScript 中对应的选择器。

总结

苹果CMS V10 的用户充值页面主要通过 html/user/buy.html 实现。在线充值通过充值金额创建订单，并跳转至支付页面；卡密充值则通过充值卡号和密码完成验证。模板开发时可以根据实际设计需求调整页面结构和样式，但核心参数、接口地址以及充值流程应保持一致。