dever-product
/
mars


			
				
					
						
						
							123456789101112131415161718192021222324252627282930313233343536373839404142434445464748495051525354555657585960616263646566676869707172737475767778798081828384858687888990919293949596979899100101102103104105106107108109110111112113114
							<!DOCTYPE html>
<html>

<head>
    <meta charset="UTF-8">

    <meta name="viewport" content="width=device-width,initial-scale=1,minimum-scale=1,maximum-scale=1,user-scalable=no">
    <title>JSTYLE精美</title>
<link href="css/global.css?v=3f8cf811" rel="stylesheet"><link href="css/codedetail.css?v=3f8cf811" rel="stylesheet"></head>

<body>
    <div class="tips">
        <p>温馨提示：</p>
        <p>兑换码只能被激活一次，当您购买成功后，可进入<span id="product_name">小程序</span>使用兑换码查看电子刊，若您购买了多本，可将剩余兑换码赠送好友。</p>
    </div>
    <div class="btn-wrap">
        <a href="javascript:;" node-act="read" class="button black">阅读电子刊</a>
    </div>
    <div class="code-list pages">
        <dl>
            <dd>
                <p><i class="ico-code"></i>兑换码：675386834</p>
                <span class="used">已使用</span>
            </dd>
            <dt>
                <a href="javascript:;" class="button disabled">复制</a>
            </dt>
        </dl>
        <dl>
            <dd>
                <p><i class="ico-code"></i>兑换码：675386834</p>
                <span>未使用</span>
            </dd>
            <dt>
                <a href="javascript:;" class="button" node-id="copy" data-clipboard-text="675386834">复制</a>
            </dt>
        </dl>
        <dl>
            <dd>
                <p><i class="ico-code"></i>兑换码：675386834</p>
                <span class="used">已使用</span>
            </dd>
            <dt>
                <a href="javascript:;" class="button disabled">复制</a>
            </dt>
        </dl>
        <dl>
            <dd>
                <p><i class="ico-code"></i>兑换码：675386834</p>
                <span>未使用</span>
            </dd>
            <dt>
                <a href="javascript:;" class="button" node-id="copy" data-clipboard-text="675386833">复制</a>
            </dt>
        </dl>
        <dl>
            <dd>
                <p><i class="ico-code"></i>兑换码：675386834</p>
                <span class="used">已使用</span>
            </dd>
            <dt>
                <a href="javascript:;" class="button disabled">复制</a>
            </dt>
        </dl>
        <dl>
            <dd>
                <p><i class="ico-code"></i>兑换码：675386834</p>
                <span>未使用</span>
            </dd>
            <dt>
                <a href="javascript:;" class="button" node-id="copy" data-clipboard-text="675386832">复制</a>
            </dt>
        </dl>
    </div>
    <div class="success fn-hide" id="success">复制成功</div>
    <div class="mask fn-hide" id="layer">
        <div class="layer read-layer">
            <div class="qrcode-wrap">
                <img src="images/qrcode.png" alt="" class="default" id="code">
                <p>长按识别<span id="product_name">小程序</span>阅读电子刊</p>
            </div>
            <a href="javascript:;" class="btn-close" id="close"></a>
        </div>
    </div>
<script type="text/javascript" src="js/global.js?v=3f8cf811"></script><script type="text/javascript" src="js/codedetail.js?v=3f8cf811"></script></body>
<script src="https://cdn.bootcss.com/clipboard.js/2.0.4/clipboard.min.js"></script>
<script>
    function init(){
        var timer;
        var clipboard = new ClipboardJS('[node-id="copy"]');

        clipboard.on('success', function (e) {
            $('#success').removeClass('fn-hide');
            clearTimeout(timer);
            timer = setTimeout(function () {
                $('#success').addClass('fn-hide');
            }, 3000)

            console.log(e.trigger)

            e.clearSelection();
        });

        $('[node-act="read"]').on('click',function(){
            $('#layer').show();
        })

        $('#close').on('click',function(){
            $('#layer').hide();
        });
    }
    init();
</script>
</html>