scott
/
crm


			
				
					
						
						
							123456789101112131415161718192021222324252627282930313233343536373839404142434445464748495051525354555657585960616263646566676869707172737475767778798081828384858687888990919293949596979899100101102103104105106107108109110111112113114115116117118119120121122123124125126127128129130131132133134135136137138139140141142143144145146147148149150151152153154155156157158159160161162163164165166167168169170171172173174175176177178179180181182183184185186187188189190191192193194195196197198199200201202203204205206207208209210211212213214215216217218219220221222223224225226227228229230231232233234235236237238239240241242
							{extend name="public/layout" /} {block name="title"}活动素材{/block} {block
name="body"}
<style type="text/css">
  body {
    width: 100%;
    height: 100%;
    box-sizing: border-box;
    padding: 15px;
  }
  .headerBack {
    width: 100%;
    height: 40px;
    background-color: #fff;
    box-sizing: border-box;
    padding: 0px 15px;
    border-radius: 4px;
  }
  .headerBack > div {
    height: 100%;
    display: flex;
    align-items: center;
    cursor: pointer;
  }
  .contentBox {
    width: 100%;
    height: calc(100vh - 80px);
    margin-top: 10px;
    background-color: #fff;
    border-radius: 4px;
    box-sizing: border-box;
    padding: 20px 15px;
    overflow: auto;
  }
  .uploadItem {
    width: 100px;
    height: 35px;
    text-align: center;
    line-height: 35px;
    background-color: #249efb;
    color: #fff;
    border-radius: 4px;
    cursor: pointer;
  }
  .uploadlist {
    width: 100%;
    height: auto;
    overflow: hidden;
    display: flex;
    flex-wrap: wrap;
    margin-top: 20px;
  }
  .itemBox {
    width: 180px;
    height: 210px;
    background-color: #fff;
    border-radius: 4px;
    overflow: hidden;
    box-sizing: border-box;
    padding: 10px;
    border: 1px solid #f2f2f2;
    box-shadow: 0px 6px 4px 0px rgba(0, 0, 0, 0.05);
    margin-right: 20px;
    margin-bottom: 20px;
    position: relative;
  }
  .itemImg {
    width: 100%;
    height: 150px;
    background-color: #ccc;
    position: relative;
    overflow: hidden;
  }
  .itemImg > img {
    width: 100%;
    height: 100%;
    object-fit: cover;
  }
  .typeStyle {
    position: absolute;
    display: inline;
    padding: 2px 6px;
    background-color: #249efb;
    color: #fff;
    top: 5px;
    right: 5px;
    border-radius: 2px;
    font-size: 12px;
  }
  .itemMsg {
    width: 100%;
    line-height: 40px;
    font-size: 12px;
    color: #999999;
  }
  .layui-icon-delete {
    position: absolute;
    bottom: 5px;
    right: 5px;
    color: red;
    cursor: pointer;
  }
</style>

<body>
  <div class="headerBack">
    <div id="backElement">
      <i class="layui-icon layui-icon-return" style="color: #249efb"></i>
      <span style="color: #249efb">返回</span>
    </div>
  </div>
  <div class="contentBox">
    <div class="uploadItem">上传素材</div>
    <div class="uploadlist">
      
    </div>
    <div id="pageElement"></div>
  </div>
</body>
{/block} {block name="js"}

<script>
  layui
    .config({
      base: "__LAYUI__/",
      urlbase: "/sys",
    })
    .extend({
      index: "lib/index", //主入口模块
    })
    .use(
      ["index", "form", "upload", "layedit", "laydate", "laypage"],
      function () {
        var form = layui.form,
          upload = layui.upload,
          layedit = layui.layedit,
          laydate = layui.laydate,
          laypage = layui.laypage,
          $ = layui.jquery,
          page = 1;

        $("#backElement").click(function () {
          window.history.back();
        });

        ajaxlist();
        function ajaxlist() {
          $.ajax({
            type: "post",
            url: '{:url("activity/materialList")}',
            data: {
              id: "{$id}",
              page: page,
              limit: 20,
            },
            success: function (res) {
              renderlisthtml(res.data, res);
              laypage.render({
                elem: "pageElement",
                count: res.count, //数据总数，从服务端得到
                limit: 20,
                curr: page,
                jump: function (obj, first) {
                  //obj包含了当前分页的所有参数，比如：
                  page = obj.curr; //得到当前页，以便向服务端请求对应页的数据。

                  //首次不执行
                  if (!first) {
                    //do something
                    ajaxlist();
                  }
                  
                },
              });
            },
          });
        }

        function renderlisthtml(array, res) {
          let html = array
            .map((item) => {
              return `<div class="itemBox">
                        <div class="itemImg">
                          <img src="${item.url}" />
                          <div class="typeStyle">${item.type == 0 ? '图片' : '视频'}</div>
                        </div>
                        <div class="itemMsg">上传于2022-04-27 12:12:12</div>
                        <i data-id="${item.id}" class="layui-icon layui-icon-delete"></i>
                      </div>`;
            })
            .join("");
            $('.uploadlist').html(html);
            setTimeout(() => {
              $('.layui-icon-delete').click(function() {
                let id = $(this).prop('dataset').id;
                layer.confirm('确定删除此活动？', { title: ['信息', 'color:#333333;background-color:#D8E6F1;'], }, function (index) {
                    $.ajax({
                      type: "post",
                      url: '{:url("activity/materialDel")}',
                      data: {
                        id: id,
                      },
                        success: function (res) {
                            if (res.code == 0) {
                                layer.msg(res.msg, {
                                    anim: 0
                                }, function () {
                                  ajaxlist();
                                  layer.close(index);
                                });
                            } else {
                                layer.msg(res.msg, {
                                    anim: 6
                                });
                            }
                        }
                    });
                });
              })
            })
        }

        $(".uploadItem").click(function () {
          layer.open({
            type: 2,
            title: ["上传素材", "color:#333333;background-color:#D8E6F1;"],
            content: "{:url('activity/upload_material')}?id=" + "{$id}",
            // content: layui.setter.urlbase + "/activity/edit/id/" + data.id,
            resize: false,
            area: ["60%", "60%"],
            // btn: ['确定', '取消'],
            end: function (index, layero) {
              //点击确认触发 iframe 内容中的按钮提交
              // var submit = layero.find('iframe').contents().find("#activity-submit");
              // submit.click();
              ajaxlist();
            },
          });
        });
      }
    );
</script>
{/block}