From 242b93c907361d12a53e002e4f4a5d09792bcf84 Mon Sep 17 00:00:00 2001
From: linbin <495561397@qq.com>
Date: Tue, 28 Oct 2025 02:08:35 +0800
Subject: [PATCH] =?UTF-8?q?=E7=BB=BC=E8=BF=B0:=20=E4=BC=98=E5=8C=96?=
=?UTF-8?q?=E8=87=AA=E4=B8=BB=E7=BB=8F=E8=90=A5=E8=80=85=E5=88=9D=E5=A7=8B?=
=?UTF-8?q?=E5=8C=96=E5=BA=97=E9=93=BA=E9=A1=B5=E9=9D=A2=EF=BC=8C=E6=96=B0?=
=?UTF-8?q?=E5=A2=9E=E8=87=AA=E5=AE=9A=E4=B9=89=E4=B8=8B=E6=8B=89=E6=A1=86?=
=?UTF-8?q?=E7=BB=84=E4=BB=B6?=
MIME-Version: 1.0
Content-Type: text/plain; charset=UTF-8
Content-Transfer-Encoding: 8bit
- 在自主经营者初始化店铺页面中新增商品类目类型选择功能，支持"线下菜市场"和"云店"两种类型
- 将原有的主营类目原生select下拉框替换为自定义下拉框组件，提升用户交互体验
- 新增自定义下拉框样式，包含触发器、选项列表、选中状态和展开动画效果
- 实现自定义下拉框JavaScript功能，支持点击展开/收起、选项选择和全局关闭等交互逻辑
- 更新大妈集市.rp原型文件，同步最新的页面设计变更
---
商家端APP/注册/自主经营者初始化店铺.html | 178 +++++++++++++++++++++--
1 file changed, 169 insertions(+), 9 deletions(-)
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');
});