feat(order): 优化退款列表页面布局

Administrator

2025-05-19 ab47d0501f909b936bfbfe76c1407a19eaaedcb2

 src/main/resources/templates/febs/views/modules/vip/vip-setting.html

@@ -3,37 +3,33 @@
        <form class="layui-form" action="" lay-filter="vip-setting-form">
            <div class="layui-card">
                <div class="layui-card-body">
                    <blockquote class="layui-elem-quote blue-border">会员日设置</blockquote>
                    <div class="layui-form-item">
                        <label class="layui-form-label ">会员日：</label>
                        <div class="layui-input-block">
                            <input type="text" name="vipDate" id="vipDate" autocomplete="off" class="layui-input" >
                        <div class="layui-col-lg6">
                            <label class="layui-form-label ">会员日：</label>
                            <div class="layui-input-block">
                                <input type="text" name="vipDate" id="vipDate" autocomplete="off" class="layui-input" >
                            </div>
                        </div>
                    </div>
<!--                    <div class="layui-form-item">-->
<!--                        <label class="layui-form-label ">每日提现上限：</label>-->
<!--                        <div class="layui-input-block">-->
<!--                            <input type="text" name="allCashOut" data-th-id="${cashout.allCashOut}"-->
<!--                                   lay-verify="number" autocomplete="off" class="layui-input" >-->
<!--                        </div>-->
<!--                    </div>-->
<!--                    <div class="layui-form-item">-->
<!--                        <label class="layui-form-label ">提现手续费：</label>-->
<!--                        <div class="layui-input-block">-->
<!--                            <input type="text" name="serviceFee" data-th-id="${cashout.serviceFee}"-->
<!--                                   lay-verify="text" autocomplete="off" class="layui-input" >-->
<!--                        </div>-->
<!--                        <div class="layui-word-aux" style="margin-left: 150px;">提现手续费:直接输入百分比，例如25%，直接输入25</div>-->

<!--                    </div>-->
<!--                    <div class="layui-form-item">-->
<!--                        <label class="layui-form-label">提现时间：</label>-->
<!--                        <div class="layui-input-block">-->
<!--                            <input type="radio" name="workingDays" value="1" title="工作日">-->
<!--                            <input type="radio" name="workingDays" value="2" title="每一天">-->
<!--                        </div>-->
<!--                    </div>-->

                    <blockquote class="layui-elem-quote blue-border">失活客户优惠券</blockquote>

                    <div class="layui-form-item">
                        <div class="layui-col-lg6">
                            <table id="unAliveCouponItem" lay-filter="unAliveCouponItem"></table>
                        </div>
                    </div>

                    <blockquote class="layui-elem-quote blue-border">会员规则</blockquote>
                    <div class="layui-form-item">
                        <div style="border: 1px solid #ccc;">
                            <div id="toolbar-container" class="toolbar"></div>
                            <div id="editor-container" class="text" style="height: 450px;"></div>
                        </div>
                    </div>
                </div>

                <div class="layui-card-footer">
                    <button class="layui-btn layui-btn-normal" lay-submit="" lay-filter="vip-setting-form-submit" id="submit">保存</button>
                </div>
@@ -53,20 +49,37 @@
    .layui-table-form .layui-form-item {
        margin-bottom: 20px !important;
    }

    .layui-table-cell {
        height:auto;
    }
</style>

<script type="text/html" id="toolbar1">
    <div class="layui-btn-container">
        <button class="layui-btn layui-btn-sm" type="button" lay-event="addCoupon">新增</button>
        <button class="layui-btn layui-btn-danger layui-btn-sm" type="button" lay-event="delCoupon">删除</button>
    </div>
</script>

<script type="text/html" id="detailsEvent">
    <input type="text" name="couponName" autocomplete="off" data-index="{{d.index}}" value="{{d.couponName}}" class="layui-input couponSelect" readonly>
    <input type="text" name="couponId" autocomplete="off" value="{{d.couponId}}" class="layui-input couponId febs-hide" readonly>
</script>
<script data-th-inline="javascript" type="text/javascript">
    layui.use(['dropdown', 'jquery', 'validate', 'febs', 'form', 'eleTree', 'laydate'], function () {
    layui.use(['dropdown', 'jquery', 'validate', 'febs', 'form', 'eleTree', 'laydate', 'table'], function () {
        var $ = layui.jquery,
            febs = layui.febs,
            form = layui.form,
            table = layui.table,
            laydate = layui.laydate,
            unAliveCouponItemsData = [],
            vipSetting = [[${vipSetting}]],
            validate = layui.validate,
            $view = $('#vip-setting');

        form.verify(validate);

        initVipSettingValue();

        form.render();

@@ -75,19 +88,193 @@
            ,format: 'MM-dd'
        });

        table.render({
            elem: '#unAliveCouponItem'
            ,toolbar:"#toolbar1"
            ,cols: [[ //表头
                {type: 'checkbox'}
                , {field: 'day', title: '失活天数', edit:'text', width:250}
                ,{templet: '#detailsEvent', title: '优惠券', width:350}
            ]]
            ,data: []
        });

        table.on('toolbar(unAliveCouponItem)', function(obj){
            var data = obj.data;

            if(obj.event === 'delCoupon'){
                var hasData = table.cache['unAliveCouponItem'];
                var checkData = table.checkStatus('unAliveCouponItem').data;

                if (checkData.length <= 0) {
                    febs.alert.warn('请选择删除数据');
                    return;
                }

                for (let i = 0; i < checkData.length; i++) {
                    var delData = checkData[i];
                    for (let j = 0; j < hasData.length; j++) {
                        if (hasData[j].index == delData.index) {
                            hasData.splice(j, 1);
                            break;
                        }
                    }
                }

                for (let i = 0; i < hasData.length; i++) {
                    hasData[i].index = i + 1;
                }

                unAliveCouponItemsData=hasData;
                reloadTable(hasData);
            }

            if(obj.event === 'addCoupon'){
                var addData = {};
                addTableDate(addData);
            }
        });

        form.on('submit(vip-setting-form-submit)', function (data) {
            data.field.items = unAliveCouponItemsData;
            data.field.rule = editor.txt.html();
            $.ajax({
                'url':ctx + 'admin/vip/config/vipSetting',
                'type':'post',
                'dataType':'json',
                'headers' : {'Content-Type' : 'application/json;charset=utf-8'}, //接口json格式
                'traditional': true,//ajax传递数组必须添加属性
                'data':JSON.stringify(data.field),
                'success':function (data) {
                    if(data.code==200){
                        febs.alert.success("设置成功");
                    }else{
                        febs.alert.warn(data.message);
                    }
                },
                'error':function () {
                    febs.alert.warn('服务器繁忙');
                }
            })
            window.location.reload();
            return false;
        });

        table.on('edit(unAliveCouponItem)', function(obj){
            var value = obj.value //得到修改后的值
                ,data = obj.data //得到所在行所有键值
                ,field = obj.field; //得到字段

            for (let i = 0; i < unAliveCouponItemsData.length; i++) {
                if (unAliveCouponItemsData[i].index == data.index) {
                    unAliveCouponItemsData[i] = data;
                }
            }
        });
        const E = window.wangEditor;
        const editor = new E('#toolbar-container', '#editor-container'); // 传入两个元素
        editor.config.showLinkImg = false;
        editor.config.uploadFileName = 'file';
        editor.config.customUploadImg = function (files, insertImgFn) {
            for (let i = 0; i < files.length; i++){
                var form = new FormData();
                form.append("file", files[0]);
                $.ajax({
                    url:'/admin/goods/uploadFileBase64',
                    type: "post",
                    processData: false,
                    contentType: false,
                    data: form,
                    dataType: 'json',
                    success(res) {
                        // 上传代码返回结果之后，将图片插入到编辑器中
                        insertImgFn(res.data.src, res.data.title, '')
                    }
                })
            }
        };
        editor.create();


        function addTableDate(data) {
            var hasData = table.cache['unAliveCouponItem'];

            data.index = hasData.length + 1;
            data.couponName = ''
            data.couponId = ''
            data.day = ''
            unAliveCouponItemsData.push(data);

            reloadTable(unAliveCouponItemsData);
            return data.index;
        }

        function reloadTable(data) {
            table.reload('unAliveCouponItem', {
                data : data
            });

            listenerCouponSelect();
        }

        function listenerCouponSelect() {
            $(".couponSelect").each(function(index, elem) {
                var dataIndex = $(this).attr('data-index');

                $(this).off('click')
                $(this).on('click', function() {
                    febs.modal.open('选择优惠券', 'modules/vip/config/couponSelect/' + dataIndex, {
                        btn: ['提交', '取消'],
                        yes: function (index, layero) {
                            $('#vip-coupon-select').find('#submit').trigger('click');
                            layer.close(index);
                        },
                        btn2: function () {
                        }
                    });
                })
            });
        }

        window.setCouponSelect = function(tableIndex, data) {
            var hasData = table.cache['unAliveCouponItem'];

            for(var i = 0; i<hasData.length; i++) {
                if (tableIndex == hasData[i].index) {
                    hasData[i].couponId = data.couponId;
                    hasData[i].couponName = data.couponName
                }
            }

            unAliveCouponItemsData = hasData;
            $(".couponSelect").each(function(index, elem) {
                var dataIndex = $(this).attr('data-index');
                if (dataIndex == tableIndex) {
                    $(this).val(data.couponName);
                    $(this).next().val(data.couponId);
                }
            });
        }


        initVipSettingValue();
        function initVipSettingValue() {
            form.val("vip-setting-form", {
                "vipDate": vipSetting.vipDate,
            });
        }

        form.on('submit(vip-setting-form-submit)', function (data) {
            console.log(data);
            febs.post(ctx + 'admin/vip/config/vipSetting', data.field, function (res) {
                febs.alert.success('设置成功');
            });
            window.location.reload();
            return false;
        });
            var details = vipSetting.items;
            if (details) {
                for(var i = 0; i < details.length; i++) {
                    details[i].index = i + 1;
                }

                unAliveCouponItemsData = details;
                reloadTable(details);
            }


            editor.txt.html(vipSetting.rule);
        }
    });
</script>