#{include file="../Common/Header.html"}
<div class="uc-main">
    <div class="uc-card">
        <div class="uc-card__body">
            #{include file="../Common/SecurityNav.html"}
            <form class="layui-form form-data">
                <div class="form-block">
                    <div>
                        <div class="form-header">#{t("当前手机")}</div>
                        <div class="form-body"><input type="text" value="#{$user.phone}" autocomplete="off" class="layui-input" placeholder="#{t('未绑定')}" disabled></div>
                    </div>
                    <div>
                        <div class="form-header">#{t("新手机")}</div>
                        <div class="form-body"><input type="text" name="phone" autocomplete="off" class="layui-input" placeholder="#{t('请输入新手机号')}"></div>
                    </div>
                    <div>
                        <div class="form-header">#{t("验证码")}</div>
                        <div class="form-body">
                            <div class="uc-captcha-row">
                                <input type="text" name="phone_captcha" autocomplete="off" class="layui-input" placeholder="#{t('请输入验证码')}">
                                <button type="button" class="uc-cta uc-cta--ghost send-captcha"><span class="material-icons-outlined">send</span>#{t("获取验证码")}</button>
                            </div>
                        </div>
                    </div>
                    <div style="margin-top:24px;">
                        <button type="button" class="uc-cta save-data"><span class="material-icons-outlined">save</span>#{t("保存修改")}</button>
                    </div>
                </div>
            </form>
        </div>
    </div>
</div>

#{ready("/assets/user/controller/security/phone.js")}
#{include file="../Common/Footer.html"}