|
|
@@ -1,6 +1,6 @@
|
|
|
<!--
|
|
|
采购结清页:按供货商查看未结清挂账,支持勾选结清与自定义金额付款。
|
|
|
- 顶部时间筛选与订单页同款 DateSelect,快捷/月份/单日/时段均可,避免浮层挡住列表操作。
|
|
|
+ 顶部第一行是开单时间、发货时间两套 DateSelect;第二行最右是时间重置 + 自定义金额付款。
|
|
|
-->
|
|
|
<template>
|
|
|
<view class="app-content">
|
|
|
@@ -8,26 +8,38 @@
|
|
|
<view class="top-view">
|
|
|
<view class="top-row">
|
|
|
<view class="info-item">
|
|
|
- <image class="logo" :src="ghsInfo.avatar" />
|
|
|
<text class="name">{{ ghsInfo.name}}</text>
|
|
|
</view>
|
|
|
<view class="top-actions">
|
|
|
- <!-- 自定义金额:加高便于点按,与时间筛选并排 -->
|
|
|
- <button class="admin-button-com blue custom-amount-btn" @click="goCustomPay">自定义金额付款</button>
|
|
|
- <!-- 与订单页左上角同款:日历图标 + DateSelect -->
|
|
|
<view class="date-chip">
|
|
|
- <image class="filter-icon" :src="iconSrc('order-calendar')" mode="aspectFit" />
|
|
|
<DateSelect
|
|
|
- ref="dateSelectRef"
|
|
|
+ ref="sendDateSelect"
|
|
|
class="date-select"
|
|
|
top="0"
|
|
|
- defaultShowName="全部"
|
|
|
+ defaultShowName="发货时间"
|
|
|
+ :showAllOption="true"
|
|
|
+ @selectDateFn="selectSendDateFn"
|
|
|
+ @overlay-change="onSendDateOverlayChange"
|
|
|
+ />
|
|
|
+ </view>
|
|
|
+ <view class="date-chip date-chip-gap">
|
|
|
+ <DateSelect
|
|
|
+ ref="billDateSelect"
|
|
|
+ class="date-select"
|
|
|
+ top="0"
|
|
|
+ defaultShowName="开单时间"
|
|
|
:showAllOption="true"
|
|
|
@selectDateFn="selectDateFn"
|
|
|
+ @overlay-change="onBillDateOverlayChange"
|
|
|
/>
|
|
|
</view>
|
|
|
</view>
|
|
|
</view>
|
|
|
+ <!-- 第二行右对齐:时间重置在左,自定义金额付款贴最右 -->
|
|
|
+ <view class="top-row-actions">
|
|
|
+ <button class="admin-button-com default date-reset-btn" @click="resetDateFilters">时间重置</button>
|
|
|
+ <button class="admin-button-com blue custom-amount-btn" @click="goCustomPay">自定义金额付款</button>
|
|
|
+ </view>
|
|
|
</view>
|
|
|
<view scroll-y class="shop-list">
|
|
|
<view class="debt-multi-page-tip" v-if="debtTotalPage > 1">
|
|
|
@@ -82,7 +94,6 @@ import DebtListPager from '@/components/module/debt-list-pager'
|
|
|
import { purchaseDebtList, ghsDetail, purchaseClearCreateOrder } from "@/api/purchase/index";
|
|
|
import AppWrapperEmpty from "@/components/app-wrapper-empty";
|
|
|
import DateSelect from "@/components/module/dateSelect";
|
|
|
-import { iconSrc } from '@/utils/iconSrc'
|
|
|
import debtListPage from '@/mixins/debtListPage'
|
|
|
export default {
|
|
|
components: { gatheringList, AppWrapperEmpty, DateSelect, DebtListPager },
|
|
|
@@ -98,9 +109,14 @@ export default {
|
|
|
searchTime:'',
|
|
|
startTime:'',
|
|
|
endTime:'',
|
|
|
+ sendSearchTime:'',
|
|
|
+ sendStartTime:'',
|
|
|
+ sendEndTime:'',
|
|
|
ghsId:0,
|
|
|
justLoaded: false,
|
|
|
- salt: ''
|
|
|
+ salt: '',
|
|
|
+ billDateOverlayVisible: false,
|
|
|
+ sendDateOverlayVisible: false
|
|
|
}
|
|
|
},
|
|
|
onLoad() {
|
|
|
@@ -158,7 +174,6 @@ export default {
|
|
|
}
|
|
|
},
|
|
|
methods: {
|
|
|
- iconSrc,
|
|
|
formatMoney (val) {
|
|
|
const n = parseFloat(val)
|
|
|
return isNaN(n) ? '0' : String(n)
|
|
|
@@ -178,7 +193,7 @@ export default {
|
|
|
}
|
|
|
},
|
|
|
/**
|
|
|
- * 订单页同款时间筛选:searchTime 为快捷项或 custom/byMonth。
|
|
|
+ * 开单时间筛选:searchTime 为快捷项或 custom/byMonth,对应后端 addTime。
|
|
|
*/
|
|
|
selectDateFn(val){
|
|
|
this.searchTime = val.searchTime
|
|
|
@@ -189,6 +204,54 @@ export default {
|
|
|
uni.stopPullDownRefresh()
|
|
|
})
|
|
|
},
|
|
|
+ /**
|
|
|
+ * 发货时间筛选:sendSearchTime 对应后端 sendTime,可与开单时间同时生效。
|
|
|
+ */
|
|
|
+ selectSendDateFn(val){
|
|
|
+ this.sendSearchTime = val.searchTime
|
|
|
+ this.sendStartTime = val.startTime
|
|
|
+ this.sendEndTime = val.endTime
|
|
|
+ this.resetDebtListPage()
|
|
|
+ this.initData().then(res => {
|
|
|
+ uni.stopPullDownRefresh()
|
|
|
+ })
|
|
|
+ },
|
|
|
+ onBillDateOverlayChange(visible) {
|
|
|
+ this.billDateOverlayVisible = !!visible
|
|
|
+ if (visible) {
|
|
|
+ this.closeDateSelect(this.$refs.sendDateSelect)
|
|
|
+ }
|
|
|
+ },
|
|
|
+ onSendDateOverlayChange(visible) {
|
|
|
+ this.sendDateOverlayVisible = !!visible
|
|
|
+ if (visible) {
|
|
|
+ this.closeDateSelect(this.$refs.billDateSelect)
|
|
|
+ }
|
|
|
+ },
|
|
|
+ // 两个日期筛选互斥打开,避免两套日历叠在一起
|
|
|
+ closeDateSelect(ref) {
|
|
|
+ if (ref && (ref.dropdownShow || ref.showPicker)) {
|
|
|
+ ref.dropdownShow = false
|
|
|
+ ref.showPicker = false
|
|
|
+ }
|
|
|
+ },
|
|
|
+ // 同时清空开单时间、发货时间筛选,列表回到未筛状态
|
|
|
+ resetDateFilters() {
|
|
|
+ this.searchTime = ''
|
|
|
+ this.startTime = ''
|
|
|
+ this.endTime = ''
|
|
|
+ this.sendSearchTime = ''
|
|
|
+ this.sendStartTime = ''
|
|
|
+ this.sendEndTime = ''
|
|
|
+ if (this.$refs.billDateSelect && this.$refs.billDateSelect.reset) {
|
|
|
+ this.$refs.billDateSelect.reset()
|
|
|
+ }
|
|
|
+ if (this.$refs.sendDateSelect && this.$refs.sendDateSelect.reset) {
|
|
|
+ this.$refs.sendDateSelect.reset()
|
|
|
+ }
|
|
|
+ this.resetDebtListPage()
|
|
|
+ this.initData()
|
|
|
+ },
|
|
|
reloadDebtListPage() {
|
|
|
return this.initData()
|
|
|
},
|
|
|
@@ -229,6 +292,9 @@ export default {
|
|
|
searchTime: this.searchTime,
|
|
|
startTime: this.startTime,
|
|
|
endTime: this.endTime,
|
|
|
+ sendSearchTime: this.sendSearchTime,
|
|
|
+ sendStartTime: this.sendStartTime,
|
|
|
+ sendEndTime: this.sendEndTime,
|
|
|
salt: this.salt
|
|
|
})).then(res => {
|
|
|
const list = res.data.list || []
|
|
|
@@ -310,6 +376,8 @@ export default {
|
|
|
.top-view {
|
|
|
padding: 24upx 24upx 20upx;
|
|
|
position:fixed;
|
|
|
+ top: 0;
|
|
|
+ left: 0;
|
|
|
width:100%;
|
|
|
z-index: 100;
|
|
|
box-sizing: border-box;
|
|
|
@@ -332,13 +400,6 @@ export default {
|
|
|
align-items: center;
|
|
|
flex: 1;
|
|
|
min-width: 0;
|
|
|
- .logo {
|
|
|
- margin-right: 16upx;
|
|
|
- width: 72upx;
|
|
|
- height: 72upx;
|
|
|
- border-radius: 8upx;
|
|
|
- flex-shrink: 0;
|
|
|
- }
|
|
|
.name {
|
|
|
font-size: 34upx;
|
|
|
font-weight: 600;
|
|
|
@@ -359,19 +420,9 @@ export default {
|
|
|
flex-shrink: 0;
|
|
|
margin-left: 12upx;
|
|
|
}
|
|
|
- /* 自定义金额:长方形按钮,与头像高度更协调 */
|
|
|
- .custom-amount-btn {
|
|
|
- margin: 0;
|
|
|
- margin-right: 16upx;
|
|
|
- height: 64upx;
|
|
|
- line-height: 64upx;
|
|
|
- padding: 0 20upx;
|
|
|
- font-size: 26upx;
|
|
|
- border-radius: 8upx;
|
|
|
- }
|
|
|
- /* 与订单页左上角同款时间筛选 */
|
|
|
+ /* 与订单页左上角同款时间筛选;两个并排时去掉日历图标以省宽 */
|
|
|
.date-chip {
|
|
|
- min-width: 134upx;
|
|
|
+ min-width: 160upx;
|
|
|
height: 64upx;
|
|
|
padding: 0 12upx;
|
|
|
border-radius: 8upx;
|
|
|
@@ -384,20 +435,35 @@ export default {
|
|
|
background: #fff;
|
|
|
border: 1upx solid #e3e8e6;
|
|
|
}
|
|
|
+ .date-chip-gap {
|
|
|
+ margin-left: 70upx;
|
|
|
+ }
|
|
|
.date-select {
|
|
|
display: flex;
|
|
|
align-items: center;
|
|
|
}
|
|
|
- .filter-icon {
|
|
|
- width: 32upx;
|
|
|
- height: 32upx;
|
|
|
- margin-right: 6upx;
|
|
|
- flex-shrink: 0;
|
|
|
- }
|
|
|
+ }
|
|
|
+ .top-row-actions {
|
|
|
+ display: flex;
|
|
|
+ justify-content: flex-end;
|
|
|
+ align-items: center;
|
|
|
+ }
|
|
|
+ .date-reset-btn,
|
|
|
+ .custom-amount-btn {
|
|
|
+ margin: 0;
|
|
|
+ height: 64upx;
|
|
|
+ line-height: 64upx;
|
|
|
+ padding: 0 20upx;
|
|
|
+ font-size: 26upx;
|
|
|
+ border-radius: 8upx;
|
|
|
+ }
|
|
|
+ /* 不用 gap:App 端可能不生效,重置按钮用右边距和付款按钮分开 */
|
|
|
+ .date-reset-btn {
|
|
|
+ margin-right: 16upx;
|
|
|
}
|
|
|
}
|
|
|
.shop-list {
|
|
|
- margin-top:120upx;
|
|
|
+ margin-top: 180upx;
|
|
|
padding: 20upx 0;
|
|
|
flex: 1;
|
|
|
/* 给底部固定层(分页器 + 操作栏 + 刘海安全区)留出滚动空间,避免最后几笔被挡住 */
|