<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="utf-8">
    <meta http-equiv="X-UA-Compatible" content="IE=edge">
    <meta name="viewport" content="width=device-width,initial-scale=1.0,user-scalable=no">
    <title>内参酒防伪查询</title>
    <script src="https://cdn.bootcdn.net/ajax/libs/jquery/3.5.1/jquery.min.js"></script>
    <link href="https://cdn.bootcdn.net/ajax/libs/minireset.css/0.0.2/minireset.min.css" rel="stylesheet">
    <script src="https://cdn.bootcdn.net/ajax/libs/vue/2.6.9/vue.min.js"></script>
    <script type="text/javascript" src="https://res.wx.qq.com/open/js/jweixin-1.2.0.js"></script>
    <script>
        
    </script>

    <style>
        html,body {
            width: 100%;
            height: 100%;
        }
        #con {
            width: 100%;
            height: 100%;
        }
        .header {
            padding: 1rem;
        }
        .header-logo {
            width: 50%;
        }
        .home {
            background-image: url("/media/1644/bg1.png");
            width: 100%;
            height: 100%;
        }
        .fwmInput {
            background-image: url("/media/1644/bg1.png");
            width: 100%;
            height:100%;
        }
        .article {
            text-align: center;
            margin-top: 2rem;
        }
        .btn-wrapper {
            display: flex;
            justify-content: space-evenly;
            margin-top: 1.5rem;
        }
        .fwm-btn {
            background: url("/media/1644/btn1.png") no-repeat;
            width: 147px;
            height: 48px;
            line-height: 48px;
            color: #ffffff;
            text-align: center;
            transform: scale(0.8);
        }
        .fwm-btn:active {
            filter: brightness(0.8);
        }
        .qr-btn {
            background: url("/media/1644/btn2.png") no-repeat;
            width: 147px;
            height: 48px;
            line-height: 48px;
            color: #ffffff;
            text-align: center;
            transform: scale(0.8);
        }
        .qr-btn:active {
            filter: brightness(0.8);
        }
        .title-logo-wrapper {
            text-align: center;
            margin-top: 2rem;
        }
        .title-logo {
            width: 50%;
        }
        .query-input {
            width: 62%;
            height: 2rem;
            line-height: 2rem;
            text-align: center;
            border: 1px solid #d5d5d5;
            border-radius: 7px;
        }
        .submit-btn {
            background: url("/media/1644/btn2.png") no-repeat;
            width: 147px;
            height: 48px;
            line-height: 48px;
            color: #ffffff;
            text-align: center;
            transform: scale(0.8);
        }
        .moreDetail {
            text-align: center;
            margin-top: 1.5rem;
            font-weight: bold;
        }
        .moreDetailBack {
            text-align: center;
            margin-top: 1.5rem;
            font-weight: bold;
        }
        .info {
            background-image: url("/media/1644/bg1.png");
            width: 100%;
            height: 100%;
        }
        .product-info-wrapper {
            width: 100%;
            height: 60%;
            display: flex;
            justify-content: center;
            overflow: scroll;
        }
        .label-info-wrapper {
            width: 100%;
            height: 60%;
            display: flex;
            justify-content: center;
            overflow: scroll;
        }
        .fake {
            width: 100%;
            height: 60%;
            display: flex;
            justify-content: center;
        }
        .product-info {
            width: 71%;
            margin-top: 1rem;
            border: 2px solid #7e7f7e;
            border-radius: 7px;
            background: #f5f5f5;
            text-align: center;
        }
        .label-info {
            width: 71%;
            margin-top: 1rem;
            border: 2px solid #7e7f7e;
            border-radius: 7px;
            background: #f5f5f5;
            text-align: center;
            padding: 0.5rem;
        }
        .fake-info {
            width: 71%;
            margin-top: 1rem;
            border: 2px solid #7e7f7e;
            border-radius: 7px;
            background: #f5f5f5;
            text-align: center;
            padding: 0.5rem;
        }
        .contact {
            color: #6d6d6d;
            text-align: center;
            margin-top: 1rem;
        }
    </style>
</head>
<body>
    {% verbatim %}
    <div id="con">
        <div class="home" v-if="page==1">
            <div class="header">
                <img src="/media/1644/logo.png" class="header-logo"/> 
                
            </div>
            <div class="article">
                <img src="/media/1644/slogan.png" style="width: 80%;"/>
                <img src="/media/1644/home-product.png" style="width: 50%;"/>
                <div>
                    欢迎进入内参酒防伪查询界面
                </div>
                <div class="btn-wrapper">
                    <div class="fwm-btn" @click="openFwmPage">
                        防伪码验证
                    </div>
                    <div class="qr-btn" @click="scanCode">
                        二维码验证
                    </div>
                </div>
            </div>
        </div>
        <div class="fwmInput" v-if="page==2">
            <div class="header">
                <img src="/media/1644/logo.png" class="header-logo"/>
            </div>
            <div class="title-logo-wrapper">
                <img src="/media/1644/title.png" class="title-logo" />
            </div>
            <div style="text-align: center;margin-top: 1rem;letter-spacing: 1px;">
                请输入防伪号码
            </div>
            <div style="text-align: center;margin-top: 0.8rem;">
                <input id="lbcode-input" placeholder="在此输入防伪码以查询" class="query-input" v-model="fwInput"/>
            </div>
            <div style="display: flex;justify-content: center;margin-top:1rem;">
                <div class="submit-btn" @click="query">
                    提交
                </div>
            </div>
            <div style="text-align: center;margin-top:1em;font-size: 0.8rem;" @click="backToIndex">
                返回
            </div>
            <div style="text-align: center;margin-top: 3rem;">
                <img src="/media/1644/essay.png" style="width: 60%;"/>
            </div>
            <img src="/media/1644/stamp.png" style="position: absolute;bottom: 5%;right: 8%;"/>
        </div>
        <div class="info" v-if="page==3">
            <div class="header">
                <img src="/media/1644/logo.png" class="header-logo"/>
            </div>
            <div class="title-logo-wrapper">
                <img src="/media/1644/title.png" class="title-logo" />
            </div>
            <div class="product-info-wrapper" v-if="status==1">
                <div class="product-info">
                    <!-- <img src="/media/1644/product52.png" style="width:80%;"/> -->
                    <img :src="proPic" style="width:80%;margin-top:0.5rem;" v-if="proPic!=''"/>
                    <img src="/media/1644/fakeBottle.png" style="width: 40%;" v-if="proPic==''"/>
                    <div style="text-align: left;padding:0.5rem 1.5rem;line-height:1.5em;">
                        <div>品 名: {{returnData.product}}</div>
                        <div>规 格: {{returnData.package}} {{returnData.volume}}mL</div>
                        <div>酒精度: {{returnData.alcohol}}%vol</div>
                        <div>类 型: {{returnData.series}}</div>
                        <div>产 地: 湖南省吉首市</div>
                        <div v-if="returnData.price!=0">建议零售价: {{returnData.price}}元</div>
                        <div v-if="returnData.price==0">建议零售价: 非卖品</div>
                    </div>
                </div>
                
            </div>
            <div class="moreDetail" @click="detailPage" v-if="status==1">
                更多详情
            </div>
            <div class="label-info-wrapper" v-if="status==2">
                <div class="label-info">
                    <div style="text-align: left;padding:0.5rem 1.5rem;line-height:1.7em;">
                        <div>上次扫码记录</div>
                        <div>{{returnData.tm_1st}}</div>
                        <div>{{returnData.province}}</div>
                        <div>出厂日期: {{returnData.outbound_date}}</div>
                        <!-- <div>批次: {{returnData.batch_no}}</div> -->
                        <!-- <div>质检员: {{returnData.qc}}</div> -->
                        <!-- <div>资格证号: ac20190020001</div> -->
                        <div>防伪图像对比:</div>
                        <!-- <img src="/media/1644/fw-pic.png" /> -->
                        <img :src="fwPic" />
                    </div>
                </div>
            </div>
            <div class="moreDetailBack" @click="detailPageBack" v-if="status==2">
                返回
            </div>
            <div class="contact" v-if="status==2">
                <p>尊贵的酒友，感谢您对内参酒的支持!</p>
                <p>内参客服热线: 0731-88180179</p>
            </div>
            <div class="fake" v-if="status==3">
                <div class="fake-info">
                    <img src="/media/1644/fakeBottle.png" />
                </div>
            </div>
            <div style="text-align: center;color: #43403f;margin-top:1rem;font-size:1.1rem;"
                 v-if="status==3"
            >
                未检测到产品信息! 请联系供应商
            </div>
            <img src="/media/1644/stamp.png"
                 style="position: absolute;bottom: 5%;right: 8%;"
                 v-if="status==1 || status ==3"/>
        </div>
    </div>

<script>
    var latitude = "";
    var longitude = "";
    var speed = ""; 
    var accuracy = ""; 
    (function() {
        var app = new Vue({
            el: '#con',
            data: {
                page: 1,
                status: 3,
                fwInput: '',
                returnData: {},
                fwPic: '',
                proPic: '',
                latitude: '',
                longitude: ''
            },
            methods: {
                openFwmPage() {
                    this.page = 2;
                },
                backToIndex() {
                    this.page = 1;
                },
                detailPage() {
                    this.page = 3;
                    this.status = 2;
                },
                detailPageBack() {
                    this.page = 3;
                    this.status = 1;
                },
                query() {
                    var that = this;
                    var lbcode = this.fwInput;
                    if(lbcode.length != 12) {
                        alert("请输入正确的防伪码!");
                        return;
                    } else {
                        if(lbcode[0] != "4") {
                            alert("请输入正确的防伪码");
                            return;
                        }
                    }
                    $.ajax({
                        url: 'https://davis.china315net.com/wx/nc/label/scan/?fwcode=' 
                        + lbcode + '&lat=' + this.latitude+ '&lng=' + this.longitude,
                        success: function(res) {
                            console.log(res);
                            if(res.e == "") {
                                that.returnData = res;
                                that.proPic = res.photo;
                                that.fwPic = res.img;
                                that.page = 3;
                                that.status = 1;
                            }else {
                                that.page = 3;
                                that.status = 3;
                            }
                        }
                    })
                },
                scanCode() {
                    var that = this;
                    wx.scanQRCode({
                            needResult: 1,
                            scanType: ["qrCode"],
                            success: function(res) {
                                var resData = res.resultStr;
                                var code = resData.slice(resData.indexOf("?t=")+3);
                                if(code.length != 12) {
                                    alert("请扫描正确的二维码!");
                                    return;
                                } else {
                                    if(resData.indexOf("tj1") == -1) {
                                        alert("请扫描正确的天鉴二维码");
                                        return;
                                    }
                                }
                                $.ajax({
                                    url: 'https://davis.china315net.com/wx/nc/label/scan/?fwcode=' 
                                    + code + '&lat=' + that.latitude+ '&lng=' + that.longitude,
                                    success: function(res) {
                                        console.log(res);
                                        if(res.e == "") {
                                            that.returnData = res;
                                            that.proPic = res.photo;
                                            that.fwPic = res.img;
                                            that.page = 3;
                                            that.status = 1;
                                        }else {
                                            that.page = 3;
                                            that.status = 3;
                                        }
                                        
                                    },
                                    fail: function(err) {
                                        alert("请求失败"+err);
                                    }
                                })
                            },
                            fail: function(err) {
                                alert("扫码出现错误");
                            }
                        })
                }
            },
            mounted() {
                var that = this;
                wx.ready(function () {
                    wx.getLocation({
                        type: 'gcj02',                 
                        success: function (res) {
                            this.latitude = res.latitude;  
                            this.longitude = res.longitude; 
                        }
                    });
                })
            }
        })
        wxConfig();
    })();
    function wxConfig() {
        $.ajax({
            url: 'https://davis.china315net.com/wx/ajax/js/sign/7/',
            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', 'getLocation']
                });
            }
        });
    }
    function getCookie(name) {
        var prefix = name + "="
        var start = document.cookie.indexOf(prefix)
        if (start == -1) {
            return null;
        }
        var end = document.cookie.indexOf(";", start + prefix.length)
        if (end == -1) {
            end = document.cookie.length;
        }
        var value = document.cookie.substring(start + prefix.length, end)
        return decodeURIComponent(value);
    }
    function setCookie(key,value,t){
        var oDate=new Date();
        oDate.setDate(oDate.getDate()+t);
        document.cookie=key+"="+value+"; expires="+oDate.toDateString();
    }

    
</script>
{% endverbatim %}
</body>
</html>
