xiuli.gao
/
seafood_applet


			
				
					
						
						
							123456789101112131415161718192021222324252627282930313233343536373839404142434445464748495051525354555657585960616263646566676869707172737475767778798081828384858687888990919293949596979899100101102103104105106107108109110111112113114115116117118119120121122123124125126127128129130131132133134135136137138139140141142143144145146147148149150151152153154155156157158159160161162163164165166167168169170171172173174175176177178179180181182183184185186187188189190191192193194195196197198199200201202203204205206207208209210211212213214215216217218219220221222223224225226227228229230231232233234235236237238239240241242243244245246247248249250251252253254255256257258259
							<!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" href="../public/public_css.css">
    <script src="../public/jquery-2.1.0.js"></script>
    <script src="../public/html2canvas.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>
    <style>
        #curTpl{
            display: none;
        }
        #leaveImg{
            position: relative;
            display: none;
        }
        .applet_evm{
            position: absolute;
            top: 2.6rem;
            left: 0;
            right: 0;
            margin: auto;
            width: 1.7rem;
        }
        .seafood{
            font-size: 0.12rem;
            text-align: center;
            color: #666;
        }
        .seafood input{
            border: 0.01rem solid #999999;
            font-size: 0.14rem;
            padding-left: 0.1rem;
            border-radius: 0.05rem;
            height: 0.3rem;
            background: transparent;
        }
        .seafood label{
            display: inline-block;
            width: 0.9rem;
            text-align: right;
        }
        .content{
            border-bottom: 0.01rem solid #ccc;
        }
        .content .title{
            font-size: 0.18rem;
            font-weight: bold;
            text-align: center;
            padding-top: 0.4rem;
            padding-bottom: 0.5rem;
        }
        .buttonDiv{
            width: 100%;
            display: flex;
            align-items: center;
            justify-content: space-around;
            margin: 0.8rem auto;
        }
        .seafoodButton{
            color: #ffffff;
            background: #5eb95e;
            border: none;
            width: 1.6rem;
            height: 0.4rem;
            border-radius: 0.4rem;
            font-size: 0.15rem;
        }
        #evmImg{
            display: none
        }
        #evmImg .evm2{
            width: 80%;
            margin: 0.6rem auto 0.2rem;
        }
        #evmImg .hint{
            text-align: center;
            font-size: 0.14rem;
            color: #666;
        }
    </style>
</head>
<body>
    <div class="content">
        <div class="title">生成直播间二维码</div>
        <div class="seafood">
            <label>海鲜销售账号：</label>
            <input type="text" id="accountNumber" placeholder="请输入海鲜销售账号">
        </div>
        <div class="seafood" style="margin-top: 0.2rem;">
            <label>直播间房间号：</label>
            <input type="number" id="liveNum" placeholder="请输入直播间房间号">
        </div>
        <div class="buttonDiv">
            <button onclick="createQrcode('evm')" class="seafoodButton">点击生成二维码</button>
        </div>
    </div>
    <div class="content">
        <div class="title">生成活动二维码</div>
        <div class="seafood">
            <label>海鲜销售账号：</label>
            <input type="text" id="activity_accountNumber" placeholder="请输入海鲜销售账号">
        </div>
        <div class="seafood" style="margin-top: 0.2rem;">
            <label>活动ID：</label>
            <input type="number" disabled value="1" placeholder="请输入直播间房间号">
        </div>
        <div class="buttonDiv">
            <button onclick="createQrcode('activity_evm')" class="seafoodButton">点击生成二维码</button>
        </div>
    </div>
    <div id="evmImg">
        <img src="" class="evm2" alt="">
        <p class="hint">长按二维码分享</p>
    </div>
    <div id="leaveImg">
        <img src="./img/bgImg.png" alt="" style="width: 100%;">
        <img class="applet_evm" src="" alt="">
    </div>
    <img src="" id="curTpl" style=" display: none;width:100%">
    <div class="alert-info" style="display: none;">
        <!-- tip提示,3s后消失 -->
        <p>请在浏览器中打开</p>
    </div>
    <!-- loading -->
    <div class="loading">
        <img src="../public/loading.gif" />
    </div>
</body>
</html>
<script>
    $().ready(function() {
    })
    function generateImg (){//生成图片
        var dom=$("#leaveImg"); //你要转变的dom
        var width = dom.width();
        var height = dom.height();
        var scaleBy = 5;  //缩放比例
        var canvas = document.createElement('canvas');
        canvas.width = width * scaleBy;
        canvas.height = height * scaleBy;
        canvas.style.width = width * scaleBy + 'px';
        canvas.style.height = height * scaleBy + 'px';
        var context = canvas.getContext('2d');
        context.scale(scaleBy, scaleBy);

        html2canvas(dom, {
            // logging: false, //日志开关
            // useOverflow: true,
            useCORS: true,
            canvas:canvas,
            onrendered: function (canvas) {
                var url = canvas.toDataURL();//图片地址	
                $(".loading").hide()
                $("#curTpl").attr('src',url)
                $("#curTpl").css("display","block")
                $("#leaveImg").css({
                    "display":"none",
                    "z-index":"-11"
                });
                showMsg('长按分享图片')
            }
        });
    }
    function createQrcode(create_type){//生成二维码
        var data = {};
        if(create_type == 'evm'){
            if(($('#accountNumber').val()).replace(/(^\s*)|(\s*$)/g, "") == ''){
                showMsg('请输入海鲜销售账号')
                return
            }
            if(($('#liveNum').val()).replace(/(^\s*)|(\s*$)/g, "") == ''){
                showMsg('请输入直播间房间号')
                return
            }
            data = {
                account:($('#accountNumber').val()).replace(/(^\s*)|(\s*$)/g, ""),
                scene:'room_id='+($('#liveNum').val()).replace(/(^\s*)|(\s*$)/g, ""),
                page:'pages/index/index'
			}
        }
        if(create_type == 'activity_evm'){
            if(($('#activity_accountNumber').val()).replace(/(^\s*)|(\s*$)/g, "") == ''){
                showMsg('请输入海鲜销售账号')
                return
            }
            data = {
                account:($('#activity_accountNumber').val()).replace(/(^\s*)|(\s*$)/g, ""),
                page:'pages/activity/selfHelpActivity/index',
                scene:'activity_id=1'
			}
        }
        $(".loading").show()
        $.ajax({
			type:"post",
			url:"/api/wx/createQrcode",
			dataType:"json",
			data:data,
			success: function (res) {
                $(".loading").hide()
                if(res && res.errno == 200){
                    $(".content").hide()
                    $("#evmImg").show();
                    $(".evm2").attr('src',res.rst.qrcode)
                    // if(create_type == 'evm'){
                    //     $(".content").hide()
                    //     $("#evmImg").show();
                    //     $(".evm2").attr('src',res.rst.qrcode)
                    // }
                    // else{
                    //     $(".applet_evm").attr('src',res.rst.qrcode)
                    //     $('.applet_evm').each(function() {
                    //         $(this).load(function(){
                    //             $(".content").hide()
                    //             $("#leaveImg").show()
                    //             $(".loading").show()
                    //             generateImg()
                    //         });
                    //     });
                    // }
                }else{
                    showMsg(res.err)
                }
            },
            error:function(err){
                $(".loading").hide()
                showMsg('服务器错误，请稍后')
            }
		})
    }
    // 展示错误提示信息
    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>