tpwd_middle_page
/
index.html

<!DOCTYPE html>
<html>

<head>
    <title>3.0</title>
    <meta http-equiv="Content-Type" content="text/html; charset=UTF-8">
    <meta name="MobileOptimized" content="320">
    <meta name="viewport"
        content="initial-scale=1.0,user-scalable=no,minimum-scale=1.0, maximum-scale=1.0,width=device-width">
    <meta name="apple-mobile-web-app-capable" content="yes">
    <meta name="apple-mobile-web-app-status-bar-style" content="black">
    <meta name="format-detection" content="telephone=no, email=no">
    <link rel="apple-touch-icon" href="" data-role="site-logo">

</head>

<body>
    <style type="text/css">
        body {
            background: #F6F5F7;
        }

        .imgContainer {
            padding: 0 16px;
            margin-top: 14px;
        }

        .imgContainer img {
            width: 100%;
            height: auto;
            box-shadow: 0px 3px 12px rgba(21, 0, 71, 0.16);
        }

        .beatWord {
            text-align: center;
            margin: 14px;
            margin-top: 20px;
        }

        .fieldset {
            padding: 0.8em;
            margin: 0 2px;
            border: 1px dashed #f54d23;
            background: #fff;
        }

        .legend {
            background: #f54d23;
            border: none;
            font-size: 0.8rem;
            line-height: 20px;
            color: #fff;
            padding: 0 4px;
            top: -20px;
            position: relative;
        }

        .itemCopy {
            border: none;
            font-size: 16px;
            padding: 6px 15px;
            background: #f60;
            display: inline-block;
            margin: 10px auto;
            border-radius: 16px;
            color: #fff;
        }

        .itemWord {
            font-size: 12px;
            top: -10px;
            position: relative;
        }

        .kz-float-layer {
            height: 0px !important;
        }

        .kz-float-layer {
            display: none !important;
        }
    </style>
    <div class="imgContainer">
        <img id="img" src="">
    </div>
    <div class="beatWord">
        <div class="fieldset">
            <div id="copy_tip" class="legend">长按框内>全选>复制>打开掏宝APP</div>
            <p id="itemWord" class="itemWord">复制框内整段文字，打开「掏宝APP」即可「领取秘券」并购买<span id="koulin"></span>
            </p>
        </div>
        <div type="button" data-clipboard-text="" class="itemCopy" id="itemCopy" onclick="copy_code();">一键复制</div>
    </div>
    <script type="text/javascript" src="//lib.baomitu.com/jquery/2.2.4/jquery.min.js"></script>
    <script type="text/javascript" src="//lib.baomitu.com/clipboard.js/1.6.1/clipboard.min.js"></script>
    <!-- <script type="text/javascript" src="./jquery.min.js"></script>
    <script type="text/javascript" src="./clipboard.min.js"></script> -->
    <script>

        function Base64() {

            // private property
            _keyStr = "ABCDEFGHIJKLMNOPQRSTUVWXYZabcdefghijklmnopqrstuvwxyz0123456789+/=";

            // public method for encoding
            this.encode = function (input) {
                var output = "";
                var chr1, chr2, chr3, enc1, enc2, enc3, enc4;
                var i = 0;
                input = _utf8_encode(input);
                while (i < input.length) {
                    chr1 = input.charCodeAt(i++);
                    chr2 = input.charCodeAt(i++);
                    chr3 = input.charCodeAt(i++);
                    enc1 = chr1 >> 2;
                    enc2 = ((chr1 & 3) << 4) | (chr2 >> 4);
                    enc3 = ((chr2 & 15) << 2) | (chr3 >> 6);
                    enc4 = chr3 & 63;
                    if (isNaN(chr2)) {
                        enc3 = enc4 = 64;
                    } else if (isNaN(chr3)) {
                        enc4 = 64;
                    }
                    output = output +
                        _keyStr.charAt(enc1) + _keyStr.charAt(enc2) +
                        _keyStr.charAt(enc3) + _keyStr.charAt(enc4);
                }
                return output;
            }

            // public method for decoding
            this.decode = function (input) {
                var output = "";
                var chr1, chr2, chr3;
                var enc1, enc2, enc3, enc4;
                var i = 0;
                input = input.replace(/[^A-Za-z0-9\+\/\=]/g, "");
                while (i < input.length) {
                    enc1 = _keyStr.indexOf(input.charAt(i++));
                    enc2 = _keyStr.indexOf(input.charAt(i++));
                    enc3 = _keyStr.indexOf(input.charAt(i++));
                    enc4 = _keyStr.indexOf(input.charAt(i++));
                    chr1 = (enc1 << 2) | (enc2 >> 4);
                    chr2 = ((enc2 & 15) << 4) | (enc3 >> 2);
                    chr3 = ((enc3 & 3) << 6) | enc4;
                    output = output + String.fromCharCode(chr1);
                    if (enc3 != 64) {
                        output = output + String.fromCharCode(chr2);
                    }
                    if (enc4 != 64) {
                        output = output + String.fromCharCode(chr3);
                    }
                }
                output = _utf8_decode(output);
                return output;
            }

            // private method for UTF-8 encoding
            _utf8_encode = function (string) {
                string = string.replace(/\r\n/g, "\n");
                var utftext = "";
                for (var n = 0; n < string.length; n++) {
                    var c = string.charCodeAt(n);
                    if (c < 128) {
                        utftext += String.fromCharCode(c);
                    } else if ((c > 127) && (c < 2048)) {
                        utftext += String.fromCharCode((c >> 6) | 192);
                        utftext += String.fromCharCode((c & 63) | 128);
                    } else {
                        utftext += String.fromCharCode((c >> 12) | 224);
                        utftext += String.fromCharCode(((c >> 6) & 63) | 128);
                        utftext += String.fromCharCode((c & 63) | 128);
                    }

                }
                return utftext;
            }

            // private method for UTF-8 decoding
            _utf8_decode = function (utftext) {
                var string = "";
                var i = 0;
                var c = c1 = c2 = 0;
                while (i < utftext.length) {
                    c = utftext.charCodeAt(i);
                    if (c < 128) {
                        string += String.fromCharCode(c);
                        i++;
                    } else if ((c > 191) && (c < 224)) {
                        c2 = utftext.charCodeAt(i + 1);
                        string += String.fromCharCode(((c & 31) << 6) | (c2 & 63));
                        i += 2;
                    } else {
                        c2 = utftext.charCodeAt(i + 1);
                        c3 = utftext.charCodeAt(i + 2);
                        string += String.fromCharCode(((c & 15) << 12) | ((c2 & 63) << 6) | (c3 & 63));
                        i += 3;
                    }
                }
                return string;
            }
        }

        //获得参数
        function getQueryVariable(variable) {
            var query = window.location.search.substring(1);
            var vars = query.split("&");
            for (var i = 0; i < vars.length; i++) {
                var pair = vars[i].split("=");
                if (pair[0] == variable) { return unescape(pair[1]); }
            }
            return (false);
        }


        function copy_code() {
            //复制文本
            var clipboard = new Clipboard('.itemCopy');
            clipboard.on('success', function (e) {
                if (e.trigger.disabled == false || e.trigger.disabled == undefined) {
                    e.trigger.innerHTML = "复制成功，打开掏宝APP购买";
                    e.trigger.style.backgroundColor = "#9ED29E";
                    e.trigger.style.borderColor = "#9ED29E";
                    e.trigger.disabled = true;
                    setTimeout(function () {
                        e.trigger.innerHTML = "一键复制";
                        e.trigger.style.backgroundColor = "#f54d23";
                        e.trigger.style.borderColor = "#f54d23";
                        e.trigger.disabled = false;
                    },
                        2000);
                }
            });
            clipboard.on('error', function (e) {
                e.trigger.innerHTML = "复制失败,请手动复制";
                e.trigger.style.backgroundColor = "#8f8f8f";
                e.trigger.style.borderColor = "#8f8f8f";
            });

        }

        $(function () {
            //location.href="http://abc.lyhuilin.com/abc.html?taowords="+encodeURI(getQueryVariable("taowords"))+"&pic="+encodeURI(getQueryVariable("pic"));
            //return;

            var koulin = getQueryVariable("taowords");
            var koulin = koulin.match(/\w+/);
            var koulin = "￥" + koulin + "￥"
            $("#itemCopy").attr("data-clipboard-text", koulin);
            $("#koulin").text(koulin);


            var base = new Base64();

            $("#img").attr('src', base.decode(getQueryVariable("pic")));

            // UA判断
            var ua = navigator.userAgent.toLowerCase();
            if (ua.match(/iphone/i) == "iphone" || ua.match(/ipad/i) == "ipad") {
                $('#copy_tip').text("长按框内 > 拷贝 > 打开掏宝APP");

                var iphoneInfo = ua.match(/iphone os (\d{1,})/i);
                var iosVersion = iphoneInfo[1];
                if (iosVersion < 10 && ua.match(/ipad/i) != 'ipad') {
                    // $('.itemCopy').show();
                    $("#itemCopy").html("系统不支持自动复制请长按全选复制");
                }

            }


            // 自动选中
            var word = document.querySelector('.itemWord');
            document.addEventListener("selectionchange",
                function (e) {
                    window.getSelection().selectAllChildren(word);
                },
                false);


        });</script>
</body>

</html>