查看“︁微件:中立&怪物卡牌灵光一闪”︁的源代码

<noinclude>
此Widget用于卡牌筛选功能。
</noinclude><includeonly><div id="card-filter-widget-<!--{$id|escape:'html'}-->">
    <style>
        .filter-container {
            background-color: #f9f9f9;
            padding: 15px;
            margin-bottom: 20px;
            border: 1px solid #ddd;
            border-radius: 5px;
        }
        .filter-row {
            margin-bottom: 10px;
            display: flex;
            align-items: center;
        }
        .filter-label {
            font-weight: bold;
            width: 120px;
            display: inline-block;
        }
        .filter-select {
            padding: 5px;
            border: 1px solid #ccc;
            border-radius: 3px;
            min-width: 150px;
        }
        .filter-buttons {
            text-align: center;
            margin-top: 15px;
        }
        .filter-btn {
            padding: 8px 20px;
            margin: 0 5px;
            border: none;
            border-radius: 4px;
            cursor: pointer;
            font-size: 14px;
            display: inline-block;
        }
        .filter-btn-submit {
            background-color: #4CAF50;
            color: white;
        }
        .filter-btn-submit:hover {
            background-color: #45a049;
        }
        .filter-btn-reset {
            background-color: #f44336;
            color: white;
        }
        .filter-btn-reset:hover {
            background-color: #da190b;
        }
    </style>
    
    <div class="filter-container">
        <div class="filter-row">
            <span class="filter-label">类型:</span>
            <select class="filter-select" id="filter-type-<!--{$id|escape:'html'}-->">
                <option value="">全部</option>
                <option value="攻击">攻击</option>
                <option value="技能">技能</option>
                <option value="强化">强化</option>
            </select>
        </div>
        
        <div class="filter-row">
            <span class="filter-label">包含机制:</span>
            <select class="filter-select" id="filter-dict-include-<!--{$id|escape:'html'}-->">
                <option value="">全部</option>
                <option value="消耗">消耗</option>
                <option value="终极">终极</option>
            </select>
        </div>
        
        <div class="filter-row">
            <span class="filter-label">排除机制:</span>
            <select class="filter-select" id="filter-dict-exclude-<!--{$id|escape:'html'}-->">
                <option value="">全部</option>
                <option value="无法使用">无法使用</option>
                <option value="消耗">消耗</option>
                <option value="终极">终极</option>
            </select>
        </div>
        
        <div class="filter-row">
            <span class="filter-label">职业:</span>
            <select class="filter-select" id="filter-class-<!--{$id|escape:'html'}-->">
                <option value="">全部</option>
                <option value="决斗家">决斗家</option>
                <option value="游侠">游侠</option>
                <option value="猎人">猎人</option>
                <option value="心灵术士">心灵术士</option>
                <option value="控制师">控制师</option>
                <option value="先锋">先锋</option>
            </select>
        </div>
        
        <div class="filter-row">
            <span class="filter-label">最低费用:</span>
            <select class="filter-select" id="filter-cost-min-<!--{$id|escape:'html'}-->">
                <option value="">全部</option>
                <option value="-1">-1</option>
                <option value="0">0</option>
                <option value="1">1</option>
                <option value="2">2</option>
                <option value="3">3</option>
                <option value="4">4</option>
            </select>
        </div>
        
        <div class="filter-row">
            <span class="filter-label">最高费用:</span>
            <select class="filter-select" id="filter-cost-max-<!--{$id|escape:'html'}-->">
                <option value="">全部</option>
                <option value="0">0</option>
                <option value="1">1</option>
                <option value="2">2</option>
                <option value="3">3</option>
                <option value="99">99</option>
            </select>
        </div>
        
        <div class="filter-buttons">
            <div class="filter-btn filter-btn-submit" onclick="applyFilter<!--{$id|escape:'html'}-->()">筛选</div>
            <div class="filter-btn filter-btn-reset" onclick="resetFilter<!--{$id|escape:'html'}-->()">重置</div>
        </div>
    </div>
    
    <script>
        (function() {
            var widgetId = '<!--{$id|escape:'html'}-->';
            
            // 获取当前URL参数
            function getUrlParams() {
                var params = {};
                var search = window.location.search.substring(1);
                if (search) {
                    var pairs = search.split('&');
                    for (var i = 0; i < pairs.length; i++) {
                        var pair = pairs[i].split('=');
                        params[decodeURIComponent(pair[0])] = decodeURIComponent(pair[1] || '');
                    }
                }
                return params;
            }
            
            // 初始化表单值
            function initializeFilters() {
                var params = getUrlParams();
                
                if (params.type) {
                    document.getElementById('filter-type-' + widgetId).value = params.type;
                }
                if (params.dict_include) {
                    document.getElementById('filter-dict-include-' + widgetId).value = params.dict_include;
                }
                if (params.dict_exclude) {
                    document.getElementById('filter-dict-exclude-' + widgetId).value = params.dict_exclude;
                }
                if (params['class']) {
                    document.getElementById('filter-class-' + widgetId).value = params['class'];
                }
                if (params.cost_min) {
                    document.getElementById('filter-cost-min-' + widgetId).value = params.cost_min;
                }
                if (params.cost_max) {
                    document.getElementById('filter-cost-max-' + widgetId).value = params.cost_max;
                }
            }
            
            // 应用筛选
            window['applyFilter' + widgetId] = function() {
                var params = [];
                var baseUrl = window.location.pathname;
                
                var type = document.getElementById('filter-type-' + widgetId).value;
                if (type) params.push('type=' + encodeURIComponent(type));
                
                var dictInclude = document.getElementById('filter-dict-include-' + widgetId).value;
                if (dictInclude) params.push('dict_include=' + encodeURIComponent(dictInclude));
                
                var dictExclude = document.getElementById('filter-dict-exclude-' + widgetId).value;
                if (dictExclude) params.push('dict_exclude=' + encodeURIComponent(dictExclude));
                
                var classValue = document.getElementById('filter-class-' + widgetId).value;
                if (classValue) params.push('class=' + encodeURIComponent(classValue));
                
                var costMin = document.getElementById('filter-cost-min-' + widgetId).value;
                if (costMin) params.push('cost_min=' + encodeURIComponent(costMin));
                
                var costMax = document.getElementById('filter-cost-max-' + widgetId).value;
                if (costMax) params.push('cost_max=' + encodeURIComponent(costMax));
                
                var url = baseUrl;
                if (params.length > 0) {
                    url += '?' + params.join('&');
                }
                
                window.location.href = url;
            };
            
            // 重置筛选
            window['resetFilter' + widgetId] = function() {
                window.location.href = window.location.pathname;
            };
            
            // 页面加载时初始化
            if (document.readyState === 'loading') {
                document.addEventListener('DOMContentLoaded', initializeFilters);
            } else {
                initializeFilters();
            }
        })();
    </script>
</div></includeonly>