综述: 优化市场订单管理页面UI和功能
- 在市场店铺订单管理和市场订单管理页面中，优化搜索区域的样式和布局 - 将原有的.date-range样式替换为.filter-row和.filter-item，增强样式复用性和一致性 - 为搜索区域的输入框和选择框添加统一的样式类，提升视觉效果和用户体验 - 实现日期范围的快捷选择功能，包括近1天、近7天、近30天和自定义选项 - 添加自定义日期范围的显示/隐藏逻辑，提升页面交互性
This commit is contained in:
parent
fc2d581884
commit
eaecd7226f
|
|
@ -78,14 +78,40 @@
|
|||
box-shadow: 0 0 0 2px rgba(24, 144, 255, 0.2);
|
||||
}
|
||||
|
||||
.date-range {
|
||||
.filter-row {
|
||||
display: flex;
|
||||
align-items: center;
|
||||
gap: 8px;
|
||||
gap: 20px;
|
||||
flex-wrap: wrap;
|
||||
}
|
||||
|
||||
.date-range .form-input {
|
||||
flex: 1;
|
||||
.filter-item {
|
||||
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 {
|
||||
|
|
@ -408,18 +434,18 @@
|
|||
|
||||
<!-- 搜索区域 -->
|
||||
<div class="search-section">
|
||||
<div class="search-form">
|
||||
<div class="form-item">
|
||||
<label class="form-label">收货人姓名</label>
|
||||
<input type="text" class="form-input" placeholder="收货人姓名搜索">
|
||||
<div class="filter-row">
|
||||
<div class="filter-item">
|
||||
<label>收货人姓名:</label>
|
||||
<input type="text" placeholder="收货人姓名搜索">
|
||||
</div>
|
||||
<div class="form-item">
|
||||
<label class="form-label">订单编号</label>
|
||||
<input type="text" class="form-input" placeholder="订单编号">
|
||||
<div class="filter-item">
|
||||
<label>订单编号:</label>
|
||||
<input type="text" placeholder="订单编号">
|
||||
</div>
|
||||
<div class="form-item">
|
||||
<label class="form-label">店铺订单状态</label>
|
||||
<select class="form-input">
|
||||
<div class="filter-item">
|
||||
<label>店铺订单状态:</label>
|
||||
<select>
|
||||
<option value="">全部</option>
|
||||
<option value="stock_completed">备货完成</option>
|
||||
<option value="pending_pickup">待取货</option>
|
||||
|
|
@ -430,13 +456,22 @@
|
|||
<option value="completed">已完成</option>
|
||||
</select>
|
||||
</div>
|
||||
<div class="form-item">
|
||||
<label class="form-label">订单时间</label>
|
||||
<div class="date-range">
|
||||
<input type="date" class="form-input" placeholder="开始日期">
|
||||
<span>-</span>
|
||||
<input type="date" class="form-input" placeholder="结束日期">
|
||||
</div>
|
||||
<div class="filter-row">
|
||||
<div class="filter-item">
|
||||
<label for="dateRange">日期范围:</label>
|
||||
<select id="dateRange">
|
||||
<option value="today">近1天</option>
|
||||
<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 class="button-group">
|
||||
|
|
@ -776,6 +811,16 @@
|
|||
</div>
|
||||
|
||||
<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 => {
|
||||
tab.addEventListener('click', function() {
|
||||
|
|
|
|||
|
|
@ -78,14 +78,40 @@
|
|||
box-shadow: 0 0 0 2px rgba(24, 144, 255, 0.2);
|
||||
}
|
||||
|
||||
.date-range {
|
||||
.filter-row {
|
||||
display: flex;
|
||||
align-items: center;
|
||||
gap: 8px;
|
||||
gap: 20px;
|
||||
flex-wrap: wrap;
|
||||
}
|
||||
|
||||
.date-range .form-input {
|
||||
flex: 1;
|
||||
.filter-item {
|
||||
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 {
|
||||
|
|
@ -408,18 +434,18 @@
|
|||
|
||||
<!-- 搜索区域 -->
|
||||
<div class="search-section">
|
||||
<div class="search-form">
|
||||
<div class="form-item">
|
||||
<label class="form-label">收货人姓名</label>
|
||||
<input type="text" class="form-input" placeholder="收货人姓名搜索">
|
||||
<div class="filter-row">
|
||||
<div class="filter-item">
|
||||
<label>收货人姓名:</label>
|
||||
<input type="text" placeholder="收货人姓名搜索">
|
||||
</div>
|
||||
<div class="form-item">
|
||||
<label class="form-label">订单编号</label>
|
||||
<input type="text" class="form-input" placeholder="订单编号">
|
||||
<div class="filter-item">
|
||||
<label>订单编号:</label>
|
||||
<input type="text" placeholder="订单编号">
|
||||
</div>
|
||||
<div class="form-item">
|
||||
<label class="form-label">结算单位订单状态</label>
|
||||
<select class="form-input">
|
||||
<div class="filter-item">
|
||||
<label>结算单位订单状态:</label>
|
||||
<select>
|
||||
<option value="">全部</option>
|
||||
<option value="pending_payment">待支付</option>
|
||||
<option value="pending_accept">待接单</option>
|
||||
|
|
@ -436,13 +462,22 @@
|
|||
<option value="platform_cancelled">平台取消订单</option>
|
||||
</select>
|
||||
</div>
|
||||
<div class="form-item">
|
||||
<label class="form-label">订单时间</label>
|
||||
<div class="date-range">
|
||||
<input type="date" class="form-input" placeholder="开始日期">
|
||||
<span>-</span>
|
||||
<input type="date" class="form-input" placeholder="结束日期">
|
||||
</div>
|
||||
<div class="filter-row">
|
||||
<div class="filter-item">
|
||||
<label for="dateRange">日期范围:</label>
|
||||
<select id="dateRange">
|
||||
<option value="today">近1天</option>
|
||||
<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 class="button-group">
|
||||
|
|
@ -908,6 +943,16 @@
|
|||
</div>
|
||||
|
||||
<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 => {
|
||||
tab.addEventListener('click', function() {
|
||||
|
|
|
|||
Loading…
Reference in New Issue