fastadmin_tailored/application/admin/view/lottery/activity/add.html

<form id="add-form" class="form-horizontal" role="form" data-toggle="validator" method="POST" action="">
    
    <!-- 自定义标题样式 -->
    <style>
    .section-title {
        font-size: 16px;
        font-weight: bold;
        color: #333;
        margin-bottom: 20px;
        padding-left: 15px;
        border-left: 4px solid #18bc9c;
        line-height: 1.5;
    }
    .section-content {
        margin-bottom: 20px;
        padding: 20px 0;
        background-color: #fff;
    }
    
    /* 任务设置样式 */
    .task-checkboxes label.checkbox-inline {
        font-weight: normal;
        padding: 8px 15px;
        border: 1px solid #ddd;
        border-radius: 4px;
        background-color: #f9f9f9;
        cursor: pointer;
        transition: all 0.3s ease;
        display: inline-block;
        min-width: 120px;
        text-align: center;
    }
    
    .task-checkboxes label.checkbox-inline:hover {
        border-color: #18bc9c;
        background-color: #f0f9f7;
    }
    
    .task-checkboxes label.checkbox-inline input[type="checkbox"] {
        margin-right: 5px;
    }
    
    .task-checkboxes label.checkbox-inline:has(input[type="checkbox"]:checked) {
        border-color: #18bc9c;
        background-color: #e8f5f0;
        color: #18bc9c;
        font-weight: bold;
    }
    
    /* 兼容性：对于不支持:has的浏览器 */
    .task-checkboxes label.checkbox-inline.checked {
        border-color: #18bc9c;
        background-color: #e8f5f0;
        color: #18bc9c;
        font-weight: bold;
    }
    
    .task-setting-item {
        margin-bottom: 15px;
    }
    
    .task-setting-item .panel-heading {
        background-color: #f5f5f5;
        border-bottom: 1px solid #ddd;
    }
    
    .task-setting-item .panel-title {
        font-size: 14px;
        font-weight: bold;
        color: #333;
    }
    
    .task-setting-item .panel-body {
        padding: 15px;
    }
    
    #selected-goods {
        font-size: 12px;
        line-height: 1.4;
    }
    
    /* 商品选择区域样式 */
    .goods-select-container {
        padding: 0;
    }
    
    .goods-select-row {
        display: flex;
        align-items: center;
        margin-bottom: 15px;
    }
    
    .goods-label {
        display: inline-block;
        width: 100px;
        margin-right: 20px;
        font-weight: normal;
        flex-shrink: 0;
    }
    
    .goods-options {
        display: flex;
        align-items: center;
    }
    
    .goods-options .radio-inline {
        margin-right: 30px;
        margin-bottom: 0;
    }
    
    .goods-button-row {
        margin-left: 120px;
        margin-bottom: 15px;
    }
    
    .goods-description-row {
        margin-left: 120px;
    }
    
    .goods-description-box {
        min-height: 40px;
        padding: 10px;
        border: 1px dashed #ddd;
        border-radius: 4px;
        background-color: #fafafa;
        font-size: 12px;
        line-height: 1.4;
    }
    
    /* 任务金额设置样式 */
    .task-amount-setting {
        display: flex;
        align-items: center;
        margin-bottom: 15px;
        flex-wrap: wrap;
    }
    
    .task-amount-label {
        display: inline-block;
        margin-right: 10px;
        font-weight: normal;
        white-space: nowrap;
        flex-shrink: 0;
    }
    
    .task-amount-input {
        width: 180px;
        margin-right: 10px;
        flex-shrink: 0;
    }
    
    .task-amount-desc {
        color: #666;
        font-size: 13px;
        white-space: nowrap;
        flex-shrink: 0;
    }
    
    .task-amount-help {
        color: #999;
        font-size: 12px;
        line-height: 1.4;
        margin-top: 5px;
    }
    
    .task-amount-help .fa-question-circle {
        color: #999;
        cursor: help;
    }
    .next-box{
        margin-top: 10px;
        background-color: #f4f6f8;
        padding: 30px 20px;
        border-radius: 2px;
        font-size: 14px;
        line-height: 20px;
        color: #262b30;
    }
    
    /* 渠道选择样式 */
    </style>

    <!-- 基础信息区域 -->
    <div class="section-content">
        <div class="section-title">基础信息</div>
        <!-- 活动名称 -->
        <div class="form-group">
            <label class="control-label col-xs-12 col-sm-2">活动名称：</label>
            <div class="col-xs-12 col-sm-8">
                <div class="input-group">
                    <input id="c-name" maxlength="24" data-rule="required" class="form-control" name="row[name]" type="text" placeholder="请输入活动名称，最多24个字符">
                    <span class="input-group-addon text-muted" id="activity-name-count">0/24</span>
                </div>
                <span class="help-block">活动名称最多24个字符</span>
            </div>
        </div>
        
        <!-- 活动时间 -->
        <div class="form-group">
            <label class="control-label col-xs-12 col-sm-2">活动时间：</label>
            <div class="col-xs-12 col-sm-8">
                <div class="input-daterange input-group">
                    <input id="c-start_time" data-rule="required" class="form-control datetimepicker" name="row[start_time]" type="text" placeholder="请选择开始时间">
                    <span class="input-group-addon">~</span>
                    <input id="c-end_time" data-rule="required" class="form-control datetimepicker" name="row[end_time]" type="text" placeholder="请选择结束时间">
                </div>
                <span class="help-block">设置活动的开始和结束时间</span>
            </div>
        </div>
        
        <!-- 活动渠道 -->
        <div class="form-group">
            <label class="control-label col-xs-12 col-sm-2">活动渠道：</label>
            <div class="col-xs-12 col-sm-8">
                <!-- 渠道选择 -->
                <div class="channel-list">
                    {foreach name="channelList" item="vo" key="key"}
                    <label class="checkbox-inline">
                        <input type="checkbox" name="row[channels][]" value="{$key}" data-rule="checked" data-rule-message="请至少选择一个活动渠道"{/if}> 
                        {$vo}
                    </label>
                    {/foreach}
                </div>
                
                <span class="help-block">请选择本次活动投放的渠道，至少选择一个</span>
            </div>
        </div>
        
        <!-- 活动描述 -->
        <div class="form-group">
            <label class="control-label col-xs-12 col-sm-2">活动描述：</label>
            <div class="col-xs-12 col-sm-8">
                <textarea id="c-description" class="form-control" rows="3" name="row[description]" placeholder="请输入活动描述"></textarea>
                <span class="help-block">简要描述活动内容和规则</span>
            </div>
        </div>
        
        <!-- 活动封面 -->
        <div class="form-group">
            <label class="control-label col-xs-12 col-sm-2">活动封面：</label>
            <div class="col-xs-12 col-sm-8">
                <div class="input-group">
                    <input id="c-cover_image" class="form-control" name="row[cover_image]" type="text" placeholder="请上传活动封面图片">
                    <div class="input-group-addon no-border no-padding">
                        <span><button type="button" id="plupload-cover_image" class="btn btn-danger plupload" data-input-id="c-cover_image" data-mimetype="image/gif,image/jpeg,image/png,image/jpg,image/bmp" data-multiple="false" data-preview-id="p-cover_image"><i class="fa fa-upload"></i> 上传</button></span>
                        <span><button type="button" id="fachoose-cover_image" class="btn btn-primary fachoose" data-input-id="c-cover_image" data-mimetype="image/*" data-multiple="false"><i class="fa fa-list"></i> 选择</button></span>
                    </div>
                </div>
                <ul class="row list-inline plupload-preview" id="p-cover_image"></ul>
                <span class="help-block">建议尺寸：750*400像素</span>
            </div>
        </div>
        
        <!-- 活动状态 -->
        <!-- <div class="form-group">
            <label class="control-label col-xs-12 col-sm-2">活动状态：</label>
            <div class="col-xs-12 col-sm-8">
                {foreach name="statusList" item="vo"}
                <label for="row[status]-{$key}" class="radio-inline">
                    <input id="row[status]-{$key}" name="row[status]" type="radio" value="{$key}" {if condition="$key eq 0"}checked{/if}> {$vo}
                </label>
                {/foreach}
                <span class="help-block">草稿状态不会对外展示，进行中状态用户可参与</span>
            </div>
        </div> -->
    </div>

    <div class="section-content">
        <div class="section-title">开奖设置</div>
            <!-- 开奖方式 -->
            <div class="form-group">
                <label class="control-label col-xs-12 col-sm-2">开奖方式：</label>
                <div class="col-xs-12 col-sm-8">
                    {foreach name="lotteryTypeList" item="vo"}
                    <label for="row[lottery_type]-{$key}" class="radio-inline">
                        <input id="row[lottery_type]-{$key}" name="row[lottery_type]" data-rule="checked" data-rule-message="请至少选择一种开奖方式" type="radio" value="{$key}" {if condition="$key eq 1"}checked{/if}> {$vo}
                    </label>
                    {/foreach}
                </div>
            </div>
            
            <!-- 开奖时间 -->
            <div class="form-group" data-favisible="lottery_type=2,3">
                <label class="control-label col-xs-12 col-sm-2">开奖时间：</label>
                <div class="col-xs-12 col-sm-8">
                    <input id="c-lottery_time" data-rule="required" data-rule-message="请选择开奖时间" class="form-control datetimepicker" data-date-format="YYYY-MM-DD HH:mm:ss" name="row[lottery_time]" type="text">
                </div>
            </div>
            
            <!-- 开奖人数 -->
            <div class="form-group" data-favisible="lottery_type=3">
                <label class="control-label col-xs-12 col-sm-2">开奖人数：</label>
                <div class="col-xs-12 col-sm-8">
                    <input id="c-lottery_people_num" data-rule="required" data-rule-message="请输入开奖人数" class="form-control" name="row[lottery_people_num]" type="number" min="1">
                </div>
            </div>
            
    </div>

    <!-- 奖品设置区域 -->
    <div class="section-content">
        <div class="section-title">奖品设置</div>
        <div class="form-group">
            <label class="control-label col-xs-12 col-sm-2"><span class="text-danger">*</span> 奖品配置：</label>
            <div class="col-xs-12 col-sm-10">
                <!-- 添加奖品按钮和提示信息 -->
                <div style="margin-bottom: 15px;">
                    <button type="button" id="add-prize-btn" class="btn btn-success btn-sm" onclick="addPrize()">
                        <i class="fa fa-plus"></i> <span class="btn-text">添加奖品</span> (<span id="prize-count">0</span>/10)
                    </button>
                    <span class="text-muted" style="margin-left: 15px;">
                        当前总概率：<span id="total-rate" class="text-warning">0.00%</span>
                    </span>
                    <div id="prize-count-tip" class="text-muted" style="margin-top: 5px; font-size: 12px;">还可添加 10 个奖品</div>
                </div>
                
                <!-- 提示信息 -->
                <div class="alert alert-info" style="padding: 8px 12px; margin-bottom: 15px; font-size: 12px;">
                    所有奖品总概率必须等于100%，包含未中奖；当奖品库存不足时，抽奖结果自动置为"未中奖"
                </div>
                
                <!-- 奖品表格 -->
                <div class="table-responsive">
                    <table class="table table-bordered" style="margin-bottom: 0;">
                        <thead style="background-color: #f5f5f5;">
                            <tr>
                                <th width="60" class="text-center">排序</th>
                                <th width="120">奖品名称</th>
                                <th width="100">奖品详情</th>
                                <th width="80" class="text-center">奖品图片</th>
                                <th width="80" class="text-center">奖品数量 <i class="fa fa-question-circle" title="设置奖品库存数量"></i></th>
                                <th width="100" class="text-center">中奖概率 <i class="fa fa-question-circle" title="设置中奖概率，所有奖品概率总和必须≤100%"></i></th>
                                <th width="80" class="text-center">已发放</th>
                                <th width="120" class="text-center">操作</th>
                            </tr>
                        </thead>
                        <tbody class="prize-list">
                            
                        </tbody>
                    </table>
                </div>
                
                <!-- 隐藏验证字段 -->
                <input type="hidden" name="prize_setting_check" data-rule="prize_setting_check" data-rule-message="请完善奖品设置" />
                
                <!-- 底部提示 -->
                <!-- <div class="text-danger" style="margin-top: 10px; font-size: 12px;">
                    必须添加8个奖品
                </div> -->
            </div>
        </div>
        
        <!-- 兑奖期限设置 -->
        <div class="form-group">
            <label class="control-label col-xs-12 col-sm-2">兑奖期限：</label>
            <div class="col-xs-12 col-sm-8">
                <label class="radio-inline">
                    <input name="row[redeem_expire_type]" type="radio" value="1" checked data-rule="required" data-rule-message="请选择兑奖期限"> 永久有效
                </label>
                <label class="radio-inline">
                    <input name="row[redeem_expire_type]" type="radio" value="2"> 固定时长
                </label>
                <div data-favisible="redeem_expire_type=2" style="margin-top: 10px;">
                    <div class="input-group" style="width: 200px;">
                        <input type="number" class="form-control" name="row[redeem_expire_days]" min="1" max="365" value="7" data-rule="range(1~365)" data-rule-message="兑奖期限必须在1-365天之间">
                        <span class="input-group-addon">天</span>
                    </div>
                </div>
                <span class="help-block">仅针对商品设置兑奖期限，其他奖品类型兑奖期限皆在中奖时直接发放</span>
            </div>
        </div>
    </div>

    <!-- 规则设置区域 -->
    <div class="section-content">
        <div class="section-title">规则设置</div>
        <!-- 适用人群 -->
        <div class="form-group">
            <label class="control-label col-xs-12 col-sm-2">适用人群：</label>
            <div class="col-xs-12 col-sm-8">
                {foreach name="userLimitTypeList" item="vo"}
                <label for="row[user_limit_type]-{$key}" class="radio-inline">
                    <input id="row[user_limit_type]-{$key}" name="row[user_limit_type]" type="radio" value="{$key}" {if condition="$key eq 3"}checked{/if} data-rule="required" data-rule-message="请选择适用人群"> {$vo}
                </label>
                {/foreach}
            </div>
        </div>
        <!-- 任务设置 -->
        <div class="form-group">
            <label class="control-label col-xs-12 col-sm-2">任务设置：</label>
            <div class="col-xs-12 col-sm-10">
                <!-- 任务类型选择 -->
                <div class="task-checkboxes" style="margin-bottom: 15px;">
                    {foreach name="conditionTypeList" item="vo"}
                    <label class="checkbox-inline" style="margin-right: 15px; margin-bottom: 10px;">
                        <input type="checkbox" name="row[task_type][]" value="{$key}" data-rule="checked" data-rule-message="请至少选择一种任务类型" > 
                        <span>{$vo}</span>
                    </label>
                    {/foreach}
                </div>
                <!-- 隐藏验证字段 -->
                <div class="help-block" style="margin-bottom: 15px;">每完成一次指定任务将获得一次抽奖机会</div>
                
                <!-- 任务详细设置区域 -->
                <div class="task-settings-container">
                    <!-- 购买指定商品设置 -->
                    <div class="task-setting-item" id="task-setting-1" style="display: none;">
                        <div class="panel panel-default">
                            <div class="panel-heading">
                                <h4 class="panel-title">购买指定商品</h4>
                            </div>
                            <div class="panel-body">
                                <div class="goods-select-container">
                                    <!-- 条件类型隐藏字段 -->
                                    <input type="hidden" name="condition[1][type]" value="1">
                                    
                                    <div class="goods-select-row">
                                        <span class="goods-label"><span class="text-danger">*</span> 选择商品：</span>
                                        <div class="goods-options">
                                            <label class="radio-inline">
                                                <input type="radio" name="condition[1][goods_rule]" value="1" checked> 指定商品参与
                                            </label>
                                            <label class="radio-inline">
                                                <input type="radio" name="condition[1][goods_rule]" value="2"> 指定商品不可参与
                                            </label>
                                        </div>
                                    </div>
                                    <div class="goods-button-row">
                                        <button type="button" class="btn btn-success btn-sm" onclick="selectTaskGoods('#selected-goods')">
                                            <i class="fa fa-plus"></i> 添加商品
                                        </button>
                                    </div>
                                    <div class="goods-description-row">
                                        <div id="selected-goods" class="goods-description-box">
                                            <span class="text-muted">该商品下单后将自动触发抽奖活动且发放一次抽奖机会，若用户产生维权退款，已发放的奖励自动回收。如果要制约用户使用其他无法回收：若该商品同时参与秒杀、砍价、拼团及其他营销活动，弹窗提醒将有次数限定 <i class="fa fa-question-circle" title="帮助说明"></i></span>
                                        </div>
                                        <!-- 商品ID列表隐藏字段，用于存储JSON格式的商品IDs -->
                                        <input type="hidden" name="condition[1][goods_ids]" value="" id="task-goods-ids-1">
                                    </div>
                                </div>
                            </div>
                        </div>
                    </div>
                    
                    <!-- 单笔订单消费满N元设置 -->
                    <div class="task-setting-item" id="task-setting-2" style="display: none;">
                        <div class="panel panel-default">
                            <div class="panel-heading">
                                <h4 class="panel-title">单笔订单消费满N元</h4>
                            </div>
                            <div class="panel-body">
                                <!-- 条件类型隐藏字段 -->
                                <input type="hidden" name="condition[2][type]" value="2">
                                
                                <div class="task-amount-setting">
                                    <span class="task-amount-label">单次消费满</span>
                                    <div class="input-group task-amount-input">
                                        <input type="number" class="form-control" name="condition[2][condition_value]" min="0.01" step="0.01" placeholder="请输入">
                                        <span class="input-group-addon">元</span>
                                    </div>
                                    <span class="task-amount-desc">可触发抽奖活动且发放一次抽奖机会</span>
                                </div>
                                <div class="task-amount-help">单次消费金额满足设置可触发抽奖活动，满足条件即可触发，消费金额不包含运费，整单维权成功后收回奖励</div>
                            </div>
                        </div>
                    </div>
                    
                    <!-- 单次充值金额满N元设置 -->
                    <div class="task-setting-item" id="task-setting-3" style="display: none;">
                        <div class="panel panel-default">
                            <div class="panel-heading">
                                <h4 class="panel-title">单次充值金额满N元</h4>
                            </div>
                            <div class="panel-body">
                                <!-- 条件类型隐藏字段 -->
                                <input type="hidden" name="condition[3][type]" value="3">
                                
                                <div class="task-amount-setting">
                                    <span class="task-amount-label">单次充值满</span>
                                    <div class="input-group task-amount-input">
                                        <input type="number" class="form-control" name="condition[3][condition_value]" min="0.01" step="0.01" placeholder="请输入">
                                        <span class="input-group-addon">元</span>
                                    </div>
                                    <span class="task-amount-desc">可触发抽奖活动且发放一次抽奖机会</span>
                                </div>
                                <div class="task-amount-help">单次充值金额满足设置可触发抽奖活动，满足条件即可触发，充值页面将有进行提示 <i class="fa fa-question-circle" title="帮助说明"></i></div>
                            </div>
                        </div>
                    </div>
                    
                    <!-- 活动期间累计消费N元设置 -->
                    <div class="task-setting-item" id="task-setting-4" style="display: none;">
                        <div class="panel panel-default">
                            <div class="panel-heading">
                                <h4 class="panel-title">活动期间累计消费N元</h4>
                            </div>
                            <div class="panel-body">
                                <!-- 条件类型隐藏字段 -->
                                <input type="hidden" name="condition[4][type]" value="4">
                                
                                <div class="task-amount-setting">
                                    <span class="task-amount-label">活动期间内累计消费满</span>
                                    <div class="input-group task-amount-input">
                                        <input type="number" class="form-control" name="condition[4][condition_value]" min="0.01" step="0.01" placeholder="请输入">
                                        <span class="input-group-addon">元</span>
                                    </div>
                                    <span class="task-amount-desc">可触发抽奖活动且发放一次抽奖机会</span>
                                </div>
                                <div class="task-amount-help">活动期间内累计消费金额满足设置可触发抽奖活动，满足条件即可触发，消费金额不包含运费，一旦发放抽奖次数无法收回 <i class="fa fa-question-circle" title="帮助说明"></i></div>
                            </div>
                        </div>
                    </div>
                </div>
                
                <!-- 隐藏验证字段 - 规则设置 -->
                <input type="hidden" name="rules_setting_check" data-rule="required;rulesJson" data-rule-message="请设置至少一种参与条件" />
            </div>
        </div>
        
        <!-- 引导样式 -->
        <!-- <div class="form-group">
            <label class="control-label col-xs-12 col-sm-2">引导样式：</label>
            <div class="col-xs-12 col-sm-8">
                {foreach name="guideStyleList" item="vo"}
                <label for="row[guide_style]-{$key}" class="radio-inline">
                    <input id="row[guide_style]-{$key}" name="row[guide_style]" type="radio" value="{$key}" {if condition="$key eq 1"}checked{/if} data-rule="required" data-rule-message="请选择引导样式"> {$vo}
                </label>
                {/foreach}
                <div data-favisible="guide_style=1" class="next-box">
                    <img src="{$lottery_guide|cdnurl}" style="width: 100px;">
                </div>
            </div>
        </div> -->
        
        <!-- 自定义引导样式 -->
        <!-- <div class="form-group" data-favisible="guide_style=2">
            <label class="control-label col-xs-12 col-sm-2">自定义引导图片：</label>
            <div class="col-xs-12 col-sm-8">
                <div class="input-group">
                    <input id="c-guide_image" data-rule="required"  class="form-control" name="row[guide_image]" type="text" placeholder="请上传引导图片">
                    <div class="input-group-addon no-border no-padding">
                        <span><button type="button" id="plupload-guide_image" class="btn btn-danger plupload" data-input-id="c-guide_image" data-mimetype="image/gif,image/jpeg,image/png,image/jpg,image/bmp" data-multiple="false"><i class="fa fa-upload"></i> 上传</button></span>
                    </div>
                </div>
            </div>
        </div>
         -->
        <!-- <div class="form-group" data-visible="row[guide_style]=2">
            <label class="control-label col-xs-12 col-sm-2">引导文案：</label>
            <div class="col-xs-12 col-sm-8">
                <input id="c-guide_text" class="form-control" name="row[guide_text]" type="text" placeholder="请输入引导文案">
            </div>
        </div> -->
        
    
        <!-- 单人参与次数限制 -->
        <div class="form-group">
            <label class="control-label col-xs-12 col-sm-2">单人参与次数限制：</label>
            <div class="col-xs-12 col-sm-8">
                <input id="c-person_limit_num" class="form-control" name="row[person_limit_num]" type="number" value="1" min="1">
                <span class="help-block">设置每个用户最多可参与的抽奖次数</span>
            </div>
        </div>
        
        <!-- 抽奖介绍内容 -->
        <div class="form-group">
            <label class="control-label col-xs-12 col-sm-2">抽奖介绍内容：</label>
            <div class="col-xs-12 col-sm-8">
                <textarea id="c-intro_content" class="form-control editor" rows="5" name="row[intro_content]" placeholder="请输入抽奖活动的详细介绍"></textarea>
                <span class="help-block">支持富文本编辑，用于向用户展示活动详情</span>
            </div>
        </div>
    </div>

    <!-- 底部按钮 -->
    <div class="form-group layer-footer" style="margin-top: 30px;">
        <div class="col-xs-12 text-center">
            <button type="submit" class="btn btn-success btn-lg" style="margin-right: 10px;">
                <i class="fa fa-save"></i> 保存活动
            </button>
            <button type="reset" class="btn btn-default btn-lg">
                <i class="fa fa-refresh"></i> 重置
            </button>
        </div>
    </div>
</form>

<!-- 引入JavaScript模板 -->
{include file="lottery/activity/scripttpl" /}