waibao
/
NN2022090201


			
				
					
						
						
							123456789101112131415161718192021222324252627282930313233343536373839404142434445464748495051525354555657585960616263646566676869707172737475767778798081828384858687888990919293949596979899100101102103104105106107108109110111112113114115116117118119120121122123124125126127128129130131132133134135136137138139140141142143144145146147
							<!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;
        }
    </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="">
                {/volist}
            </div>
            <div class="action">
                <button onclick="copy('{$v.title}')">复制文案</button>
                <button onclick="savePics('{$v.id}')">保存图片</button>
            </div>
        </div>
        {/volist}
    </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>

    /**
     * 批量
     */
    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){
                doenloadPic(url);
            }
        })
    }

    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 doenloadPic(imgUrl){
        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>