苹果CMS登录弹窗模板教程

苹果CMS模板可以通过 JavaScript 调用会员登录弹窗，实现无需跳转页面即可进行登录的效果。该方式由 home.js 中的 MAC.User.Login(); 方法触发。

当用户处于未登录状态时，系统会加载 ajax_login.html 登录模板；用户已经登录时，则会加载 ajax_info.html 会员信息模板。

相关模板文件位于：

html/user/ajax_login.html

html/user/ajax_info.html

一、制作弹出登录模板

未登录用户调用登录弹窗时，可以使用 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>
<!--会员信息弹窗结束-->

三、调用会员登录弹窗

完成登录模板后，需要在页面中通过 JavaScript 调用 MAC.User.Login();。模板需要确保已经正确引入 staticjshome.js，否则相关会员弹窗方法可能无法正常执行。

<!-- 模板需要确保已经引入 staticjshome.js -->
<a class="nav-link" href="javascript:;">会员</a>

<script>
   $('body').on('click', '#Login', function(e){
      MAC.User.Login();
   });
</script>

四、登录弹窗的工作原理

整个登录弹窗主要由模板文件和 JavaScript 两部分组成。当用户点击绑定了登录事件的元素后，JavaScript 执行 MAC.User.Login();。

• 用户未登录：调用 html/user/ajax_login.html，显示登录表单。

• 用户已经登录：调用 html/user/ajax_info.html，显示会员信息。

• 登录表单提交：通过苹果CMS已有的会员登录相关 JavaScript 逻辑完成验证。

• 验证码：当后台开启会员登录验证码时，模板中的验证码区域会自动显示。

• 会员信息：登录后通过 $obj 调用会员相关字段。

五、模板开发注意事项

使用该方式制作登录弹窗时，需要注意模板文件路径、JavaScript文件以及相关 CSS 类名之间的对应关系。

• ajax_login.html 和 ajax_info.html 应放在正确的会员模板目录。

• MAC.User.Login(); 依赖苹果CMS前端 JavaScript 代码，确保相关 JS 已加载。

• mac_login_form、mac_u_name、mac_u_pwd 等 class 名称需要与系统前端登录逻辑保持一致。

• 如果修改登录表单中的 class、name 或相关属性，建议同时检查前端 JS 是否仍然能够正常识别。

• 验证码区域由 login_verify 配置控制，只有开启会员登录验证码时才会显示。

• 登录后会员信息中的 $obj.user_name、$obj.group_name 等变量需要结合当前苹果CMS版本实际字段进行确认。

总结

通过 ajax_login.html 与 ajax_info.html 两个模板文件，再配合 MAC.User.Login(); JavaScript 方法，可以在苹果CMS网站中实现会员登录与会员信息弹窗。相比直接跳转到会员登录页面，这种方式能够减少页面跳转，让会员登录、查看账户信息以及退出登录等操作更加方便。