|
|
@@ -1,27 +1,29 @@
|
|
|
<!--
|
|
|
供货商采购入库单列表。
|
|
|
- 顶栏：搜索 + 采购人；筛选条：发货时间、记账时间（入库日 entryTime）两套 DateSelect + 重置。
|
|
|
- 日历不嵌进列表滚动区，避免 App 端被订单卡片盖住。
|
|
|
+ 顶栏（搜索/采购人/新增采购/发货+记账时间/Tab）position:fixed 钉在导航栏下，不随页面滚动；
|
|
|
+ 列表用实测高度留白，保留页面级下拉刷新和触底加载，兼容小程序与 App。
|
|
|
-->
|
|
|
<template>
|
|
|
<view class="app-content">
|
|
|
- <view class="order-page">
|
|
|
+ <!-- 钉在视口顶部：不能放进 overflow 滚动层，否则 App 端日历会被订单盖住 -->
|
|
|
+ <view class="page-sticky">
|
|
|
<view class="page-header">
|
|
|
<view class="search-row">
|
|
|
<view class="search-hold">
|
|
|
- <AppSearchModule placeholder="核销码 / 名称 / 手机号" @input="searchFn"/>
|
|
|
+ <AppSearchModule :height="90" placeholder="核销码 / 名称 / 手机号" @input="searchFn"/>
|
|
|
</view>
|
|
|
<button
|
|
|
:class="['admin-button-com', 'middle', 'staff-btn', cgStaffId ? 'blue' : 'default']"
|
|
|
@click="showCgStaff"
|
|
|
>{{ cgStaffName == '' ? '采购人' : cgStaffName }}</button>
|
|
|
+ <button class="admin-button-com middle blue add-btn" @click="addEvent">新增采购</button>
|
|
|
</view>
|
|
|
<view class="filter-row">
|
|
|
<view class="date-chip">
|
|
|
<DateSelect
|
|
|
ref="sendDateSelect"
|
|
|
class="date-select"
|
|
|
- top="0"
|
|
|
+ :top="dateSelectTop"
|
|
|
:defaultShowName="sendName"
|
|
|
@selectDateFn="selectSendDateFn"
|
|
|
@overlay-change="onSendDateOverlayChange"
|
|
|
@@ -31,7 +33,7 @@
|
|
|
<DateSelect
|
|
|
ref="billDateSelect"
|
|
|
class="date-select"
|
|
|
- top="0"
|
|
|
+ :top="dateSelectTop"
|
|
|
defaultShowName="记账时间"
|
|
|
@selectDateFn="selectBillDateFn"
|
|
|
@overlay-change="onBillDateOverlayChange"
|
|
|
@@ -43,7 +45,9 @@
|
|
|
<view class="tabs-wrap">
|
|
|
<Tabs :isFixed="false" :tabs="tabs" :currentTab="tabIndex" @change="changeTabEvent" itemWidth="25%"></Tabs>
|
|
|
</view>
|
|
|
- <view class="order-list" :class="{ 'is-covered': dateOverlayVisible }">
|
|
|
+ </view>
|
|
|
+ <view class="order-page">
|
|
|
+ <view class="order-list" :class="{ 'is-covered': dateOverlayVisible }" :style="listPadStyle">
|
|
|
<block v-if="!$util.isEmpty(list.data)">
|
|
|
<OrderItem v-for="(item, index) in list.data" :key="index" :info="item" :sendName="sendName" @click="gotoDetails(item)"></OrderItem>
|
|
|
</block>
|
|
|
@@ -51,9 +55,6 @@
|
|
|
<AppWrapperEmpty title="暂无数据" :is-empty="$util.isEmpty(list.data)" />
|
|
|
</block>
|
|
|
</view>
|
|
|
- <view class="app-footer open_btn" :class="{ 'is-covered': dateOverlayVisible }">
|
|
|
- <view @click="addEvent" class="admin-button-com big blue add-btn">新增采购</view>
|
|
|
- </view>
|
|
|
</view>
|
|
|
|
|
|
<uni-popup ref="staffRef" background-color="#fff" type="center" :animation="false" class="class-popup-style">
|
|
|
@@ -134,14 +135,30 @@ export default {
|
|
|
cgStaffId:0,
|
|
|
sendName:'发货时间',
|
|
|
sendDateOverlayVisible: false,
|
|
|
- billDateOverlayVisible: false
|
|
|
+ billDateOverlayVisible: false,
|
|
|
+ // 顶栏实测高度（px），给列表留白、日历从顶栏下方展开
|
|
|
+ stickyHeightPx: 0
|
|
|
}
|
|
|
},
|
|
|
computed: {
|
|
|
dateOverlayVisible() {
|
|
|
return !!(this.sendDateOverlayVisible || this.billDateOverlayVisible)
|
|
|
+ },
|
|
|
+ /** DateSelect 弹层 top，避免盖住固定顶栏 */
|
|
|
+ dateSelectTop() {
|
|
|
+ return this.stickyHeightPx > 0 ? (this.stickyHeightPx + 'px') : '200px'
|
|
|
+ },
|
|
|
+ /** 列表顶部留白，避免第一张卡片钻到固定顶栏下面 */
|
|
|
+ listPadStyle() {
|
|
|
+ if (!this.stickyHeightPx) {
|
|
|
+ return ''
|
|
|
+ }
|
|
|
+ return 'padding-top:' + (this.stickyHeightPx + 8) + 'px'
|
|
|
}
|
|
|
},
|
|
|
+ onReady() {
|
|
|
+ this.measureStickyHeight()
|
|
|
+ },
|
|
|
onPullDownRefresh() {
|
|
|
this.resetList();
|
|
|
this.getCgList().then(res => {
|
|
|
@@ -185,6 +202,16 @@ export default {
|
|
|
}
|
|
|
},
|
|
|
methods: {
|
|
|
+ /** 量固定顶栏高度：小程序/App 都用 selectorQuery，避免 upx 估算偏差 */
|
|
|
+ measureStickyHeight() {
|
|
|
+ this.$nextTick(() => {
|
|
|
+ uni.createSelectorQuery().in(this).select('.page-sticky').boundingClientRect((rect) => {
|
|
|
+ if (rect && rect.height) {
|
|
|
+ this.stickyHeightPx = Math.ceil(rect.height)
|
|
|
+ }
|
|
|
+ }).exec()
|
|
|
+ })
|
|
|
+ },
|
|
|
cancelSelectStaff(){
|
|
|
this.$refs.staffRef.close()
|
|
|
this.cgStaffName = ''
|
|
|
@@ -315,79 +342,104 @@ export default {
|
|
|
};
|
|
|
</script>
|
|
|
<style lang="scss" scoped>
|
|
|
-.order-page {
|
|
|
- height: 100%;
|
|
|
+.page-sticky {
|
|
|
+ position: fixed;
|
|
|
+ top: 0;
|
|
|
+ left: 0;
|
|
|
+ width: 100%;
|
|
|
+ z-index: 200;
|
|
|
+ background-color: #fff;
|
|
|
+ box-sizing: border-box;
|
|
|
+}
|
|
|
+.page-header {
|
|
|
+ background-color: #fff;
|
|
|
+ box-shadow: 0upx 2upx 8upx 0upx rgba(0, 0, 0, 0.06);
|
|
|
+}
|
|
|
+.search-row {
|
|
|
display: flex;
|
|
|
- flex-direction: column;
|
|
|
- background-color: #f4f6f8;
|
|
|
- .page-header {
|
|
|
+ align-items: center;
|
|
|
+ padding: 12upx 24upx 0;
|
|
|
+ /* 锁住搜索行高度：搜索框内高 90upx，避免 App 把溢出压进下一行显得更挤 */
|
|
|
+ min-height: 90upx;
|
|
|
+ overflow: visible;
|
|
|
+ .search-hold {
|
|
|
+ flex: 1;
|
|
|
+ min-width: 0;
|
|
|
+ height: 90upx;
|
|
|
+ }
|
|
|
+ .staff-btn,
|
|
|
+ .add-btn {
|
|
|
flex-shrink: 0;
|
|
|
- background-color: #fff;
|
|
|
- box-shadow: 0upx 2upx 8upx 0upx rgba(0, 0, 0, 0.06);
|
|
|
- position: relative;
|
|
|
- z-index: 100;
|
|
|
+ height: 80upx;
|
|
|
+ line-height: 80upx;
|
|
|
+ padding: 0 20upx;
|
|
|
+ box-sizing: border-box;
|
|
|
}
|
|
|
- .search-row {
|
|
|
+ .staff-btn {
|
|
|
+ margin-left: 16upx;
|
|
|
+ max-width: 160upx;
|
|
|
+ overflow: hidden;
|
|
|
+ text-overflow: ellipsis;
|
|
|
+ white-space: nowrap;
|
|
|
+ }
|
|
|
+ .add-btn {
|
|
|
+ margin: 0 0 0 12upx;
|
|
|
+ }
|
|
|
+}
|
|
|
+.filter-row {
|
|
|
+ display: flex;
|
|
|
+ align-items: center;
|
|
|
+ /* 与搜索行间距用 margin，不靠 padding 叠；App 上 rpx 偏紧再补一截 */
|
|
|
+ margin-top: 16upx;
|
|
|
+ padding: 0 24upx 20upx;
|
|
|
+ /* #ifdef APP-PLUS */
|
|
|
+ margin-top: 24upx;
|
|
|
+ /* #endif */
|
|
|
+ .date-chip {
|
|
|
+ min-width: 180upx;
|
|
|
+ height: 64upx;
|
|
|
+ padding: 0 16upx;
|
|
|
+ border-radius: 8upx;
|
|
|
display: flex;
|
|
|
+ flex-direction: row;
|
|
|
align-items: center;
|
|
|
- padding: 12upx 24upx 0;
|
|
|
- .search-hold {
|
|
|
- flex: 1;
|
|
|
- min-width: 0;
|
|
|
- }
|
|
|
- .staff-btn {
|
|
|
- flex-shrink: 0;
|
|
|
- margin-left: 16upx;
|
|
|
- max-width: 160upx;
|
|
|
- overflow: hidden;
|
|
|
- text-overflow: ellipsis;
|
|
|
- white-space: nowrap;
|
|
|
- }
|
|
|
+ justify-content: center;
|
|
|
+ flex-shrink: 1;
|
|
|
+ box-sizing: border-box;
|
|
|
+ background: #f7f8fa;
|
|
|
+ border: 1upx solid #e8eaed;
|
|
|
+ }
|
|
|
+ .date-chip-gap {
|
|
|
+ margin-left: 16upx;
|
|
|
}
|
|
|
- .filter-row {
|
|
|
+ .date-select {
|
|
|
display: flex;
|
|
|
align-items: center;
|
|
|
- padding: 8upx 24upx 20upx;
|
|
|
- .date-chip {
|
|
|
- min-width: 180upx;
|
|
|
- height: 64upx;
|
|
|
- padding: 0 16upx;
|
|
|
- border-radius: 8upx;
|
|
|
- display: flex;
|
|
|
- flex-direction: row;
|
|
|
- align-items: center;
|
|
|
- justify-content: center;
|
|
|
- flex-shrink: 1;
|
|
|
- box-sizing: border-box;
|
|
|
- background: #f7f8fa;
|
|
|
- border: 1upx solid #e8eaed;
|
|
|
- }
|
|
|
- .date-chip-gap {
|
|
|
- margin-left: 16upx;
|
|
|
- }
|
|
|
- .date-select {
|
|
|
- display: flex;
|
|
|
- align-items: center;
|
|
|
- }
|
|
|
- .date-reset-btn {
|
|
|
- flex-shrink: 0;
|
|
|
- margin: 0 0 0 16upx;
|
|
|
- height: 64upx;
|
|
|
- line-height: 64upx;
|
|
|
- padding: 0 24upx;
|
|
|
- font-size: 26upx;
|
|
|
- border-radius: 8upx;
|
|
|
- }
|
|
|
}
|
|
|
- .tabs-wrap {
|
|
|
+ .date-reset-btn {
|
|
|
flex-shrink: 0;
|
|
|
- background-color: #fff;
|
|
|
- margin-top: 16upx;
|
|
|
- border-bottom: 1upx solid #f0f0f0;
|
|
|
+ margin: 0 0 0 16upx;
|
|
|
+ height: 64upx;
|
|
|
+ line-height: 64upx;
|
|
|
+ padding: 0 24upx;
|
|
|
+ font-size: 26upx;
|
|
|
+ border-radius: 8upx;
|
|
|
}
|
|
|
+}
|
|
|
+.tabs-wrap {
|
|
|
+ background-color: #fff;
|
|
|
+ margin-top: 16upx;
|
|
|
+ border-bottom: 1upx solid #f0f0f0;
|
|
|
+}
|
|
|
+.order-page {
|
|
|
+ height: 100%;
|
|
|
+ display: flex;
|
|
|
+ flex-direction: column;
|
|
|
+ background-color: #f4f6f8;
|
|
|
.order-list {
|
|
|
- padding-top: 16upx;
|
|
|
- padding-bottom: 140upx;
|
|
|
+ /* 量到高度前的兜底，避免首屏卡片顶到导航栏 */
|
|
|
+ padding-top: 280upx;
|
|
|
+ padding-bottom: 30upx;
|
|
|
flex: 1;
|
|
|
&.is-covered {
|
|
|
/* #ifdef APP-PLUS */
|
|
|
@@ -395,19 +447,5 @@ export default {
|
|
|
/* #endif */
|
|
|
}
|
|
|
}
|
|
|
- .app-footer.open_btn {
|
|
|
- justify-content: center;
|
|
|
- padding-left: 30upx;
|
|
|
- padding-right: 30upx;
|
|
|
- &.is-covered {
|
|
|
- /* #ifdef APP-PLUS */
|
|
|
- visibility: hidden;
|
|
|
- /* #endif */
|
|
|
- }
|
|
|
- .add-btn {
|
|
|
- margin-right: 0;
|
|
|
- width: 100%;
|
|
|
- }
|
|
|
- }
|
|
|
}
|
|
|
</style>
|
