<%@ page language="java" contentType="text/html; charset=UTF-8" pageEncoding="UTF-8" %>
    <%@ taglib uri="http://java.sun.com/jsp/jstl/core" prefix="c" %>
        <!DOCTYPE html>
        <html>
        <jsp:include page="../../common.jsp" />

        <head>
            <meta http-equiv="Content-Type" content="text/html; charset=utf-8" />
            <meta name="viewport" content="width=device-width, initial-scale=1.0, maximum-scale=1.0">
            <title>分享</title>
            <style>
                div,
                body,
                p,
                span,
                h1,
                h2,
                h3,
                h4 {
                    color: #333
                }

                input::-webkit-input-placeholder {
                    font-family: Avenir, Helvetica, Arial, sans-serif;
                    /* placeholder颜色  */
                    color: rgb(118, 118, 118);
                    /*color: #aab2bd;*/
                    /* placeholder字体大小  */
                    font-size: 18px;
                    /* placeholder位置  */
                }

                input {
                    border: none;
                    border-bottom: 1px solid #000
                }

                .mr40 {
                    margin-top: 40px;
                }

                .bg-logo {
                    height: 8rem;
                    width: 100%;
                    background-repeat: no-repeat;
                    background-size: contain;
                    background-position: center 0;
                    background-image: url('${resourcePath}/images/bg_logo.png');
                }

                .kaptcha {
                    width: 80px;
                    height: 32px;
                }

                .weui-cells {
                    height: 60px;
                }
            </style>
        </head>

        <body>
            <div class="bg-logo">
            </div>
            <!-- <div class="page-title tcenter h40 bluebg white">
            <span>分享</span>
            <a href="个人中心.html" class="white f21 h40 left0 top0 positiona">
                <span class="dblock w40 h40 icon icon-59 white f22"></span>
            </a>
        </div>-->
            <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" 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="${ctx}/kaptcha/get" onclick="refreshKaptcha(this)"
                            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" pattern="[0-9]*"
                            value="weui input error" placeholder="请输入验证码">
                    </div>
                    <div class="weui-cell__bd tright">
                        <a href="javascript:void(0);onclick=verification()" id="obtain"
                            class="radius5 pt10 pb10 pl10 pr10 dlblock white f12"
                            style="background-color: #2F87FD;">获取验证码</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" maxlength="16"
                            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" maxlength="16"
                            placeholder="请再次输入登录密码" />
                    </div>
                </div>
                <input type="hidden" id="inviteNum" value="${inviteNum }">
            </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-123 f24"></span></div>
                    <div class="weui-cell__bd pl10">
                        <input class="weui-input tleft" type="text" readonly value="推荐人:${userName}${enPhone }" />
                    </div>
                </div>
            </div>
            <div class="btn ml20 mr20 mr40">
                <!-- <a href="javascript:void(0);" class="weui-btn weui-btn_primary radius10 f14 pt15 pb15">推荐人:${userName}${enPhone}</a -->
                <a href="javascript:void(0);" onclick="goreGister()" class="weui-btn radius10 f14 pt15 pb15"
                    style="background-color: #2F87FD;">注册</a>
                <a href="https://a.app.qq.com/o/simple.jsp?pkgname=uni.UNIFE6FEBF" id="btnOpenApp" class="weui-btn radius10 f14 pt15 pb15"
                    style="background-color: #2F87FD;">已有账号，下载登录</a>
            </div>
        </body>
        <%--<script src="https://static.jmlk.co/scripts/dist/jmlink.min.js"></script>--%>
            <script type="text/javascript">
            /*    new JMLink({
                    jmlink: 'https://a.app.qq.com/o/simple.jsp?pkgname=uni.UNIFE6FEBF',
                    button: document.querySelector('a#btnOpenApp'),
                    autoLaunchApp: false,
                    downloadWhenUniversalLinkFailed: true,
                    inapp: false,
                    params: {}
                });*/
                function goreGister() {
                    var phone = $("#phone").val();
                    var phoneverify = $("#phoneverify").val();
                    var password = $("#password").val();
                    var againPassword = $("#againPassword").val();
                    var inviteNum = $("#inviteNum").val();
                    var phoneReg = /(^1[3|4|5|6|7|8|9]\d{9}$)|(^09\d{8}$)/;
                    // var psdReg = /^(?=.*[a-z|A-Z]).{6,20}$/;
                    if (!phoneReg.test(phone)) {
                        $.alert("请输入正确的手机号", "系统提示");
                        return;
                    }

                    if (!password || !againPassword) {
                        $.alert("请输入登录密码", "系统提示");
                        return;
                    }

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

                    if (password != againPassword) {
                        $.alert("两次的密码必须相同！", "系统提示");
                        return;
                    }
                    $.showLoading("提交中...")
                    $.ajax({
                        url: ctx + '/merchant/goRegister',
                        data: {
                            "inviteNum": inviteNum,
                            "phoneverify": phoneverify,
                            "phone": phone,
                            "password": password,
                        },
                        dataType: "json",
                        type: "post",
                        success: function (res) {
                            $.hideLoading();
                            if (res.code == '200') {
                                window.location.href = ctx + "/merchant/registerSuccess";
                            } else {
                                $.alert(res.message, "系统提示");
                            }
                        },
                        error: function (res) {
                            $.hideLoading();
                            $.alert("系统繁忙,请稍后再试", "系统提示");
                        },
                    })
                }
                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: ctx + '/vip/getPhoneCode',
                        data: {
                            "phone": phone,
                            "validateCode": validateCode
                        },
                        dataType: "json",
                        type: "post",
                        success: function (data) {
                            //成功
                            $.hideLoading();
                            if (data.code == '1') {
                                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);
                }
            </script>

        </html>