index.html 8.79 KB
<!DOCTYPE html>
<html style="">
<head>
    <meta http-equiv="Content-Type" content="text/html; charset=UTF-8">
    <title>潮流顾问</title>
    <meta name="keywords" content="潮流,时尚潮流,潮流服饰,潮流购物网,潮流网站">
    <meta name="description"
          content="【YOHO!BUY有货】,年轻人潮流购物中心,中国潮流商品购物网站。作为YOHO!旗下的购物平台,汇集了全球潮流时尚商品和国内流行商品,★全场品牌正品保证,支持货到付款★">
    <meta name="viewport" content="width=device-width, initial-scale=1.0, user-scalable=no, viewport-fit=cover">
    <meta http-equiv="X-UA-Compatible" content="chrome=1,IE=edge">
    <style type="text/css">
        body {
            padding: 0;
            margin: 0;
            height: 100%;
            width: 100%;
            background: #fece00;
            user-select: none;
            -moz-user-select: none;
            -webkit-user-select: none;
            -webkit-touch-callout: none;
            -webkit-text-size-adjust: none;
            -webkit-tap-highlight-color: transparent;
            -webkit-user-select: none;
        }

        .consultant-index-page {
            background: url("//img01.yohoboys.com/o_1co9slp281tjhgg7qljdbtoiq8.jpg") no-repeat;
            height: 33.6rem;
            width: 100%;
            background-size: cover;
            position: relative;
        }

        .consultant-index-page .consultant-add {
            width: 10.6rem;
            position: absolute;
            top: 27.3rem;
            height: 3.4rem;
            left: 4rem;
            z-index: 10;
        }

        .consultant-index-page .info p:last-child {
            margin-left: -1rem;
        }

        .consultant-dialog.dialog-box {
            background: white;
        }

        .dialog-wrapper {
            background: rgba(0, 0, 0, 0.5);
            position: fixed;
            top: 0;
            right: 0;
            bottom: 0;
            left: 0;
            display: none;
            z-index: 2;
        }

        .dialog-wrapper .dialog-box {
            width: 13.5rem;
            border-radius: 0.5rem;
            background: rgba(255, 255, 255, 1);
            position: absolute;
            left: 50%;
            margin-left: -6.75rem;
            font-size: 0.75rem;
            text-align: center;
            color: #000;
        }

        .dialog-wrapper .dialog-content {
            padding: 1.5rem 0.75rem;
            font-size: 0.7rem;
        }

        .dialog-wrapper .dialog-header {
            padding: 1.25rem 0 1rem;
            font-size: 0.85rem;
            text-align: center;
            font-weight: bold;
        }

        .dialog-wrapper .dialog-footer {
            font-size: 0.9rem;
            height: 2.2rem;
            text-align: center;
            line-height: 2.2rem;
        }

        .dialog-wrapper .dialog-footer > span {
            display: block;
            height: 100%;
            box-sizing: border-box;
        }

        .dialog-wrapper .dialog-footer > span:nth-last-of-type(1) {
            border-left: 1px solid #ccc;
            color: #d0021b;
        }

        .dialog-wrapper .dialog-footer > span:active {
            background-color: #ccc;
        }

        .dialog-wrapper .dialog-footer > span.dialog-center-btn {
            width: 100%;
            border: none;
            text-align: center;
        }

        .dialog-wrapper .dialog-footer:before {
            content: "";
            position: absolute;
            left: 0;
            width: 200%;
            height: 0;
            border-top: 1px solid #ccc;
            -webkit-transform-origin: left top;
            transform-origin: left top;
            -webkit-transform: scale3d(0.5, 0.5, 0.5);
            transform: scale3d(0.5, 0.5, 0.5);
        }
    </style>
    <script type="text/javascript">
        (function (d, c) {
            var e = d.documentElement, a = "orientationchange" in window ? "orientationchange" : "resize",
                b = function () {
                    var f = e.clientWidth;
                    if (!f) {
                        return
                    }
                    if (f >= 750) {
                        e.style.fontSize = "40px"
                    } else {
                        e.style.fontSize = 40 * (f / 750) + "px"
                    }
                };
            if (!d.addEventListener) {
                return
            }
            b();
            c.addEventListener(a, b, false);
            d.addEventListener("DOMContentLoaded", b, false)
        })(document, window);
    </script>
</head>
<body>
<div class="consultant-index-page">
    <div class="consultant-add"></div>
</div>

<div id="dialog-wrapper" class="dialog-wrapper" style="display: none;">
    <div class="dialog-box consultant-dialog" style="top: 50%; margin-top: -81.5px;">
        <div class="dialog-content"></div>
        <div class="dialog-footer">
            <span class="dialog-left-btn tap-hightlight">我知道了</span>
        </div>
    </div>
</div>
<script type="text/javascript" src="./jq.js">
</script>
<script type="text/javascript" src="./clip.js">
</script>
<script type="text/javascript" src="./sdk.js">
</script>
<script type="text/javascript">
    var _hmt = _hmt || [];

    (function () {
        var hm = document.createElement('script');

        hm.src = 'https://hm.baidu.com/hm.js?d219c673993469aaaf220606d8826957';
        var s = document.getElementsByTagName('script')[0];
        s.parentNode.insertBefore(hm, s);
    })();

    function trace_baidu(eventName, eventDesc) {
        var category = '潮流顾问';
        _hmt.push(['_trackEvent', category, eventName, eventDesc]);
    }

    var Consultant = {
        dialog: function ($dialogWrapper) {
            $dialogWrapper.show();
        },
        queryString: function () {
            var vars = [],
                hash,
                i;
            var hashes = window.location.search.slice(1).split('&');

            for (i = 0; i < hashes.length; i++) {
                hash = hashes[i].split('=');
                vars.push(hash[0]);
                vars[hash[0]] = hash[1];
            }

            return vars;
        },
        getCookie: function (name) {
            var arr, reg = new RegExp("(^| )" + name + "=([^;]*)(;|$)");

            if (arr = document.cookie.match(reg)) {
                return unescape(arr[2]);
            } else {
                return null;
            }
        }
    };

    var $dialogWrapper = $('.dialog-wrapper');
    var text = '';
    var urlParam = Consultant.queryString();
    window.yo_sdk.getUid(function (uid) {
        if (uid) {
            $.ajax({
                method: 'post',
                url: 'https://action.yoho.cn/api/getWechatCs',
                data: {
                    uid: urlParam.uid || Consultant.getCookie('app_uid'),
                    sessionKey: urlParam.session_key || Consultant.getCookie('app_session_key'),
                    appVersion: urlParam.app_version || Consultant.getCookie('app_version'),
                    sessionType: urlParam.client_type || Consultant.getCookie('app_client_type')
                },
                success: function (result) {
                    text = result.data && result.data.wechatCode;
                    console.log(result, '======');
                },
                error: function (err) {
                    console.log(err, '===-----');
                }
            });
        }
        $('.consultant-add').click(function () {
            trace_baidu('click', '点击微信客服绑定');
            if (uid) {
                if (text) {
                    $('.dialog-content').html('微信号(' + text + ')已复制</br>请按步骤添加微信号:打开微信-通讯录-新的朋友-粘贴');
                    var clipboard = new ClipboardJS('.consultant-add', {
                        text: function (trigger) {
                            return text;
                        }
                    });
                    clipboard.on('success', function (e) {
                        e.clearSelection();
                        Consultant.dialog($dialogWrapper, text);
                    });

                    clipboard.on('error', function (e) {
                        console.error('Action:', e.action);
                        console.error('Trigger:', e.trigger);
                    });
                } else {
                    $('.dialog-content').html('您已添加潮流顾问,可以微信直接私聊我们的小哥哥小姐姐,小哥哥小姐姐随时为您服务');
                    Consultant.dialog($dialogWrapper, text);
                }
            } else {
                window.yo_sdk.goLogin();
            }

        });
    })


    $('.dialog-left-btn').click(function () {
        $dialogWrapper.hide();
    });


</script>
</body>
</html>