dm-design/new_web/merchant/pages/level-settings.html

<div class="page-content">
    <h2>等级设置</h2>
    
    <!-- 搜索区域 -->
    <div class="search-section">
        <div class="form-group">
            <label>摊位名称</label>
            <div class="multiselect-container">
                <div class="multiselect-dropdown" onclick="toggleDropdown()">
                    <span class="multiselect-selected">请选择摊位名称...</span>
                    <span class="multiselect-arrow">▼</span>
                </div>
                <div class="multiselect-options" id="stallOptions">
                    <label class="multiselect-option">
                        <input type="checkbox" value="all" onchange="selectAll(this)">
                        <span>全部</span>
                    </label>
                    <label class="multiselect-option">
                        <input type="checkbox" value="牛牛蔬菜店" onchange="updateSelection()">
                        <span>牛牛蔬菜店</span>
                    </label>
                    <label class="multiselect-option">
                        <input type="checkbox" value="羊羊水果店" onchange="updateSelection()">
                        <span>羊羊水果店</span>
                    </label>
                    <label class="multiselect-option">
                        <input type="checkbox" value="小狗羊肉" onchange="updateSelection()">
                        <span>小狗羊肉</span>
                    </label>
                    <label class="multiselect-option">
                        <input type="checkbox" value="小马猪蹄" onchange="updateSelection()">
                        <span>小马猪蹄</span>
                    </label>
                    <label class="multiselect-option">
                        <input type="checkbox" value="小鱼生鲜" onchange="updateSelection()">
                        <span>小鱼生鲜</span>
                    </label>
                </div>
            </div>
            <button class="btn btn-search">查询</button>
            <button class="btn btn-primary">批量会员等级编辑</button>
        </div>
    </div>
    
    <!-- 商户列表表格 -->
    <table class="table merchant-table">
        <thead>
            <tr>
                <th>摊位名称</th>
                <th>是否启用会员</th>
                <th>会员等级</th>
                <th>操作</th>
            </tr>
        </thead>
        <tbody>
            <tr>
                <td>牛牛蔬菜店</td>
                <td>
                    <label class="switch">
                        <input type="checkbox" checked>
                        <span class="slider"></span>
                    </label>
                </td>
                <td>lv1, lv2, lv3, lv4</td>
                <td>
                    <button class="btn-link" onclick="openLevelDetails('牛牛蔬菜店')">设置等级明细</button>
                </td>
            </tr>
            <tr>
                <td>羊羊水果店</td>
                <td>
                    <label class="switch">
                        <input type="checkbox">
                        <span class="slider"></span>
                    </label>
                </td>
                <td>lv1, lv2, lv3</td>
                <td>
                    <button class="btn-link" onclick="openLevelDetails('羊羊水果店')">设置等级明细</button>
                </td>
            </tr>
            <tr>
                <td>小狗羊肉</td>
                <td>
                    <label class="switch">
                        <input type="checkbox" checked>
                        <span class="slider"></span>
                    </label>
                </td>
                <td>lv1, lv2, lv3, lv4</td>
                <td>
                    <button class="btn-link" onclick="openLevelDetails('小狗羊肉')">设置等级明细</button>
                </td>
            </tr>
            <tr>
                <td>小马猪蹄</td>
                <td>
                    <label class="switch">
                        <input type="checkbox">
                        <span class="slider"></span>
                    </label>
                </td>
                <td>lv1, lv2</td>
                <td>
                    <button class="btn-link" onclick="openLevelDetails('小马猪蹄')">设置等级明细</button>
                </td>
            </tr>
            <tr>
                <td>小鱼生鲜</td>
                <td>
                    <label class="switch">
                        <input type="checkbox" checked>
                        <span class="slider"></span>
                    </label>
                </td>
                <td>lv1, lv2, lv3, lv4</td>
                <td>
                    <button class="btn-link" onclick="openLevelDetails('小鱼生鲜')">设置等级明细</button>
                </td>
            </tr>
        </tbody>
    </table>
</div>

<style>
.multiselect-container {
    position: relative;
    display: inline-block;
    min-width: 200px;
}

.multiselect-dropdown {
    border: 1px solid #bdc3c7;
    padding: 8px 12px;
    background: white;
    cursor: pointer;
    display: flex;
    justify-content: space-between;
    align-items: center;
    border-radius: 4px;
}

.multiselect-dropdown:hover {
    border-color: #3498db;
}

.multiselect-arrow {
    transition: transform 0.2s;
}

.multiselect-arrow.rotated {
    transform: rotate(180deg);
}

.multiselect-options {
    position: absolute;
    top: 100%;
    left: 0;
    right: 0;
    background: white;
    border: 1px solid #bdc3c7;
    border-top: none;
    max-height: 200px;
    overflow-y: auto;
    z-index: 1000;
    display: none;
    border-radius: 0 0 4px 4px;
}

.multiselect-options.show {
    display: block;
}

.multiselect-option {
    display: flex;
    align-items: center;
    padding: 8px 12px;
    cursor: pointer;
    margin: 0;
}

.multiselect-option:hover {
    background-color: #f8f9fa;
}

.multiselect-option input[type="checkbox"] {
    margin-right: 8px;
}
</style>