xiuli.gao
/
seafood


			
				
					
						
						
							123456789101112131415161718192021222324252627282930313233343536373839404142434445464748495051525354555657585960616263646566676869707172737475767778798081828384858687888990919293949596979899100101102103104105106107108109110111112113114115116117118119120121122123124125126127128129130131132133134135136137138139140141142143144145146147148149150151152153154155156157158159160161162163164165166167168169170171172173174175176177178179180181182183184185186187188189190191192193194195196197198199200201202203204205206207208209210211212213214215216217218219220221222223224225226227228229230231232233234235236237238239240241242243244245246247248249250251252253254255256257258259260261262263264265266267268269270271272273274275276277278279280281282283284
							<!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{
        padding: 0.15rem;
        padding-bottom: 0.5rem;
    }
    .title{
        font-size: 0.28rem;
        line-height: 0.33rem;
        white-space: normal;
    }
    .content p{
        font-size: 0.15rem;
        color: #595959;
        line-height: 2em;
        margin-top: 0.3rem;
    }
    img{
        width: 100%;
        margin-top: 0.1rem;
    }
    .bottom{
        position: fixed;
        width: 100%;
        height: 0.5rem;
        line-height: 0.5rem;
        background: #3cb035;
        bottom: 0;
        left: 0;
        z-index: 1;
        border-top: 1px solid #eee;
        box-shadow: -0.05rem -0.05rem 0.1rem #eee;
        text-align: center;
        color: #fff;
    }
    .elasticFrame_div{
        position: fixed;
        top: 0;
        left: 0;
        width: 100%;
        height: 100vh;
        background: rgba(0,0,0,0.5);
        z-index: 2;
        display: none;
    }
    .elasticFrame_div .elasticFrame{
        background: #fff;
        width: 80%;
        height: 2rem;
        border-radius: 0.1rem;
        position: absolute;
        top: 0;
        bottom: 0;
        left: 0;
        right: 0;
        margin: auto;
        padding: 0.1rem ;
    }
    .elasticFrame_div .elasticFrame h4{
        font-size: 0.16rem;
        text-align: center;
        line-height: 0.3rem;
        margin-top: 0.1rem;
    }
    .elasticFrame_div .elasticFrame .evm_div{
        text-align: center;
    }
    .elasticFrame_div .elasticFrame .evm_div img{
        height: 1.28rem;
        width: 1.28rem;
        display: inline-block;
    }
    .elasticFrame_div .elasticFrame .evm_div #evm{
        width: 1.1rem;
        height: 1.1rem;
    }
    .elasticFrame_div .elasticFrame .close{
        width: 0.2rem;
        height: 0.2rem;
        position: absolute;
        right: 0.15rem;
        top: 0.05rem;
    }
    .evm_top_banner{
        background: rgb(241, 252, 253);
        width: 100%;
        height: 1rem;
        text-align: center;
        position: relative;
        border-radius: 0.1rem;
        margin-top: 0.1rem;
        color: rgb(227, 108, 9);
        font-size: 0.16rem;
        font-weight: bold;
        line-height: 0.26rem;
        padding-top: 0.2rem;
        box-sizing: border-box;
    }
    .evm_top_banner .shoes{
        width: 30px;
        position: absolute;
        left: 0;
        right: 0;
        bottom: -0.1rem;
        margin: auto;
    }
    .arrow{
        max-width: 100%;
        color: rgb(217, 33, 66);
        text-align: center;
        padding: 0.2rem 0 0 0;
    }
    .content_evm{
        text-align: center;
    }
    .content_evm img{
        width: 1.64rem;
        display:inline-block ;
    }
    .content_evm .evm{
        width: 1.4rem;
    }
</style>

<body>
    <div id="template">
       <h3 class="title"></h3>
       <ul class="content"></ul>
    </div>
    <!-- 底部 -->
    <div class="bottom" onclick="openElasticFrame()">
        点击添加微信，享受海鲜尝鲜优惠！
    </div>
    <!-- 二维码弹框 -->
    <div class="elasticFrame_div">
        <div class="elasticFrame">
            <img class="close" src="https://seafood-h5.oss-cn-beijing.aliyuncs.com/img/close.jpg" onclick="clearElasticFrame()"/>
            <h4>长按识别二维码加微信</h4>
            <div class="evm_div">
                <img src="" class="LongPress" id="evm"/>
                <img class="LongPress" src="https://seafood-h5.oss-cn-beijing.aliyuncs.com/img/fingerprint.png"/>
            </div>
        </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;
        $("img").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;
                    $(".title").html(res.rst.title)
                    document.title = res.rst.title
                    $("#evm").attr('src',res.rst.qrcode)
                    var html = '', img_html='';
                    res.rst.new_context.forEach((item,index) => {
                        img_html = '';
                        item.img.forEach((it)=>{
                            img_html += '<img src="'+it+'"/>'
                        })
                        html += '<li><p>'+item.text+'</p>'+img_html+'<div class="evm_top_banner">更多海鲜资讯<br/>详见海鲜阿嫂朋友圈<img src="https://seafood-h5.oss-cn-beijing.aliyuncs.com/img/shoes.png" class="shoes"/></div><div class="arrow">▼</div></li><div class="content_evm"><img class="evm LongPress" src="'+res.rst.qrcode+'"/><img class="LongPress" src="https://seafood-h5.oss-cn-beijing.aliyuncs.com/img/fingerprint.png"/></div>';
                    });
                    $('.content').html(html)
                }else{
                    showMsg(res.err)
                }
            },
            error: function (err) {
                $(".loading").hide()
                showMsg('服务器错误')
            }
        })
    }
    function openElasticFrame(){
        $('.elasticFrame_div').show()
        return false;
    }
    function clearElasticFrame(){
        $('.elasticFrame_div').hide()
        return false;
    }
    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>