Browse Source

订单页优化

shish 6 hours ago
parent
commit
22eb694e19
2 changed files with 58 additions and 16 deletions
  1. 57 15
      ghsApp/src/admin/home/order.vue
  2. 1 1
      ghsApp/src/pagesOrder/detail.vue

+ 57 - 15
ghsApp/src/admin/home/order.vue

@@ -21,9 +21,6 @@
     </view>
 
     <view class="input-wrap_box">
-      <view class="select-dn_bx">
-        <DateSelect ref="dateSelectRef" class="bar" top="0" @selectDateFn="selectDateFn" defaultShowName="近30天" />
-      </view>
       <view class="search-container">
         <AppSearchModule ref="appSearch" placeholder="这里搜索" @input="searchFn" />
         <view v-if="customId != 0" class="search-clear-overlay" @click.stop="clearSearch">清空</view>
@@ -140,6 +137,19 @@
             </view>
           </view>
         </view>
+        <!-- 原顶栏 DateSelect 并入筛选:时间类型 + 时间范围统一入口 -->
+        <view class="filter-section">
+          <view class="filter-title">时间范围</view>
+          <view class="filter-date-wrap">
+            <DateSelect
+              ref="dateSelectRef"
+              class="bar"
+              top="0"
+              @selectDateFn="selectDateFn"
+              :defaultShowName="dateRangeLabel"
+            />
+          </view>
+        </view>
         <view class="filter-section">
           <view class="filter-title">片区</view>
           <view class="filter-options">
@@ -266,7 +276,10 @@ export default {
         this.filterBook !== -1 ||
         this.searchTimeType !== 0 ||
         this.filterShopAdminId !== 0 ||
-        this.filterSendType !== -1
+        this.filterSendType !== -1 ||
+        this.searchTime !== 'last30Days' ||
+        !!this.startTime ||
+        !!this.endTime
       );
     }
   },
@@ -324,6 +337,8 @@ export default {
       searchTime: 'last30Days',
       startTime: '',
       endTime: '',
+      // 筛选面板内时间范围展示文案(v-if 重挂载时回填)
+      dateRangeLabel: '近30天',
       fromDetail: { status: 1 },
       currentInfo: {},
       currentTitle: '',
@@ -587,6 +602,7 @@ export default {
       this.searchTime = 'last30Days'
       this.startTime = ''
       this.endTime = ''
+      this.dateRangeLabel = '近30天'
       this.resetDateSelect()
     },
     resetDateSelect() {
@@ -600,11 +616,28 @@ export default {
       this.getOrderList();
     },
     selectDateFn(val) {
+      // 时间范围已并入筛选面板:只记参数,点「确定」再刷列表
       this.searchTime = val.searchTime;
-      this.startTime = val.startTime;
-      this.endTime = val.endTime;
-      this.resetList();
-      this.getOrderList();
+      this.startTime = val.startTime || '';
+      this.endTime = val.endTime || '';
+      this.dateRangeLabel = this.resolveDateLabel(val);
+    },
+    /** 根据 DateSelect 回传参数还原展示文案 */
+    resolveDateLabel(val) {
+      if (!val) {
+        return '近30天';
+      }
+      if (val.searchTime === 'custom' && val.startTime) {
+        const s = String(val.startTime).substring(5);
+        const e = String(val.endTime || val.startTime).substring(5);
+        return s === e ? s : s + '/' + e;
+      }
+      if (val.searchTime === 'byMonth' && val.startTime) {
+        return val.startTime;
+      }
+      const opts = (this.getDictionariesInfo && this.getDictionariesInfo.dateDefaultOption) || [];
+      const hit = opts.find((o) => o.value === val.searchTime);
+      return hit ? hit.name : '近30天';
     },
     searchFn(e) {
       let that = this;
@@ -735,10 +768,6 @@ page {
   padding-top: 100upx;
   padding-bottom: 1upx;
   overflow: hidden;
-  .select-dn_bx {
-    padding-left: 10upx;
-    padding-right: 10upx;
-  }
   .app-tabs {
     position: fixed;
     /* 手机mobile屏幕小于1000px */
@@ -768,11 +797,10 @@ page {
     display: flex;
     align-items: center;
     padding: 0 10upx;
-    & > view:nth-child(2) {
-      flex: 1;
-    }
     .search-container {
       position: relative;
+      flex: 1;
+      min-width: 0;
     }
   }
   .list-wrap {
@@ -871,6 +899,20 @@ page {
   font-size: 28upx;
   font-weight: 700;
 }
+/* 筛选内 DateSelect:抬高层级,避免被筛选遮罩挡住 */
+.filter-date-wrap {
+  padding: 10upx 0;
+  ::v-deep .select-mark-view {
+    z-index: 10000001 !important;
+  }
+  ::v-deep .select-fixed_bx {
+    z-index: 10000002 !important;
+  }
+  /* mx-datepicker 根节点 .picker,需高于筛选遮罩 9999999 */
+  ::v-deep .picker {
+    z-index: 10000003 !important;
+  }
+}
 .filter-options {
   display: flex;
   flex-wrap: wrap;

+ 1 - 1
ghsApp/src/pagesOrder/detail.vue

@@ -136,7 +136,7 @@
 					<view>{{ detailInfo.wlName }}</view>
 				</view>
 				<view class="order-info_box">
-					<view>配送时间:</view>
+					<view>期望配送:</view>
 					<view>{{ detailInfo.sendTimeWant }}</view>
 					<view class="price">
 						<button @click.stop="openPrintLog()" class="admin-button-com default">打印时间</button>