NN2023021801/app/admin/view/mall/goods/add.html

<div class="layuimini-container" style="width: 80%;float: left">
    <form id="app-form" class="layui-form layuimini-form fairy-form">

        <blockquote class="layui-elem-quote">
            <div class="layui-bg-gray" style="">
                <div class="layui-card">
                    <div class="layui-card-header"><b>基础信息</b></div>
                    <div class="layui-card-body">




                        <div class="layui-form-item">
                            <label class="layui-form-label">商品分类</label>
                            <div class="layui-input-block">
                                <select name="category" lay-verify="required" data-select="{:url('mall.cate/index')}"
                                        data-fields="id,name">
                                </select>
                            </div>
                        </div>

                        <div class="layui-form-item">
                            <label class="layui-form-label">商品类型</label>
                            <div class="layui-input-block">
                                <select name="goods_type" lay-verify="required" data-select="{:url('mall.GoodsBuyType/index')}"
                                        data-fields="id,name">
                                </select>
                            </div>
                        </div>






                        <div class="layui-form-item">
                            <label class="layui-form-label">福袋类型</label>
                            <div class="layui-input-block">
                                <select name="box_type"  data-select="{:url('mall.GoodsBuyType/boxouttype')}"
                                        data-fields="id,name">
                                </select>
                            </div>
                        </div>




<!--                        <div class="layui-form-item">-->
<!--                            <label class="layui-form-label">专区类型</label>-->
<!--                            <div class="layui-input-block">-->
<!--                                <select name="menu_id"  data-select="{:url('mall.GoodsMenu/index')}"-->
<!--                                        data-fields="id,name">-->
<!--                                </select>-->
<!--                            </div>-->
<!--                        </div>-->





                        <div class="layui-form-item expressDelivery">
                            <label class="layui-form-label">供应商</label>
                            <div class="layui-input-block">
                                <select name="supplier" lay-verify="required">
                                    <option value="">请选择</option>
                                    {foreach $shop_supplier as $v}
                                    <option value="{$v.id}">{$v.name}</option>
                                    {/foreach}
                                </select>
                            </div>
                        </div>

                        <div class="layui-form-item">
                            <label class="layui-form-label">供货商编码</label>
                            <div class="layui-input-block">
                                <input type="text" name="supplier_code" class="layui-input"
                                       placeholder="请输入购货商编码" value="">
                            </div>
                        </div>

                        <div class="layui-form-item">
                            <label class="layui-form-label">商品名称</label>
                            <div class="layui-input-block">
                                <input type="text" name="goods_name" class="layui-input" lay-verify="required"
                                       placeholder="请输入商品名称" value="">
                            </div>
                        </div>
                        <div class="layui-form-item">
                            <label class="layui-form-label">库存单位</label>
                            <div class="layui-input-block">
                                <input type="text" name="inventory_unit" class="layui-input" lay-verify="required"
                                       placeholder="请输入商品库存单位，如(件)" value="">
                            </div>
                        </div>
                        <div class="layui-form-item layui-form-text">
                            <label class="layui-form-label">商品备注</label>
                            <div class="layui-input-block">
                                <textarea name="note" class="layui-textarea" placeholder="请输入备注信息"></textarea>
                            </div>
                        </div>
                        <div class="layui-form-item">
                            <label class="layui-form-label">虚拟销量</label>
                            <div class="layui-input-block">
                                <input type="text" name="sales_volume" class="layui-input" lay-verify="required"
                                       placeholder="默认生成60-1000起始销量，按真实销量自增" value="">
                            </div>
                        </div>
                        <div class="layui-form-item">
                            <label class="layui-form-label">排序</label>
                            <div class="layui-input-block">
                                <input type="number" name="sort" class="layui-input" placeholder="排序，默认按发布时间" value="0">
                            </div>
                        </div>




                        <div class="layui-form-item">
                            <label class="layui-form-label required">商品封面图</label>
                            <div class="layui-input-block layuimini-upload">
                                <input name="goods_img" class="layui-input layui-col-xs6"
                                       lay-verify="required"
                                       placeholder="请上传分类图片" value="">
                                <span><a class="layui-btn" data-upload="goods_img" data-upload-number="one"
                                         data-upload-exts="png|jpg|ico|jpeg" data-upload-icon="image"><i
                                        class="fa fa-upload"></i> 上传</a></span>
                                <span><a class="layui-btn layui-btn-normal" id="select_logo"
                                         data-upload-select="goods_img" data-upload-number="one"
                                         data-upload-mimetype="image/*"><i class="fa fa-list"></i> 选择</a></span>
                            </div>
                        </div>




                        <div class="layui-form-item">
                            <label class="layui-form-label required">福袋缩略图</label>
                            <div class="layui-input-block layuimini-upload">


                                <input name="box_pic" class="layui-input layui-col-xs6"

                                       placeholder="请上传分类图片" value="">
                                <span><a class="layui-btn" data-upload="box_pic" data-upload-number="one"
                                         data-upload-exts="png|jpg|ico|jpeg" data-upload-icon="image"><i
                                        class="fa fa-upload"></i> 上传</a></span>

                                <span><a class="layui-btn layui-btn-normal" id="box_pic"
                                         data-upload-select="box_pic" data-upload-number="one"
                                         data-upload-mimetype="image/*"><i class="fa fa-list"></i> 选择</a></span>

                            </div>
                        </div>



<!--                        <div class="layui-form-item">-->
<!--                            <label class="layui-form-label required">福袋缩略图</label>-->
<!--                            <div class="layui-input-block layuimini-upload">-->
<!--                                <input name="goods_img" class="layui-input layui-col-xs6"-->
<!--                                       lay-verify="required"-->
<!--                                       placeholder="请上传分类图片" value="">-->
<!--                                <span><a class="layui-btn" data-upload="goods_img" data-upload-number="one"-->
<!--                                         data-upload-exts="png|jpg|ico|jpeg" data-upload-icon="image"><i-->
<!--                                        class="fa fa-upload"></i> 上传</a></span>-->
<!--                                <span><a class="layui-btn layui-btn-normal" id="select_logo"-->
<!--                                         data-upload-select="goods_img" data-upload-number="one"-->
<!--                                         data-upload-mimetype="image/*"><i class="fa fa-list"></i> 选择</a></span>-->
<!--                            </div>-->
<!--                        </div>-->


                        <div class="layui-form-item expressDelivery">
                            <label class="layui-form-label">运费模板</label>
                            <div class="layui-input-block">
                                <select name="post_template_id" lay-verify="required"
                                        data-select="{:url('mall.ExpressDelivery/index')}"
                                        data-fields="id,name">
                                </select>
                            </div>
                        </div>

                        <div class="layui-form-item expressDelivery">
                            <label class="layui-form-label">购物须知模板</label>
                            <div class="layui-input-block">
                                <select name="buynote_template_id" lay-verify="required"
                                        data-select="{:url('mall.ShopBuynote/index')}"
                                        data-fields="id,title" data-value="1">
                                </select>
                            </div>
                        </div>

<!--                        <div class="layui-form-item">-->
<!--                            <label class="layui-form-label">是否限购</label>-->
<!--                            <div class="layui-input-block">-->
<!--                                <select name="restrictions">-->
<!--                                    <option value="">请选择</option>-->
<!--                                    <option value="1">是</option>-->
<!--                                    <option value="0" selected>否</option>-->
<!--                                </select>-->
<!--                            </div>-->
<!--                        </div>-->

<!--                        <div class="layui-form-item expressDelivery">-->
<!--                            <label class="layui-form-label">是否抢购</label>-->
<!--                            <div class="layui-input-block">-->
<!--                                <select name="rush_buy">-->
<!--                                    <option value="">请选择</option>-->
<!--                                    <option value="1">是</option>-->
<!--                                    <option value="0" selected>否</option>-->
<!--                                </select>-->
<!--                            </div>-->
<!--                        </div>-->

<!--                        <div class="layui-form-item">-->
<!--                            <label class="layui-form-label">赠送金卡会员</label>-->
<!--                            <div class="layui-input-block">-->
<!--                                <select name="give_vip">-->
<!--                                    <option value="">不赠送</option>-->
<!--                                    <option value="0">月卡会员</option>-->
<!--                                    <option value="0">年卡会员</option>-->
<!--                                </select>-->
<!--                            </div>-->
<!--                        </div>-->

                        <div class="layui-form-item">
                            <label class="layui-form-label">返利积分立刻到账</label>
                            <div class="layui-input-block">
                                <input type="number" name="rebate_score" class="layui-input" placeholder="返利积分" value="0">
                            </div>
                        </div>



                        <div class="layui-form-item">
                            <label class="layui-form-label">规格参数</label>
                            <div class="layui-input-block">
                                <input type="text" name="spec_name" lay-verify="required" class="layui-input"  placeholder="显示规格比如：60个每件、高40cm宽60cm长400cm、红色、xl" value="" >
                            </div>
                        </div>


                    </div>
                </div>
            </div>
        </blockquote>


        <blockquote class="layui-elem-quote">
            <div class="layui-bg-gray" style="">
                <div class="layui-card">
                    <div class="layui-card-header"><b>商品相册</b></div>
                    <div class="layui-card-body">
                        <div class="layui-form-item">
                            <div class="layui-input-block layuimini-upload">
                                <input name="goods_img_banner" class="layui-input layui-col-xs6"
                                       lay-verify="required"
                                       placeholder="请上传商品相册" value="">

                                <span><a class="layui-btn" data-upload="goods_img_banner" data-upload-number="more"
                                         data-upload-exts="png|jpg|ico|jpeg" data-upload-icon="image"><i
                                        class="fa fa-upload"></i> 上传</a></span>
                                <span><a class="layui-btn layui-btn-normal" id="goods_img_banner"
                                         data-upload-select="goods_img_banner"
                                         data-upload-number="more" data-upload-mimetype="image/*"><i
                                        class="fa fa-list"></i> 选择图片库</a></span>
                            </div>
                        </div>
                    </div>
                </div>
            </div>
        </blockquote>


        <blockquote class="layui-elem-quote">
            <div class="layui-bg-gray" style="">
                <div class="layui-card">
                    <div class="layui-card-header"><b>商品规格</b></div>
                    <div class="layui-card-body">
<!--                        <div class="layui-form-item">-->
<!--                            <label class="layui-form-label">是否开启多规格</label>-->
<!--                            <div class="layui-input-block">-->
<!--                                <input type="checkbox" name="is_exist_many_spec" lay-skin="switch" lay-text="开启|关闭"-->
<!--                                       lay-filter="is_exist_many_spec" value="1">-->
<!--                            </div>-->
<!--                        </div>-->

                        <div id="default_spec">
                            <table class="layui-table">
                                <colgroup>
                                    <col width="150">
                                    <col width="200">
                                    <col width="200">
                                    <col width="200">
                                    <col>
                                </colgroup>
                                <thead>
                                <tr>
                                    <th>销售价(元)</th>
                                    <th>市场价(元)</th>
                                    <th>成本价(元)</th>
                                    <th>库存</th>
<!--                                    <th>规格(比如 红色/500ml/长40宽60高20)</th>-->
                                </tr>
                                </thead>
                                <tbody>
                                <tr>
                                    <td><input type="text" name="default_skus[price]" class="layui-input"
                                               lay-verify="required"
                                               placeholder="" value=""></td>
                                    <td><input type="text" name="default_skus[original_price]" class="layui-input"
                                               lay-verify="required"
                                               placeholder="" value=""></td>
                                    <td><input type="text" name="default_skus[cost_price]" class="layui-input"
                                               lay-verify="required"
                                               placeholder="" value=""></td>
                                    <td><input type="text" name="default_skus[stock]" class="layui-input"
                                               lay-verify="required"
                                               placeholder="" value=""></td>
<!--                                    <td><input type="text" name="default_skus[stock]" class="layui-input"-->
<!--                                               lay-verify="required"-->
<!--                                               placeholder="" value=""></td>-->
                                </tr>
                                </tbody>
                            </table>
                        </div>

                        <div id="spec_action_box" style="display:none">
                            <div class="layui-form-item">
                                <label class="layui-form-label">选择属性模板</label>
                                <div class="layui-input-block">
                                    <select id="spec_mb" lay-filter="spec_mb"
                                            data-select="{:url('mall.GoodsSpecType/getSpec')}"
                                            data-fields="id,title">
                                    </select>
                                    <a class="layui-btn add_spec_artt">创建属性模板</a>
                                </div>
                            </div>

                            <div class="spec_rows" style="margin-bottom: 20px">
                                <div class="fairy-spec-table"></div>
                            </div>
                        </div>
                    </div>
                    <div class="fairy-sku-table"></div>

                </div>
            </div>
        </blockquote>


        <blockquote class="layui-elem-quote">
            <div class="layui-bg-gray" style="">
                <div class="layui-card">
                    <div class="layui-card-header"><b>商品详情</b></div>
                    <div class="layui-card-body">
                        <div class="layui-form-item">
                            <textarea name="goods_remark" rows="22" class="layui-textarea editor"
                                      placeholder="请输入商品描述"></textarea>
                        </div>
                    </div>
                </div>
            </div>
        </blockquote>

        <div class="hr-line"></div>
        <div class="layui-form-item text-center">
            <button type="submit" class="layui-btn layui-btn-normal layui-btn-sm" lay-submit>确认</button>
            <button type="reset" class="layui-btn layui-btn-primary layui-btn-sm">重置</button>
        </div>

    </form>
</div>

<div style="  width: 50px;
float:right;
            position:fixed;
            top: 20%; /*偏移*/
            right: 10%;

            margin-top: -50px; ">
    <ul class="layui-nav layui-nav-tree layui-inline " lay-filter="demo" style="margin-right: 10px;">
        <li class="layui-nav-item"><a href="">基础信息</a></li>
        <li class="layui-nav-item"><a href="">商品规格</a></li>
        <li class="layui-nav-item"><a href="">商品相册</a></li>
        <li class="layui-nav-item"><a href="">商品详情</a></li>
    </ul>
</div>
<script src="__STATIC__/plugs/layui-v2.5.6/lay/modules/skuTable.js"></script>
<script src="__STATIC__/plugs/lay-module/tableSelect/tableSelect.js"></script>
<script>

    layui.use(['jquery', 'layer', 'skuTable', 'tableSelect'], function () {
        var $ = layui.$ //重点处
            , layer = layui.layer
            , form = layui.form
            , skuTable = layui.skuTable
            , tableSelect = layui.tableSelect

        $("body").on("click", ".upspecimg", function () {
            var dd = $(this).attr('data_index');
            tableSelect.render({
                elem: ".upspecimg",
                checkedKey: 'class',
                searchType: 'more',
                searchList: [
                    {searchKey: 'title', searchPlaceholder: '请输入文件名'},
                ],
                table: {
                    url: "{:url('ajax/getUploadFiles')}",
                    cols: [[
                        {type: 'radio'},
                        {field: 'id', title: 'ID'},
                        {
                            field: 'url',
                            minWidth: 80,
                            search: false,
                            title: '图片信息',
                            imageHeight: 40,
                            align: "center",
                            templet: function (d) {
                                return '<span><img src="' + d.url + '" style="width: 60px;height: 60px"></span>';
                            }
                        },
                        {field: 'original_name', width: 150, title: '文件原名', align: "center"},
                        {field: 'mime_type', width: 120, title: 'mime类型', align: "center"},
                        {field: 'create_time', width: 200, title: '创建时间', align: "center", search: 'range'},
                    ]]
                },
                done: function (e, data) {
                    $(`.imgp_${dd}`).val(data['data'][0].url);
                    $(`.imgd_${dd}`).css('width', '50px')
                    $(`.imgd_${dd}`).css('height', '50px')
                    $(`.imgd_${dd}`).attr('src', data['data'][0].url);

                    $('body .upspecimg').unbind('click');
                }
            })
        })

        form.on('switch(is_exist_many_spec)', function (data) {
            return ;
            if (this.checked) {
                $('#default_spec input').each(function (index, val) {
                    $(val).removeAttr('lay-verify').removeAttr('lay-reqtext');
                    $(val).attr('disabled', true)
                })
                form.render();
                $("#default_spec").hide();
                $('#spec_action_box').show();
            } else {
                $('#default_spec input').each(function (index, val) {
                    $(val).attr('lay-verify', 'required').attr('lay-reqtext');
                    $(val).removeAttr('disabled')
                })
                form.render();
                $("#default_spec").show();
                $('.fairy-sku-table').hide();
                $('#spec_action_box').hide();
            }
        });

        form.on('select(spec_mb)', function (data) {
            if (data.value == 0) return;
            layer.load(1);
            $('#spec_mb').attr('data-selectid', data.value);
            $.ajax({
                url: "{:url('mall.GoodsSpecType/getSpecItems')}",
                data: {id: data.value},
                type: 'post',
                success: function (res) {
                    layer.closeAll()
                    var specData = res.data;
                    skuTable.render({
                        //sku表相同属性值是否合并行
                        rowspan: true,
                        //上传接口地址
                        //接口要求返回格式为 {"code": 200, "data": {"url": "xxx"}, "msg": ""}
                        uploadUrl: "{:url('Ajax/upload')}",
                        //添加规格接口地址，如果为空则表示不允许增加规格
                        //接口要求返回格式为 {"code": 200, "data": {"id": "xxx"}, "msg": ""}
                        specCreateUrl: "{:url('mall.GoodsSpecType/addSpec')}",
                        //添加规格值接口地址，如果为空则表示不允许增加规格值
                        //接口要求返回格式为 {"code": 200, "data": {"id": "xxx"}, "msg": ""}
                        specValueCreateUrl: "{:url('mall.GoodsSpecType/addSpec')}",
                        //sku表格配置参数
                        skuTableConfig: {
                            thead: [
                                {title: '规格图片', icon: '', width: 200},
                                {title: '销售价(元)', icon: 'layui-icon-cols'},
                                {title: '市场价(元)', icon: 'layui-icon-cols'},
                                {title: '成本价(元)', icon: 'layui-icon-cols'},
                                {title: '重量(kg)', icon: 'layui-icon-cols'},
                                {title: '库存', icon: 'layui-icon-cols'},
                            ],
                            tbody: [
                                {type: 'image', field: 'picture', value: '', verify: '', reqtext: ''},
                                {
                                    type: 'input',
                                    field: 'price',
                                    value: '0',
                                    verify: 'required|number',
                                    reqtext: '销售价不能为空'
                                },
                                {
                                    type: 'input',
                                    field: 'original_price',
                                    value: '0',
                                    verify: 'required|number',
                                    reqtext: '市场价不能为空'
                                },
                                {
                                    type: 'input',
                                    field: 'cost_price',
                                    value: '0',
                                    verify: 'required|number',
                                    reqtext: '成本价不能为空'
                                },
                                {
                                    type: 'input',
                                    field: 'weight',
                                    value: '0',
                                    verify: 'required|number',
                                    reqtext: '重量不能为空'
                                },
                                {
                                    type: 'input',
                                    field: 'stock',
                                    value: '0',
                                    verify: 'required|number',
                                    reqtext: '库存不能为空'
                                },
                            ]
                        },
                        //规格数据, 一般从接口获取
                        specData: specData,
                    });
                }
            })
        })

        $('.add_spec_artt').click(function () {
            layer.alert('内容', {
                title: `添加规格属性`,
                area: ['400px', '200px'],
                content:
                    `<form id="add_spec_form"><input type="hidden" name="pid" value="0"><input id="zadd_spec_title" name="spec" lay-verify="required" class="layui-input" placeholder="属性模板名" style="width: 100%"></form>`
                , yes: function (index, layero) {
                    var zadd_spec_title = $('#zadd_spec_title').val();
                    if(!zadd_spec_title) {
                        layer.msg('名称不能为空');
                        return false;
                    }
                    layer.load(1, {
                        shade: [0.1,'#fff'] //0.1透明度的白色背景
                    });
                    $.post("{:url('mall.GoodsSpecType/addSpec')}", $('#add_spec_form').serialize(), function (result) {
                        if (result.code == 1) {
                            layer.closeAll();
                            layer.alert(result.msg, {
                                yes: function () {
                                    $("#spec_mb").append("<option value=" + result.data.id + ">" + zadd_spec_title + "</option>");
                                    form.render();
                                    layer.closeAll();
                                }, cancel: function () {
                                    $("#spec_mb").append("<option value=" + result.data.id + ">" + zadd_spec_title + "</option>");
                                    form.render();
                                    layer.closeAll();
                                }
                            });
                        } else {
                            layer.alert(result.msg);
                        }
                    });
                }
            })
        })






    });

</script>