firstsy/application/store/view/goods/goods_no.html

<link rel="stylesheet" href="/static/plugs/layui/css/layui.css"  media="all">

<style>
    .layui-form-item {
        width: 80%;
        height: 90%;
    }

</style>

<div class="think-box-shadow" style="height: 100%">
    <form class="layui-form layui-card" id="subForm" action="{:request()->url()}"  data-auto="true" method="post" autocomplete="off">
        <fieldset class="layui-elem-field layui-field-title" style="margin-top: 30px;">
            <legend>商品编辑</legend>
        </fieldset>
        <div class="layui-tab">
        <ul class="layui-tab-title">
            <li class="layui-this">基础设置</li>
            <li>其他</li>
        </ul>
        <div class="layui-tab-content">
           <!-- 基础设置-->
            <div class="layui-tab-item layui-show">

                <div class="layui-form-item">
                    <label class="layui-form-label label-required">商品名称</label>
                    <div class="layui-input-block">
                        <input name="name" lay-verify="required" maxlength="50"  value='{$vo.name|default=""}' placeholder="请输入商品名称" class="layui-input">
                    </div>
                </div>

                <div class="layui-form-item">
                    <label class="layui-form-label label-required">商品简介</label>
                    <div class="layui-input-block">
                        <input name="desc" maxlength="50"  value='{$vo.desc|default=""}' placeholder="请输入商品简介" class="layui-input">
                    </div>
                </div>

                <div class="layui-form-item">
                    <label class="layui-form-label label-required">商品分类</label>

                    <div class="layui-input-inline">
                        <select name="first_classify" lay-filter ="first_classify">
                            <option value="0">请选择</option>
                            {if !empty($goods_cate)}
                                {foreach $goods_cate as $ck=>$cv}
                                    <option value="{$cv['id']}" data-cl_key="{$ck}">{$cv['title']}</option>
                                {/foreach}
                            {/if}
                        </select>
                    </div>

                    <div class="layui-input-inline">
                        <select name="second_classify" lay-filter ="second_classify">
                            <option value="0">请选择</option>
                        </select>
                    </div>
                </div>

                <div class="layui-form-item">
                    <label class="layui-form-label label-required">商品封面</label>
                    <div class="layui-input-block">
                        <input name="cover" type="hidden" value="{$vo.cover|default=''}">
                    </div>
                </div>


                <div class="layui-form-item">
                    <label class="layui-form-label">是否秒杀</label>
                    <div class="layui-input-block">
                        <input type="hidden" name="is_seckill"  value="{$vo.is_seckill|default='0'}" />
                        <input type="checkbox"  lay-filter="is_seckill"   lay-skin="switch" lay-text="ON|OFF">
                    </div>
                </div>

                <div class="seckill_box" style="display: none">
                    <div class="layui-form-item "  >
                        <label class="layui-form-label">开始时间</label>
                        <div class="layui-input-inline">
                            <input type="text" class="layui-input" style="width: 300px" name="seckill_start" id="seckill_start" value='{$vo.seckill_start|default=""}'  placeholder="请输选择秒杀开始时间">
                        </div>
                    </div>
                    <div class="layui-form-item" >
                        <label class="layui-form-label">结束时间</label>
                        <div class="layui-input-inline">
                            <input type="text" class="layui-input" style="width: 300px" name="seckill_end" id="seckill_end" value='{$vo.seckill_end|default=""}'  placeholder="请输选择秒杀结束时间">
                        </div>
                    </div>
                </div>


                <!--规格-->
                <div class="layui-form-item">
                    <label class="layui-form-label label-required">选择规格</label>
                    <div class="layui-input-block">
                        <select name="spec_id" id="spec_id" lay-filter ="spec_id">
                            <option value="0" data-spec="">请选择</option>
                            {if !empty($goods_spec)}
                                {foreach $goods_spec as $gk=>$gv}
                                    <option value="{$gv['id']}" data-spec="{$gv['detail']}">{$gv['title']}</option>
                                {/foreach}
                            {/if}
                        </select>
                    </div>
                </div>
                <div class="layui-form-item">
                    <label class="layui-form-label"></label>
                    <div class="layui-input-block">
                        <table class="layui-table margin-top-10" lay-skin="line">
                            <thead>
                            <tr>
                                <th class='text-left nowrap' style="width: 20%">货号</th>
                                <th class='text-left nowrap'>图片</th>
                                <th class='text-left nowrap'>库存</th>
                                <th class='text-left nowrap'>原价</th>
                                <th class='text-left nowrap'>售价</th>
                                <th class='text-left nowrap seckill_price' style="display: none">秒杀价</th>
                                <th class='text-left nowrap'>规格</th>
                                <th class='text-left nowrap'>操作</th>
                            </tr>
                            </thead>

                            <tbody class="no_html">

                            </tbody>
                        </table>
                    </div>
                </div>

            </div>
            <!--其他设置-->
            <div class="layui-tab-item">

              <!--  运费设置-->
               <div class="freight_box">

                   <div class="layui-form-item">
                       <label class="layui-form-label">运费模板</label>
                       <div class="layui-input-inline">
                           <input type="checkbox"  lay-filter="freight_type"   lay-skin="switch" lay-text="ON|OFF">
                       </div>
                   </div>

                   <div class="layui-form-item freight_mud" style="display: none">
                       <label class="layui-form-label">模板</label>
                       <div class="layui-input-inline">
                           <select name="freight_id" lay-filter ="freight_id">
                               <option value="0">请选择</option>
                               {if !empty($all_temp)}
                                   {foreach $all_temp as $tk=>$tv}
                                        <option value="{$tv['id']}">{$tv['name']}</option>
                                   {/foreach}
                               {/if}
                           </select>
                       </div>
                   </div>


                   <div class="layui-form-item postage" >
                       <label class="layui-form-label">运费金额</label>
                       <div class="layui-input-inline">
                           <input type="number" step="1" min="0" name="postage"   value="{$vo.postage|default=''}" class="layui-input">
                       </div>
                       <div class="layui-form-mid layui-word-aux">不填（或0）表示包邮</div>
                   </div>

               </div>

                <div class="layui-form-item" >
                    <label class="layui-form-label">详情</label>
                    <div class="layui-input-block">
                        <textarea name="detail">{$vo.detail|default=""}</textarea>
                    </div>
                </div>



                <div class="layui-form-item text-center">
                    <span class="layui-btn" type='submit' id ="submit">保 存</span>
                    <button class="layui-btn layui-btn-danger" type='button' data-confirm="确定取消编辑吗？" data-close>取消编辑</button>
                </div>


            </div>


        </div>
        </div>
    </form>
</div>
<script src="/static/plugs/layui/layui.all.js" charset="utf-8"></script>
<script>
    form.render();
    $(".no_html").html(get_ht(0,'','未选择'));
    if($("input[name='is_seckill']").val() == 1){
        $(".seckill_price").show();
    }else{
        $(".seckill_price").hide();
    }
    require(['ckeditor', 'angular'], function () {
        window.createEditor('[name="detail"]', {height: 500,width:1000});
    })
    $('[name="cover"]').uploadOneImage();
    $.each($('.spec_img'),function (ik,iv) {
        $('.spec_img').eq(ik).uploadOneImage();
    })

    layui.use('laydate', function(){
        var laydate = layui.laydate;
        laydate.render({
            elem: '#seckill_start'
            ,type: 'datetime'
        });
        laydate.render({
            elem: '#seckill_end'
            ,type: 'datetime'
        });
    })


    layui.use('element', function(){
        var $ = layui.jquery
            ,element = layui.element;
        var active = {
            tabAdd: function(){
                element.tabAdd('demo', {
                    title: '新选项'+ (Math.random()*1000|0)
                    ,content: '内容'+ (Math.random()*1000|0)
                    ,id: new Date().getTime()
                })
            }
            ,tabDelete: function(othis){
                element.tabDelete('demo', '44');
                othis.addClass('layui-btn-disabled');
            }
            ,tabChange: function(){
                element.tabChange('demo', '22');
            }
        };

        $('.site-demo-active').on('click', function(){
            var othis = $(this), type = othis.data('type');
            active[type] ? active[type].call(this, othis) : '';
        });

        //Hash地址的定位
        var layid = location.hash.replace(/^#test=/, '');
        element.tabChange('test', layid);

        element.on('tab(test)', function(elem){
            location.hash = 'test='+ $(this).attr('lay-id');
        });

    });
    $(document).on('click',".add_goods_no",function () {
        var no_html = '';
        no_html  += ' <tr  class="no_detail">';
        no_html  +=     "<td class='text-left nowrap'> " +
                            "<input class='layui-input' name='goods_no[]' value='1'/>" +
                        "</td>";
        no_html  +=     "<td class='text-left nowrap'>" +
                            "<input class='layui-input' name='store_num[]' value='10'/>" +
                        "</td>";
        no_html  +=     "<td class='text-left nowrap'> " +
                            "<input class='layui-input' name='price[]' value='100'/>" +
                        "</td>";
        no_html  +=     "<td class='text-left nowrap'> " +
                            "<input class='layui-input' name='sell_money[]' value='100'/>" +
                        "</td>";
        no_html  +=     "<td class='text-left nowrap'> " +
                            "<select name='spec_exp[]'>" +
                                "<option value='1'>66</option>"+
                                "<option value='2'>66</option>"+
                            "</select>"+
                        "</td>";
        no_html  +=     "<td class='text-left nowrap'>" +
                            "<a class=\"layui-btn layui-btn-sm layui-btn-danger del_no\">删 除</a>" +
                          /*  "<a class=\"layui-btn layui-btn-sm layui-btn-sm add_goods_no\">添 加</a>"+*/
                        "</td>"
        no_html  += "</tr>";
        $(".no_html").append(no_html);
        window.form.render();
    })
    $(document).on('click',".del_no",function (){
        var index= $(".del_no").index(this);
        console.log(index);
        $(".no_detail").eq(index).remove();
    })


    /**
     * 规格监听
     */

    form.on('select(spec_id)', function(data){
        if(data.value == 0) {
            $(".no_html").html(get_ht(0,'','未选择'));
        }else{
            window.form.render();
            $(".no_html").html('')
            var js_spec =  $(data.elem).find("option:selected").attr("data-spec");
            var spec_arr = $.parseJSON(js_spec);
            $.each(spec_arr,function (sk,sv) {
                $(".no_html").append(get_ht(sk,sv,''));
            })
        }
        $.each($('.spec_img'),function (ik,iv) {
            $('.spec_img').eq(ik).uploadOneImage();
        })

        window.form.render();
        $.each($(".no_html .uploadimage"),function (uk,uv) {
            $(".no_html .uploadimage").eq(uk).attr('data-inited',true)
            $(".no_html .uploadimage").eq(uk).attr('data-multiple',0)
        })


    })
    // 分类选择监听
    form.on('select(first_classify)', function(data){
        var cl_html = '<option value="0">请选择</option>';
        if(data.value == 0) {
            $("select[name='second_classify']").html(cl_html);
        }else{
            var cl_key =  data.elem[data.elem.selectedIndex].dataset.cl_key;
            var goods_spec = {:json_encode($goods_cate)};
            $.each(goods_spec[cl_key]['children'],function (ck,cv) {
                cl_html +='<option value="'+cv.id+'">'+cv.title+'</option>';
            })
            $("select[name='second_classify']").html(cl_html);
        }
        window.form.render();
    })

    $(document).on("click",'.up_img',function () {
        $(this).siblings('[name="file"]').click();
    })

    function upload_img(e,k) {
        var file = e.files[0]; //获取图片资源
        var fileTypes = ["bmp", "jpg", "png", "jpeg"];
        var bTypeMatch = false
        for (var i = 0; i < fileTypes.length; i++) {
            var start = file.name.lastIndexOf(".");
            var fileType = file.name.substring(start + 1);
            if (fileType.toLowerCase() == fileTypes[i]) {
                bTypeMatch = true;
                break;
            }
        }
        if (bTypeMatch) {
            if (file.size <= 1024 * 1024 * 50) {
                var farmData = new FormData();
                farmData.append("file", file)
                $.ajax("/api/Upload/upload", {
                    data: farmData,
                    processData: false,
                    contentType: false,
                    dataType: 'json',
                    type: 'post', //HTTP请求类型
                    headers: {
                        'zbtoken': localStorage.getItem("token"),
                        'enctype': 'multipart/form-data',
                    },
                    success: function (data) {
                        if(data.code == 1) {
                            $(".si_"+k).attr('src',data.data);
                            $(".up_"+k).val(data.data);
                            window.form.render();
                        }else{
                            layer.msg(data.msg);
                        }
                        console.log(data)
                    },
                    error: function (xhr, type, errorThrown) {
                        console.log(type);
                    }
                });
            } else {
                alert('仅支持不超过50M的图片');
                return false;
            }
        } else {
            alert('仅限bmp，jpg，png，jpeg图片格式');
            return false;
        }
    }


    function  get_ht(k,v,ms) {
        var  no = getCode();
        var no_html = '';
        no_html  += ' <tr  class="no_detail change_del" data-dh ="'+k+'">';
        no_html  +=     "<td class='text-left nowrap'> " +
            "<input class='layui-input' name='goods_no[]' value='"+no+"'/>" +
            "</td>";
        no_html  +=     "<td class='text-left nowrap'>" +
            "<input  class ='up_"+k+"'  name='spec_img[]' type='hidden' value=''>"+
            "<img  class ='up_img si_"+k+"' src='' alt='66' style='width: 30px ;height: 30px'>"+
            '<input style="display: none"  type="file" accept="image/png,image/jpeg,image/gif" name="file" onchange="upload_img(this,'+k+')">'+
            "</td>";
        no_html  +=     "<td class='text-left nowrap'>" +
            "<input type='number' step='1' min='1' class='layui-input' name='store_num[]' value=''/>" +
            "</td>";
        no_html  +=     "<td class='text-left nowrap'> " +
            "<input type='number' step='0.01' min='0' class='layui-input' name='price[]' value=''/>" +
            "</td>";
        no_html  +=     "<td class='text-left nowrap'> " +
            "<input type='number' step='0.01' min='0' class='layui-input' name='sell_money[]' value=''/>" +
            "</td>";
        no_html  +=     "<td class='text-left nowrap seckill_price'> " +
            "<input type='number' step='0.01' min='0' class='layui-input' name='seckill_money[]' value=''/>" +
            "</td>";
        no_html  +=     "<td class='text-left nowrap'> " +
            "<input readonly style='background-color: #e6e6e6' class='layui-input' name='spec_exp[]' placeholder='"+ms+"'  value='"+v+"'/>" +
            "</td>";
        no_html  +=     "<td class='text-left nowrap'>" +
            "<a class=\"layui-btn layui-btn-sm layui-btn-danger del_no\">删 除</a>" +
            /*  "<a class=\"layui-btn layui-btn-sm layui-btn-sm add_goods_no\">添 加</a>"+*/
            "</td>"
        no_html  += "</tr>";
        return   no_html;
    }

    function getCode() {
        var t = "ABCDEFGHJKMNPQRSTWXYZabcdefhijkmnprstwxyz2345678",
            n = "";
        for (i = 0; i < 5; i++) n += t.charAt(Math.floor(Math.random() * t.length));
        return "SY_" + n + Math.floor(Math.random() * 1000000000);
    };


    layui.use('form', function(){
        var form = layui.form,layer = layui.layer;
        //监听指定开关
        form.on('switch(is_seckill)', function(data){
            console.log(this.checked);
            if(this.checked){
                $("input[name='is_seckill']").val(1);

                $(".seckill_price").show();
                $(".seckill_box").show();
            }else{
                $("input[name='is_seckill']").val(0);
                $(".seckill_box").hide();
                $(".seckill_price").hide();
            }
        });
        //监听指定开关
        form.on('switch(freight_type)', function(data) {
            console.log(this.checked);
            if (this.checked) {
                $(".freight_mud").show();
                $(".postage").hide();
                $(".seckill_price").show();
            } else {
                $(".freight_mud").hide();
                $(".postage").show();
                $(".seckill_price").hide();
            }
        })
    })

    /**
     * 表单验证
     */
   var is_click = 0;
   $(document).on('click','#submit',function () {
       if(is_click == 1) return;
        is_click = 1;
        var name                    = $("input[name='name']").val();
        var desc                    = $("input[name='desc']").val();
        var cover                   = $("input[name='cover']").val();
        var poster                  = $("input[name='poster']").val();
        var video                   = $("input[name='video']").val();
        var first_classify          = $("select[name='first_classify']").val();
        var spec_id                 = $("select[name='spec_id']").val();
        var error_detail = 0;
        $.each($(".no_detail"),function (k,v) {
           if( !$(".no_detail").eq(k).find("input[name='goods_no[]']").val() ){
               error_detail = 1;
               return false;
           }
            if( !$(".no_detail").eq(k).find("input[name='store_num[]']").val() ){
                error_detail = 2;
                return false;
            }
            if( !$(".no_detail").eq(k).find("input[name='price[]']").val() ){
                error_detail = 3;
                return false;
            }
            if( !$(".no_detail").eq(k).find("input[name='sell_money[]']").val() ){
                error_detail = 4;
                return false;
            }
        })
       if(error_detail !==0 ){
           layer.msg('请完善规格信息');
           is_click = 0;
           return false;
       }
       if($("input[name='freight_type']").val() == 1 && $("select[name='freight_id']").val() == 0)
       {
           layer.msg('请选择运费模板');
           is_click = 0;
           return false;
       }
        is_click = 0;
        $("#subForm").submit();
    })



</script>