苹果CMS V10用户绑定手机/邮箱页面模板

苹果CMS V10用户中心提供了手机和邮箱绑定功能，可以通过绑定页面让用户完善账号信息。本文介绍用户绑定页面的模板文件位置、页面变量以及手机/邮箱绑定的完整代码示例。

一、模板文件位置

用户绑定页面模板文件位于：

html/user/bind.html

根据当前绑定类型不同，页面会显示手机绑定或邮箱绑定内容。

二、页面变量说明

模板中可以通过条件判断 $ac 的值，从而动态显示“绑定手机”或“绑定邮箱”。例如：

<h1>绑定{if condition="$ac eq 'phone'"}手机{else/}邮箱{/if}</h1>

三、苹果CMS V10用户绑定信息完整代码

以下代码可用于 html/user/bind.html 页面，根据 $ac 参数自动判断当前是手机绑定还是邮箱绑定。

<h1>绑定{if condition="$ac eq 'phone'"}手机{else/}邮箱{/if}</h1>

<form name="fm" id="fm" method="post" action="">
    <input type="hidden" name="ac" value="{$ac}">

    {if condition="$ac eq 'phone'"}手机{else/}邮箱{/if}：
    <input type="text" name="to" class="member-input" value="">

    <input type="button" id="btn_bind_send" value="获取验证码">

    验证码：
    <input type="text" name="code" class="member-input" value="">

    <input type="button" id="btn_submit" class="search-button" value="确认绑定">
</form>

<script type="text/javascript">
var countdown = 60;

function settime(val) {
    if (countdown == 0) {
        val.removeAttribute("disabled");
        val.value = "获取验证码";
        countdown = 60;
        return true;
    } else {
        val.setAttribute("disabled", true);
        val.value = "重新发送(" + countdown + ")";
        countdown--;
    }

    setTimeout(function() {
        settime(val);
    }, 1000);
}

$('#btn_bind_send').click(function() {
    var ac = $('input[name="ac"]').val();
    var to = $('input[name="to"]').val();

    if(ac == 'email') {
        var pattern = /^([a-zA-Z0-9]+[_|_|.]?)*[a-zA-Z0-9]+@([a-zA-Z0-9]+[_|_|.]?)*[a-zA-Z0-9]+.[a-zA-Z]{2,3}$/;
        var ex = pattern.test(to);

        if (!ex) {
            alert('邮箱格式不正确');
            return;
        }
    }
    else if(ac == 'phone') {
        var pattern = /^[1][0-9]{10}$/;
        var ex = pattern.test(to);

        if (!ex) {
            alert('手机号格式不正确');
            return;
        }
    }
    else {
        alert('参数错误');
        return;
    }

    settime(this);

    var data = $("#fm").serialize();

    $.ajax({
        url: "{:url('user/bindmsg')}",
        type: "post",
        dataType: "json",
        data: data,
        beforeSend: function () {
            // 开启loading
        },
        success: function (r) {
            alert(r.msg);
        },
        complete: function () {
            // 结束loading
        }
    });
});

$("#btn_submit").click(function() {
    var ac = $('input[name="ac"]').val();
    var to = $('input[name="to"]').val();

    if(ac == 'email') {
        var pattern = /^([a-zA-Z0-9]+[_|_|.]?)*[a-zA-Z0-9]+@([a-zA-Z0-9]+[_|_|.]?)*[a-zA-Z0-9]+.[a-zA-Z]{2,3}$/;
        var ex = pattern.test(to);

        if (!ex) {
            alert('邮箱格式不正确');
            return;
        }
    }
    else if(ac == 'phone') {
        var pattern = /^[1][0-9]{10}$/;
        var ex = pattern.test(to);

        if (!ex) {
            alert('手机号格式不正确');
            return;
        }
    }
    else {
        alert('参数错误');
        return;
    }

    var code = $('input[name="code"]').val();

    if(code == '') {
        alert('请输入验证码');
        return;
    }

    var data = $("#fm").serialize();

    $.ajax({
        url: "{:url('user/bind')}",
        type: "post",
        dataType: "json",
        data: data,
        beforeSend: function () {
            $("#btn_submit").css("background", "#fd6a6a").val("loading...");
        },
        success: function (r) {
            alert(r.msg);

            if(r.code == 1) {
                location.href = "{:url('user/info')}";
            }
        },
        complete: function () {
            $("#btn_submit").css("background", "#fa4646").val("提交");
        }
    });
});
</script>

四、获取验证码功能

点击“获取验证码”按钮后，代码会先判断当前绑定类型。如果 $ac 为 email，则验证邮箱格式；如果为 phone，则验证手机号码格式。

验证通过后，通过AJAX请求：

{:url('user/bindmsg')}

向苹果CMS后台发送验证码请求。

验证码发送按钮同时启用60秒倒计时，避免用户短时间内重复请求验证码。

五、确认绑定功能

用户填写验证码后，点击“确认绑定”按钮，页面通过AJAX向以下地址提交绑定请求：

{:url('user/bind')}

如果后台返回 code == 1，表示绑定操作成功，页面会自动跳转至用户资料页面：

{:url('user/info')}

六、手机与邮箱绑定判断

页面通过 ac 参数区分绑定类型：

{if condition="$ac eq 'phone'"}
    手机绑定
{else/}
    邮箱绑定
{/if}

因此同一个 bind.html 模板可以同时用于手机绑定和邮箱绑定，无需分别制作两个页面。

七、模板使用注意事项

• 模板文件位置为 html/user/bind.html。

• 页面需要在苹果CMS用户中心环境中使用。

• 获取验证码功能依赖苹果CMS后台对应的短信或邮件服务配置。

• 绑定手机时需要正确配置短信发送功能。

• 绑定邮箱时需要正确配置邮件发送功能。

• 页面使用jQuery进行AJAX请求，因此需要确保模板环境已经加载jQuery。

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

总结

苹果CMS V10的用户绑定页面主要用于绑定手机或邮箱，模板文件为 html/user/bind.html。通过 $ac 可以判断当前绑定类型，并配合验证码发送、验证码校验以及AJAX提交，实现完整的账号绑定流程。

其中，user/bindmsg负责发送绑定验证码，user/bind负责执行实际绑定操作，绑定成功后则跳转到用户资料页面。