egg_app/static/html/kz_goods_share.html

<meta charset="UTF-8">

<style>
    body {
        opacity: 0;
    }
</style>
<!-- <script src="https://cdn.jsdelivr.net/npm/clipboard@2.0.6/dist/clipboard.min.js"></script> -->
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<!--<script src="https://hairuyi.com/View/index/js/comm/jquery.min.js"></script>-->
<!-- <link rel="stylesheet" href="../../../css/wap/rebate_DG/kz_goods_share.css"> -->

<!-- <script src="../../../js/comm/mob_login.js"></script>
<script type="text/javascript">
    var share_install_key='{array:set:share_install_key}';
    var tgid='{get:tgid}';
    var get_extend_onoff='{array:set:get_extend_onoff}';
    get_extend_onoff=parseInt(get_extend_onoff);
    var ua = navigator.userAgent.toLowerCase();
    if (/iphone|ipad|ipod/.test(ua)) {
        get_extend_onoff = '{array:set:ios_get_extend_onoff}';
    }
    get_extend_onoff = parseInt(get_extend_onoff);
    var moblink_source_ios='{array:set:moblink_source_ios}';
        var mob_url='{array:set:mob_urls}';
    var moblink_source_android='{array:set:moblink_source_android}';
</script>  -->
<style>
    .price-column {
        color: #594000;
        font-size: 16px;
        font-weight: bold;
        width: 100%;
        text-align: center;
        line-height: 55px;
        background: #f1f1f1;
        display: block;
    }

    * {

        margin: 0;

        padding: 0;

    }

    body {

        background: #f8fcff;

    }

    .shellfont {

        font-size: 0;

    }

    .ellipsis {

        overflow: hidden;

        text-overflow: ellipsis;

        white-space: nowrap
    }

    .pad15 {

        padding: 0 15px;

        box-sizing: border-box;

    }

    .heads {

        width: 100%;

        height: 50px;

        display: flex;

        align-items: center;

        justify-content: space-between;

        background: #ebf0f8;

    }

    .heads > .logimgwrap {

        width: 40px;

        font-size: 0;

    }

    .heads > .logimgwrap > img {

        width: 40px;

    }

    .head-con {

        color: #675df7;

        font-size: 12px;

        margin: 0 5px;

        white-space: nowrap;

        flex: 1;

        overflow: hidden;

    }

    .head-app {

        color: #fff;

        height: 30px;

        padding: 0 10px;

        font-size: 12px;

        line-height: 30px;

        text-align: center;

        position: relative;

        border-radius: 10px;

        background-image: linear-gradient(-90deg, #ff2526 0%, #ff5e14 48%, #ff9601 100%);

        text-decoration: none;

    }

    .head-app > .app-abso {

        color: #fff;

        font-size: 12px;

        position: absolute;

        width: 185px;

        height: 30px;

        line-height: 35px;

        top: 32px;

        right: -10px;

        z-index: 555;

        background: url("../img/yj_ts_bg.png") no-repeat center;

        background-size: contain;

    }


    /* 主体 */

    #subjectCon {

        width: 100%;

        font-size: 0;

        padding: 0 15px;

        box-sizing: border-box;

    }

    .banner {

        width: 100%;

        height: 340px;

    }

    .banner > img {

        width: 100%;

        height: 100%;

    }

    .shop-column {

        padding: 10px 0;

    }

    .shop-name {

        font-size: 14px;

        font-weight: bold;

    }

    .coupon-wrap {

        display: flex;

        justify-content: space-between;

        align-items: center;

    }

    .coupon-p > .coupon-text {

        color: #333;

        font-size: 14px;

    }

    .coupon-p > .newpri {

        color: #ff2626;

        font-size: 16px;

        font-weight: bold;

        margin: 0 5px;

    }

    .coupon-p > .oldpri {

        color: #666;

        font-size: 10px;

        text-decoration: line-through;

    }

    .coupon-imgwrap {

        width: 85px;

        height: 25px;

        margin-top: 10px;

        position: relative;

    }

    .coupon-imgwrap > img {

        width: 100%;

        height: 100%;

    }

    .coupon-imgwrap > .coupon-iconpri {

        color: #fff;

        width: 85px;

        height: 25px;

        font-size: 12px;

        text-align: center;

        line-height: 25px;

        position: absolute;

        left: 0;

        top: 0;

    }

    /* 价格栏 */

    .price-column {

        color: #594000;

        font-size: 16px;

        font-weight: bold;

        width: 100%;

        height: 55px;

        text-align: center;

        line-height: 55px;

        background: #f1f1f1;

    }

    .copy-wrap {

        width: 100%;

        padding: 15px 0;

        /* display: flex; */

        align-items: center;

        justify-content: space-evenly;

        text-align: center;

    }

    .copy-btn {

        color: #fff;

        height: 35px;

        line-height: 35px;

        font-size: 16px;

        padding: 0 30px;

        text-align: center;

        border-radius: 20px;

        background-image: linear-gradient(-90deg, #ff2526 0%, #ff5e14 48%, #ff9601 100%);

        display: inline-block;

    }

    .copy-text {

        color: #595d5c;

        font-size: 14px;

        width: 100%;

        height: 55px;

        line-height: 55px;

        text-align: center;

        background: #fff;

    }

    .copy-text > .taoimg {

        width: 20px;

        height: 20px;

        vertical-align: middle;

    }
</style>

<script>

    $(document).ready(function () {

        $(document).attr("title", "{{.title}}");
        loadJS("{{.mobUrl}}", function () {
            MobLink([
                // {
                //     el: '',
                //     path: "",
                //     params: {
                //         tgid: tgid,
                //     }
                // },
                {
                    el: '#downs1',
                    path: "/invited",
                    params: {
                        tgid: "{{.tgid}}",
                    }
                },
                {
                    el: '#downloadButton',
                    path: "/invited",
                    params: {
                        tgid: "{{.tgid}}",
                    }
                },
                {
                    el: '#downloadButton1',
                    path: "/invited",
                    params: {
                        tgid: "{{.tgid}}",
                    }
                },
                {
                    el: '#downs2',
                    path: "/invited",
                    params: {
                        tgid: "{{.tgid}}",
                    }

                },
            ]);
        });

        var u = navigator.userAgent, app = navigator.appVersion;

        var isAndroid = u.indexOf('Android') > -1 || u.indexOf('Linux') > -1; //g

        var isIOS = !!u.match(/\(i[^;]+;( U;)? CPU.+Mac OS X/); //ios终端

        if (isAndroid) {
            $(".head-app").attr("href", "{{.android_url}}");
        }

        if (isIOS) {
            $(".head-app").attr("href", "{{.ios_url}}");
        }

        var ua = navigator.userAgent.toLowerCase();

        if (/iphone|ipad|ipod/.test(ua)) {

            $(".head-app").attr("href", "{{.ios_url}}");

        }

        if (/android/.test(ua)) {

            $(".head-app").attr("href", "{{.android_url}}");

        }

        $("body *").removeProp();

        window.setTimeout(function () {

            $("body").css({"opacity": 1});

        }, 100);

        if (window.Clipboard && Clipboard.isSupported()) {

            var $copy = $(".copy-btn");//注意不能用# 只能用 . 类

            new Clipboard($copy[0], {

                text: function () {

                    return $(".price-column").text() || '';

                }

            }).on('success', function (e) {

                e.clearSelection();

            });

            console.log(3);

        }

    });

    function loadJS(url, callback) {

        var script = document.createElement('script'),
            fn = callback || function () {

            };
        script.type = 'text/javascript';

        //IE
        if (script.readyState) {

            script.onreadystatechange = function () {

                if (script.readyState == 'loaded' || script.readyState == 'complete') {
                    script.onreadystatechange = null;
                    fn();
                }
            };
        } else {
            //其他浏览器
            script.onload = function () {
                fn();
            };
        }
        script.src = url;
        document.getElementsByTagName('head')[0].appendChild(script);
    }

    function copy_() {

        var clipboard = new Clipboard(".copy-btn");

        clipboard.on("success", function (element) {
            console.info("复制成功，复制内容：    " + element.text);
        });

        clipboard.on("error", function (element) {
            console.info(element);
        });

    }

    var copyFalg = true;

    function copy_str() {

        copy_();

        $(".price-column").select();

        $("#fuzhi").html("复制成功，打开【手淘】购买");

        setTimeout(function () {

            $("#fuzhi").html("一键复制");

        }, 2000);

    }

    function down() {

        if (get_extend_onoff == 1) return false;

        window.location.href = '123';

    }

</script>

<if condition="'123'!='1'">


    <div class="heads pad15">

        <div class="logimgwrap">

            <img src="{{.appLog}}" alt="">

        </div>

        <marquee class="head-con" scrollAmount="3">

            好货

        </marquee>

        <a class="head-app" id='downloadButton'>下载APP

            <!--<div class="app-abso">下载APP后购买再省1.6元</div>-->

        </a>

    </div>

</if>

<!-- 主体 -->

<div id="subjectCon">

    <!-- 轮播 -->

    <div class="banner shellfont">

        <img src="{{.image}}" alt="">

    </div>

    <!-- 商品介绍 -->

    <div class="shop-column shellfont">

        <p class="shop-name ellipsis">{{.goodTitle}}</p>

        <div class="coupon-wrap">

            <p class="coupon-p">

                <span class="coupon-text">

                    <if condition="'{{.goodCouponPrice}}'!='0'">券后价
                        <else/>价格
                    </if>



                </span><span class="newpri">￥{{.goodPrice}}</span><span
                    class="oldpri">￥{{.goodCostPrice}}</span>

            </p>

            <if condition="'{{.goodPrice}}'!='0'">

                <div class="coupon-imgwrap">

                    <img src="http://ossq.izhyin.cn/yj_quan_bg.png" alt="">

                    <p class="coupon-iconpri">{{.goodCouponPrice}}元券</p>

                </div>

            </if>

        </div>

    </div>

    <!-- 价格栏 -->

    <div class="price-column">{{.tkl}}</div>

    <!-- 一键复制 -->

    <div class="copy-wrap">

        <a class="copy-btn" id="fuzhi" onclick="copy_str();">一键复制</a>

    </div>

    <!-- 复制栏 -->

    <div class="copy-text">

        长按复制上方口令，打开手机【<img class="taoimg" style="height: 16px;width: 16px;"
                           src="http://ossq.izhyin.cn/taoimg.jpg" alt="">】购买

    </div>

</div>