<!DOCTYPE html>
<html lang="en" xmlns:th="http://www.thymeleaf.org">
<head>
    <title>新增代理</title>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0,user-scalable=no">
    <meta http-equiv="X-UA-Compatible" content="IE=edge,chrome=1">
    <meta name="apple-mobile-web-app-capable" content="yes">
    <meta name="apple-mobile-web-app-status-bar-style" content="black">
    <meta name="apple-mobile-web-app-title" content="">
    <meta name="HandheldFriendly" content="true">
    <meta name="format-detection" content="telephone=no">
    <link rel="stylesheet" href="/wap/resources/css/weui.css">
    <link rel="stylesheet" href="/wap/resources/css/weuix.css">
    <style>
        body{
            background-color: #f7f7f7;
        }
        .main{
            color: #333;
            padding: 0 10px 20px 10px;
            background-color: #fff;
            margin: 0 10px;
            border-radius:5px;
        }
        .kaptcha{
            width: 80px;
            height: 32px;
        }
        /*.weui-cells_form{*/
        /*    height: 1.5rem;*/
        /*    line-height: normal;*/
        /*}*/
        .weui-toast weui_loading_toast weui-toast--visible{
            padding: 10px 0;
        }
        .weui-icon_toast{
            margin: 20px 0 0;
        }
        .weui-icon_toast.weui-loading{
            margin: 15px 0 0 0;
        }
        .weui-cells_form_btn{
            width: 80%;
            margin: 0.8rem auto 0 auto;
        }
        .weui-btn_plain-primary{
            box-sizing: border-box;
            border: 1px solid #FF586A;
            color: #FF586A;
        }
    </style>
</head>
<body>
<input type="hidden" id="token" name="token" th:value="${token}">
<input type="hidden" id="uid" name="uid" th:value="${uid}">
<div class="main">
    <div class="weui-cells weui-cells_form bdbe" style="margin-top:10px;">
        <div class="weui-cell weui-cell_warn">
            <div class="weui-cell__hd"><span class="icon icon-90 f24"></span></div>
            <div class="weui-cell__bd">
                <input class="weui-input tleft pl10" id="phone" type="number" pattern="[0-9]*" value="weui input error" th:autocomplete="off" placeholder="注册手机号">
            </div>
        </div>
    </div>
    <div class="weui-cells weui-cells_form bdbe">
        <div class="weui-cell weui-cell_warn">
            <div class="weui-cell__hd"><span class="icon icon-71 f24"></span></div>
            <div class="weui-cell__bd">
                <input class="weui-input tleft pl10" id="validateCode" type="text" maxlength="4" value="" placeholder="图形验证码">
            </div>
            <div class="weui-cell__bd tright">
                <img src="/wap/kaptcha/get"  onclick="refreshKaptcha(this)" th:autocomplete="off"  class="kaptcha dlblock white f12" />
            </div>
        </div>
    </div>

    <div class="weui-cells weui-cells_form bdbe">
        <div class="weui-cell weui-cell_warn">
            <div class="weui-cell__hd"><span class="icon icon-71 f24"></span></div>
            <div class="weui-cell__bd">
                <input class="weui-input tleft pl10" id="phoneverify" type="number" th:autocomplete="off" pattern="[0-9]*" value="weui input error" placeholder="验证码">
            </div>
            <div class="weui-cell__bd tright">
                <a  href="javascript:void(0);" onclick="verification()" id="obtain" th:autocomplete="off" class="weui-btn_primary radius5 pt10 pb10 pl10 pr10 dlblock white f12">获取验证码</a>
            </div>
        </div>
    </div>
    <div class="weui-cells weui-cells_form bdbe">
        <div class="weui-cell weui-cell_warn">
            <div class="weui-cell__hd"><span class="icon icon-31 f24"></span></div>
            <div class="weui-cell__bd">
                <input class="weui-input tleft pl10" type="password" id="password" th:autocomplete="off" maxlength="20" placeholder="6~20位登录密码">
            </div>
        </div>
    </div>
    <div class="weui-cells weui-cells_form bdbe">
        <div class="weui-cell weui-cell_warn">
            <div class="weui-cell__hd"><span class="icon icon-31 f24"></span></div>
            <div class="weui-cell__bd pl10">
                <input class="weui-input tleft" type="password" id="againPassword" th:autocomplete="off" maxlength="20" placeholder="确认登录密码"/>
            </div>
        </div>
    </div>
    <div class="weui-cells weui-cells_form">
        <div class="weui-cell weui-cell_warn">
            <div class="weui-cell__hd"><span class="icon icon-97 f24"></span></div>
            <div class="weui-cell__bd pl10">
                <input class="weui-input tleft" type="text" id="userNo" maxlength="50" th:autocomplete="off" onkeyup="value=value.replace(/[\u4e00-\u9fa5]/ig,'')" placeholder="用户编号(可选，例如:A1)"/>
            </div>
        </div>
    </div>
    <div class="weui-cells_form_btn">
        <a href="javascript:;" class="weui-btn weui-btn_plain-primary" onclick="submitSave()">提交</a>
    </div>
</div>
<script type="text/javascript" src="/wap/resources/js/jquery.min.js"></script>
<script type="text/javascript" src="/wap/resources/js/zepto.min.js"></script>
<script type="text/javascript" src="/wap/resources/js/zepto.weui.js"></script>
<script type="text/javascript" src="/wap/resources/js/common/h5.js"></script>
<script>
    function verification() {
        var phoneReg = /(^1[3|4|5|6|7|8|9]\d{9}$)|(^09\d{8}$)/;
        var phone=$.trim($("#phone").val());
        if (!phoneReg.test(phone)) {
            $.alert("请输入正确的手机号","系统提示");
            return;
        }
        var validateCode = $.trim($("#validateCode").val());
        if(!validateCode){
            $.alert("请输入图形验证码","系统提示");
            return;
        }
        var href = 'javascript:void(0); onclick=verification()';
        var _this = $("#obtain");
        _this.removeAttr("href");
        $.showLoading("获取中...");
        $.ajax({
            url:'/wap/vip/getPhoneCode',
            data:{
                "phone":phone,
                "validateCode" : validateCode
            },
            dataType:"json",
            type:"post",
            success:function(data){
                //成功
                $.hideLoading();
                if(data.code=='1'){
                    $.toast("短信验证码已发送至您的手机，请查收","text");
                    var sec = 60;
                    var timer = window.setInterval(function() {
                        sec--;
                        if (sec > 0) {
                            _this.text(sec + "秒重新发送!");
                        } else {
                            // 去掉定时器
                            window.clearInterval(timer);
                            _this.text("获取验证码");
                            _this.attr("href","javascript:void(0); onclick=verification()");
                        }
                    }, 1000);
                }else if(data.code=='0'){
                    $.alert("获取验证码失败，请稍后再试","系统提示");
                    _this.text("获取验证码");
                    _this.attr("href",href);
                }else if(data.code=='2'){
                    //系统错误
                    $.alert("系统繁忙！","系统提示");
                    _this.text("获取验证码");
                    _this.attr("href",href);
                }else if(data.code=='3'){
                    $.alert("手机号已被注册！","系统提示");
                    _this.text("获取验证码");
                    _this.attr("href",href);
                }else{
                    $.alert(data.msg,"系统提示");
                    _this.text("获取验证码");
                    _this.attr("href",href);
                }
            }
        })
    }
    function refreshKaptcha(obj){
        let url = $(obj).attr("src");
        let time = new Date().getTime();
        if(url.indexOf("?") > 0){
            url = url.split("?")[0]
        }
        $(obj).attr("src",url+"?t="+ time);
    }

    function submitSave(){
        let phone = $("#phone").val();
        // let validateCode = $("#validateCode").val();
        let phoneverify = $("#phoneverify").val();
        let password = $("#password").val();
        let againPassword = $("#againPassword").val();
        let userNo = $("#userNo").val();
        let uid = $("#uid").val();

        if (!phone) {
            $.alert("注册手机号不能为空！","系统提示");
            return;
        }

        if (!phoneverify) {
            $.alert("验证码不能为空！","系统提示");
            return;
        }

        if (!password || !againPassword) {
            $.alert("登录密码不能为空","系统提示");
            return;
        }

        if (password.length < 6 || password.length > 20) {
            $.alert("密码长度6到20位！","系统提示");
            return;
        }

        if(password != againPassword){
            $.alert("两次的密码必须相同！","系统提示");
            return;
        }
        $.showLoading("提交中...")
        $.ajax({
            url:'/wap/user/agent/save',
            data:{
                "phone":phone,
                "phoneverify":phoneverify,
                "password":password,
                "userNo":userNo,
                "userId":uid,
            },
            dataType:"json",
            type:"post",
            success:function(res){
                $.hideLoading();
                if(res.code == '200'){
                    window.location.href = "/wap/merchant/registerSuccess";
                }else{
                    $.alert(res.message,"系统提示");
                }
            },
            error:function(res){
                $.hideLoading();
                $.alert("系统繁忙,请稍后再试","系统提示");
            },
        })
    }
</script>
</body>
</html>