lsky-pro/application/index/view/user/images.html

{extend name="common:base" /}

{block name="title"}图片管理 - {$config.site_name}{/block}

{block name="css"}
  <link rel="stylesheet" href="/static/contextjs/css/context.standalone.css">
  <link rel="stylesheet" href="/static/jquery-viewer/1.2.0/css/viewer.css">
{/block}

{block name="main"}
<div class="mdui-container-fluid">
  <main>
    <div class="images-container">
      <div class="screen-box mdui-m-b-1">
        <div class="mdui-chip">
          <span class="mdui-chip-icon"><i class="mdui-icon material-icons">&#xe88e;</i></span>
          <span class="mdui-chip-title">共有 <small class="mdui-text-color-red num">0</small> 张图片</span>
          <span id="reset" class="mdui-chip-delete" mdui-tooltip="{content: '重置数据', position: 'right'}"><i class="mdui-icon material-icons">&#xe863;</i></span>
        </div>
        <div class="mdui-clearfix mdui-m-t-1"></div>
        <form action="" method="post" id="search-form">
          <select class="operation mdui-select" name="state" mdui-select>
            <option value="">选中项</option>
            <option value="delete">删除</option>
          </select>
          <div class="mdui-btn-group mdui-m-r-1 mdui-float-left">
            <button type="button" id="all" class="mdui-btn mdui-ripple mdui-btn-raised mdui-float-right">全选</button>
          </div>
          <input class="mdui-textfield-input search-input mdui-float-right" type="text" name="keyword" placeholder="回车搜索..." value="" autocomplete="off"/>
        </form>
        <div class="mdui-clearfix"></div>
      </div>
      <div class="mdui-divider mdui-m-b-1"></div>
      <div class="mdui-row">
        <div id="images-box" class="images-box mdui-row-xs-3 mdui-row-sm-9 mdui-row-md-9 mdui-row-lg-10 mdui-col-xl-12"></div>
      </div>
      <button class="mdui-btn mdui-ripple mdui-center mdui-color-grey-300 mdui-text-color-black-secondary mdui-m-t-2 more"></button>
      <!-- Info Dialog -->
      <div class="mdui-dialog" id="info">
        <div class="mdui-dialog-title"></div>
        <div class="mdui-dialog-content">
          <div class="mdui-row">
            <div class="mdui-col-xs-12 mdui-col-sm-3 mdui-col-md-3 mdui-col-lg-3 mdui-col-xl-3">
              <img class="qrcode mdui-center" src="/static/app/images/loading.jpg" width="100%">
            </div>
            <div class="mdui-col-xs-12 mdui-col-sm-9 mdui-col-md-9 mdui-col-lg-9 mdui-col-xl-9">
              <table>
                <tbody>
                <tr class="url">
                  <td align="right">链接：</td>
                  <td align="left">
                    <input class="mdui-textfield-input" type="text" placeholder="图片外链" value=""/>
                  </td>
                </tr>
                <tr class="pathname">
                  <td align="right">位置：</td>
                  <td align="left"></td>
                </tr>
                <tr class="size">
                  <td align="right">大小：</td>
                  <td align="left"></td>
                </tr>
                <tr class="md5">
                  <td align="right">MD5：</td>
                  <td align="left"></td>
                </tr>
                <tr class="mime">
                  <td align="right">类型：</td>
                  <td align="left"></td>
                </tr>
                </tbody>
              </table>
            </div>
          </div>
        </div>
        <div class="mdui-dialog-actions">
          <div class="mdui-btn-group">
            <a href="" target="_blank" class="open-url mdui-btn mdui-color-theme-accent mdui-ripple mdui-btn-dense">打开链接</a>
            <button data-clipboard-action="copy" data-clipboard-text="" class="copy-url mdui-btn mdui-color-teal mdui-ripple mdui-btn-dense">复制链接</button>
            <button data-id="" class="delete-image mdui-btn mdui-color-red mdui-ripple mdui-btn-dense">删除</button>
            <button class="mdui-btn mdui-ripple mdui-color-grey-600 mdui-btn-dense" mdui-dialog-cancel>关闭</button>
          </div>
        </div>
      </div>
    </div>
  </main>
</div>
<!-- 用于右键复制 -->
<span id="copy-url" class="none copy-url" data-clipboard-action="copy" data-clipboard-text=""></span>
{/block}

{block name="js"}
<script src="/static/clipboard.js/2.0.1/clipboard.min.js"></script>
<script src="/static/contextjs/js/context.js"></script>
<script src="/static/jquery-viewer/1.2.0/js/viewer.js"></script>
<script src="/static/jquery-viewer/1.2.0/js/jquery-viewer.js"></script>
<script>
  $(function () {

    var params = {}, viewer, imagesBox = $('.images-box'), totalBox = $('small.num'), infoDialog = $(".mdui-dialog#info"), qrcodeApi = 'https://www.kuaizhan.com/common/encode-png?large=true&data=';
    params.page = 1;

    // 函数库
    var methods = {
      getImages: function () {
        var more = $(".more");
        more.attr('disabled', true).text('加载中...');
        app.ajax("{:url('user/images')}", params, function (response) {
          if (response.code) {
            var list = response.data.data;
            totalBox.text(response.data.total);
            if (list.length) {
              for (var i = 0; i < list.length; i++) {
                imagesBox.append(
                  '<div class="mdui-col">' +
                  '        <div data-id="' + list[i].id + '" data-json=\'' + JSON.stringify(list[i]) + '\' class="item" title=' + list[i].name + '>' +
                  '         <i class="choice iconfont icon-choice"></i>' +
                  '         <i class="info iconfont icon-info"></i>' +
                  '          <div class="info image">' +
                  '            <img data-original="' + list[i].url + '" src="' + list[i].url + '">' +
                  '          </div>' +
                  '          <p class="name">' + list[i].name + '</p>' +
                  '        </div>' +
                  '      </div>');
              }

              // 图片预览插件
              if (!viewer) {
                viewer = $('.images-box').viewer({
                  url: 'data-original',
                  zIndex: 999999999
                });
              } else {
                viewer.data('viewer').update();
              }

              if (response.data.current_page == response.data.last_page) {
                return more.attr('disabled', true).text('我也是有底线的~');
              }
              params.page++;
              return more.attr('disabled', false).text('加载更多');
            } else {
              more.attr('disabled', true).text('暂无数据');
            }
          }
        });
      },
      // 删除
      delete: function (id, batch, callback) {
        var msg = '确认删除该图片吗？';
        if (batch) {
          msg = '确认删除选中项图片吗？';
        }
        mdui.confirm(msg, function () {
          app.request("{:url('user/deleteImages')}", {id: id}, function () {
            callback && callback();
          });
        }, function () {

        }, {confirmText: '确定', cancelText: '取消'});
      }
    };

    methods.getImages();

    // 监听复制操作
    var clipboard = new ClipboardJS('.copy-url');
    clipboard.on('success', function(e) {
      app.msg(true, '复制成功！');
      e.clearSelection();
    });

    clipboard.on('error', function(e) {
      console.error('Action:', e.action);
      console.error('Trigger:', e.trigger);
      app.msg(false, '复制失败！');
    });

    // Context Start
    context.init({
      fadeSpeed: 100,
      filter: function ($obj){},
      above: 'auto',
      preventDoubleContext: true,
      compress: false
    });

    $('body').on('contextmenu', '.images-box .item', function(e) {
      var item = $(e.target).closest('.item'), data = item.data('json');
      context.attach('.images-box .item', [
        {header: 'Compressed Menu'},
        {text: '查看图片', action: function (e) {
            e.preventDefault();
            item.find('img').click();
          }
        },
        {text: '新窗口打开图片', href: data.url, target: '_blank'},
        {divider: true},
        {text: '复制链接', action: function (e) {
            e.preventDefault();
            $('#copy-url').attr('data-clipboard-text', data.url).click();
          }
        },
        {
          text: '删除', action: function (e) {
            e.preventDefault();
            methods.delete(data.id, false, function () {
              item.parent().remove();
              totalBox.text(parseInt(totalBox.text()) - 1);
            })
          }
        },
        {
          text: '属性', action: function (e) {
            e.preventDefault();
            item.find('i.info').click();
          }
        }
      ]);
    });
    // Context End

    // 加载更多
    $('.more').click(function () {
      methods.getImages();
    });

    // 筛选
    $('.screen-box form').submit(function (e) {
      e.preventDefault();
      // 清空内容
      imagesBox.html('');
      params.keyword = $(this).find("input[name='keyword']").val();
      methods.getImages();
    });

    // 选中项操作
    $('.screen-box .mdui-select.operation').on('close.mdui.select', function () {
      if ($(this).val() !== '') {
        var selected = $('.images-box .item.choice'), array = [];
        if (selected.length) {
          selected.each(function (index, value) {
            array.push($(value).data('id'));
          });

          if ('delete' === $(this).val()) {
            methods.delete(array, true, function () {
              selected.remove();
              totalBox.text(parseInt(totalBox.text()) - selected.length);
              // methods.getImages();
            });
          }
        } else {
          app.msg(false, '至少选择一项数据！')
        }
      }
    });

    // 全选
    var all = false;
    $('#all').click(function () {
      var item = $('.images-box .item');
      if (0 === item.length) {
        return mdui.snackbar({
          position: 'right-top',
          message: '暂无数据！'
        });
      }
      if (all) {
        item.removeClass('choice');
        $(this).text('全选');
        all = false;
      } else {
        item.removeClass('choice').addClass('choice');
        $(this).text('取消全选');
        all = true;
      }
    });

    // 单选
    imagesBox.on('click', '.item i.choice', function () {
      $(this).parent('.item').toggleClass('choice');
    });

    // 图片信息
    var info = new mdui.Dialog('#info');
    imagesBox.on('click', '.item i.info', function () {
      var data = $(this).parent('.item').data('json');
      if (data) {
        // 标题
        infoDialog.find('.mdui-dialog-title').text(data.name);
        // 二维码
        infoDialog.find('img.qrcode').attr('src', qrcodeApi + data.url);
        // 信息
        for (x in data) {
          var tr = infoDialog.find('tr.' + x);
          if (tr.length) {
            var value = data[x];
            if (x === 'size') {
              value = app.bytesToSize(data[x]);
            }
            if (tr.find('td:last-child input').length) {
              tr.find('td:last-child input').val(value);
            } else {
              tr.find('td:last-child').text(value);
            }
          }
        }
        // 按钮
        infoDialog.find('.open-url').attr('href', data.url);
        infoDialog.find('.copy-url').attr('data-clipboard-text', data.url);
        infoDialog.find('.delete-image').attr('data-id', data.id);
        info.open();
      } else {
        app.msg(false, '数据异常！');
      }
    });

    // 删除单张图片
    infoDialog.find('.delete-image').click(function () {
      var id = $(this).data('id');
      if (id) {
        info.close();
        methods.delete(id, false, function () {
          imagesBox.find(".item[data-id='" + id + "']").parent().remove();
          totalBox.text(parseInt(totalBox.text()) - 1);
        });
      } else {
        app.msg(false, '数据异常！');
      }
    });

    // 重置数据
    $('#reset').click(function () {
      params = {
        page: 1
      };
      imagesBox.html('');
      methods.getImages();
    });
  })
</script>
{/block}