waibao
/
NN2022090201


			
							123456789101112131415161718192021222324252627282930313233343536373839404142434445464748495051525354555657585960616263646566676869707172737475767778798081828384858687888990919293949596979899100101102103104105106107108109110111112113114115116117118119120121122123124125126127128129130131132133134135136137138139140141142143144145146147148149150151152153154155156157158159160161162163164165166167168169170171172173174175176177178179180181182183184185186187188189190191192193194195196197198199200201202203204205206207208209210211212213214215216217218219220221222223224
							<!doctype html>
<html class="no-js">
<head>
    <meta charset="utf-8">
    <meta http-equiv="X-UA-Compatible" content="IE=edge">
    <meta name="description" content="">
    <meta name="keywords" content="">
    <meta name="viewport" content="width=device-width, initial-scale=1, maximum-scale=1, user-scalable=no">
    <title>推广素材</title>
    <!-- Set render engine for 360 browser -->
    <meta name="renderer" content="webkit">
    <link rel="stylesheet" href="__CDN__/assets/shop/css/amazeui.css">
    <link rel="stylesheet" href="__CDN__/assets/shop/css/app.css">
    <style>
        .app {
            font-size: 14px;
            text-align: left;
            padding: 64px 15px;
        }
        .lists {
            margin-top: 15px;
        }
        .lists .list-item {
            border: 1px solid #ccc;
            border-radius: 2px;
            background-color: #fff;
            margin-bottom: 15px;
        }
        .list-item .title {
            padding: 10px 15px;
        }
        .action {
            border-top: 1px solid #ccc;
            padding: 10px 0;
            text-align: center;
            overflow: hidden;
        }
        .action button {
            background-color: #666;
            color: #fff;
            border-radius: 10px;
            text-align: center;
            padding: 4px 8px;
            margin-right: 10px;
            border: none;
            float: right;
        }
        .albums {
            display: flex;
            text-align: center;
            margin-bottom: 10px;
        }
        .albums img {
            width: calc((100% - 60px)/3);
            margin-right: 15px;
            text-align: center;
            justify-content: center;
        }
        .albums img:first-child {
            margin-left: 15px;
        }

        #preview {
            width: 100%;
            height: 100%;
            background-color: rgba(97, 94, 92, 0.85);
            position: fixed;
            z-index: 99;
            top: 0;
            left: 0;
            display: none;
            /*overflow-y: scroll;*/
        }

        #preview .close {
            position: fixed;
            font-size: 14px;
            font-style: normal;
            /*padding: 4px;*/
            text-align: center;
            right: 30px;
            top: 80px;
            z-index: 9;
            width: 36px;
            height: 36px;
            line-height: 36px;
            background-color: #333;
            color: #fff;
            border-radius: 100%;

        }

        #preview-img {
            width: 100%;
            position: absolute;
            z-index: 1;
            top: 0;
            right: 0;
            bottom: 0;
            left: 0;
            margin: auto;
            /*margin-top: 48px;*/
            max-height: 65%;
        }

        #download {
            max-width: 120px;
            z-index: 9;
            position: fixed;
            right: 0;
            bottom: 30px;
            left: 0;
            margin: auto;
            background-color: #666;
            color: #fff;
            border: none;
            padding: 8px 10px;
            border-radius: 4px;
        }
    </style>
</head>
<body>
<!-- Header -->
<header data-am-widget="header" class="am-header am-header-default">
    <div class="am-header-left am-header-nav">
        <a href="javascript:void(0);" onclick="javascript:history.back(-1);return false;"><i class="am-header-icon am-icon-angle-left"></i></a>
    </div>
    <h1 class="am-header-title">
        <a href="#title-link">推广素材</a>
    </h1>
</header>
<div class="wapper app">
    <div class="lists">
        {volist name="lists" id="v"}
        <div class="list-item">
            <div class="title">{$v.title}</div>
            <div class="albums" id="albums-{$v.id}">
                {assign name="images" value="$v.images" /}
                {volist name="images" id="vv"}
                <img src="{$vv}" alt="" onclick="showPic('{$vv}')">
                {/volist}
            </div>
            <div class="action">
                <button onclick="copy('{$v.title}')">复制文案</button>
<!--                <button onclick="savePics('{$v.id}')">保存图片</button>-->
            </div>
        </div>
        {/volist}
    </div>
    <div id="preview">
        <p><span class="close" onclick="closePic()">x</span></p>
        <p><img id="preview-img" src="" alt=""></p>
        <p><button id="download" onclick="downloadPic()">保存素材</button></p>
    </div>
</div>
</body>
<script src="__CDN__/assets/shop/js/jquery.min.js"></script>
<script src="__CDN__/assets/shop/js/amazeui.min.js"></script>
<script src="__CDN__/assets/shop/js/app.js"></script>
<script src="__CDN__/assets/libs/layer/layer.js"></script>
<script src="__CDN__/assets/shop/js/jweixin.js"></script>
<script>
    /**
     * 批量
     */
    function savePics(k){
        var $urls = $("#albums-"+k).find('img');
        if($urls.length <= 0){
            layer.msg('暂无素材图片');
            return false;
        }

        $urls.each(function(item,k){
            var url = $(this).attr('src');
            if(url){
                downloadPic(url);
            }
        })
    }

    function showPic(url){
        if(url){
            $("#preview-img").attr('src', url);
            $("#preview").show();
        }
    }

    function closePic(){
        console.log(666)
        $("#preview").hide();
    }


    function copy(message) {
        var input = document.createElement("input");
        input.value = message;
        document.body.appendChild(input);
        input.select();
        input.setSelectionRange(0, input.value.length), document.execCommand('Copy');
        document.body.removeChild(input);
        layer.msg("{:__('复制成功')}");
    }

    /**
     * 下载
     * @param imgUrl
     */
    function downloadPic(){
        var imgUrl = $("#preview-img").attr('src');
        let triggerEvent = "touchstart"; //指定下载方式
        let blob=new Blob([''], {type:'application/octet-stream'});
        let url = URL.createObjectURL(blob); //创建一个字符串路径空位
        let a = document.createElement('a');
        a.href = imgUrl;  //把路径赋到a标签的href上
        a.download = imgUrl.replace(/(.*\/)*([^.]+.*)/ig,"$2").split("?")[0];
        let e = new MouseEvent('click', ( true, false, window, 0, 0, 0, 0, 0, false, false, false, false, 0, null));
        a.dispatchEvent(e);
        //释放一个已经存在的路径（有创建createObjectURL就要释放revokeObjectURL）
        URL.revokeObjectURL(url);
    }
</script>
</html>