manghe/app/admin/view/SignConfig/index.html

{include file="Public:header2"/}
<div class="layui-fluid">
    <div class="layui-card">
        <div class="layui-card-body">
            <div class="layui-form toolbar">
                <div class="layui-form-item">
                    <div class="layui-inline">
                        <label class="layui-form-label w-auto">配置类型：</label>
                        <div class="layui-input-inline mr0">
                            <select name="type" lay-filter="config_type">
                                <option value="1" {if $type=='1' }selected{/if}>每日签到配置</option>
                                <option value="2" {if $type=='2' }selected{/if}>累计签到配置</option>

                            </select>
                        </div>
                    </div>
                    <div class="layui-inline">
                        <label class="layui-form-label w-auto">关键词：</label>
                        <div class="layui-input-inline mr0">
                            <input name="keyword" class="layui-input" type="text" placeholder="输入配置标题" />
                        </div>
                    </div>
                    <div class="layui-inline">
                        <button class="layui-btn icon-btn" lay-filter="formSearch" lay-submit>
                            <i class="layui-icon">&#xe615;</i>搜 索
                        </button>
                        <button class="layui-btn icon-btn" id="btnAdd">
                            <i class="layui-icon">&#xe654;</i>添 加
                        </button>
                    </div>
                </div>
            </div>

            <table class="layui-table" id="tableList" lay-filter="tableList"></table>
        </div>
    </div>
</div>

<!-- 表格操作列 -->
<script type="text/html" id="tableOpBar">
    <a style="text-decoration:none" title="编辑" lay-event="edit" class="layui-btn layui-btn-normal layui-btn-xs">
        <i class="layui-icon layui-icon-edit"></i>编辑
    </a>
    <a style="text-decoration:none" title="编辑奖励" lay-event="editReward" class="layui-btn layui-btn-normal layui-btn-xs">
        <i class="layui-icon layui-icon-edit"></i>编辑奖励
    </a>
    <a style="text-decoration:none" lay-event="del" class="layui-btn layui-btn-danger layui-btn-xs">
        <i class="layui-icon layui-icon-delete"></i>删除
    </a>
    </script>

<!-- 表格状态列 -->
<script type="text/html" id="tableStateBar">
        <input type="checkbox" lay-filter="ckState" value="{{d.id}}" lay-skin="switch"
               lay-text="正常|禁用" {{d.status==1?'checked':''}}/>
    </script>

<!-- 表格奖励信息 -->
<script type="text/html" id="rewardsTpl">
        {{# if(d.rewards && d.rewards.length > 0){ }}
            {{#  layui.each(d.rewards, function(index, item){ }}
                {{# if(item.reward_type == 1){ }}
                <span class="layui-badge layui-bg-blue">钻石: {{item.reward_value}}</span>
                {{# } else if(item.reward_type == 2){ }}
                <span class="layui-badge layui-bg-green">UU币: {{item.reward_value}}</span>
                {{# } else if(item.reward_type == 3){ }}
                <span class="layui-badge layui-bg-orange">达达卷: {{item.reward_value}}</span>
                {{# } else if(item.reward_type == 4){ }}
                <span class="layui-badge layui-bg-red">优惠券</span>
                {{# } }}
            {{#  }); }}
        {{# } else { }}
            <span class="layui-text">无奖励</span>
        {{# } }}
    </script>

{include file="Public/footer" /}

<script>
    layui.use(['layer', 'form', 'table', 'util'], function () {
        var $ = layui.jquery;
        var layer = layui.layer;
        var form = layui.form;
        var table = layui.table;
        var util = layui.util;

        // 获取当前配置类型
        var configType = {$type};

        // 渲染表格
        var insTb = table.render({
            elem: '#tableList',
            url: '{:url("/admin/sign_config_list")}',
            where: { type: configType },
            page: true,
            limit: 50,
            cellMinWidth: 100,
            cols: getTableCols(configType)
        });

        // 根据配置类型获取表格列配置
        function getTableCols(type) {
            var commonCols = [
                { field: 'id', title: 'ID', width: 60 },
                { field: 'title', title: '配置标题', width: 120 },
                {
                    field: 'icon', title: '图标', width: 80, templet: function (d) {
                        return d.icon ? '<img src="' + d.icon + '" style="height:30px;">' : '-';
                    }
                },
                { field: 'day', title: '签到天数/累计天数', width: 180 },
                { field: 'rewards', title: '奖励信息', templet: '#rewardsTpl' },
                { field: 'sort', title: '排序', width: 100, edit: 'text' },
                { field: 'status', title: '状态', width: 100, templet: '#tableStateBar' },
                { title: '操作', width: 240, align: 'center', toolbar: '#tableOpBar' }
            ];
            return [commonCols];
        }

        // 搜索按钮点击事件
        form.on('submit(formSearch)', function (data) {
            insTb.reload({ where: data.field, page: { curr: 1 } });
            return false;
        });

        // 添加按钮点击事件
        $('#btnAdd').click(function () {
            showEditModel();
        });

        // 监听工具条
        table.on('tool(tableList)', function (obj) {
            var data = obj.data;
            var layEvent = obj.event;

            if (layEvent === 'edit') { // 修改
                showEditModel(data.id);
            } else if (layEvent === 'editReward') { // 编辑奖励
                showRewardEditModel(data.id, data.reward_id);
            } else if (layEvent === 'del') { // 删除
                doDel(data.id);
            }
        });

        // 监听单元格编辑
        table.on('edit(tableList)', function (obj) {
            var value = obj.value;
            var data = obj.data;

            if (obj.field === 'sort') {
                // 更新排序
                var loadIndex = layer.load(2);
                $.post('{:url("/admin/sign_config_sort")}', {
                    id: data.id,
                    sort: value
                }, function (res) {
                    layer.close(loadIndex);
                    if (res.status === 1) {
                        layer.msg(res.msg, { icon: 1 });
                    } else {
                        layer.msg(res.msg, { icon: 2 });
                        insTb.reload();
                    }
                }, 'json');
            }
        });

        // 修改状态
        form.on('switch(ckState)', function (obj) {
            var loadIndex = layer.load(2);
            $.post('{:url("/admin/sign_config_status")}', {
                id: obj.value,
                status: obj.elem.checked ? 1 : 0
            }, function (res) {
                layer.close(loadIndex);
                if (res.status === 1) {
                    layer.msg(res.msg, { icon: 1 });
                } else {
                    layer.msg(res.msg, { icon: 2 });
                    $(obj.elem).prop('checked', !obj.elem.checked);
                    form.render('checkbox');
                }
            }, 'json');
        });

        // 显示编辑弹窗
        function showEditModel(id) {
            var title = id ? '修改签到配置' : '添加签到配置';
            var url = id ? '{:url("/admin/sign_config_edit")}?id=' + id : '{:url("/admin/sign_config_add")}?type=' + configType;
            layer.open({
                type: 2,
                title: title,
                shadeClose: false,
                shade: 0.3,
                area: ['90%', '90%'],
                content: url,
                end: function () {
                    table.reload('tableList');
                }
            });
        }

        // 显示编辑奖励弹窗
        function showRewardEditModel(id, reward_id) {
            if (!reward_id) {
                layer.msg('该配置没有关联奖励信息', { icon: 2, time: 2000 });
                return;
            }

            layer.open({
                type: 2,
                title: '编辑签到奖励',
                shadeClose: false,
                shade: 0.3,
                area: ['800px', '500px'],
                content: '{:url("/admin/sign_config_reward_edit")}?id=' + id + '&reward_id=' + reward_id,
                end: function () {
                    table.reload('tableList');
                }
            });
        }

        // 删除
        function doDel(id) {
            layer.confirm('确定要删除此配置吗？', {
                skin: 'layui-layer-admin'
            }, function (i) {
                layer.close(i);
                var loadIndex = layer.load(2);
                $.post('{:url("/admin/sign_config_delete")}', {
                    id: id
                }, function (res) {
                    layer.close(loadIndex);
                    if (res.status === 1) {
                        layer.msg(res.msg, { icon: 1 });
                        insTb.reload();
                    } else {
                        layer.msg(res.msg || '删除失败', { icon: 2 });
                        console.error('删除失败:', res);
                    }
                }).fail(function(xhr, textStatus, errorThrown) {
                    layer.close(loadIndex);
                    layer.msg('网络错误，请稍后重试', { icon: 2 });
                    console.error('删除请求失败:', textStatus, errorThrown);
                });
            });
        }

        // 监听配置类型切换
        form.on('select(config_type)', function (data) {
            configType = data.value;
            // 重载表格，更新列配置
            insTb.reload({
                where: {
                    type: configType
                },
                cols: getTableCols(configType),
                page: { curr: 1 }
            });
        });
    });
</script>