综述: 优化自主经营者初始化店铺页面，新增自定义下拉框组件
- 在自主经营者初始化店铺页面中新增商品类目类型选择功能，支持"线下菜市场"和"云店"两种类型 - 将原有的主营类目原生select下拉框替换为自定义下拉框组件，提升用户交互体验 - 新增自定义下拉框样式，包含触发器、选项列表、选中状态和展开动画效果 - 实现自定义下拉框JavaScript功能，支持点击展开/收起、选项选择和全局关闭等交互逻辑 - 更新大妈集市.rp原型文件，同步最新的页面设计变更
This commit is contained in:
parent
f46e7c92c3
commit
242b93c907
|
|
@ -362,6 +362,88 @@
|
||||||
.hidden {
|
.hidden {
|
||||||
display: none !important;
|
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>
|
</style>
|
||||||
</head>
|
</head>
|
||||||
<body>
|
<body>
|
||||||
|
|
@ -386,19 +468,42 @@
|
||||||
<input type="text" class="form-input" placeholder="请输入归属菜市场名称" required>
|
<input type="text" class="form-input" placeholder="请输入归属菜市场名称" required>
|
||||||
</div>
|
</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">
|
<div class="form-item">
|
||||||
<label class="form-label">
|
<label class="form-label">
|
||||||
<span class="required">*</span>主营类目
|
<span class="required">*</span>主营类目
|
||||||
</label>
|
</label>
|
||||||
<select class="form-input" required>
|
<div class="custom-select" id="mainCategorySelect">
|
||||||
<option value="">请选择主营类目</option>
|
<div class="custom-select-trigger placeholder">
|
||||||
<option value="vegetable">蔬菜</option>
|
<span id="mainCategorySelected">请选择主营类目</span>
|
||||||
<option value="fruit">水果</option>
|
<span class="arrow">▼</span>
|
||||||
<option value="meat">肉类</option>
|
</div>
|
||||||
<option value="seafood">海鲜</option>
|
<div class="custom-options">
|
||||||
<option value="grain">粮油</option>
|
<div class="custom-option" data-value="vegetable">蔬菜</div>
|
||||||
<option value="other">其他</option>
|
<div class="custom-option" data-value="fruit">水果</div>
|
||||||
</select>
|
<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>
|
||||||
|
|
||||||
<div class="form-item">
|
<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() {
|
document.addEventListener('DOMContentLoaded', function() {
|
||||||
// 初始化营业时间选项显示状态
|
// 初始化营业时间选项显示状态
|
||||||
toggleBusinessTimeOptions();
|
toggleBusinessTimeOptions();
|
||||||
|
|
||||||
|
// 初始化自定义下拉框
|
||||||
|
initCustomSelect('categoryTypeSelect', 'categoryType', 'categoryTypeSelected');
|
||||||
|
initCustomSelect('mainCategorySelect', 'mainCategory', 'mainCategorySelected');
|
||||||
});
|
});
|
||||||
</script>
|
</script>
|
||||||
</body>
|
</body>
|
||||||
|
|
|
||||||
Loading…
Reference in New Issue