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

综述: 优化市场订单管理页面UI和功能 

- 在市场店铺订单管理和市场订单管理页面中，优化搜索区域的样式和布局
- 将原有的.date-range样式替换为.filter-row和.filter-item，增强样式复用性和一致性
- 为搜索区域的输入框和选择框添加统一的样式类，提升视觉效果和用户体验
- 实现日期范围的快捷选择功能，包括近1天、近7天、近30天和自定义选项
- 添加自定义日期范围的显示/隐藏逻辑，提升页面交互性
This commit is contained in:
linbin 2025-10-02 18:53:08 +08:00
parent fc2d581884
commit eaecd7226f
2 changed files with 132 additions and 42 deletions
Show Stats Download Patch File Download Diff File Expand all files Collapse all files

87
商家端web/市场店铺订单管理/市场店铺订单管理.html
View File

@ -78,14 +78,40 @@
box-shadow: 0 0 0 2px rgba(24, 144, 255, 0.2); box-shadow: 0 0 0 2px rgba(24, 144, 255, 0.2);
} }
.date-range { .filter-row {
display: flex; display: flex;
align-items: center; align-items: center;
gap: 8px; gap: 20px;
flex-wrap: wrap;
} }
.date-range .form-input { .filter-item {
flex: 1; display: flex;
align-items: center;
gap: 10px;
}
.filter-item label {
font-weight: 500;
color: #333;
min-width: 70px;
}
.filter-item select,
.filter-item input {
padding: 8px 12px;
border: 1px solid #d9d9d9;
border-radius: 4px;
min-width: 120px;
font-size: 14px;
transition: all 0.3s ease;
}
.filter-item select:focus,
.filter-item input:focus {
border-color: #1890ff;
box-shadow: 0 0 0 2px rgba(24, 144, 255, 0.2);
outline: none;
} }
.button-group { .button-group {
@ -408,18 +434,18 @@
<!-- 搜索区域 --> <!-- 搜索区域 -->
<div class="search-section"> <div class="search-section">
<div class="search-form"> <div class="filter-row">
<div class="form-item"> <div class="filter-item">
<label class="form-label">收货人姓名</label> <label>收货人姓名:</label>
<input type="text" class="form-input" placeholder="收货人姓名搜索"> <input type="text" placeholder="收货人姓名搜索">
</div> </div>
<div class="form-item"> <div class="filter-item">
<label class="form-label">订单编号</label> <label>订单编号:</label>
<input type="text" class="form-input" placeholder="订单编号"> <input type="text" placeholder="订单编号">
</div> </div>
<div class="form-item"> <div class="filter-item">
<label class="form-label">店铺订单状态</label> <label>店铺订单状态:</label>
<select class="form-input"> <select>
<option value="">全部</option> <option value="">全部</option>
<option value="stock_completed">备货完成</option> <option value="stock_completed">备货完成</option>
<option value="pending_pickup">待取货</option> <option value="pending_pickup">待取货</option>
@ -430,13 +456,22 @@
<option value="completed">已完成</option> <option value="completed">已完成</option>
</select> </select>
</div> </div>
<div class="form-item"> </div>
<label class="form-label">订单时间</label> <div class="filter-row">
<div class="date-range"> <div class="filter-item">
<input type="date" class="form-input" placeholder="开始日期"> <label for="dateRange">日期范围:</label>
<span>-</span> <select id="dateRange">
<input type="date" class="form-input" placeholder="结束日期"> <option value="today">近1天</option>
</div> <option value="week" selected>近7天</option>
<option value="month">近30天</option>
<option value="custom">自定义</option>
</select>
</div>
<div class="filter-item" id="customDateRange" style="display: none;">
<label for="startDate">开始日期:</label>
<input type="date" id="startDate">
<label for="endDate">结束日期:</label>
<input type="date" id="endDate">
</div> </div>
</div> </div>
<div class="button-group"> <div class="button-group">
@ -776,6 +811,16 @@
</div> </div>
<script> <script>
// 日期范围选择
document.getElementById('dateRange').addEventListener('change', function() {
const customDateRange = document.getElementById('customDateRange');
if (this.value === 'custom') {
customDateRange.style.display = 'flex';
} else {
customDateRange.style.display = 'none';
}
});
// 标签页切换功能 // 标签页切换功能
document.querySelectorAll('.tab').forEach(tab => { document.querySelectorAll('.tab').forEach(tab => {
tab.addEventListener('click', function() { tab.addEventListener('click', function() {

87
商家端web/市场订单管理/市场订单管理.html
View File

@ -78,14 +78,40 @@
box-shadow: 0 0 0 2px rgba(24, 144, 255, 0.2); box-shadow: 0 0 0 2px rgba(24, 144, 255, 0.2);
} }
.date-range { .filter-row {
display: flex; display: flex;
align-items: center; align-items: center;
gap: 8px; gap: 20px;
flex-wrap: wrap;
} }
.date-range .form-input { .filter-item {
flex: 1; display: flex;
align-items: center;
gap: 10px;
}
.filter-item label {
font-weight: 500;
color: #333;
min-width: 70px;
}
.filter-item select,
.filter-item input {
padding: 8px 12px;
border: 1px solid #d9d9d9;
border-radius: 4px;
min-width: 120px;
font-size: 14px;
transition: all 0.3s ease;
}
.filter-item select:focus,
.filter-item input:focus {
border-color: #1890ff;
box-shadow: 0 0 0 2px rgba(24, 144, 255, 0.2);
outline: none;
} }
.button-group { .button-group {
@ -408,18 +434,18 @@
<!-- 搜索区域 --> <!-- 搜索区域 -->
<div class="search-section"> <div class="search-section">
<div class="search-form"> <div class="filter-row">
<div class="form-item"> <div class="filter-item">
<label class="form-label">收货人姓名</label> <label>收货人姓名:</label>
<input type="text" class="form-input" placeholder="收货人姓名搜索"> <input type="text" placeholder="收货人姓名搜索">
</div> </div>
<div class="form-item"> <div class="filter-item">
<label class="form-label">订单编号</label> <label>订单编号:</label>
<input type="text" class="form-input" placeholder="订单编号"> <input type="text" placeholder="订单编号">
</div> </div>
<div class="form-item"> <div class="filter-item">
<label class="form-label">结算单位订单状态</label> <label>结算单位订单状态:</label>
<select class="form-input"> <select>
<option value="">全部</option> <option value="">全部</option>
<option value="pending_payment">待支付</option> <option value="pending_payment">待支付</option>
<option value="pending_accept">待接单</option> <option value="pending_accept">待接单</option>
@ -436,13 +462,22 @@
<option value="platform_cancelled">平台取消订单</option> <option value="platform_cancelled">平台取消订单</option>
</select> </select>
</div> </div>
<div class="form-item"> </div>
<label class="form-label">订单时间</label> <div class="filter-row">
<div class="date-range"> <div class="filter-item">
<input type="date" class="form-input" placeholder="开始日期"> <label for="dateRange">日期范围:</label>
<span>-</span> <select id="dateRange">
<input type="date" class="form-input" placeholder="结束日期"> <option value="today">近1天</option>
</div> <option value="week" selected>近7天</option>
<option value="month">近30天</option>
<option value="custom">自定义</option>
</select>
</div>
<div class="filter-item" id="customDateRange" style="display: none;">
<label for="startDate">开始日期:</label>
<input type="date" id="startDate">
<label for="endDate">结束日期:</label>
<input type="date" id="endDate">
</div> </div>
</div> </div>
<div class="button-group"> <div class="button-group">
@ -908,6 +943,16 @@
</div> </div>
<script> <script>
// 日期范围选择
document.getElementById('dateRange').addEventListener('change', function() {
const customDateRange = document.getElementById('customDateRange');
if (this.value === 'custom') {
customDateRange.style.display = 'flex';
} else {
customDateRange.style.display = 'none';
}
});
// 标签页切换功能 // 标签页切换功能
document.querySelectorAll('.tab').forEach(tab => { document.querySelectorAll('.tab').forEach(tab => {
tab.addEventListener('click', function() { tab.addEventListener('click', function() {