qingyuan/addons/weliam_smartcity/web/view/default/dashboard/pagelinks.html

{php include wl_template('common/header');}
<script type="text/javascript" src="{URL_WEB_JS}jquery.qrcode.min.js"></script>
<style>
    .col-xs-6.col-md-3{
        margin-bottom: 15px!important;
    }
    .group_title{
        border-bottom: 0;
        background-color: #f8f8f8;
        position: relative;
        padding-left: 15px;
        margin-bottom: 30px;
        height: 40px;
        line-height: 40px;
        font-size: 15px;
        float: left;
        width: 100%;
    }
    .group_title:after{
        content: '';
        position: absolute;
        width: 4px;
        height: 16px;
        background: #1AB394;
        -webkit-border-radius: 30%;
        -moz-border-radius: 30%;
        border-radius: 30%;
        top: 12px;
        left: 10px;
    }
    .group_title span{
        display: inline-block;
        height: 40px;
        line-height: 40px;
        padding-left: 5px;
    }
    .app-content{
        float: left!important;
    }
    .h5_links{
        word-break:break-all;
        display:-webkit-box;/**对象作为伸缩盒子模型展示**/
        -webkit-box-orient:vertical;/**设置或检索伸缩盒子对象的子元素的排列方式**/
        -webkit-line-clamp:2;/**显示的行数**/
        overflow:hidden;/**隐藏超出的内容**/
    }
    .weapp_path{
        word-break:break-all;
        display:-webkit-box;/**对象作为伸缩盒子模型展示**/
        -webkit-box-orient:vertical;/**设置或检索伸缩盒子对象的子元素的排列方式**/
        -webkit-line-clamp:1;/**显示的行数**/
        overflow:hidden;/**隐藏超出的内容**/
    }
    canvas{
        padding: 10px;
        height: calc(100% - 20px);
        background: #FFF;
        margin: 10px;
    }
    .pagelink-box{
        position: relative!important;
        height: 152px;
    }
    .pagelink-qrcodeList{
        position: absolute;
        top: 0;
        z-index: 100;
        background: RGBA(0,0,0,.8);
        height: 100%;
    }
    .pagelink-qrcodeList div{
        display: inline-block;
        height: 100%;
        width: 151px;
        float: left;
    }
    .pagelink-qrcodeList .qrcode_weapp img{
        width: 100%;
        height: 100%;
        padding: 10px;
    }

    .pagelink-qrcodeList .qrcode_wechat img{
        width: 100%;
        height: 100%;
        padding: 10px;
    }
    .imgdown{
        cursor: pointer;
    }
</style>
<ul class="nav nav-tabs">
    <li class="active"><a href="#">页面链接</a></li>
</ul>
<!--列表信息-->
<div class="app-content">
    {loop $system $index $item}
    <div class="group_title"><icon class=""></icon><span>{$item['name']}</span></div>
    {loop $item['list'] $key $val}
    <div class="col-xs-6 col-sm-9 col-md-3">
        <div class="pagelink-box">
            <div class="pagelink-header">
                <span>{$val['name']}</span>
                <div class="pagelink-header-qr pull-right" data-url="{$val['url']}" data-path="{$val['page_path']}" data-status="0"><i class="fa fa-qrcode"></i></div>
            </div>
            <div></div>
            <div class="pagelink-content">
                {if p('wxplatform')}
                <div class="flex-row">
                    <span class="link-title">页面链接：</span>
                    <span class="js-clip h5_links" data-url="{$val['url']}">{$val['url']}</span>
                </div>
                {/if}
                {if p('wxapp')}
                <div class="flex-row">
                    <span class="link-title">页面路径：</span>
                    <span class="js-clip weapp_path" data-url="{php echo add_aid($val['page_path'])}">
                                    {php echo add_aid($val['page_path'])}
                                </span>
                </div>
                {/if}
            </div>
            <!-- 二维码信息 -->
            <div class="pagelink-qrcodeList hide" data-status="0">
                <!--  公众号二维码  -->
                {if p('wxplatform')}
                <div class="qrcode_wechat hide">
                    <img class="imgdown" src="" />
                </div>
                {/if}
                <!--  小程序太阳码  -->
                {if p('wxapp')}
                <div class="qrcode_weapp hide">
                    <img class="imgdown" src="" />
                </div>
                {/if}
            </div>
        </div>
    </div>
    {/loop}
    {/loop}
</div>
<script>
    $(function () {
        //显示二维码信息
        $(".pagelink-header-qr").on('click',function () {
            //定位、链接获取
            let _this = $(this),
                wechat = _this.parents('.pagelink-header').siblings('.pagelink-qrcodeList').children('.qrcode_wechat'),
                weapp = _this.parents('.pagelink-header').siblings('.pagelink-qrcodeList').children('.qrcode_weapp'),
                link = _this.data('url'),
                path = _this.data('path'),
                status = _this.data('status');
            if(status == 0) {
                //生成小程序二维码
                if (path.length > 0) {
                    $.post("{php echo web_url('dashboard/pagelinks/getWxAppQrCode')}", {path: path}, function (data) {
                        if (data.errno == 0) {
                            weapp.children('img').attr('src', data['data']);
                            weapp.removeClass('hide');
                        }
                    }, 'json');
                }
                //生成公众号二维码
                if (link.length > 0) {
                    // let is_have = wechat.children().is("canvas");
                    // if (!is_have) {
                    //     wechat.qrcode(link);
                    // }
                    $.post("{php echo web_url('dashboard/pagelinks/getWxWechatQrCode')}", {link: link}, function (data) {
                        if (data.errno == 0) {
                            wechat.children('img').attr('src', data['data']);
                            wechat.removeClass('hide');
                        }
                    }, 'json');
                }
                _this.data('status', 1);
            }
            if(status > 0){
                //隐藏二维码信息
                $(this).parents('.pagelink-header').siblings('.pagelink-qrcodeList').addClass('hide');
                _this.data('status', -1);
            }else{
                //显示内容
                _this.parents('.pagelink-header').siblings('.pagelink-qrcodeList').removeClass('hide');
                _this.data('status', 2);
            }

        });

        $('.imgdown').click(function(){
            let src = $(this).attr('src');
            // 创建隐藏的可下载链接
            var eleLink = document.createElement('a');
            eleLink.download = src;
            eleLink.style.display = 'none';
            // // 字符内容转变成blob地址
            eleLink.href = src;
            // // 触发点击
            document.body.appendChild(eleLink);
            eleLink.click();
            // // 然后移除
            document.body.removeChild(eleLink);
        });
        //隐藏二维码信息
        // $(".pagelink-header-qr").on('mouseleave',function () {
        //     $(this).parents('.pagelink-header').siblings('.pagelink-qrcodeList').addClass('hide');
        // });
    });
</script>
{php include wl_template('common/footer');}