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

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

<style>
    table .uploadimage{
        width: 50px;
        height: 50px;
    }
</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}
                                        {if $vo.first_classify == $cv['id'] }
                                            <option selected data-cl_key="{$ck}" value="{$cv['id']}">{$cv['title']}</option>
                                        {else}
                                            <option data-cl_key="{$ck}" value="{$cv['id']}">{$cv['title']}</option>
                                        {/if}
                                    {/foreach}
                                {/if}
                            </select>
                        </div>
                        <div class="layui-input-inline">
                            <select name="second_classify" lay-filter ="second_classify">
                                <option value="0">请选择</option>
                                {if !empty($goods_cate)}
                                    {foreach $goods_cate as $ck=>$cv}
                                            {if $vo.first_classify == $cv['id'] }
                                                {foreach $cv['children'] as $cln}
                                                    {if $vo.second_classify == $cln['id'] }
                                                        <option selected  value="{$cln['id']}">{$cln['title']}</option>
                                                    {else}
                                                        <option  value="{$cln['id']}">{$cln['title']}</option>
                                                    {/if}
                                                {/foreach}
                                            {/if}
                                    {/foreach}
                                {/if}
                            </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'}" />
                            {if $vo.is_seckill == 1}
                            <input type="checkbox"  lay-filter="is_seckill" checked="checked"  lay-skin="switch" lay-text="ON|OFF">
                            {else}
                            <input type="checkbox"  lay-filter="is_seckill"   lay-skin="switch" lay-text="ON|OFF">
                            {/if}
                        </div>
                    </div>

                    <div class="seckill_box"  {if !$vo.is_seckill}style="display: none"{/if}>
                        <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">
                            <input name="spec_id" type="hidden" value="{$vo.spec_id|default=''}">
                            <input  class="layui-input"  readonly style="background-color:#e6e6e6 " name="" id="spec_id"  value="{$goods_spec[$vo.spec_id]['title']|default=''}" />
                        </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">
                            {foreach $vo.spec as $sk=>$sv}
                            <tr class="no_detail">
                                <td class='text-left nowrap'>
                                    <input class='layui-input' name='goods_no[]' value="{$sv['goods_no']}"/>
                                </td>
                                <td class='text-left nowrap'>
                                    <input class="spec_img" name="spec_img[]" type="hidden" value="{$sv.spec_img|default=''}">
                                </td>

                                <td class='text-left nowrap'>
                                    <input class='layui-input' name='store_num[]' value="{$sv['store_num']}"/>
                                </td>
                                <td class='text-left nowrap'>
                                    <input class='layui-input' name='price[]' value="{$sv['price']}"/>
                                </td>
                                <td class='text-left nowrap'>
                                    <input class='layui-input' name='sell_money[]' value="{$sv['sell_money']}"/>
                                </td>
                                <td class='text-left nowrap seckill_price' style="display: none">
                                    <input class='layui-input' name='seckill_money[]' value="{$sv['seckill_money']|default=''}"/>
                                </td>
                                <td class='text-left nowrap'>
                                    <input readonly style="background-color: #e6e6e6" class='layui-input' name='spec_exp[]' value="{$sv['spec_exp']}"/>
                                </td>
                                <td class='text-left nowrap'>
                                    <a class="layui-btn layui-btn-sm layui-btn-danger del_no">删 除</a>
                                </td>
                            </tr>
                            {/foreach}
                            </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">
                                {if $vo.freight_type == 1}
                                <input type="checkbox"  lay-filter="freight_type" checked="checked"  lay-skin="switch" lay-text="ON|OFF">
                                {else}
                                <input type="checkbox"  lay-filter="freight_type"  lay-skin="switch" lay-text="ON|OFF">
                                {/if}
                                <input type="hidden" name="freight_type"  value="{$vo.freight_type|default='0'}" />
                            </div>
                        </div>

                        <div class="layui-form-item freight_mud" {if !$vo.freight_type}style="display:none"{/if}>
                            <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}
                                            {if $vo.freight_id ==$tv['id'] }
                                                <option selected value="{$tv['id']}">{$tv['name']}</option>
                                            {else}
                                                <option value="{$tv['id']}">{$tv['name']}</option>
                                            {/if}
                                        {/foreach}
                                    {/if}
                                </select>
                            </div>
                        </div>


                        <div class="layui-form-item postage"   {if $vo.freight_type}style="display:none"{/if}>
                            <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>
                    {notempty name='vo.id'}<input type='hidden' value='{$vo.id}' name='id'>{/notempty}
                    <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>
    </form>

</div>
<script src="/static/plugs/layui/layui.all.js" charset="utf-8"></script>
<script>
    window.form.render();
    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});
    })


    $.each($('.spec_img'),function (ik,iv) {
        $('.spec_img').eq(ik).uploadOneImage();
    })
    $('[name="cover"]').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{
            $(".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,''));
            })
        }
    })
    // 分类选择监听
    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();
    })


   //$(".no_html").html(get_ht(0,'','未选择'));

    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 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'> " +
            "<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) {
                $("input[name='freight_type']").val(1);
                $(".freight_mud").show();
                $(".postage").hide();
                $(".seckill_price").show();
            } else {
                $("input[name='freight_type']").val(0);
                $(".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>