diff --git a/商家端APP/注册/自主经营者初始化店铺.html b/商家端APP/注册/自主经营者初始化店铺.html index 7e863b2..6078cfe 100644 --- a/商家端APP/注册/自主经营者初始化店铺.html +++ b/商家端APP/注册/自主经营者初始化店铺.html @@ -362,6 +362,88 @@ .hidden { display: none !important; } + + /* 自定义下拉框样式 */ + .custom-select { + position: relative; + width: 100%; + } + + .custom-select-trigger { + width: 100%; + padding: 12px; + font-size: 15px; + border: 1px solid #ddd; + border-radius: 4px; + background-color: #fff; + cursor: pointer; + display: flex; + justify-content: space-between; + align-items: center; + user-select: none; + } + + .custom-select-trigger:active { + background-color: #f5f5f5; + } + + .custom-select-trigger span:first-child { + color: #333; + } + + .custom-select-trigger.placeholder span:first-child { + color: #bbb; + } + + .custom-select-trigger .arrow { + color: #666; + font-size: 12px; + transition: transform 0.3s; + } + + .custom-select.active .arrow { + transform: rotate(180deg); + } + + .custom-options { + display: none; + position: absolute; + top: 100%; + left: 0; + right: 0; + background-color: #fff; + border: 1px solid #ddd; + border-top: none; + border-radius: 0 0 4px 4px; + max-height: 200px; + overflow-y: auto; + z-index: 100; + box-shadow: 0 2px 8px rgba(0,0,0,0.1); + } + + .custom-select.active .custom-options { + display: block; + } + + .custom-option { + padding: 12px; + cursor: pointer; + transition: background-color 0.2s; + border-bottom: 1px solid #f5f5f5; + } + + .custom-option:last-child { + border-bottom: none; + } + + .custom-option:active { + background-color: #e8f5e9; + } + + .custom-option.selected { + background-color: #f1f1f1; + color: #4CAF50; + } @@ -386,19 +468,42 @@ +
+ +
+
+ 请选择商品类目类型 + ▼ +
+
+
线下菜市场
+
云店
+
+
+ +
+
- +
+
+ 请选择主营类目 + ▼ +
+
+
蔬菜
+
水果
+
肉类
+
海鲜
+
粮油
+
其他
+
+
+
@@ -700,10 +805,65 @@ }); }); + // 自定义下拉框功能 + function initCustomSelect(selectId, hiddenInputId, displayId) { + const selectElement = document.getElementById(selectId); + const trigger = selectElement.querySelector('.custom-select-trigger'); + const options = selectElement.querySelectorAll('.custom-option'); + const hiddenInput = document.getElementById(hiddenInputId); + const displaySpan = document.getElementById(displayId); + + // 点击触发器切换下拉列表 + trigger.addEventListener('click', function(e) { + e.stopPropagation(); + // 关闭其他打开的下拉框 + document.querySelectorAll('.custom-select.active').forEach(el => { + if (el !== selectElement) { + el.classList.remove('active'); + } + }); + selectElement.classList.toggle('active'); + }); + + // 选择选项 + options.forEach(option => { + option.addEventListener('click', function(e) { + e.stopPropagation(); + const value = this.getAttribute('data-value'); + const text = this.textContent; + + // 更新显示文本 + displaySpan.textContent = text; + trigger.classList.remove('placeholder'); + + // 更新隐藏输入框的值 + hiddenInput.value = value; + + // 更新选中状态 + options.forEach(opt => opt.classList.remove('selected')); + this.classList.add('selected'); + + // 关闭下拉列表 + selectElement.classList.remove('active'); + }); + }); + } + + // 点击页面其他地方关闭下拉框 + document.addEventListener('click', function() { + document.querySelectorAll('.custom-select.active').forEach(el => { + el.classList.remove('active'); + }); + }); + // 页面加载完成后初始化 document.addEventListener('DOMContentLoaded', function() { // 初始化营业时间选项显示状态 toggleBusinessTimeOptions(); + + // 初始化自定义下拉框 + initCustomSelect('categoryTypeSelect', 'categoryType', 'categoryTypeSelected'); + initCustomSelect('mainCategorySelect', 'mainCategory', 'mainCategorySelected'); });