<!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" />-->
    <script src="https://res.wx.qq.com/open/js/jweixin-1.6.0.js"></script>
    <link href="https://cdn.bootcdn.net/ajax/libs/minireset.css/0.0.2/minireset.css" rel="stylesheet" />
    <style>
        .container {
            padding: 3%;
            height: 90%;
            width: 100%;
            position: absolute;
            top: 10%;
            left: 0;
            /* display: none; */
        }

        .container-2 {
            padding: 3%;
            height: 90%;
            width: 100%;
            display: none;
            position: absolute;
            top: 10%;
            left: 0;
        }

        .container-3 {
            padding: 3%;
            height: 90%;
            width: 100%;
            display: none;
            position: absolute;
            top: 10%;
            left: 0;
        }

        .container-4 {
            padding: 3%;
            height: 90%;
            width: 100%;
            display: none;
            position: absolute;
            top: 10%;
            left: 0;
        }
        .notVerifyNotice {
            position: fixed;
            top: 50%;
            left: 50%;
            width: 70vw;
            /* height: 25vh; */
            margin-left: -35vw;
            margin-top: -6vh;
            z-index: 99;
            background: #444444;
            padding: 3rem 0.7rem;
            border-radius: 10px;
            color: #ffffff;
            display: flex;
            flex-direction: column;
            font-weight: bold;
            justify-content: space-between;
            display: none;
        }
        .notVerifyNotice-close {
            background: #d17736;
            color: #fff;
            border-radius: 14px;
            padding: 0.5rem 3rem;
            margin-top: 1.5rem;
        }
        .identify-outer {
            height: 100%;
            padding: 2%;
            border: 1px dotted #d5d5d5;
        }

        .identify-mid {
            height: 100%;
            /*border: 1px dotted #d5d5d5;*/
            padding: 1% 1%;
            background-image: linear-gradient(to right, #BCBAC0, #C8C9CE);
            display: flex;
            justify-content: center;
            align-items: center;
        }

        .identify-inner {
            width: 100%;
            padding: 10% 8%;
            text-align: center;
            font-size: 0.95rem;
            letter-spacing: 1px;
        }

        .identify-inner-2 {
            height: 90%;
            width: 90%;
            box-shadow: inset 3px 0px 0px #d5d5d5;
            background: #fff;
            text-align: center;
        }

        .scan-button {
            text-align: center;
            margin-top: 2rem;
            font-size: 1.3rem;
            background: #534233;
            color: #fff;
            width: 10em;
            padding: 0.5rem 0.3rem;
        }
        .ai-button {
            text-align: center;
            margin-top: 2rem;
            font-size: 1.3rem;
            background: #534233;
            color: #fff;
            width: 60%;
            padding: 0.5rem 0.3rem;
        }
        .scan-button:active {
            background: #d5d5d5;
        }

        .label_info {
            margin-left: 0.5em;
        }

        .info {
            text-align: left;
            margin-top: 0.25rem;
        }

        .topbar {
            height: 4rem;
            border-bottom: 1px solid #d5d5d5;
            box-shadow: 0px 1px 1px #d5d5d5;
            display: flex;
            overflow: hidden;
        }

        #large_logo_wrapper {
            font-size: 1.1rem;
            font-weight: bold;
            margin-top: 65%;
        }

        .verifyInput::placeholder {
            text-align: center;
            font-size: 0.8rem;
        }

        .verifyInput {
            border-radius: 20px;
            padding: 0.8rem 1rem;
            text-align: center;
            width: 70vw;
            border: none;
        }

        .verifyInputConfirm {
            border-radius: 20px;
            background: #534233;
            color: #ffffff;
            padding: 0.8rem 0.5rem;
            margin-top: 2rem;
        }
        .ai_verify_pass_text{
            background: #534233;
            margin:1rem;
            padding: 1rem;
            color: #ffffff;
        }
    </style>
</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="identify-outer">
            <div class="identify-mid">
                <div>
                    <div style="width:100%;display: flex;justify-content: center;align-items:center;">
                        <div class="scan-button">
                            扫一扫识别真伪
                        </div>
                    </div>
<!--                    <div style="width:100%;display: flex;justify-content: center;align-items:center;">-->
<!--                        <div class="ai_verify_pass_text" style="display:none;">-->
<!--                            您所验证的是云南婷曼逸商贸有限公司的-->
<!--                            <span style="font-size:1.1em;">正牌产品标识</span>-->
<!--                            ！请放心使用！-->
<!--                        </div>-->
<!--                    </div>-->
                </div>

            </div>
        </div>
    </div>
    <div class="container-2">
        <div class="identify-outer">
            <div class="identify-mid">
                <div>
                    <div style="width: 100%; height: 210px;display: flex;justify-content: center;margin-top:0.5rem;">
                        <div style="width: 210px;height: 210px;
                                display:flex;justify-content: center;align-items: center;">
                            <img id="label_image" src="" width="200px" height="200px" />
                        </div>
                    </div>
                    <div class="identify-inner" style="padding: 5% 8%;">
                        <div style="text-align: justify; color: red;">
                            请用手触摸实物标签上的结构三维码和字母防伪特征是否有凹感，并认真核对是否与上图信息一致，相符则为正品，否则谨防假冒！
                        </div>
                        <div style="width: 100%;margin-top: 1rem;">
                            <div class="info">产品名称: <span class="label_info" id="label_name"></span></div>
                            <div class="info">单位名称: <span class="label_info" id="label_company"></span></div>
                            <div class="info" style="text-align:center;">您是此产品的第1次扫码验证者！</div>
                            <div class="info firstQueryHide">首查时间: <span class="label_info" id="label_firstQuery"></span>
                            </div>
                            <div class="info firstQueryHide">已查次数: <span class="label_info" id="label_times"></span></div>
                        </div>
                        <div style="display:flex;justify-content: center;">
                            <div id="ai_verify_2" class="ai-button" style="margin-top: 1rem;">AI 验证</div>
                        </div>
                        <div style="font-size:0.8rem;width:100%;display: flex;justify-content: center;align-items:center;">
                            <div class="ai_verify_pass_text" style="display:none;">
                                您所验证的是云南婷曼逸商贸有限公司的
                                <span style="font-size:1.1em;">正牌产品标识</span>
                                ！请放心使用！
                            </div>
                        </div>

                    </div>
                </div>

            </div>
        </div>
    </div>
    <div class="container-3">
        <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/tmy_logo.png" width="70%" style="margin-top: 5%;" />
                    <div style="display: flex;justify-content: center;margin-top:1rem;">
                        <div>
                            <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 style="display:flex;justify-content: center;">
                                <div id="ai_verify" class="ai-button" style="margin-top: 1rem;">AI 验证</div>
                            </div>
                            <div style="font-size:0.8rem;width:100%;display: flex;justify-content: center;align-items:center;">
                                <div class="ai_verify_pass_text" style="display:none;">
                                    您所验证的是云南婷曼逸商贸有限公司的
                                    <span style="font-size:1.1em;">正牌产品标识</span>
                                    ！请放心使用！
                                </div>
                            </div>
                        </div>

                    </div>
                </div>
            </div>
        </div>
    </div>
    <div class="container-4">
        <div class="identify-outer">
            <div class="identify-mid" style="display: flex; justify-content: center;align-items: center;">
                <div class="identify-inner">
                    <div style="display: flex;justify-content: center;margin-top:1rem;">
                        <div>
                            <input placeholder="刮开标签上的涂层输入6位验证码" class="verifyInput" id="vcode-input" />
                            <div  class="verifyInputConfirm" id="verifyInputConfirm">
                                确定
                            </div>
                        </div>
                        <div class="notVerifyNotice">
                            <div style="text-align:center;">
                                <div>
                                    您输入的验证码有误
                                </div>
                                <div>
                                    请重新输入!
                                </div>
                            </div>
                            <div class="notVerifyNotice-close">
                                确定
                            </div>
                        </div>
                    </div>
                </div>
            </div>
        </div>
    </div>

    <script>
        var vcodeMatched = false;
        var label_code;
        (function () {
            wxConfig();
            $('#verifyInputConfirm').click(function() {
                if($('#vcode-input').val() != '') {
                    matchVerifyCode();
                }
            })
            $('.notVerifyNotice-close').click(function() {
                $('.notVerifyNotice').hide();
            })
            $('#test').click(function() {
                label_code = "904900319055";
                $('.container-4').show();
            })
            $('#ai_verify').click(function() {
                window.location.href = "https://tjfnew.china315net.com/tjswm/ai/route/route.ashx?compid=36340&cpid=" + label_code;
            });
            $('#ai_verify_2').click(function() {
                window.location.href = "https://tjfnew.china315net.com/tjswm/ai/route/route.ashx?compid=36340&cpid=" + label_code;
            });
            if(location.search.length > 0) {
                console.log('>0')
                if(location.search.substring(1).split('&').indexOf("access=1") >= 0) {
                    $('.ai_verify_pass_text').show();
                    $('.ai-button').hide();
                }else {
                    $('.ai_verify_pass_text').hide();
                }
            }
        })();


        function labelcodeProcess(resultString) {
            // var result = res.resultStr;
            var result = resultString;

            if (result.indexOf('http://tj1.me/?t=') == -1) {
                $('.topbar').hide();
                $('.container').css('top', '0');
                $('#large_logo_wrapper').text("您扫描的不是婷曼逸系列产品防伪标签");
                return;
            }
            label_code = result.slice(result.indexOf("?t=") + 3);
            if (result.indexOf('9048') == -1 && result.indexOf('9049') == -1 &&
            result.indexOf('6680') == -1) {
                $('.topbar').hide();
                $('.container').css('top', '0');
                $('#large_logo_wrapper').text("您扫描的不是婷曼逸系列产品防伪标签");
                return;
            }
            $('.topbar').show();
            $('.container').css('top', '10%');
            $('#large_logo_wrapper').css("margin-top", "60%");
            $('#large_logo_wrapper').text("");

            {% if registered %}
            //应到输入验证码页面
            if (result.indexOf('9049') >= 0 || result.indexOf('6680') >= 0) {
                //新标，输入验证码页面
                $('.container-4').show(); //验证中页面
            } else {
                $('.container-2').show();  //标签图片页面
                refreshData(label_code);
            }
            {% else %}
            window.location.href = 'https://davis.china315net.com/wx/process/label/scan/17738/?label_code=' + label_code + '&consumer_id={{consumer_id}}&openid={{openid}}&from_official_account=true';
            {% endif %}
        }


        var paramsList = location.search.substring(1).split('&');
        var params = {};
        paramsList.forEach((v, i) => {
            var k = v.split('=')[0];
            let val = v.split('=')[1];
            params[k] = val;
        });

        var cpid = params["cpid"];
        console.log('params:', params);
        if(cpid) {
            console.log('cpid existed');
            labelcodeProcess("http://tj1.me/?t=" + cpid);
        }

        wx.ready(function () {
            // location.search.substring(1).split('&').indexOf("cpid") >= 0
            $('.scan-button').click(function () {
                wx.scanQRCode({
                    needResult: 1,                    //1返回扫描结果, 0则微信跳转
                    scanType: ["qrCode"],
                    success: function (res) {
                        var resultString = res.resultStr;
                        labelcodeProcess(resultString);
                    }
               })
           })
       })

        function matchVerifyCode() {
            $.ajax({
                url: 'https://davis.china315net.com/wx/ajax/matchvcode',
                method: 'GET',
                data: {
                    'labelcode': label_code,
                    'vcode': $('#vcode-input').val()
                },
                success: function (res) {
                    if(res.e == '') {
                        if(res.status == '1') {
                           vcodeMatched = true;
                           refreshData(label_code);
                           $('.container-4').hide();
                           $('.container-2').show();
                        }else {
                            vcodeMatched = false;
                            $('.notVerifyNotice').show();
                        }
                    }else {
                        alert('网络请求发生错误');
                    }
                },
                fail: function(err) {
                    alert(err);
                }
            })
        }
        function wxConfig() {
            $.ajax({
                url: 'https://davis.china315net.com/wx/ajax/js/sign/3/',
                method: 'GET',
                data: { url: window.location.href },
                success: function (res) {

                    wx.config({
                        debug: false,
                        appId: res.appid,
                        timestamp: res.timestamp,
                        nonceStr: res.noncestr,
                        signature: res.signature,
                        jsApiList: ['scanQRCode']
                    });
                }
            });
        }
        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 refreshData(label) {
            {% if registered %}
                $.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();
                    }
                });
            {% else %}
                alert("数据丢失，请刷新重试");
            {% endif %}

        };
        function firstTimeQuery() {
            if ($('#label_times').text() == 0) {
                $('.firstQueryHide').hide();
            }
        }
        function showForgeAlert() {
            if(location.search.substring(1).split('&').indexOf("access=1") >= 0) {
                if ($('#label_times').text() > 1) {
                    $('.container').hide();
                    $('.container-2').hide();
                    $('.container-3').show();
                }else {
                    $('.container').hide();
                    $('.container-2').show();
                    $('.container-3').hide();
                }
            }else {
                if ($('#label_times').text() > 0) {
                    $('.container').hide();
                    $('.container-2').hide();
                    $('.container-3').show();
                }
            }

        }


        /*
        function showRegisterNotice() {
            $('.container').hide();
            $('.container-3').show();
        }
        */
    </script>
</body>

</html>
