销花宝挂账订单日期筛选层级bug处理

ghsApp/src/components/module/dateSelect.vue

@@ -1,4 +1,5 @@
 <template>
+    <!-- 时间筛选：快捷日期 + 日历。App 端弹层 z-index 需高于订单列表，避免被 overflow 滚动层盖住 -->
     <view class="select-bg_bx">
         <view v-if="isShowTit" @click="switchCut" :class="['select-title',dropdownShow?'select_corlor':'']">
             <text>{{defaultDateName}}</text>
@@ -56,6 +57,10 @@
     </view>
 </template>
 <script>
+/**
+ * 公共时间筛选：快捷日期、月份、时段 + 日历弹层。
+ * 挂账订单、统计等列表页使用；打开弹层时抛 overlay-change，供 App 端抬层级。
+ */
 import DropdownList from "@/components/plugin/dropdown-list";
 import MxDatePicker from '@/components/mx-datepicker/mx-datepicker.vue';
 import {mapGetters} from "vuex";
@@ -121,7 +126,9 @@ export default {
                 this.defaultDateName = newVal
             },
             immediate:true
-        }
+        },
+        dropdownShow: 'emitOverlayChange',
+        showPicker: 'emitOverlayChange'
     },
     computed:{
         ...mapGetters(["getDictionariesInfo"]),
@@ -137,6 +144,10 @@ export default {
     onLoad(){
     },
     methods:{
+        emitOverlayChange() {
+            // 页面用来抬层级或隐藏列表：App 端日历若仍在滚动容器内会被订单卡片盖住
+            this.$emit('overlay-change', !!(this.dropdownShow || this.showPicker))
+        },
         bindMonthChange(e){
             this.dropdownShow = !this.dropdownShow
             this.dropdownShow = false;
@@ -237,14 +248,14 @@ export default {
         background-color: rgba(0, 0, 0, 0.5);
         left: 0;
         top: 0upx;
-        z-index: 20;
+        z-index: 9990;
     }
     & .select-fixed_bx {
         position: fixed;
         width: 100%;
         background-color: #FFFFFF;
         left: 0;
-        z-index: 29;
+        z-index: 9991;
         padding:50upx 30upx 40upx;
         border-radius: 0upx 0upx 20upx 20upx;
         transition: all 0.5s ease-in-out;

ghsApp/src/components/mx-datepicker/mx-datepicker.vue

@@ -576,7 +576,8 @@
 </script>
 
 <style lang="scss" scoped>
-	$z-index: 100;
+	/* App 端页面顶栏/列表常有 z-index:100，日历必须更高才能盖住订单卡片 */
+	$z-index: 99999;
 	$cell-spacing: 20upx;
 	$calendar-size: 630upx;
 	$calendar-item-size: 90upx;

ghsApp/src/pagesArrears/details.vue

@@ -7,10 +7,11 @@
 					<image class="logo" :src="customInfo.smallAvatar"/>
 					<text class="name">{{ customInfo.name || "" }}</text>
 				</view>
-				<DateSelect class="bar" top="0" @selectDateFn="selectDateFn" defaultShowName='时间' />
+				<!-- 占位：真正的时间筛选挂在页面根节点，避免把日历嵌进 overflow 滚动层 -->
+				<view class="date-select-hold"></view>
 			</view>
 		</view>
-		<view class="shop-list">
+		<view class="shop-list" :class="{ 'is-covered': dateOverlayVisible }">
 			<view class="debt-multi-page-tip" v-if="debtTotalPage > 1">
 				<text class="debt-multi-page-tip__text">注意账单有多页，请翻页查看</text>
 			</view>
@@ -21,7 +22,7 @@
 				<AppWrapperEmpty title="暂无数据" :is-empty="$util.isEmpty(detailsList)" />
 			</block>
 		</view>
-		<view class="page-footer-fixed">
+		<view class="page-footer-fixed" :class="{ 'is-covered': dateOverlayVisible }">
 			<DebtListPager
 				:page="debtPage"
 				:page-size="debtPageSize"
@@ -52,9 +53,17 @@
 			</view>
 		</view>
 	</view>
+	<!-- App 端 overflow 滚动层会盖住嵌在顶栏里的日历，筛选弹层必须放在滚动容器外 -->
+	<view class="date-select-layer" :class="{ 'is-open': dateOverlayVisible }">
+		<DateSelect class="bar" top="0" defaultShowName="时间" @selectDateFn="selectDateFn" @overlay-change="onDateOverlayChange" />
+	</view>
 </view>
 </template>
 <script>
+/**
+ * 供货商 App 挂账订单明细：按客户勾选欠款单并创建结账单。
+ * 时间筛选弹层挂在页面根节点，避免 App 端 overflow 滚动把日历压在订单列表下面。
+ */
 import AppWrapperEmpty from "@/components/app-wrapper-empty";
 import DetailsItem from "./detailsItem";
 import DebtListPager from "@/components/module/debt-list-pager";
@@ -80,7 +89,8 @@ export default {
 			searchTime:'',
 			startTime:'',
 			endTime:'',
-			unClear:[]
+			unClear:[],
+			dateOverlayVisible: false
 		};
 	},
 	onPullDownRefresh() {
@@ -161,6 +171,10 @@ export default {
 			}
 			this.isModel = true;
 		},
+		onDateOverlayChange(visible) {
+			// App 端隐藏列表和底栏，避免原生滚动层/button 仍浮在日历上
+			this.dateOverlayVisible = !!visible
+		},
 		selectDateFn(val){
 			this.searchTime = val.searchTime
 			this.startTime = val.startTime
@@ -295,6 +309,10 @@ export default {
 				font-weight: 400;
 				color: #999999;
 			}
+			.date-select-hold {
+				min-width: 140upx;
+				height: 40upx;
+			}
 			.info-item {
 				display: flex;
 				align-items: center;
@@ -322,6 +340,13 @@ export default {
 		padding: 20upx 30upx;
 		flex: 1;
 		padding-bottom: 420upx;
+		position: relative;
+		z-index: 1;
+		&.is-covered {
+			/* #ifdef APP-PLUS */
+			visibility: hidden;
+			/* #endif */
+		}
 	}
 	.debt-multi-page-tip {
 		margin-bottom: 16upx;
@@ -347,6 +372,11 @@ export default {
 		box-shadow: 0upx -1upx 6upx 0upx rgba(4, 0, 0, 0.06);
 		padding-bottom: constant(safe-area-inset-bottom);
 		padding-bottom: env(safe-area-inset-bottom);
+		&.is-covered {
+			/* #ifdef APP-PLUS */
+			visibility: hidden;
+			/* #endif */
+		}
 	}
 	.unclear-notice {
 		width: 100%;
@@ -409,4 +439,28 @@ export default {
 		}
 	}
 }
+.date-select-layer {
+	position: fixed;
+	top: 0;
+	left: 0;
+	right: 0;
+	z-index: 10000;
+	height: 98upx;
+	padding: 0 30upx;
+	display: flex;
+	align-items: center;
+	justify-content: flex-end;
+	box-sizing: border-box;
+	pointer-events: none;
+	/* 打开弹层时撑满视口，App 端日历才不会从矮容器里「溢出」后被列表盖住 */
+	&.is-open {
+		height: 100%;
+		bottom: 0;
+		align-items: flex-start;
+		padding-top: 30upx;
+	}
+}
+.date-select-layer ::v-deep .select-bg_bx {
+	pointer-events: auto;
+}
 </style>

ghsApp/src/pagesArrears/detailsItem.vue

@@ -90,7 +90,7 @@ export default {
 		position: absolute;
 		top: 0;
 		right: 0;
-		z-index: 2;
+		/* 不用独立 z-index，避免 App 端按钮层盖住时间日历 */
 		width: 180upx;
 		height: 80upx;
 		border: 1upx solid #67a0f7;