linbin
/
dm-design
1
0
Fork 0
Code Issues Pull Requests Packages Projects Releases Wiki Activity

综述: 优化自主经营者初始化店铺页面，新增自定义下拉框组件 

- 在自主经营者初始化店铺页面中新增商品类目类型选择功能，支持"线下菜市场"和"云店"两种类型
- 将原有的主营类目原生select下拉框替换为自定义下拉框组件，提升用户交互体验
- 新增自定义下拉框样式，包含触发器、选项列表、选中状态和展开动画效果
- 实现自定义下拉框JavaScript功能，支持点击展开/收起、选项选择和全局关闭等交互逻辑
- 更新大妈集市.rp原型文件，同步最新的页面设计变更
This commit is contained in:
linbin 2025-10-28 02:08:35 +08:00
parent f46e7c92c3
commit 242b93c907
1 changed files with 169 additions and 9 deletions
Show Stats Download Patch File Download Diff File Expand all files Collapse all files

178
商家端APP/注册/自主经营者初始化店铺.html
View File

@ -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;
}
</style>
</head>
<body>
@ -386,19 +468,42 @@
<input type="text" class="form-input" placeholder="请输入归属菜市场名称" required>
</div>
<div class="form-item">
<label class="form-label">
<span class="required">*</span>商品类目类型
</label>
<div class="custom-select" id="categoryTypeSelect">
<div class="custom-select-trigger placeholder">
<span id="categoryTypeSelected">请选择商品类目类型</span>
<span class="arrow">▼</span>
</div>
<div class="custom-options">
<div class="custom-option" data-value="offline">线下菜市场</div>
<div class="custom-option" data-value="cloud">云店</div>
</div>
</div>
<input type="hidden" id="categoryType" name="categoryType" value="">
</div>
<div class="form-item">
<label class="form-label">
<span class="required">*</span>主营类目
</label>
<select class="form-input" required>
<option value="">请选择主营类目</option>
<option value="vegetable">蔬菜</option>
<option value="fruit">水果</option>
<option value="meat">肉类</option>
<option value="seafood">海鲜</option>
<option value="grain">粮油</option>
<option value="other">其他</option>
</select>
<div class="custom-select" id="mainCategorySelect">
<div class="custom-select-trigger placeholder">
<span id="mainCategorySelected">请选择主营类目</span>
<span class="arrow">▼</span>
</div>
<div class="custom-options">
<div class="custom-option" data-value="vegetable">蔬菜</div>
<div class="custom-option" data-value="fruit">水果</div>
<div class="custom-option" data-value="meat">肉类</div>
<div class="custom-option" data-value="seafood">海鲜</div>
<div class="custom-option" data-value="grain">粮油</div>
<div class="custom-option" data-value="other">其他</div>
</div>
</div>
<input type="hidden" id="mainCategory" name="mainCategory" value="">
</div>
<div class="form-item">
@ -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');
});
</script>
</body>