Calculation/app/view/profile/sms.ejs

<% include ./sub_menu.ejs %>
<div class="panel-content" id="app">
    <div class="panel-title">
        <div class="title-main">
            <h2>认证手机</h2>
        </div>
    </div>
    <div class="content-wrap">
        <div class="c-body">
            <div class="sjs-height-0">
                <div class="row m-0 mt-3">
                    <div class="col-6">
                        <div class="card mb-3 ">
                            <div class="card-body pt-3">
                                <h6 class="card-title">认证手机</h6>
                                <% if (accountData.auth_mobile !== '') { %>
                                <!--已绑定手机-->
                                <div class="form-group">
                                    <label><%- accountData.auth_mobile %></label>
                                    <% if (accountData.dsk_account) { %>
                                    <a href="javascript:void(0);" class="btn btn-sm btn-outline-secondary" data-container="body" data-toggle="popover" data-placement="bottom" data-content="先解绑大司空账号才能解绑认证手机" data-trigger="focus">解绑</a>
                                    <% } else { %>
                                    <a href="#remove-auth-mobile" class="btn btn-sm btn-outline-primary" data-toggle="modal" data-target="#remove-auth-mobile">解绑</a>
                                    <% } %>
                                    <a href="javascript:void(0);" class="btn btn-sm btn-outline-warning ml-2" id="change-mobile">修改手机</a>
                                </div>
                                <% } %>
                                <!--绑定手机-->
                                <% if (accountData.auth_mobile === '') { %><div class="alert alert-warning">认证手机用户找回密码操作，请优先设置。</div><% } %>
                                <form id="mobile-form" <% if (accountData.auth_mobile !== '') { %>style="display: none" <% } %>>
                                    <div class="form-group">
                                        <label>认证手机</label>
                                        <div class="input-group mb-3">
                                            <input class="form-control form-control-sm" placeholder="输入11位手机号码" value="" name="auth_mobile" maxlength="11"/>
                                            <div class="input-group-append">
                                                <button class="btn btn-outline-secondary btn-sm" type="button" id="get-code">获取验证码</button>
                                            </div>
                                        </div>
                                    </div>
                                    <div class="form-group">
                                        <div class="input-group mb-3">
                                            <input class="form-control form-control-sm" type="text" readonly="readonly" name="code" placeholder="输入短信中的6位验证码" />
                                            <input type="hidden" name="_csrf_j" value="<%= ctx.csrf %>">
                                        </div>
                                    </div>
                                    <button type="button" class="btn btn-secondary btn-sm disabled" id="bind-btn">确认绑定</button>
                                    <% if (accountData.auth_mobile !== '') { %><button type="button" class="btn btn-outline-secondary btn-sm" id="hide-bind-btn">取消</button><% } %>
                                </form>
                                <% if (accountData.auth_mobile !== '' && false) { %>
                                    <!--短信通知开关(已有认证手机后显示)-->
                                    <div class="mt-5">
                                        <h4>通知类型</h4>
                                        <p class="text-muted">勾选您需要接收的短信类型。</p>
                                        <form id="sms-form" method="post" action="/profile/sms/type?csrf=<%- ctx.csrf %>">
                                            <input type="hidden" name="_csrf_j" value="<%= ctx.csrf %>">
                                            <% const user_smsType = accountData.sms_type !== '' ? JSON.parse(accountData.sms_type) : null; %>
                                            <% for (const s in smsType) { %>
                                                <% if (smsType[s].sms) { %>
                                                    <div class="form-group row">
                                                        <label class="col-auto col-form-label"><%= smsType[s].name %>
                                                            <!--<a href="#sms-view" data-toggle="modal" data-target="#sms-view" class="ml-2"><i class="fa fa-info-circle"></i></a>-->
                                                        </label>
                                                        <div class="col-5">
                                                            <% for (const c of smsType[s].children) { %>
                                                                <div class="form-check ">
                                                                    <input class="form-check-input" id="<%= s %>_<%- c.value %>" type="checkbox" name="<%= s %>[]" value="<%= c.value %>" <% if (user_smsType !== null && user_smsType[s] !== undefined && user_smsType[s].indexOf(c.value.toString()) !== -1) { %>checked<% } %>>
                                                                    <label class="form-check-label" for="<%= s %>_<%- c.value %>"><%= c.title %></label>
                                                                </div>
                                                            <% } %>
                                                        </div>
                                                    </div>
                                                <% } %>
                                            <% } %>
                                            <input name="type" value="1" type="hidden">
                                            <button type="submit" class="btn btn-primary btn-sm">确认修改</button>
                                        </form>
                                    </div>
                                <% } %>
                            </div>
                        </div>
                        <div class="card mb-3 ">
                            <div class="card-body pt-3">
                                <h6 class="card-title">大司空账号</h6>
                                <div class="mb-3">
                                    <% if (!accountData.auth_mobile) { %>
                                        <div class="mb-3"><label for="">请先认证手机，再绑定大司空账号。</label></div>
                                    <% } else { %>
                                        <div <% if (accountData.dsk_account) { %>style="display: none"<% } %>>
                                            <div class="form-group">
                                                <div class="input-group mb-3">
                                                    <input class="form-control form-control-sm" id="dak-mobile" readonly="" value="<%= accountData.auth_mobile %>">
                                                    <div class="input-group-append">
                                                        <button class="btn btn-outline-secondary btn-sm" id="change-dsk-mobile">更改账号</button>
                                                        <button class="btn btn-outline-secondary btn-sm" style="display: none" id="reset-dsk-mobile">重置</button>
                                                    </div>
                                                </div>
                                            </div>
                                            <div class="form-group mb-1">
                                                <div>
                                                    <div class="form-check form-check-inline">
                                                        <input class="form-check-input" type="radio" id="radio1" value="password" name="dskradio" checked>
                                                        <label class="form-check-label" for="radio1" name="radio33">密码</label>
                                                    </div>
                                                    <div class="form-check form-check-inline">
                                                        <input class="form-check-input" type="radio" id="radio2" value="code" name="dskradio">
                                                        <label class="form-check-label" for="radio2">手机验证码</label>
                                                    </div>
                                                </div>
                                            </div>
                                            <div class="form-group mb-3" id="dsk-pwd-div">
                                                <input class="form-control form-control-sm" name="dsk_pwd" value="" placeholder="请输入密码">
                                            </div>
                                            <div class="input-group mb-3" id="dsk-code-div" style="display: none">
                                                <input class="form-control form-control-sm" placeholder="输入短信中的6位验证码" value="" name="dsk_code" maxlength="6"/>
                                                <div class="input-group-append">
                                                    <button class="btn btn-outline-secondary btn-sm" type="button" id="get-dsk-code">获取验证码</button>
                                                </div>
                                            </div>
                                            <button class="btn btn-sm btn-primary" id="dsk-bind-btn">确认绑定</button>
                                            <a class="btn btn-sm btn-outline-primary ml-2" href="//dsk.smartcost.com.cn/register" target="_blank">注册大司空账号</a>
                                        </div>
                                        <div class="form-group show-dsk-account" <% if (!accountData.dsk_account) { %>style="display: none"<% } %>>
                                            <label><%- accountData.dsk_account ? accountData.dsk_account.mobile : '' %></label>
                                            <a href="#remove-dsk-account" class="btn btn-sm btn-outline-primary" data-toggle="modal" data-target="#remove-dsk-account">解绑</a>
                                        </div>
                                </div>
                                <% } %>
                            </div>
                        </div>
                    </div>
                </div>
            </div>
        </div>
    </div>
</div>
<div id="captcha-element"></div>
<script type="text/javascript">
    const csrf = '<%= ctx.csrf %>';
</script>
<script>
    window.AliyunCaptchaConfig = {
        language: 'cn',
        // 必填，验证码示例所属地区，支持中国内地（cn）、新加坡（sgp）
        region: "cn",
        // 必填，身份标。开通阿里云验证码2.0后，您可以在控制台概览页面的实例基本信息卡片区域，获取身份标
        prefix: "n1styx",
    };
</script>
<script type="text/javascript" src="https://o.alicdn.com/captcha-frontend/aliyunCaptcha/AliyunCaptcha.js"></script>
<script type="text/javascript" src="/public/js/profile.js"></script>
<script>
    $(function () {
        // 更改账号
        $('#change-dsk-mobile').click(function () {
            $('#dak-mobile').attr('readonly', false);
            $('#change-dsk-mobile').hide();
            $('#reset-dsk-mobile').show();
        });
        // 重置账号
        $('#reset-dsk-mobile').click(function () {
            $('#dak-mobile').val('<%= accountData.auth_mobile %>');
        });
        // 切换密码/验证码
        $('input[name="dskradio"]').on('change', function () {
            if ($(this).val() === 'password') {
                $('#dsk-pwd-div').show();
                $('#dsk-code-div').hide();
            } else {
                $('#dsk-pwd-div').hide();
                $('#dsk-code-div').show();
            }
        });
        var captcha;
        // 弹出式，除region和prefix以外的参数
        window.initAliyunCaptcha({
            // 场景ID。根据步骤二新建验证场景后，您可以在验证码场景列表，获取该场景的场景ID
            SceneId: "1mqqisql",
            // 验证码模式，popup表示弹出式，embed表示嵌入式。无需修改
            mode: "popup",
            // 页面上预留的渲染验证码的元素，与原代码中预留的页面元素保持一致。
            element: "#captcha-element",
            // 触发验证码弹窗或无痕验证的元素
            button: "#get-dsk-code",
            // 验证码验证通过回调函数
            success: function (captchaVerifyParam) {
                // 入参为验签captchaVerifyParam
                // 1.向后端发起业务请求进行验证码验签captchaVerifyParam校验
                // 2.根据校验结果来进行业务处理
                // 3.如业务需要重新进行验证码验证，调用验证码初始化方法initAliyunCaptcha重新初始化验证码
                // if (isPosting2) {
                //     return false;
                // }
                const mobile = $('#dak-mobile').val();
                if (!mobile) {
                    toastr.error('请输入手机号');
                    return false;
                }
                // 手机号验证
                if (!/^1[3456789]\d{9}$/.test(mobile)) {
                    toastr.error('请输入正确的手机号');
                    return false;
                }
                const btn = $('#get-dsk-code');

                postData('/profile/dsk/api', { type: 'sms', mobile: mobile, captchaVerifyParam }, function (response) {
                    codeSuccess(btn);
                });
            },
            // 验证码验证不通过回调函数
            fail: function (result) {
                // 入参为不通过信息
                // 正常验证有效期内不需要做任何操作，验证码自动刷新，重新进行验证
                toastr.error(result);
                console.error(result);
            },
            // 绑定验证码实例回调函数，该回调会在验证码初始化成功后调用
            getInstance: function (instance) {
                captcha = instance;
            },
            // 滑块验证和一点即过的验证形态触发框体样式，支持自定义宽度和高度，单位为px。
            slideStyle: {
                width: 360,
                height: 40,
            },
            // ...其他参数，参考initAliyunCaptcha参数说明
        });
        // 获取验证码
        // $("#get-dsk-code").click(function() {
        //     // if (isPosting2) {
        //     //     return false;
        //     // }
        //     const mobile = $('#dak-mobile').val();
        //     if (!mobile) {
        //         toastr.error('请输入手机号');
        //         return false;
        //     }
        //     // 手机号验证
        //     if (!/^1[3456789]\d{9}$/.test(mobile)) {
        //         toastr.error('请输入正确的手机号');
        //         return false;
        //     }
        //     const btn = $(this);
        //
        //     postData('/profile/dsk/api', { type: 'sms', mobile: mobile }, function (response) {
        //         codeSuccess(btn);
        //     });
        //
        //     // $.ajax({
        //     //     url: '/profile/dsk/api?_csrf_j=' + csrf,
        //     //     type: 'post',
        //     //     data: { type: 'code', mobile: mobile },
        //     //     dataTye: 'json',
        //     //     error: function() {
        //     //         isPosting2 = false;
        //     //     },
        //     //     beforeSend: function() {
        //     //         isPosting2 = true;
        //     //     },
        //     //     success: function(response) {
        //     //         isPosting2 = false;
        //     //         if (response.err === 0) {
        //     //             codeSuccess(btn);
        //     //         } else {
        //     //             toastr.error(response.msg);
        //     //         }
        //     //     }
        //     // });
        // });

        $('#dsk-bind-btn').click(function () {
            const mobile = $('#dak-mobile').val();
            const pwd = $('#dsk-pwd-div input').val();
            const code = $('#dsk-code-div input').val();
            const type = $('input[name="dskradio"]:checked').val();
            if (!mobile) {
                toastr.error('请输入手机号');
                return false;
            }
            if (type !== 'password' && type !== 'code') {
                toastr.error('请选择验证方式');
                return false;
            }
            if (type === 'password' && !pwd) {
                toastr.error('请输入密码');
                return false;
            }
            if (type === 'code' && !code) {
                toastr.error('请输入验证码');
                return false;
            }
            const data = {
                type: 'bind',
                mobile,
                method: type === 'password' ? 1 : 2,
                value: type === 'password' ? pwd : code,
            }
            postData('/profile/dsk/api', data, function (response) {
                toastr.success('绑定大司空账号成功');
                setTimeout(function () {
                    location.reload();
                }, 1000);
            });
        });

        $('#del-dsk-btn').click(function () {
            postData('/profile/dsk/api', { type: 'unbind' }, function (response) {
                toastr.success('解绑大司空账号成功');
                setTimeout(function () {
                    location.reload();
                }, 1000);
            });
        });
    });
</script>