BuYuHouDuan/AdminSrc/AdminHost/wwwroot/admin/dist/views/gameconfig/sign.html

<title>签到配置</title>

<div class="layui-card layadmin-header">
    <div class="layui-breadcrumb" lay-filter="breadcrumb">
        <a lay-href="">主页</a>
        <a><cite>游戏管理</cite></a>
        <a><cite>签到配置</cite></a>
    </div>
</div>

<div class="layui-fluid">
    <div class="layui-card">
        <div class="layui-card-header">基础配置</div>
        <div class="layui-card-body">
            <form class="layui-form" lay-filter="sign-form">
                <div class="layui-form-item">
                    <label class="layui-form-label">是否开启</label>
                    <div class="layui-input-inline">
                        <input type="checkbox" name="isOpen" lay-skin="switch" lay-text="开启|关闭">
                    </div>
                </div>
                <div class="layui-form-item">
                    <label class="layui-form-label">不可中断</label>
                    <div class="layui-input-inline" style="line-height:38px;">
                        <input type="checkbox" name="cannotInterrupt" lay-skin="switch" lay-text="勾选|未勾选">
                    </div>
                    <div class="layui-form-mid layui-word-aux">勾选=漏签不回退(按累计次数循环1~7)；未勾选=漏签重置回第1天</div>
                </div>
                <div class="layui-form-item">
                    <div class="layui-input-block">
                        <button class="layui-btn" lay-submit lay-filter="save-base">保存基础配置</button>
                    </div>
                </div>
            </form>
        </div>
    </div>

    <div class="layui-card">
        <div class="layui-card-header">7 日签到奖励</div>
        <div class="layui-card-body">
            <table id="table-sign" lay-filter="table-sign"></table>
        </div>
    </div>
</div>

<script type="text/html" id="toolbar-sign">
    <div class="layui-btn-container">
        <button class="layui-btn layui-btn-sm layui-btn-normal" lay-filter="init-sign"><i class="layui-icon layui-icon-refresh"></i> 初始化配置</button>
        <button class="layui-btn layui-btn-sm" lay-filter="add-sign"><i class="layui-icon layui-icon-add-1"></i> 添加天数</button>
        <button class="layui-btn layui-btn-sm" lay-filter="save-sign"><i class="layui-icon layui-icon-ok"></i> 保存配置</button>
        <button class="layui-btn layui-btn-sm layui-btn-warm" lay-filter="reload-sign"><i class="layui-icon layui-icon-refresh"></i> 刷新</button>
        <button class="layui-btn layui-btn-sm layui-btn-danger" lay-filter="batchdel-sign">批量删除</button>
        <button class="layui-btn layui-btn-sm layui-btn-normal" onclick="saveAct('SignActivityConfig')"><i class="layui-icon layui-icon-export"></i> 保存到初始化文件</button>
    </div>
</script>

<script type="text/html" id="bar-sign">
    <a class="layui-btn layui-btn-xs" lay-event="edit"><i class="layui-icon layui-icon-edit"></i>编辑</a>
    <a class="layui-btn layui-btn-danger layui-btn-xs" lay-event="del"><i class="layui-icon layui-icon-delete"></i>删除</a>
</script>

<script type="text/html" id="tpl-icon">
    {{# if(d.icon){ }}
    <img src="{{d.icon}}" style="width:40px;height:40px;object-fit:cover;cursor:pointer;border-radius:4px;" onclick="previewImage('{{d.icon}}')" alt="图标">
    {{# } else { }}
    <span style="color:#999;">无图标</span>
    {{# } }}
</script>

<style>
.icon-upload-box { position: relative; display: inline-block; }
.icon-upload-box .upload-btn { position: absolute; top: 0; left: 0; width: 80px; height: 80px; opacity: 0; cursor: pointer; }
.icon-upload-preview { width: 80px; height: 80px; border: 1px dashed #ddd; border-radius: 4px; display: flex; align-items: center; justify-content: center; background: #fafafa; cursor: pointer; }
.icon-upload-preview:hover { border-color: #009688; }
.icon-upload-preview img { max-width: 100%; max-height: 100%; }
.icon-upload-preview .placeholder { color: #999; font-size: 12px; text-align: center; }
.gift-row { display: flex; align-items: center; margin-bottom: 6px; }
.gift-row .layui-input, .gift-row select { height: 32px; }
.gift-row .gr-count { width: 110px; margin: 0 6px; }
.gift-row .gr-oid { width: 150px; margin-right: 6px; }
</style>

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

        var activityConfig = null;
        var typeMap = { 1: '金币', 2: '钻石', 3: '道具' };

        setTimeout(function() {
            if (window.parent && window.parent.$ && window.parent.layer) {
                window.parent.$('.layui-layer-shade').remove();
                window.parent.layer.closeAll();
            }
            $('.layui-layer-shade').remove();
            layer.closeAll();
        }, 100);

        function sign() {
            if (!activityConfig) activityConfig = {};
            if (!activityConfig.signActivityConfig) activityConfig.signActivityConfig = { isOpen: true, cannotInterrupt: false, days: [] };
            if (!activityConfig.signActivityConfig.days) activityConfig.signActivityConfig.days = [];
            return activityConfig.signActivityConfig;
        }

        function loadConfig() {
            admin.req({
                method: "get",
                url: setter.baseurl + "adminapi/ActivityConfig/Get",
                done: function (res) {
                    activityConfig = (res.code === 0 && res.data) ? res.data : { signActivityConfig: {} };
                    initForm();
                }
            });
        }

        function initForm() {
            var s = sign();
            $('input[name="isOpen"]').prop('checked', !!s.isOpen);
            $('input[name="cannotInterrupt"]').prop('checked', !!s.cannotInterrupt);
            form.render();
            renderTable();
        }

        function save(msg) {
            var s = sign();
            s.isOpen = $('input[name="isOpen"]')[0].checked;
            s.cannotInterrupt = $('input[name="cannotInterrupt"]')[0].checked;
            admin.req({
                method: "post",
                contentType: "application/json;charset=UTF-8",
                url: setter.baseurl + "adminapi/ActivityConfig/UpdateSign",
                data: JSON.stringify(s),
                done: function (res) {
                    if (res.code === 0 || res.code === 200) {
                        layer.msg(msg || '保存成功');
                        loadConfig();
                    } else {
                        layer.msg(res.info || '保存失败');
                    }
                }
            });
        }

        function giftText(list) {
            if (!list || !list.length) return '<span style="color:#999;">未配置</span>';
            return list.map(function (g) {
                var t = typeMap[g.type] || '金币';
                var oid = (g.type === 3 && g.otherId) ? ('(' + g.otherId + ')') : '';
                return t + '×' + (g.count || 0) + oid;
            }).join('、');
        }

        function renderTable() {
            table.render({
                elem: '#table-sign',
                data: sign().days || [],
                page: false,
                cols: [[
                    { type: 'checkbox', fixed: 'left' },
                    { field: "day", title: "第几天", width: 80, sort: true },
                    { field: "name", title: "名称", width: 140 },
                    { field: "icon", title: "图标", width: 90, templet: '#tpl-icon' },
                    { title: "奖励", templet: function (d) { return giftText(d.giftList); } },
                    { title: "操作", width: 160, fixed: 'right', toolbar: '#bar-sign' }
                ]],
                toolbar: '#toolbar-sign',
                defaultToolbar: ['filter', 'exports', 'print']
            });
        }

        form.on('submit(save-base)', function () { save('保存成功'); return false; });

        $(document).on('click', '[lay-filter="reload-sign"]', function () {
            loadConfig();
            layer.msg('刷新成功');
        });

        $(document).on('click', '[lay-filter="save-sign"]', function () { save('保存成功'); });

        $(document).on('click', '[lay-filter="add-sign"]', function () {
            var days = sign().days || [];
            var max = days.length ? Math.max.apply(null, days.map(function (d) { return d.day || 0; })) : 0;
            showDayEdit({ day: max + 1, name: '第' + (max + 1) + '天', icon: '', giftList: [] }, true, -1);
        });

        $(document).on('click', '[lay-filter="init-sign"]', function () {
            if (window.parent && window.parent.$ && window.parent.layer) {
                window.parent.$('.layui-layer-shade').remove();
                window.parent.layer.closeAll();
            }
            layer.confirm('确定要从配置文件还原签到配置吗？', function (idx) {
                layer.close(idx);
                admin.req({
                    method: "get",
                    url: setter.baseurl + "adminapi/GameConfig/InitActivitySection/SignActivityConfig",
                    done: function (res) {
                        if (res.code === 0 || res.code === 200) {
                            layer.msg('初始化成功');
                            loadConfig();
                        } else {
                            layer.msg(res.info || '初始化失败');
                        }
                    },
                    fail: function (res) {
                        layer.msg(res.info || '初始化失败');
                    }
                });
            });
        });

        window.previewImage = function (url) {
            layer.open({
                type: 1,
                title: '图片预览',
                area: ['auto', 'auto'],
                shadeClose: true,
                content: '<div style="padding:20px;text-align:center;"><img src="' + url + '" style="max-width:400px;max-height:400px;border-radius:8px;"></div>'
            });
        };

        table.on('tool(table-sign)', function (obj) {
            var data = obj.data;
            var days = sign().days || [];
            var idx = days.findIndex(function (x) { return x.day === data.day; });
            if (idx < 0) return;

            if (obj.event === 'edit') {
                showDayEdit(days[idx], false, idx);
            } else if (obj.event === 'del') {
                layer.confirm('确定删除第' + data.day + '天配置吗？', function (i) {
                    days.splice(idx, 1);
                    layer.close(i);
                    save('删除成功');
                });
            }
        });

        $(document).on('click', '[lay-filter="batchdel-sign"]', function () {
            var checkData = table.checkStatus('table-sign').data;
            if (checkData.length === 0) return layer.msg('请选择要删除的数据');
            layer.confirm('确定删除选中 ' + checkData.length + ' 条数据吗？', function (idx) {
                var daySet = checkData.map(function (item) { return item.day; });
                var s = sign();
                s.days = (s.days || []).filter(function (item) { return daySet.indexOf(item.day) < 0; });
                layer.close(idx);
                save('删除成功');
            });
        });

        // ==================== 天数编辑弹窗（含奖励编辑） ====================
        function giftRowHtml(g) {
            g = g || { type: 1, count: 0, otherId: '' };
            var oidStyle = g.type === 3 ? '' : 'display:none;';
            return '<div class="gift-row">' +
                '<select class="gr-type" style="width:90px;">' +
                    '<option value="1">金币</option><option value="2">钻石</option><option value="3">道具</option>' +
                '</select>' +
                '<input type="number" class="layui-input gr-count" placeholder="数量" value="' + (g.count || 0) + '">' +
                '<input type="text" class="layui-input gr-oid" style="' + oidStyle + '" placeholder="道具编号" value="' + (g.otherId || '') + '">' +
                '<button type="button" class="layui-btn layui-btn-sm layui-btn-danger gr-del">删除</button>' +
            '</div>';
        }

        function bindGiftRows(container) {
            container.off('change', '.gr-type').on('change', '.gr-type', function () {
                var isProp = $(this).val() === '3';
                $(this).closest('.gift-row').find('.gr-oid').toggle(isProp);
            });
            container.off('click', '.gr-del').on('click', '.gr-del', function () {
                $(this).closest('.gift-row').remove();
            });
            container.off('click', '.gr-add').on('click', '.gr-add', function () {
                container.find('#giftRows').append(giftRowHtml({ type: 1, count: 0, otherId: '' }));
            });
        }

        function collectGiftRows(container) {
            var list = [];
            container.find('.gift-row').each(function () {
                var t = parseInt($(this).find('.gr-type').val()) || 1;
                var c = parseInt($(this).find('.gr-count').val()) || 0;
                var oid = t === 3 ? ($(this).find('.gr-oid').val() || '') : '';
                list.push({ type: t, count: c, otherId: oid });
            });
            return list;
        }

        function showDayEdit(data, isAdd, rowIndex) {
            var imagePreviewHtml = data.icon
                ? '<img src="' + data.icon + '" style="max-width:100%;max-height:100%;">'
                : '<div class="placeholder">点击上传</div>';

            var rowsHtml = '';
            (data.giftList || []).forEach(function (g) { rowsHtml += giftRowHtml(g); });

            var html = '<div style="padding:20px;">' +
                '<form class="layui-form">' +
                '<div class="layui-form-item">' +
                    '<label class="layui-form-label">第几天</label>' +
                    '<div class="layui-input-block">' +
                        '<input type="number" name="day" value="' + (data.day || 1) + '" class="layui-input" ' + (isAdd ? '' : 'readonly') + '>' +
                    '</div>' +
                '</div>' +
                '<div class="layui-form-item">' +
                    '<label class="layui-form-label">名称</label>' +
                    '<div class="layui-input-block">' +
                        '<input type="text" name="name" value="' + (data.name || '') + '" class="layui-input">' +
                    '</div>' +
                '</div>' +
                '<div class="layui-form-item">' +
                    '<label class="layui-form-label">图标</label>' +
                    '<div class="layui-input-block">' +
                        '<div class="icon-upload-box">' +
                            '<div class="icon-upload-preview" id="iconPreview">' + imagePreviewHtml + '</div>' +
                            '<input type="file" class="upload-btn" accept="image/*" id="iconUpload">' +
                        '</div>' +
                        '<input type="hidden" name="icon" id="iconInput" value="' + (data.icon || '') + '">' +
                        '<div style="margin-top:8px;color:#999;font-size:12px;">点击图片可预览</div>' +
                    '</div>' +
                '</div>' +
                '<div class="layui-form-item">' +
                    '<label class="layui-form-label">奖励</label>' +
                    '<div class="layui-input-block">' +
                        '<div id="giftRows">' + rowsHtml + '</div>' +
                        '<button type="button" class="layui-btn layui-btn-sm layui-btn-normal gr-add" style="margin-top:6px;"><i class="layui-icon layui-icon-add-1"></i> 新增奖励</button>' +
                        '<div style="color:#999;font-size:12px;margin-top:4px;">类型选“道具”时需填写道具编号</div>' +
                    '</div>' +
                '</div>' +
                '</form>' +
            '</div>';

            layer.open({
                type: 1,
                title: isAdd ? '添加天数配置' : '编辑天数配置',
                area: ['620px', '560px'],
                content: html,
                btn: ['保存', '取消'],
                shadeClose: true,
                success: function (layero) {
                    // 初始化每个奖励行的类型下拉
                    (data.giftList || []).forEach(function (g, i) {
                        var row = layero.find('.gift-row').eq(i);
                        row.find('.gr-type').val(g.type || 1);
                        row.find('.gr-oid').toggle((g.type || 1) === 3);
                    });
                    bindGiftRows(layero);

                    var $preview = layero.find('#iconPreview');
                    var $input = layero.find('#iconInput');

                    $preview.on('click', function () {
                        var url = $input.val();
                        if (url) previewImage(url);
                    });

                    layero.find('#iconUpload').on('change', function () {
                        var file = this.files[0];
                        if (!file) return;
                        var formData = new FormData();
                        formData.append('file', file);
                        $.ajax({
                            url: setter.baseurl + 'adminapi/ImageUpload/upload/temp',
                            type: 'POST',
                            data: formData,
                            processData: false,
                            contentType: false,
                            headers: { 'token': layui.data(setter.tableName)[setter.request.tokenName] },
                            success: function (res) {
                                if (res.code === 0 || res.code === 200) {
                                    var path = res.data.path;
                                    $input.val(path);
                                    $preview.html('<img src="' + path + '" style="max-width:100%;max-height:100%;">');
                                    layer.msg('上传成功');
                                } else {
                                    layer.msg(res.info || '上传失败');
                                }
                            },
                            error: function () { layer.msg('上传失败'); }
                        });
                    });
                },
                yes: function (index, layero) {
                    var day = parseInt(layero.find('input[name="day"]').val()) || data.day;
                    if (day <= 0) { layer.msg('请填写正确的天数'); return; }
                    var item = {
                        day: day,
                        name: layero.find('input[name="name"]').val() || ('第' + day + '天'),
                        icon: layero.find('input[name="icon"]').val(),
                        giftList: collectGiftRows(layero)
                    };
                    var s = sign();
                    if (!s.days) s.days = [];
                    if (isAdd) {
                        if (s.days.some(function (x) { return x.day === item.day; })) { layer.msg('该天数已存在'); return; }
                        s.days.push(item);
                    } else if (rowIndex > -1) {
                        s.days[rowIndex] = item;
                    }
                    layer.close(index);
                    save(isAdd ? '添加成功' : '保存成功');
                }
            });
        }

        window.saveAct = function (n) { layui.admin.req({ method: 'get', url: (layui.setter.baseurl || '/') + 'adminapi/ActivityConfig/SaveSection/' + n, done: function (r) { layui.layer.msg(r.info || (r.code === 0 ? '保存成功' : '保存失败')) } }) }

        loadConfig();
    });
</script>