苹果cms教程

苹果CMS用户会员等级升级模板与AJAX交互代码教程

发布时间：2025-04-05共12人阅读

一、会员升级模板功能简介

苹果CMS用户中心会员升级页面用于展示可开通的付费会员套餐，系统自动遍历后台已开启的会员组别，展示包天、包周、包月、包年四种时长套餐及对应积分消耗。用户点击套餐即可弹出确认窗口，通过AJAX异步提交完成会员升级，无需刷新页面。

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

二、会员套餐遍历展示代码

通过 volist 循环读取系统 group_list 会员组别数据，筛选正常开启的高级会员组，分别输出四种时长套餐，同时通过自定义属性绑定套餐ID、名称、积分、时长类型，为前端提交交互提供数据支撑。

<!-- BEGIN row -->
{volist name="group_list"}
    {if condition="$vo.group_id gt 2 && $vo.group_status eq 1"}
    <div class="huang grade"  data-id="{$vo.group_id}" data-name="{$vo.group_name}" data-points="{$vo.group_points_day}" data-long="day">
        {$vo.group_name}-包天：{$vo.group_points_day}积分
    </div>
    <div class="lan grade"  data-id="{$vo.group_id}" data-name="{$vo.group_name}" data-points="{$vo.group_points_week}" data-long="week">
        {$vo.group_name}-包周：{$vo.group_points_week}积分
    </div>
    <div class="hong grade"  data-id="{$vo.group_id}" data-name="{$vo.group_name}" data-points="{$vo.group_points_month}" data-long="month">
        {$vo.group_name}-包月：{$vo.group_points_month}积分
    </div>
    <div class="zi grade"  data-id="{$vo.group_id}" data-name="{$vo.group_name}" data-points="{$vo.group_points_year}" data-long="year">
        {$vo.group_name}-包年：{$vo.group_points_year}积分
    </div>
{/if}
{/volist}
<!-- END row -->

三、升级确认与AJAX提交脚本

前端监听套餐点击事件，自动读取当前套餐的会员ID、时长、积分消耗数据，弹出确认提示框。确认后异步请求会员升级接口，提交过程展示加载状态，操作成功自动刷新页面，实时更新用户会员信息。

<script>	
$('.grade').click(function(){
    var that=$(this);
    var group_id = that.attr('data-id');
    var group_name = that.attr('data-name');
    var long = that.attr('data-long');
    var points = that.attr('data-points');
    if(confirm('确定要升级到【'+group_name+'】吗,需要花费【'+points+'】积分')) {
        $.ajax({
            url: "{:url('user/upgrade')}",
            type: "post",
            dataType: "json",
            data: {group_id: group_id,long:long },
            beforeSend: function () {
                $("#btn_submit").css("background","#fd6a6a").val("loading...");
            },
            success: function (r) {
                alert(r.msg);
                if (r.code == 1) {
                    location.reload();
                }
            },
            complete: function () {
                $("#btn_submit").css("background","#fa4646").val("提交");
            }
        });
    }
});
</script>

四、模板核心功能解析

  • 智能筛选套餐：自动过滤关闭的会员组与低级用户组，仅展示可升级的高级会员套餐，适配后台权限配置。

  • 多时长套餐适配：一站式展示天、周、月、年四种开通时长，适配不同用户的开通需求。

  • 数据自主绑定：通过自定义data属性存储套餐核心数据，无需额外查询接口，前端调用高效便捷。

  • 安全确认机制：升级前弹出确认弹窗，展示会员等级与积分消耗，避免用户误操作。

  • 异步交互体验：对接系统升级接口，提交加载状态可视化，成功后自动刷新同步最新会员权限。

五、模板修改注意事项

  • 套餐展示的颜色class名称可根据模板样式自由修改，不会影响升级功能逻辑。

  • 禁止修改 data-id、data-long 核心参数名称，否则会导致后台无法接收升级数据。

  • 系统升级接口地址 {:url('user/upgrade')} 为原生内置地址，不可随意更改。

  • 后台会员组的积分价格、时长配置会自动同步至前端页面，无需手动修改模板数据。

相关标签