jh-admin/addon/saas/shop/view/goods/template.html

{extend name="app/shop/view/base.html"/}
{block name="resources"}
{/block}
{block name="main"}
<div class="layui-form form-wrap">
  <!-- 基础上传 -->
  <div class="layui-card card-common card-brief">
    <div class="layui-card-header">
      <span class="card-title">标准模版</span>
    </div>
    <div class="layui-card-body">
        <div class="layui-form-item">
          <label class="layui-form-label">套餐名称：</label>
          <div class="layui-input-block">
            <input type="text" name="goods_title" value="{$goods_title??''}" lay-verify="required" class="layui-input len-mid new_pass" maxlength="18">
          </div>
        </div>
        <div class="layui-form-item">
          <label class="layui-form-label">产品图片：</label>
          <div class="layui-input-block">
            <div class="js-goods-image"></div>
          </div>
          <div class="word-aux">
            <p>建议尺寸：750*750像素</p>
          </div>
        </div>
      <div class="layui-form-item">
        <label class="layui-form-label"><span class="required">*</span>先享使用规则：</label>
        <div class="layui-input-block">
		 <textarea class="layui-textarea len-long" name="use_rule"   placeholder="请输入促销语，不能超过100个字符">{$use_rule}</textarea>
        </div>
        <div class="word-aux">芝麻先享使用规则，多条规则请换行</div>
      </div>
        <div class="layui-form-item">
          <label class="layui-form-label">详情内容：</label>
          <div class="layui-input-block">
            <script id="editor" type="text/plain" class="special-length" style="height:600px;"></script>
            <input type="hidden" name="goods_content" id="goods_content" value="" />
          </div>
        </div>
    </div>
  <div class="form-row" style="margin-top:0;padding-left:20px;">
    <button class="layui-btn" lay-submit lay-filter="save">保存</button>
  </div>
</div>

{/block}
{block name="script"}
<script type="text/html" id="ImageTpl">
  {{# if(d.list.length){ }}
  {{# for(var i=0;i<d.list.length;i++){ }}
  <div class="item upload_img_square_item" data-index="{{i}}">
    <div class="img-wrap">
      <img src="{{ns.img(d.list[i],'small')}}" layer-src>
    </div>
    <div class="operation">
      <i title="图片预览" class="iconfont iconreview js-preview"></i>
      <i title="删除图片" class="layui-icon layui-icon-delete js-delete" data-index="{{i}}"></i>
      <div class="replace_img" data-index="{{i}}">点击替换</div>
    </div>
  </div>
  {{# } }}
  {{# if(d.list.length < d.max){ }}
  <div class="item js-add-image upload_img_square">+</div>
  {{# } }}
  {{# }else{ }}
  <div class="item js-add-image upload_img_square">+</div>
  {{# } }}
</script>
<script type="text/javascript" charset="utf-8" src="STATIC_EXT/ueditor/ueditor.config.js"></script>
<script type="text/javascript" charset="utf-8" src="STATIC_EXT/ueditor/ueditor.all.js"></script>
<script type="text/javascript" charset="utf-8" src="STATIC_EXT/ueditor/lang/zh-cn/zh-cn.js"></script>
<script src="__STATIC__/ext/drag-arrange.js"></script>
<script>
  //实例化富文本
  var ue = UE.getEditor('editor');
  {notempty name="$goods_content"}
   ue.ready(function() {
     ue.setContent(`{:html_entity_decode($goods_content)}`);
   });
  {/notempty}
  var upload,goodsImage  = '{$goods_images}'.split(',');
  const IMAGE_MAX = 5;
  layui.use(['form','laytpl'], function() {
    var form = layui.form,laytpl=layui.laytpl,repeat_flag = false; //防重复标识
    form.render();
    form.on('submit(save)', function (data) {
      if (repeat_flag) return;
      repeat_flag = true;
      var field = data.field;
      field.goods_images = goodsImage.toString();
      field.goods_content = ue.getContent();
      $.ajax({
        type: 'POST',
        dataType: 'JSON',
        url: ns.url("saas://shop/goods/template"),
        data: {
          ...field
        },
        success: function (res) {
          layer.msg(res.message);
          repeat_flag = false;
          if (res.code == 0) {
            location.reload();
          }
        }
      });
    });
    // 添加图片
    $("body").on("click", ".js-add-image", function () {
      openAlbum(function (data) {
        for (var i = 0; i < data.length; i++) {
          if (goodsImage.length < IMAGE_MAX) goodsImage.push(data[i].pic_path);
        }
        refreshImage();
      }, 5, 1);
    });
    //渲染门店图片
    function refreshImage() {
      var image_template = $("#ImageTpl").html();
      var data = {
        list: goodsImage,
        max: IMAGE_MAX
      };
      laytpl(image_template).render(data, function (html) {
        $(".js-goods-image").html(html);
        //加载图片放大
        loadImgMagnify();
        if (goodsImage.length) {
          //预览
          $(".js-goods-image .js-preview").click(function () {
            $(this).parent().prev().find("img").click();
          });

          //图片删除
          $(".js-goods-image .js-delete").click(function () {
            var index = $(this).attr("data-index");
            goodsImage.splice(index, 1);
            refreshImage();
          });

          // 拖拽
          $('.js-goods-image .upload_img_square_item').arrangeable({
            //拖拽结束后执行回调
            callback: function (e) {
              var indexBefore = $(e).attr("data-index");//拖拽前的原始位置
              var indexAfter = $(e).index();//拖拽后的位置
              var temp = goodsImage[indexBefore];
              goodsImage[indexBefore] = goodsImage[indexAfter];
              goodsImage[indexAfter] = temp;
              refreshImage();
            }
          });
        }
        //最多传十张图
        if (goodsImage.length < IMAGE_MAX) {
          $(".js-add-image").show();
        } else {
          $(".js-add-image").hide();
        }
      });
    }
    refreshImage();
  });
</script>
{/block}