|
|
@@ -27,9 +27,10 @@
|
|
|
<view class="search-container">
|
|
|
<AppSearchModule placeholder="填写" v-model="searchText" @input="searchFn"/>
|
|
|
</view>
|
|
|
- <button class="admin-button-com middle" @click="getScanOrder()">扫码</button>
|
|
|
- <button class="admin-button-com middle" @click="selectStaffFn()">员工</button>
|
|
|
- <button class="admin-button-com middle" @click="cancelFn()">清空</button>
|
|
|
+ <button class="admin-button-com middle blue filter-btn" @click.stop="openFilterPanel">
|
|
|
+ 筛选
|
|
|
+ <text v-if="hasActiveFilters" class="filter-dot"></text>
|
|
|
+ </button>
|
|
|
</view>
|
|
|
<app-tabs :tabs="tabs" class="app-tabs" :isFixed="false" :top="50" :currentTab="tabIndex" :height="100" @change="change" itemWidth="20%" />
|
|
|
<view class="list-wrap">
|
|
|
@@ -90,7 +91,7 @@
|
|
|
<view class="admin-button-com middle" v-if="item.sendStatus == '-1'" @click.stop="openExpressPage(item.id)">呼叫跑腿</view>
|
|
|
<view class="admin-button-com middle" v-else-if="item.sendStatus == '3'" @click.stop="openExpressPage(item.id)">重叫跑腿</view>
|
|
|
<view class="admin-button-com default" v-else-if="item.sendStatus == '2'">跑腿完成</view>
|
|
|
- <view class="admin-button-com default" v-else="item.sendStatus == '1' && item.payStatus == 1">已发跑腿</view>
|
|
|
+ <view class="admin-button-com default" v-else-if="item.sendStatus == '1' && item.payStatus == 1">已发跑腿</view>
|
|
|
</block>
|
|
|
|
|
|
</view>
|
|
|
@@ -115,6 +116,56 @@
|
|
|
</view>
|
|
|
</uni-popup>
|
|
|
|
|
|
+ <!-- 筛选下拉面板 -->
|
|
|
+ <view v-if="showFilterPanel" class="filter-overlay" @click="closeFilterPanel">
|
|
|
+ <view class="filter-panel" @click.stop>
|
|
|
+ <view class="filter-header">筛选订单</view>
|
|
|
+
|
|
|
+ <!-- 扫码筛选 -->
|
|
|
+ <view class="filter-section">
|
|
|
+ <view class="filter-title">扫码</view>
|
|
|
+ <view class="filter-options">
|
|
|
+ <view
|
|
|
+ v-for="(item, index) in repeatOptions"
|
|
|
+ :key="index"
|
|
|
+ class="filter-option"
|
|
|
+ :class="{ 'active': repeat === item.value }"
|
|
|
+ @click="selectRepeat(item.value)"
|
|
|
+ >
|
|
|
+ {{ item.label }}
|
|
|
+ </view>
|
|
|
+ </view>
|
|
|
+ </view>
|
|
|
+
|
|
|
+ <!-- 员工筛选 -->
|
|
|
+ <view class="filter-section">
|
|
|
+ <view class="filter-title">下单人</view>
|
|
|
+ <view class="filter-options">
|
|
|
+ <view
|
|
|
+ class="filter-option"
|
|
|
+ :class="{ 'active': shopAdminId === 0 }"
|
|
|
+ @click="selectStaff(0)"
|
|
|
+ >全部</view>
|
|
|
+ <view
|
|
|
+ v-for="(item, index) in staffList"
|
|
|
+ :key="index"
|
|
|
+ class="filter-option"
|
|
|
+ :class="{ 'active': shopAdminId === item.id }"
|
|
|
+ @click="selectStaff(item.id)"
|
|
|
+ >
|
|
|
+ {{ item.name }}
|
|
|
+ </view>
|
|
|
+ </view>
|
|
|
+ </view>
|
|
|
+
|
|
|
+ <!-- 操作按钮 -->
|
|
|
+ <view class="filter-actions">
|
|
|
+ <button class="filter-action-btn clear-btn middle" @click="clearFilters">清空</button>
|
|
|
+ <button class="filter-action-btn confirm-btn middle blue" @click="confirmFilters">确定</button>
|
|
|
+ </view>
|
|
|
+ </view>
|
|
|
+ </view>
|
|
|
+
|
|
|
</view>
|
|
|
</template>
|
|
|
<script>
|
|
|
@@ -156,9 +207,21 @@ export default {
|
|
|
endTime:'',
|
|
|
repeat:-1,
|
|
|
searchStyle:0,//0客户 1编号
|
|
|
- searchText:''
|
|
|
+ searchText:'',
|
|
|
+ // 面板相关
|
|
|
+ showFilterPanel: false,
|
|
|
+ repeatOptions: [
|
|
|
+ { label: '全部', value: -1 },
|
|
|
+ { label: '扫码单', value: 1 }
|
|
|
+ ]
|
|
|
};
|
|
|
},
|
|
|
+ computed: {
|
|
|
+ // 是否存在激活的筛选条件
|
|
|
+ hasActiveFilters () {
|
|
|
+ return this.repeat !== -1 || this.shopAdminId !== 0;
|
|
|
+ }
|
|
|
+ },
|
|
|
onPullDownRefresh () {
|
|
|
this.resetList();
|
|
|
this.getOrderList().then(res => {
|
|
|
@@ -194,6 +257,34 @@ export default {
|
|
|
}
|
|
|
},
|
|
|
methods: {
|
|
|
+ // 面板相关
|
|
|
+ openFilterPanel () {
|
|
|
+ this.showFilterPanel = true
|
|
|
+ },
|
|
|
+ closeFilterPanel () {
|
|
|
+ this.showFilterPanel = false
|
|
|
+ },
|
|
|
+ selectRepeat (value) {
|
|
|
+ this.repeat = value
|
|
|
+ },
|
|
|
+ selectStaff (id) {
|
|
|
+ this.shopAdminId = id
|
|
|
+ },
|
|
|
+ clearFilters () {
|
|
|
+ // 恢复默认筛选
|
|
|
+ this.repeat = -1
|
|
|
+ this.shopAdminId = 0
|
|
|
+ // 关闭面板并刷新
|
|
|
+ this.closeFilterPanel()
|
|
|
+ this.resetList()
|
|
|
+ this.getOrderList()
|
|
|
+ },
|
|
|
+ confirmFilters () {
|
|
|
+ // 关闭面板并刷新
|
|
|
+ this.closeFilterPanel()
|
|
|
+ this.resetList()
|
|
|
+ this.getOrderList()
|
|
|
+ },
|
|
|
getCustom(item){
|
|
|
this.showSearch = false
|
|
|
this.customId = item.id
|
|
|
@@ -415,6 +506,20 @@ export default {
|
|
|
flex-shrink: 0;
|
|
|
white-space: nowrap;
|
|
|
}
|
|
|
+ /* 筛选按钮样式（含红点） */
|
|
|
+ .filter-btn {
|
|
|
+ position: relative;
|
|
|
+ .filter-dot {
|
|
|
+ position: absolute;
|
|
|
+ top: 5upx;
|
|
|
+ right: 5upx;
|
|
|
+ width: 15upx;
|
|
|
+ height: 15upx;
|
|
|
+ background-color: white;
|
|
|
+ border-radius: 50%;
|
|
|
+ animation: filterDotBlink 2s infinite;
|
|
|
+ }
|
|
|
+ }
|
|
|
}
|
|
|
.list-wrap {
|
|
|
padding-top: 115upx;
|
|
|
@@ -462,4 +567,118 @@ export default {
|
|
|
width:190upx;
|
|
|
}
|
|
|
}
|
|
|
+
|
|
|
+/* 筛选面板样式（参考 goods/list.vue） */
|
|
|
+.filter-overlay {
|
|
|
+ position: fixed;
|
|
|
+ top: 0;
|
|
|
+ left: 0;
|
|
|
+ right: 0;
|
|
|
+ bottom: 0;
|
|
|
+ background-color: rgba(0, 0, 0, 0.5);
|
|
|
+ z-index: 9999;
|
|
|
+ display: flex;
|
|
|
+ align-items: flex-start;
|
|
|
+ justify-content: center;
|
|
|
+}
|
|
|
+
|
|
|
+.filter-panel {
|
|
|
+ background-color: #fff;
|
|
|
+ border-radius: 0 0 20upx 20upx;
|
|
|
+ width: 100%;
|
|
|
+ max-height: 90vh;
|
|
|
+ overflow-y: auto;
|
|
|
+ animation: slideDown 0.3s ease-out;
|
|
|
+}
|
|
|
+
|
|
|
+@keyframes slideDown {
|
|
|
+ from {
|
|
|
+ opacity: 0;
|
|
|
+ transform: translateY(-50upx);
|
|
|
+ }
|
|
|
+ to {
|
|
|
+ opacity: 1;
|
|
|
+ transform: translateY(0);
|
|
|
+ }
|
|
|
+}
|
|
|
+
|
|
|
+@keyframes filterDotBlink {
|
|
|
+ 0%, 100% {
|
|
|
+ background-color: #ffffff;
|
|
|
+ }
|
|
|
+ 50% {
|
|
|
+ background-color: #ff3b30;
|
|
|
+ }
|
|
|
+}
|
|
|
+
|
|
|
+.filter-header {
|
|
|
+ text-align: center;
|
|
|
+ padding: 16upx 0;
|
|
|
+ font-size: 32upx;
|
|
|
+ font-weight: bold;
|
|
|
+ border-bottom: 1upx solid #f0f0f0;
|
|
|
+ color: #333;
|
|
|
+}
|
|
|
+
|
|
|
+.filter-section {
|
|
|
+ padding: 28upx 40upx;
|
|
|
+ border-bottom: 1upx solid #f0f0f0;
|
|
|
+ &:last-child {
|
|
|
+ border-bottom: none;
|
|
|
+ }
|
|
|
+}
|
|
|
+
|
|
|
+.filter-title {
|
|
|
+ font-size: 28upx;
|
|
|
+ font-weight: 600;
|
|
|
+ color: #333;
|
|
|
+ margin-bottom: 20upx;
|
|
|
+}
|
|
|
+
|
|
|
+.filter-options {
|
|
|
+ display: flex;
|
|
|
+ flex-wrap: wrap;
|
|
|
+ gap: 20upx;
|
|
|
+}
|
|
|
+
|
|
|
+.filter-option {
|
|
|
+ padding: 16upx 32upx;
|
|
|
+ border: 2upx solid #e0e0e0;
|
|
|
+ border-radius: 25upx;
|
|
|
+ font-size: 26upx;
|
|
|
+ color: #666;
|
|
|
+ background-color: #fff;
|
|
|
+ text-align: center;
|
|
|
+ min-width: 120upx;
|
|
|
+ transition: all 0.3s ease;
|
|
|
+ &.active {
|
|
|
+ border-color: #52c41a;
|
|
|
+ background-color: #f6ffed;
|
|
|
+ color: #52c41a;
|
|
|
+ font-weight: 600;
|
|
|
+ }
|
|
|
+}
|
|
|
+
|
|
|
+.filter-actions {
|
|
|
+ display: flex;
|
|
|
+ padding: 30upx 40upx;
|
|
|
+ gap: 20upx;
|
|
|
+}
|
|
|
+
|
|
|
+.filter-action-btn {
|
|
|
+ flex: 1;
|
|
|
+ padding: 14upx 0;
|
|
|
+ border-radius: 12upx;
|
|
|
+ font-size: 28upx;
|
|
|
+ border: none;
|
|
|
+ font-weight: 600;
|
|
|
+ &.clear-btn {
|
|
|
+ background-color: #f5f5f5;
|
|
|
+ color: #666;
|
|
|
+ }
|
|
|
+ &.confirm-btn {
|
|
|
+ background-color: #09C567;
|
|
|
+ color: #fff;
|
|
|
+ }
|
|
|
+}
|
|
|
</style>
|
