<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0, maximum-scale=1.0, user-scalable=0"/>
    <title>注册会员</title>
    <script src="https://cdn.bootcdn.net/ajax/libs/jquery/3.5.1/jquery.min.js"></script>
    <script src="/static/js/17738/jquery.cookie.js"></script>
    <link rel="stylesheet" href="/static/css/17738/main.css"/>
    <link href="https://cdn.bootcdn.net/ajax/libs/minireset.css/0.0.2/minireset.css" rel="stylesheet"/>
    <style>
        .register-submit:active {
            background: #d5d5d5;
        }
        .getCodeButton {
            width: 30%;
            height: 2.5rem;
            background: #57412F;
            margin-top: 1rem;
            color: #fff;
            font-size: 0.9rem;
            text-align: center;
            line-height: 1.25rem;
        }
        .getCodeButton:active {
            background: #d5d5d5;
        }
        .verifyCodeInput {
           height: 2.5rem;
           border: 1px solid #d5d5d5;
           padding-left: 1.85rem;
           width: 100%;
        }
        .register-input {
            margin-top: 1rem;
        }
        .show_placeholder:before {
            content: attr(placeholder);
        }

    </style>
    <script type="text/javascript">
        $(document).ready(function(){
            var yzm;
            {% if registered %}
                 //已注册，展示扫描公众号二维码页面
                {% ifnotequal from_official_account 'true' %}                
                    $('.container').hide();
                    $('.container-label').hide();
                    $('.container-alert').hide();
                    $('.container-2').show();
                {% endifnotequal %}
            {% endif %}

            document.querySelector('#success-ok-button').addEventListener('click', closeModal);
            function closeModal () {
                $('.popup-container').hide();
                $('.popup-mask').hide();
            }
            function sendCode() {
                if($('#input-phone').val().length != 11) {
                    alert('请输入正确的手机号');
                    return;
                }
                alert('验证码已发送,请留意手机短信');
                $('.getCodeButton').text("请稍等片刻");
                $('.getCodeButton').unbind();
                $.ajax({
                    method: 'POST',
                    data: {
                        phone: $('#input-phone').val(),
                        verifycode: '1'
                    },
                    success: function (res) {
                        console.log('res', res)
                        setTimeout(function() {
                            $('.getCodeButton').innerHTML("<p>获取</p><p>验证码</p>");
                            $('.getCodeButton').click(sendCode);
                        }, 30000)
                        if(res.msg == 'success') {
                            if(res.msg != 'no') {
                                yzm = res.yzm;
                            }else {
                              alert('发送失败，请稍后重试')
                            }
                        }else {
                            alert(res.reason);
                        }
                    }
                })
            }
            $('.getCodeButton').click(sendCode);
            //初始化生日
            //var birthday = document.querySelector('#input-birth');
            //var today = new Date();
            //birthday.value = '生日';

            $('#register-submit').click(function () {
                if(yzm == undefined) {
                    alert('尚未获取验证码');
                    return;
                }
                if($('#verify-code').val() != yzm) {
                    alert('请输入正确的验证码!');
                    return;
                }
                if($('#input-name').val().length > 0 && $('#input-phone').val().length > 0 &&
                   $('#input-birth').val().length > 0) {
                let info = {
                    name: $('#input-name').val(),
                    phone: $('#input-phone').val(),
                    birth: $('#input-birth').val(),
                    //openid: window.openid
                }
                $.ajax({
                    url: '',
                    //method: 'GET',
                    method: 'POST',
                    data: info,
                    success: function (res) {
                        if (res.data.e == 'ok') {
                            alert('OK');
                            finishRegister();
                        } else {
                            alert(res.data.e)
                        }
                    },
                    error: function (err) {
                        alert('请求发生了错误 - ',err);
                    }
                })
                }else {
                    if($('#input-name').val().length > 0) {
                        alert('姓名不得为空')
                    }else if($('#input-phone').val().length > 0) {
                        alert('电话不得为空')
                    }else if($('#input-birth').val().length > 0) {
                        alert('生日不得为空')
                    }

                }
            });
        $.ajaxSetup({data: {csrfmiddlewaretoken: '{{ csrf_token }}'}});
       });

    </script>

</head>
<body>
<div class="topbar">
    <div style="width: 50%;padding-top: 1rem;padding-left: 1rem;">
        <img src="/static/assets/17738/logo1.png"/>
    </div>
</div>
<div class="container">
    <div class="register-wrapper-outer">
        <div class="register-wrapper-mid">
            <div class="register-wrapper-inner">
                <div style="margin-top: -2rem;">
                    <div class="register-title">
                        注册会员
                    </div>
                    <div class="register-input-wrapper">
                        <input id="input-name" class="register-input"
                               maxlength="16" style="background-image: url(/static/assets/17738/userIcon.png);margin-bottom: 0;"
                               placeholder="用户名" type="text"/>
                        <div style="display: flex;width:100%;">
                            <input id="input-phone"
                                   class="register-input"
                                   oninput="javascript: if
                                       (this.value.length > this.maxLength)
                                       this.value = this.value.slice(0,
                                       this.maxLength);" maxlength="11"
                                   style="background-image: url(/static/assets/17738/phoneIcon.png);" placeholder="手机号"
                                   type="number"/>
                            <div class="getCodeButton"><p>获取</p><p>验证码</p></div>
                        </div>
                        <input id="verify-code" maxlength="4" class="verifyCodeInput" placeholder="请输入验证码"/>
                        <input id="input-birth"
                               style="background-image: url(/static/assets/17738/birthIcon.png);"
                               class="register-input"
                               placeholder="生日"
                               type="date"
                        />
                    </div>
                    <div>
                        <div class="register-submit" id="register-submit">立即注册</div>
                    </div>
                </div>
            </div>
        </div>
    </div>
</div>
<div class="container-2">
    <div class="follow-container">
        <div class="follow-wrapper">
            <img src="/static/assets/17738/qrcode.jpg" width="60%" style="margin-top:30%;"/>
            <div style="letter-spacing: 3px;margin-top: 0.5rem;">
                长按关注婷曼逸公众号鉴别真伪
            </div>
        </div>
    </div>
</div>
<div class="container-label">
    <div class="identify-outer">
        <div class="identify-mid">
            <div style="width: 100%; height: 210px;display: flex;justify-content: center;margin-top:1rem;">
                <div style="width: 240px;height: 210px;border: 1px solid #fff;">
                    <img id="label_image" src="" width="230px" height="200px"/>
                </div>
            </div>
            <div class="identify-inner">
                <div style="text-align: justify; color: red;">
                    请用手触摸实物标签上的结构三维码和字母防伪特征是否有凹感，并认真核对是否与上图信息一致，相符则为真品，否则谨防假冒！
               </div>
                <div style="width: 100%;margin-top: 1rem;">
                    <div class="info">产品名称: <span class="red" id="label_name"></span></div>
                    <div class="info">单位名称: <span class="red" id="label_company"></span></div>
                    <div class="info firstQueryHide">首查时间: <span class="red" id="label_firstQuery"></span></div>
                    <div class="info firstQueryHide">已查次数: <span class="red" id="label_times"></span></div>
                </div>
            </div>
        </div>
    </div>
</div>
<div class="container-alert">
    <div class="identify-outer">
        <div class="identify-mid" style="display: flex; justify-content: center;align-items: center;">
            <div class="identify-inner-2">
                <img src="/static/assets/17738/logo2.png" width="70%" style="margin-top: 30%;"/>
                <div style="display: flex;justify-content: center;margin-top:1rem;">
                    <div style="color:#FA8A0B;text-align: center;font-size: 1.5rem;width: 100%;letter-spacing: 1px;">
                        此标超过限查次数<br/>谨防假冒!
                    </div>
                </div>
            </div>
        </div>
    </div>
</div>
<div class="popup-mask"></div>
<div class="popup-container">
    <div style="text-align: center;">
        <img src="/static/assets/17738/success.png" style="width: 60%;margin-top: 10%;"/>
        <div class="success-text">
            注册成功!
        </div>
        <div class="success-ok-row">
            <div id="success-ok-button">
                确定
            </div>
        </div>
    </div>
</div>
<script src="/static/js/17738/main.js"></script>
<script>


function openModal () {
    $('.popup-container').show();
    $('.popup-mask').show();
}
function finishRegister() {
    openModal();
    $('.container').hide();

    {% ifequal from_offcial_account 'true' %}
        show_label_info_page();
        refreshData("{{label_code}}");
        showForgeAlert();
    {% else %}
       $('.container-2').show();
    {% endifequal %}
}
function registered() {
    $('.container').hide();
    $('.container-2').show();
}

function getUrlParam(name) {
    var reg = new RegExp("(^|&)" + name + "=([^&]*)(&|$)");
    var r = window.location.search.substr(1).match(reg);
    if (r != null) return unescape(r[2]); return null;
}

    function registerSubmit() {
        if($('#input-name').val())
        if($('#input-name').val().length > 0 && $('#input-phone').val().length > 0 &&
            $('#input-birth').val().length > 0) {
            let info = {
                name: $('#input-name').val(),
                phone: $('#input-phone').val(),
                birth: $('#input-birth').val(),
                //openid: window.openid
            }
            $.ajax({
                url: '',
                method:'POST',
                data: info,
                success: function (res) {
                    if(res.data.e == 'ok') {
                        finishRegister();
                        // if
                    }else {
                        alert("未成功注册!")
                    }
                },
                error: function() {
                    alert('请检查网络连接')
                }
            })
        }

    }

    function refreshData(label){
        $.ajax({
            url: '/wx/ajax/image/17738/',
            data: {
                fwcode: label,
                record: 1,
                history: 1,
                uid:'{{consumer_id}}'
            },
            success: function(data) {
                $('#label_name').text("婷曼逸身材管理产品");
                $('#label_company').text("云南婷曼逸商贸有限公司");
                $('#label_firstQuery').text(data.tm_1st);
                $('#label_times').text(data.cnt);
                $('#label_image').attr('src',data.img);
                showForgeAlert();
                firstTimeQuery();
            }
        });

        };
        function showForgeAlert() {
            if($('#label_times').text() > 0) {
                $('.container').hide();
                $('.container-label').hide();
                $('.container-alert').show();
            }
        }
        function show_label_info_page() {
            $('.container').hide();
            $('.container-2').hide();
            $('.container-label').show();
            $('.container-alert').hide();
        }
        function firstTimeQuery() {
            if($('#label_times').text() == 0) {
                $('.firstQueryHide').hide();
            }
        }

</script>
</body>
</html>
