苹果CMS弹窗登录与用户信息展示模板代码教程

一、弹窗登录功能逻辑说明

苹果CMS内置JS弹窗登录机制，依托 home.js 文件中的 MAC.User.Login() 方法触发弹窗展示。页面会根据用户登录状态自动渲染不同弹窗内容：未登录用户展示登录表单，已登录用户展示个人会员信息面板，无需单独开发交互逻辑，适配全站调用。

整套弹窗功能由两个独立模板文件组成，分别对应不同登录状态，统一存放于用户模板目录下。

二、未登录弹窗登录表单（ajax_login.html）

模板文件路径

html/user/ajax_login.html

该模板为未登录状态下的弹窗登录界面，包含账号密码输入、后台自适应验证码、注册与找回密码跳转链接，完全适配系统原生登录校验规则。

<!--登录弹窗开始-->
<div class="mac_login">
    <form class="mac_login_form">
        <div class="login_form_group">
            <input type="text" class="mac_u_name" name="user_name" placeholder="手机/登录账号">
        </div>
        <div class="login_form_group">
            <input type="password" class="mac_u_pwd" name="user_pwd" placeholder="登录密码">
        </div>
        {if condition="$GLOBALS['config']['user']['login_verify'] eq 1"}
        <div class="login_form_group clearfix">
            <input type="text" class="mac_u_verify" name="verify" placeholder="请输入验证码">
            <img class="mac_verify_img" src="{:url('verify/index')}" onclick="this.src = this.src+'?'>
        </div>
        {/if}
        <div class="login_form_link">
            <a href="{:url('user/reg')}">注册</a>
            <a href="{:url('user/findpass')}">忘记密码</a>
        </div>
        <div class="login_form_group">
            <input type="button" class="login_form_submit" value="登录">
        </div>
    </form>
</div>
<!--登录弹窗结束-->

模板支持后台验证码开关配置，开启登录验证码后自动展示验证码输入框与刷新图片，关闭则隐藏对应模块，适配站点不同安全配置。同时内置注册、密码找回跳转链接，完善登录辅助功能。

三、已登录用户信息弹窗（ajax_info.html）

模板文件路径

html/user/ajax_info.html

用户完成登录后，再次触发弹窗将展示用户个人数据面板，直观展示账号核心信息，同时提供会员中心入口与退出登录功能。

<!--登录弹窗开始-->
<div class="mac_login">
    <form class="mac_login_form">
        <div class="login_form_group">
            会员名：{$obj.user_name}
        </div>
        <div class="login_form_group">
            会员等级：{$obj.group_name}
        </div>
        <div class="login_form_group">
            剩余积分：{$obj.user_points}
        </div>
        <div class="login_form_group">
            上次登录时间：{$obj.user_last_login_time|mac_day=color}
        </div>
        <div class="login_form_group">
            登录次数：{$obj.user_login_num}
        </div>
        <div class="login_form_link">
            <a href="{:url('user/index')}">进入会员中心</a>
            <a href="{:url('user/logout')}">退出</a>
        </div>
    </form>
</div>
<!--登录弹窗结束-->

弹窗自动调取当前登录用户的账号、会员组别、积分、登录记录等数据，字段调用贴合苹果CMS原生用户变量规则，数据实时同步后台。

四、页面弹窗触发方式

想要在页面实现弹窗唤起效果，页面必须先引入系统核心JS文件 static/js/home.js，通过绑定点击事件调用系统内置登录弹窗方法，即可实现一键弹出登录/用户信息面板。

<a class="nav-link" href="javascript:;">会员</a>
<script>
$('body').on('click', '#Login', function(e){	
    MAC.User.Login();
});
</script>

点击绑定元素后，系统自动判断用户登录状态，动态加载对应弹窗模板，无需手动判断状态与渲染页面。