fastadmin 后台sku 插件

最新推荐文章于 2025-03-10 12:24:01 发布

梦夏夜

最新推荐文章于 2025-03-10 12:24:01 发布

阅读量190

点赞数 2

分类专栏： fastadmin 文章标签： fastadmin sku layui

本文链接：https://blog.youkuaiyun.com/jmkweb/article/details/145934852

版权

fastadmin 专栏收录该内容

7 篇文章

订阅专栏

老规矩先上效果图

新引用需要用到的js

define(['backend'], function (Backend) {

    require.config({
        paths: {
            // 'vue': '../js/vue',//js省略，如果是vue.min.js，就学vue.min
            'layui': '/assets/LayuiSpzj/layui/layui',//js省略，如果是vue.min.js，就学vue.min
            // 'skuTable': '/assets/laySku-master/lay-module/skuTable',//js省略，如果是vue.min.js，就学vue.min
            // 'sorTable': '/assets/laySku-master/lay-module/sorTable',//js省略，如果是vue.min.js，就学vue.min
        },
        shim: {
            // 'vue': {
            //     deps: ['jquery'],
            //     exports: '$.fn.extend'
            // },
            'layui': {
                deps: ['css!/assets/LayuiSpzj/layui/css/layui.css'],
                init:function (){
                    return this.layui.config({ base:'/assets/laySku-master/lay-module/'} );
                }
            },
            // 'skuTable': {
            //     // deps: ['/assets/laySku-master/layui/layui.js'],
            //     exports: 'skuTable'
            // },
            // 'sorTable': {
            //     deps: ['/assets/laySku-master/layui/layui.js','/assets/laySku-master/lay-module/sorTable.js'],
            //     exports: 'sorTable'
            // },
        }
    });

});

sku.html

<!doctype html>
<html lang="zh">
<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, user-scalable=no, initial-scale=1.0, maximum-scale=1.0, minimum-scale=1.0">
    <meta http-equiv="X-UA-Compatible" content="ie=edge">
    <title>动态SKU表</title>
    <!-- 引入 layui.css -->
    <link rel="stylesheet" type="text/css" href="__CDN__/assets/laySku-master/layui/css/layui.css"/>
    <script src="__CDN__/assets/laySku-master/layui/layui.js"></script>
    <!--<script src="https://www.layuicdn.com/layui-v2.5.5/layui.js"></script>-->
<!--    <script src="__CDN__/assets/laySku-master/lay-module/skuTable.js"></script>-->
</head>
<body>

<div class="layui-container">
    <form action="" class="layui-form fairy-form">
        <!-- sku参数表 -->
        <div class="layui-form-item">
            <label class="layui-form-label">规格：</label>
            <div class="layui-input-block">
                <div class="fairy-spec-table"></div>
            </div>
        </div>

        <!-- 动态sku表 -->
        <div class="layui-form-item">
            <label class="layui-form-label">SKU表：</label>
            <div class="layui-input-block">
                <div class="fairy-sku-table"></div>
            </div>
        </div>

        <div class="layui-form-item">
            <div class="layui-input-block">
                <button class="layui-btn" lay-submit lay-filter="submit">立即提交</button>
                <button type="reset" class="layui-btn layui-btn-primary">重置</button>
            </div>
        </div>
    </form>
</div>
<!-- 引入 layui.js -->
<!--<script src="./layui/layui.js"></script>-->
<!--&lt;!&ndash; 引入 skuTable.js &ndash;&gt;-->
<script src="__CDN__/assets/laySku-master/lay-module/skuTable.js"></script>
<script>

        var form = layui.form, skuTable = skuTable;

        //注意！！！ 注意！！！ 注意！！！
        //如果配置了相关接口请求的参数，请置本示例于服务器中预览，不然会有浏览器跨域问题
        //示例中的json文件仅做格式返回参考，若多次执行添加规格后再为新增后的规格添加规格值，会发现所有新增的规格都增加了该规格值。注意！此处并非是bug，原因是因为示例中返回的新增规格值id是重复的，而在正常接口请求每次返回的新增规则id是不一样的
        var obj = skuTable.render({
            //sku表相同属性值是否合并行
            rowspan: true,
            //上传接口地址
            //接口要求返回格式为 {"code": 200, "data": {"url": "xxx"}, "msg": ""}
            uploadUrl: './json/upload.json',
            //添加规格接口地址，如果为空则表示不允许增加规格
            //接口要求返回格式为 {"code": 200, "data": {"id": "xxx"}, "msg": ""}
            specCreateUrl: './json/specCreate.json',
            //添加规格值接口地址，如果为空则表示不允许增加规格值
            //接口要求返回格式为 {"code": 200, "data": {"id": "xxx"}, "msg": ""}
            specValueCreateUrl: './json/specValueCreate.json',
            //sku表格配置参数
            skuTableConfig: {
                thead: [
                    {title: '图片', icon: ''},
                    {title: '销售价(元)', icon: 'layui-icon-cols'},
                    {title: '市场价(元)', icon: 'layui-icon-cols'},
                    {title: '成本价(元)', icon: 'layui-icon-cols'},
                    {title: '库存', icon: 'layui-icon-cols'},
                    {title: '状态', icon: ''},
                ],
                tbody: [
                    {type: 'image', field: 'picture', value: '', verify: '', reqtext: ''},
                    {type: 'input', field: 'price', value: '0', verify: 'required|number', reqtext: '销售价不能为空'},
                    {type: 'input', field: 'market_price', value: '0', verify: 'required|number', reqtext: '市场价不能为空'},
                    {type: 'input', field: 'cost_price', value: '0', verify: 'required|number', reqtext: '成本价不能为空'},
                    {type: 'input', field: 'stock', value: '0', verify: 'required|number', reqtext: '库存不能为空'},
                    {type: 'select', field: 'status', option: [{key: '启用', value: '1'}, {key: '禁用', value: '0'}], verify: 'required', reqtext: '状态不能为空'},
                ]
            },
            //规格数据, 一般从接口获取
            specData: [
                {
                    id: "1",
                    title: "颜色",
                    child: [
                        {id: "1", title: "红", checked: true},
                        {id: "2", title: "黄", checked: false},
                        {id: "3", title: "蓝", checked: false}
                    ]
                }, {
                    id: "2",
                    title: "尺码",
                    child: [
                        {id: "4", title: "S", checked: true},
                        {id: "5", title: "M", checked: true},
                        {id: "6", title: "L", checked: false},
                        {id: "7", title: "XL", checked: false}
                    ]
                }, {
                    id: "3",
                    title: "款式",
                    child: [
                        {id: "8", title: "男款", checked: true},
                        {id: "9", title: "女款", checked: true}
                    ]
                }
            ],
            //sku数据
            //新增的时候为空对象
            //编辑的时候可以从后台接收，会自动填充sku表，可以去掉注释看效果
            // skuData: {
            //     "skus[1-4-8][picture]": "https://cdn.layui.com/upload/2019_5/168_1559291577683_9348.png",
            //     "skus[1-4-8][price]": "100",
            //     "skus[1-4-8][market_price]": "200",
            //     "skus[1-4-8][cost_price]": "50",
            //     "skus[1-4-8][stock]": "18",
            //     "skus[1-4-8][status]": "0",
            //     "skus[1-4-9][picture]": "",
            //     "skus[1-4-9][price]": "0",
            //     "skus[1-4-9][market_price]": "0",
            //     "skus[1-4-9][cost_price]": "0",
            //     "skus[1-4-9][stock]": "0",
            //     "skus[1-4-9][status]": "1",
            //     "skus[1-5-8][picture]": "",
            //     "skus[1-5-8][price]": "0",
            //     "skus[1-5-8][market_price]": "0",
            //     "skus[1-5-8][cost_price]": "0",
            //     "skus[1-5-8][stock]": "0",
            //     "skus[1-5-8][status]": "1",
            //     "skus[1-5-9][picture]": "",
            //     "skus[1-5-9][price]": "0",
            //     "skus[1-5-9][market_price]": "0",
            //     "skus[1-5-9][cost_price]": "0",
            //     "skus[1-5-9][stock]": "0",
            //     "skus[1-5-9][status]": "1"
            // }
        });

        form.on('submit(submit)', function (data) {
            //获取规格数据
            console.log(obj.getSpecData());
            //获取表单数据
            console.log(data.field);

            var state = Object.keys(data.field).some(function (item, index, array) {
                return item.startsWith('skus');
            });
            state ? layer.alert(JSON.stringify(data.field), {title: '提交的数据'}) : layer.msg('sku表数据不能为空', {icon: 5, anim: 6});
            return false;
        });
</script>
</body>
</html>

edit.html

        <div id="t-2" class="tab-pane ">
            <iframe id="iframe" onload="GetIframeStatus()" frameborder=0 width=100% height=100% style="display: block;min-height: 1000px" marginheight=0 marginwidth=0 scrolling=auto src="{:url('goods/goods/attr')}?ids={$row.id}"></iframe>
            <input type="hidden" id="goods_attr_value" name="row[goods_attr_value]" value="{$row.goods_attr_value|htmlentities}">
            <!--            <input type="text" id="goods_attr_value" name="row[goods_attr_value]" value="{$row.goods_attr_value|htmlentities}">-->
            <input type="hidden" id="goods_attr" name="row[goods_attr]" value="{$row.goods_attr|htmlentities}">
        </div>

<script !src="">
    var Timeout;
    var iframe
    /*页面加载完执行*/
    window.onload = function () {
        iframe = document.getElementById("iframe");
        GetIframeStatus(iframe)
    }
    /*窗口改变时执行*/
    window.onresize = function () {
        GetIframeStatus(iframe)
    }

    // iframe高度自适应
    function GetIframeStatus(iframe,Height) {
        Timeout = setTimeout(function () {
            if (!iframe) return;
            iframe.height = (iframe.Document ? iframe.Document.body.scrollHeight : iframe.contentDocument.body.offsetHeight)
        }, 200)
    }

    function receiveValue(value) {
        // console.log("Received value in parent:", value);
        // 处理接收到的值
        // console.log("Received value in parent:", JSON.stringify(value));
        $("#goods_attr_value").val(JSON.stringify(value));
    }
</script>