xiuli.gao
/
seafood


			
				
					
						
						
							123456789101112131415161718192021222324252627282930313233343536373839404142434445464748495051525354555657585960616263646566676869707172737475767778798081828384858687888990919293949596979899100101102103104105106107108109110111112113114115116117118119120121122123124125126127128129130131132133134135136137138139140141142143144145146147148149150151152153154155156157158159160161162163164165166167168169170171172173174175176177178179180181182183184185186187188189190
							<!DOCTYPE html>
<html lang="en">

<head>
    <meta charset="UTF-8">
    <meta content="yes" name="apple-mobile-web-app-capable">
    <meta name="viewport"
        content="width=device-width, initial-scale=1.0, maximum-scale=1.0,minimum-scale=1.0,user-scalable=0" />
    <title>海鲜阿嫂</title>
    <link rel="stylesheet" type="text/css" href="../common/reset.css" />
    <script type="text/javascript" src="../common/jquery-2.1.0.js"></script>
    <script type="text/javascript">
        document.documentElement.style.fontSize = 100 * (document.documentElement.clientWidth / 375) + "px";
        window.onresize = function () {
            document.documentElement.style.fontSize = 100 * (document.documentElement.clientWidth / 375) + "px";
        } 
    </script>
</head>
<style>
    body{
        width: 100vw;
        overflow: hidden;
    }
    .template_img{
        width: 100%;
    }
    .evm_img {
        width: 100%;
        position: absolute;
        width: 1.15rem;
        top: 4.6rem;
        right: 0.28rem;
    }
    .hand_div{
        position: absolute;
        top: 5.2rem;
        right: 0;
        width: 0.5rem;
        overflow: hidden;
    }
    .hand{
        width: 150%;
        animation:mymove 0.6s infinite alternate ease-in-out;
        -webkit-animation:mymove 0.6s infinite alternate ease-in-out; /*Safari and Chrome*/
    }
    @keyframes mymove
    {
        0%{
        transform: scale(1);  /*开始为原始大小*/
        }
        25%{
            transform: scale(0.9); /*放大1.1倍*/
        }
        50%{
            transform: scale(1);
        }
        75%{
            transform: scale(0.9);
        }

    }
    
    @-webkit-keyframes mymove /*Safari and Chrome*/
    {
        0%{
        transform: scale(1);  /*开始为原始大小*/
        }
        25%{
            transform: scale(0.9); /*放大1.1倍*/
        }
        50%{
            transform: scale(1);
        }
        75%{
            transform: scale(0.9);
        }
    }
</style>

<body>
    <div id="template">
        <img class="template_img" src=""/>
        <img class="evm_img" src="" />
        <div class="hand_div">
            <img class="hand" src="https://seafood-h5.oss-cn-beijing.aliyuncs.com/img/hand.png"/>
        </div>
    </div>
    <div class="alert-info" style="display: none;">
        <!-- tip提示,3s后消失 -->
        <p>请在浏览器中打开</p>
    </div>
    <!-- loading -->
    <div class="loading">
        <img src="../common/loading.gif" />
    </div>
</body>

</html>
<script>
    var qs = parseQueryString(window.location.href);
    var qrode_data = '';//接口传过来的数据
    $().ready(function () {
        getQrcode();

        var timeOutEvent = null;
        $("body").on({
            touchstart: function (e) {
                timeOutEvent = setTimeout(function () {
                    //此处为长按事件
                    addLongLog()
                }, 700);
            },
            touchmove: function () {
                clearTimeout(timeOutEvent);
            },
            touchend: function (e) {
                clearTimeout(timeOutEvent);
                return false;
            }
        });
    })
    function getQrcode() {
        if(!qs.id){
            showMsg('模版未找到！')
            return false;
        }
        $(".loading").show()
        $.ajax({
            url: '/api/template/qrcode',
            methods: 'get',
            data: {
                t_id: qs.id
            },
            success: function (res) {
                $(".loading").hide()
                if (res && res.errno == 0) {
                    qrode_data = res.rst;
                    $(".template_img").attr('src',res.rst.back_img)
                    $(".evm_img").attr('src', res.rst.qrcode);
                }else{
                    showMsg(res.err)
                }
            },
            error: function (err) {
                $(".loading").hide()
                showMsg('服务器错误')
            }
        })
    }
    function addLongLog() {
        //长按
        $.ajax({
            url: '/api/template/addLongLog',
            methods: 'get',
            data: {
                t_id: qs.id,
                ip: qrode_data.ip,
                saler_id: qrode_data.saler_id
            },
            success: function (res) {
                if (res && res.errno == 0) {
                    console.log('长按统计成功')
                }
            },
            error: function (err) {
            }
        })
    }

    // 展示错误提示信息
    function showMsg(msg) {
        var msgBox = document.getElementsByClassName('alert-info')[0];
        msgBox.getElementsByTagName("p")[0].innerHTML = msg;
        msgBox.style.display = "block";

        setTimeout(function () {
            msgBox.style.display = "none";

        }, 2000);
    }
    //获取地址栏参数
    function parseQueryString(url) {
        var urlObj = {};
        var reg = /([^?=&]+)=([^?=&]+)/g;
        url.replace(reg, function ($0, $1, $2) {
            urlObj[$1] = decodeURIComponent($2);
        })
        return urlObj;
    }
</script>