<!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="/static/js/jquery-3.6.0.min.js"></script>
    <script src="/static/js/17738/jquery.cookie.js"></script>
    <link rel="stylesheet" href="/static/css/17738/main.css"/>
    <script src="/static/js/jquery-ui.min.js"></script>
    <link rel="stylesheet" href="/static/js/jquery-ui.min.css"/>

    <style>
        html,body,p,ol,ul,li,dl,dt,dd,blockquote,figure,fieldset,legend,textarea,pre,iframe,hr,h1,h2,h3,h4,h5,h6{margin:0;padding:0}h1,h2,h3,h4,h5,h6{font-size:100%;font-weight:400}ul{list-style:none}button,input,select,textarea{margin:0}html{box-sizing:border-box}*{box-sizing:inherit}*:before,*:after{box-sizing:inherit}img,embed,object,audio,video{height:auto;max-width:100%}iframe{border:0}table{border-collapse:collapse;border-spacing:0}td,th{padding:0;text-align:left}
        .register-submit:active {
            background: #d5d5d5;
        }
        .getCodeButton {
            width: 30%;
            height: 2.5rem;
            background: #57412F;
            margin-top: 1rem;
            color: #fff;
            font-size: 0.75rem;
            text-align: center;
            line-height: 2.5rem;
        }
        .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(){

            $.datepicker.regional['zh-CN'] = {
                closeText: '关闭',
                prevText: '<上月',
                nextText: '下月>',
                currentText: '今天',
                monthNames: ['一月', '二月', '三月', '四月', '五月', '六月',
                    '七月', '八月', '九月', '十月', '十一月', '十二月'],
                monthNamesShort: ['一', '二', '三', '四', '五', '六',
                    '七', '八', '九', '十', '十一', '十二'],
                dayNames: ['星期日', '星期一', '星期二', '星期三', '星期四', '星期五', '星期六'],
                dayNamesShort: ['周日', '周一', '周二', '周三', '周四', '周五', '周六'],
                dayNamesMin: ['日', '一', '二', '三', '四', '五', '六'],
                weekHeader: '周',
                dateFormat: 'yy-mm-dd',
                firstDay: 1,
                isRTL: false,
                showMonthAfterYear: true,
                yearSuffix: '年'
            };
            $.datepicker.setDefaults($.datepicker.regional['zh-CN']);

            $('#input-birth').datepicker({
                dateFormat: 'yy-mm-dd',
                maxDate: -1,
                changeMonth: 'true',
                changeYear: 'true',
                yearRange: 'c-60:c+60'
            })
            var yzm;
            var countDown = 0;
            {% if registered %}
                 //已注册，展示扫描公众号二维码页面
                {% ifnotequal from_official_account 'true' %}                
                    $('.container').hide();
                    $('.container-label').hide();
                    $('.container-alert').hide();
                    $('.container-2').show();
                    document.title = "关注公众号"
                {% endifnotequal %}
            {% endif %}

            document.querySelector('#success-ok-button').addEventListener('click', closeModal);
            function closeModal () {
                $('.popup-container').hide();
                $('.popup-mask').hide();
            }
            function setTime() {
                setTimeout(function () {
                    if (countDown > 0) {
                        countDown -= 1;
                        document.getElementsByClassName('getCodeButton')[0].innerHTML(countDown + "秒后再试");
                        setTime();
                    } else {
                        document.getElementsByClassName('getCodeButton')[0].innerHTML("获取验证码");
                        $('.getCodeButton').click(sendCode);
                    }
                }, 1000);
            }
            function sendCode() {
                if($('#input-phone').val().length != 11) {
                    alert('请输入正确的手机号');
                    return;
                }
                alert('验证码已发送,请留意手机短信');
                $('.getCodeButton').html("已发送");
                $('.getCodeButton').unbind();
                $.ajax({
                    method: 'POST',
                    data: {
                        phone: $('#input-phone').val(),
                        verifycode: '1'
                    },
                    success: function (res) {
                        console.log('res', res)
                        
                        setTimeout(function() {
                            $('.getCodeButton').html("获取验证码");
                            $('.getCodeButton').click(sendCode);
                        }, 30000)
                        if(res.msg == 'success') {
                            if(res.msg != 'no') {
                                yzm = res.yzm;
                            }else {
                              alert('发送失败，请稍后重试')
                            }
                        }else {
                            alert(res.e);
                        }
                    }
                })
            }

            $('.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') {
                                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: 20%;padding-top: 2%;padding-left: 3%;">
        <img src="/static/assets/17738/tmy_logo.png"/>
    </div>
    <div style="width:80%;height: 4rem;line-height: 4rem;text-align: center;color: #53392B;text-shadow: 0px 0px 1px #53392B;">
        <p>让中国3亿女性塑曼妙身姿 做幸福女人</p>
    </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);width: 70%;" placeholder="手机号"
                                   type="number"/>
                            <div class="getCodeButton">获取验证码</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="text"
                               onfocus="this.blur()"
                        />
                    </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/qrcode1.jpg" width="60%" style="margin-top:30%;"/>
            <div style="letter-spacing: 3px;margin-top: 0.5rem;">
                <p>长按关注婷曼逸公众号</p>
                <p>真伪鉴别处扫码验证</p>
            </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;
                            display:flex;justify-content: center;align-items: center;">
                    <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">您是此产品的第1次扫码验证者！</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.3rem;width: 100%;letter-spacing: 1px;padding:4%;">
                        该产品已被验证！<br/><span style="font-size:1.2rem;">请注意：若您不是此产品的第1次扫码验证者，谨防假冒!</span>
                    </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();
    document.title = "关注公众号";
    {% ifequal from_official_account 'true' %}
        show_label_info_page();
        refreshData("{{label_code}}");
        showForgeAlert();
    {% else %}
       $('.container-2').show();
       document.title = "关注公众号";
    {% endifequal %}
}
function registered() {
    $('.container').hide();
    $('.container-2').show();
    document.title = "关注公众号";
}

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/',
            data: {
                fwcode: label,
                record: 1,
                history: 1
            },
            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();
            }
            document.title = "谨防假冒";
        }
        function show_label_info_page() {
            $('.container').hide();
            $('.container-2').hide();
            $('.container-label').show();
            $('.container-alert').hide();
            document.title = "标签信息";
        }
        function firstTimeQuery() {
            if($('#label_times').text() == 0) {
                $('.firstQueryHide').hide();
            }
        }

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