<!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;
        }
        .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);
        }
        .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: 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;
        }
    </style>
</head>
<body>
    <div class="topbar">
        <div style="width: 20%;padding-top: 2%;padding-left: 3%;">
            <img src="/static/assets/17738/logo2.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 style="text-align: center;">
                    <img src="/static/assets/17738/logo2.png" width="70%" style="margin-top: 30%;"/>
                </div>
                <div style="display: flex;justify-content:center;width:100%;">
                    <div class="scan-button">
                         扫一扫标签
                    </div>
                </div>

            </div>
        </div>
    </div>
    <div class="container-2">
        <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="label_info" id="label_name"></span></div>
                        <div class="info">单位名称: <span class="label_info" id="label_company"></span></div>
                        <div class="info">您是此产品的第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>
            </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/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>

<script>
    (function() {
        wxConfig();
    })();
       wx.ready(function() {
           $('.scan-button').click(function() {
               wx.scanQRCode({
                   needResult: 1,                    //1返回扫描结果, 0则微信跳转
                   scanType: ["qrCode"],
                   success: function(res){
                       var result = res.resultStr;
                       if(result.indexOf('http://tj1.me/?t=') == -1){
                            alert('您扫描的不是婷曼逸系列产品防伪标签');
                            return;
                       }
                       var label_code = result.slice(result.indexOf("?t=") + 3);
                       if(result.indexOf('9048') == -1){
                            alert('您扫描的不是婷曼逸系列产品防伪标签');
                            return;
                       }
                       
                       {% if registered %}
                          $('.container-2').show();
                          refreshData(label_code);
                          showForgeAlert();
                       {% else %}
                          //var consumer_id = "{{consumer_id}}";
                          //var openid = "{{openid}}";

                          //window.location.href = `https://davis.china315net.com/wx/process/label/scan/17738/?label_code={label_code}&consumer_id={consumer_id}&openid={openid}&from_offcial_account=true`;
                          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 %}
                   }
               })
           })
       })
    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($('#label_times').text() > 0) {
            $('.container').hide();
            $('.container-2').hide();
            $('.container-3').show();
        }
    }
    /*
    function showRegisterNotice() {
        $('.container').hide();
        $('.container-3').show();
    }
    */
</script>
</body>

</html>
