BuYuHouDuan/AdminSrc/AdminHost/wwwroot/admin/dist/views/mail/index.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-form" lay-filter="layuiadmin-form-admin" style="padding: 20px 30px 0 0;">

    <div class="layui-form-item">
        <label class="layui-form-label">标题</label>
        <div class="layui-input-inline">
            <input type="text" name="title" value="" lay-verify="required" placeholder="发送标题" autocomplete="off" class="layui-input">

        </div>

        <label class="layui-form-label">内容</label>
        <div class="layui-input-inline">
            <input type="text" name="content" value="" lay-verify="required" placeholder="发送内容" autocomplete="off" class="layui-input">

        </div>
    </div>


    <div class="layui-form-item">
        <label class="layui-form-label">金币</label>
        <div class="layui-input-inline">
            <input type="number" name="gold" value="0" placeholder="金币数量" autocomplete="off" class="layui-input" style="width: 150px;">
        </div>

        <label class="layui-form-label">钻石</label>
        <div class="layui-input-inline">
            <input type="number" name="diamond" value="0" placeholder="钻石数量" autocomplete="off" class="layui-input" style="width: 150px;">
        </div>
    
       
    </div>

    <div class="layui-form-item">
        <label class="layui-form-label">玩家ID</label>

        <div class="layui-input-inline">
            <textarea name="userIds" placeholder="请输入玩家ID，多个用逗号分隔，留空则发送给所有玩家" class="layui-textarea"></textarea>
        </div>

    </div>

    <div class="layui-form-item">
        <label class="layui-form-label">有效天数</label>
        <div class="layui-input-inline">
            <input type="number" name="expireDays" value="30" placeholder="默认30天" class="layui-input" style="width: 150px;">
        </div>
    </div>
    <!-- 道具配置列表（初始1项，支持动态添加/删除） -->
    <div class="layui-form-item" id="rewardItems">
        <div class="layui-form-item layui-form-text" data-index="0">
            <!-- 道具选择（带搜索功能） -->
            <div class="layui-form-item">
                <label class="layui-form-label">赠送道具</label>

                <div class="layui-input-inline">
                    <select name="itemNumber[0]" id="itemNumber[0]" lay-search class="layui-select">
                        <option value=''>无</option>
                    </select>
                    <img class="prop-preview" src="" style="width:40px;height:40px;vertical-align:middle;margin-left:8px;display:none;">
                </div>
                <label class="layui-form-label">道具数量</label>
                <div class="layui-input-inline">
                    <input type="number" name="itemCount[0]" min="1" value="1" class="layui-input" style="width: 200px;">
                </div>


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

    <!-- 添加道具按钮（官方普通按钮样式） -->
    <div class="layui-form-item">
        <label class="layui-form-label"></label>
        <div class="layui-input-block">
            <button type="button" class="layui-btn layui-btn-normal" onclick="addRewardItem()">
                <i class="layui-icon layui-icon-add-circle"></i> 添加新道具
            </button>
        </div>
    </div>
    <div class="layui-form-item">
        <label class="layui-form-label"></label>
        <div class="layui-input-inline">
            <input type="button" lay-submit lay-filter="sendEmail" value="确认发送" class="layui-btn">
        </div>
    </div>
</div>

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

    var propList = [];
    
    // 从API获取道具列表
    function loadPropList() {
        admin.req({
            method: "get",
            contentType: "application/json;charset=UTF-8",
            dataType: "json",
            url: setter.baseurl + "adminapi/GameConfig/PropList",
            async: false,
            done: function (res) {
                if (res.code === 0 && res.data) {
                    propList = res.data;
                    renderPropSelect(propList);
                }
            }
        });
    }
    
    // 渲染道具下拉框
    function renderPropSelect(data) {
        var html = '<option value="">请选择道具</option>';
        
        // 按类型分组
        var groups = {};
        data.forEach(function(item) {
            var typeName = getTypeName(item.type);
            if (!groups[typeName]) {
                groups[typeName] = [];
            }
            groups[typeName].push(item);
        });
        
        // 生成optgroup
        for (var typeName in groups) {
            html += '<optgroup label="' + typeName + '">';
            groups[typeName].forEach(function(item) {
                html += '<option value="' + item.number + '">' + item.name + '</option>';
            });
            html += '</optgroup>';
        }
        
        $('select[name^="itemNumber"]').each(function() {
            var $select = $(this);
            var prevVal = $select.val();
            $select.html(html);
            if (prevVal) $select.val(prevVal);
        });
        form.render('select');
        // 初始化已选道具的图片预览
        $('select[name^="itemNumber"]').each(function() {
            var val = $(this).val();
            if (val) {
                var prop = data.find(function(p) { return p.number === val; });
                if (prop) {
                    var $img = $(this).closest('.layui-input-inline').find('.prop-preview');
                    $img.attr('src', prop.imageUrl || '/uploads/' + prop.number + '.png').show();
                }
            }
        });
    }

    // 道具选择变更时更新图片预览
    $(document).on('change', 'select[name^="itemNumber"]', function() {
        var val = $(this).val();
        var $img = $(this).closest('.layui-input-inline').find('.prop-preview');
        if (val) {
            var prop = propList.find(function(p) { return p.number === val; });
            if (prop) {
                $img.attr('src', prop.imageUrl || '/uploads/' + prop.number + '.png').show();
            }
        } else {
            $img.hide();
        }
    });
    
    // 获取类型名称
    function getTypeName(type) {
        var typeNames = {
            1: '炮台',
            2: '翅膀',
            3: '炮塔碎片',
            4: '翅膀碎片',
            5: '战神',
            6: '战神碎片',
            7: '刮刮卡',
            8: '改名卡',
            9: '大喇叭',
            10: '技能',
            11: '召唤卡',
            12: 'VIP经验',
            13: '鱼雷'
        };
        return typeNames[type] || '其他';
    }
    
    // 初始加载道具列表
    loadPropList();

    form.render(); 

    form.on('submit(sendEmail)', function (data) {
        var field = data.field;
        
        // 处理用户ID列表
        var userIds = null;
        if (field.userIds && field.userIds.trim()) {
            userIds = field.userIds.split(',').map(function(id) {
                return id.trim();
            }).filter(function(id) {
                return id;
            });
        }
        
        // 收集道具
        var props = [];
        $('[data-index]').each(function(idx) {
            var $item = $(this);
            var number = $item.find('select[name^="itemNumber"]').val();
            var count = parseInt($item.find('input[name^="itemCount"]').val()) || 1;
            
            if (number) {
                var propInfo = propList.find(function(p) { return p.number === number; });
                props.push({
                    number: number,
                    name: propInfo ? propInfo.name : '',
                    imageUrl: propInfo ? propInfo.imageUrl : '',
                    type: propInfo ? propInfo.type : 0,
                    count: count
                });
            }
        });
        
        var param = {
            userIds: userIds,
            title: field.title,
            content: field.content,
            gold: parseInt(field.gold) || 0,
            diamond: parseInt(field.diamond) || 0,
            props: props,
            expireDays: parseInt(field.expireDays) || 30
        };
        
        console.log('发送邮件参数:', param);
        
        admin.req({
            method: "post",
            contentType: "application/json;charset=UTF-8",
            dataType: "json",
            headers: {
                'token': layui.data(setter.tableName)[setter.request.tokenName]
            },
            url: setter.baseurl + "adminapi/adminuser/BatchSendEmail",
            async: false,
            data: JSON.stringify(param),
            done: function (res) {
                if (res.code === 0) {
                    layer.msg("发送成功");
                } else {
                    layer.msg(res.info || "发送失败");
                }
            }
        });

        return false;
    });

    // 记录当前道具配置项索引（用于动态生成唯一标识）
    var rewardItemIndex = 1;

    /**
     * 动态添加道具配置项
     */
    window.addRewardItem = function () {
        var targetContainer = $('#rewardItems');
        
        var optionsHtml = '<option value="">请选择道具</option>';
        var groups = {};
        propList.forEach(function(item) {
            var typeName = getTypeName(item.type);
            if (!groups[typeName]) {
                groups[typeName] = [];
            }
            groups[typeName].push(item);
        });
        
        for (var typeName in groups) {
            optionsHtml += '<optgroup label="' + typeName + '">';
            groups[typeName].forEach(function(item) {
                optionsHtml += '<option value="' + item.number + '">' + item.name + '</option>';
            });
            optionsHtml += '</optgroup>';
        }
        
        var newItemHtml = `
<div class="layui-form-item layui-form-text" data-index="${rewardItemIndex}">
    <div class="layui-form-item">
        <label class="layui-form-label">赠送道具</label>
        <div class="layui-input-inline">
            <select name="itemNumber[${rewardItemIndex}]" lay-search class="layui-select">
                ${optionsHtml}
            </select>
            <img class="prop-preview" src="" style="width:40px;height:40px;vertical-align:middle;margin-left:8px;display:none;">
        </div>
        <label class="layui-form-label">道具数量</label>
        <div class="layui-input-inline">
            <input type="number" name="itemCount[${rewardItemIndex}]" min="1" value="1" class="layui-input" style="width: 200px;">
        </div>
        <div class="layui-input-inline">
            <button type="button" class="layui-btn layui-btn-danger layui-btn-sm" onclick="removeRewardItem(${rewardItemIndex})">
                <i class="layui-icon layui-icon-close"></i> 删除
            </button>
        </div>
    </div>
</div>
`;

        targetContainer.append(newItemHtml);
        form.render('select');
        form.render('input');
        rewardItemIndex++;
    };

    /**
     * 删除道具配置项
     */
    window.removeRewardItem = function (index) {
        var allItems = $('.layui-form-item[data-index]');
        if (allItems.length <= 1) {
            layer.msg('至少保留1个道具配置项', { icon: 2, time: 1500 });
            return;
        }
        layer.confirm('确定要删除该道具配置吗？', {
            title: '删除确认',
            icon: 3
        }, function () {
            $(`.layui-form-item[data-index="${index}"]`).remove();
            layer.msg('删除成功', { icon: 1, time: 1200 });
        });
    };

})
</script>