|
|
@@ -1,6 +1,9 @@
|
|
|
+<!--
|
|
|
+ 采购结清页：按供货商查看未结清挂账，支持勾选结清与自定义金额付款。
|
|
|
+ 顶部「自定义金额」与 board 同款时间区间筛选并排，避免浮层挡住列表操作。
|
|
|
+-->
|
|
|
<template>
|
|
|
<view class="app-content">
|
|
|
- <button class="admin-button-com blue custom-amount-btn" @click="goCustomPay">自定义金额</button>
|
|
|
<view class="order-page">
|
|
|
<view class="top-view">
|
|
|
<view class="top-row">
|
|
|
@@ -8,7 +11,18 @@
|
|
|
<image class="logo" :src="ghsInfo.avatar" />
|
|
|
<text class="name">{{ ghsInfo.name}}</text>
|
|
|
</view>
|
|
|
- <DateSelect class="bar" top="0" @selectDateFn="selectDateFn" defaultShowName='时间' />
|
|
|
+ <view class="top-actions">
|
|
|
+ <!-- 自定义金额：加高便于点按，与日历触发器并排 -->
|
|
|
+ <button class="admin-button-com blue custom-amount-btn" @click="goCustomPay">自定义金额付款</button>
|
|
|
+ <!-- 时间筛选：与生日板 board 同款触发器样式 -->
|
|
|
+ <view class="date-filter-trigger" @click="openDateRangeModal">
|
|
|
+ <view class="date-filter-icon">
|
|
|
+ <view class="date-filter-icon-line"></view>
|
|
|
+ </view>
|
|
|
+ <text class="date-filter-text">{{ dateFilterLabel }}</text>
|
|
|
+ <view class="date-filter-arrow"></view>
|
|
|
+ </view>
|
|
|
+ </view>
|
|
|
</view>
|
|
|
</view>
|
|
|
<view scroll-y class="shop-list">
|
|
|
@@ -55,6 +69,33 @@
|
|
|
</view>
|
|
|
</view>
|
|
|
</view>
|
|
|
+
|
|
|
+ <!-- 时间区间弹窗：确认后仍走原 selectDateFn 同款 searchTime=custom 参数 -->
|
|
|
+ <modal-module
|
|
|
+ :show="showDateRangeModal"
|
|
|
+ :maskClosable="true"
|
|
|
+ title="时间区间"
|
|
|
+ padding="30rpx"
|
|
|
+ width="86%"
|
|
|
+ @click="dateRangeModalClick"
|
|
|
+ >
|
|
|
+ <template v-slot:content>
|
|
|
+ <view class="date-range-form">
|
|
|
+ <view class="date-range-row">
|
|
|
+ <text class="date-range-label">开始日期</text>
|
|
|
+ <picker mode="date" :value="draftStartDate || todayDate" @change="onDraftStartDateChange" class="date-range-picker">
|
|
|
+ <view :class="['date-range-value', draftStartDate ? '' : 'placeholder']">{{ draftStartDate || '请选择' }}</view>
|
|
|
+ </picker>
|
|
|
+ </view>
|
|
|
+ <view class="date-range-row">
|
|
|
+ <text class="date-range-label">结束日期</text>
|
|
|
+ <picker mode="date" :value="draftEndDate || todayDate" @change="onDraftEndDateChange" class="date-range-picker">
|
|
|
+ <view :class="['date-range-value', draftEndDate ? '' : 'placeholder']">{{ draftEndDate || '请选择' }}</view>
|
|
|
+ </picker>
|
|
|
+ </view>
|
|
|
+ </view>
|
|
|
+ </template>
|
|
|
+ </modal-module>
|
|
|
</view>
|
|
|
</view>
|
|
|
</template>
|
|
|
@@ -63,10 +104,10 @@ import gatheringList from './components/gatheringList'
|
|
|
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 ModalModule from '@/components/plugin/modal';
|
|
|
import debtListPage from '@/mixins/debtListPage'
|
|
|
export default {
|
|
|
- components: { gatheringList, AppWrapperEmpty, DateSelect, DebtListPager },
|
|
|
+ components: { gatheringList, AppWrapperEmpty, ModalModule, DebtListPager },
|
|
|
mixins: [debtListPage],
|
|
|
data () {
|
|
|
return {
|
|
|
@@ -81,10 +122,16 @@ export default {
|
|
|
endTime:'',
|
|
|
ghsId:0,
|
|
|
justLoaded: false,
|
|
|
- salt: ''
|
|
|
+ salt: '',
|
|
|
+ // board 同款时间区间弹窗状态
|
|
|
+ showDateRangeModal: false,
|
|
|
+ draftStartDate: '',
|
|
|
+ draftEndDate: '',
|
|
|
+ todayDate: ''
|
|
|
}
|
|
|
},
|
|
|
onLoad() {
|
|
|
+ this.todayDate = this.formatDate(new Date())
|
|
|
this.initData()
|
|
|
},
|
|
|
onShow () {
|
|
|
@@ -106,6 +153,10 @@ export default {
|
|
|
})
|
|
|
},
|
|
|
computed: {
|
|
|
+ // 触发器文案：未选显示「时间」，已选显示「已选」，与 board 一致
|
|
|
+ dateFilterLabel() {
|
|
|
+ return this.searchTime === 'custom' && this.startTime && this.endTime ? '已选' : '时间'
|
|
|
+ },
|
|
|
selectList () {
|
|
|
let list = [];
|
|
|
if (this.detailsList) {
|
|
|
@@ -166,6 +217,45 @@ export default {
|
|
|
uni.stopPullDownRefresh()
|
|
|
})
|
|
|
},
|
|
|
+ // 打开区间弹窗：草稿回填已生效条件
|
|
|
+ openDateRangeModal() {
|
|
|
+ this.draftStartDate = this.startTime || ''
|
|
|
+ this.draftEndDate = this.endTime || ''
|
|
|
+ this.showDateRangeModal = true
|
|
|
+ },
|
|
|
+ onDraftStartDateChange(e) {
|
|
|
+ this.draftStartDate = e.detail.value
|
|
|
+ },
|
|
|
+ onDraftEndDateChange(e) {
|
|
|
+ this.draftEndDate = e.detail.value
|
|
|
+ },
|
|
|
+ formatDate(date) {
|
|
|
+ const y = date.getFullYear()
|
|
|
+ const m = `${date.getMonth() + 1}`.padStart(2, '0')
|
|
|
+ const d = `${date.getDate()}`.padStart(2, '0')
|
|
|
+ return `${y}-${m}-${d}`
|
|
|
+ },
|
|
|
+ // 弹窗确定：与 board 一致，index 0 取消；通过原 selectDateFn 刷新列表
|
|
|
+ dateRangeModalClick(e) {
|
|
|
+ if (e.index === 0) {
|
|
|
+ this.showDateRangeModal = false
|
|
|
+ return
|
|
|
+ }
|
|
|
+ if (!this.draftStartDate || !this.draftEndDate) {
|
|
|
+ this.$msg('请选择开始日期和结束日期')
|
|
|
+ return
|
|
|
+ }
|
|
|
+ if (this.draftStartDate > this.draftEndDate) {
|
|
|
+ this.$msg('开始日期不能晚于结束日期')
|
|
|
+ return
|
|
|
+ }
|
|
|
+ this.showDateRangeModal = false
|
|
|
+ this.selectDateFn({
|
|
|
+ searchTime: 'custom',
|
|
|
+ startTime: this.draftStartDate,
|
|
|
+ endTime: this.draftEndDate
|
|
|
+ })
|
|
|
+ },
|
|
|
reloadDebtListPage() {
|
|
|
return this.initData()
|
|
|
},
|
|
|
@@ -279,20 +369,6 @@ export default {
|
|
|
}
|
|
|
</script>
|
|
|
<style lang="scss" scoped>
|
|
|
-.custom-amount-btn {
|
|
|
- position: fixed;
|
|
|
- top: 112upx;
|
|
|
- right: 24upx;
|
|
|
- z-index: 110;
|
|
|
- display: flex;
|
|
|
- align-items: center;
|
|
|
- justify-content: center;
|
|
|
- width: 200upx;
|
|
|
- height: 80upx;
|
|
|
- font-size: 30upx;
|
|
|
- box-shadow: 0upx 4upx 12upx 0upx rgba(9, 197, 103, 0.35);
|
|
|
- box-sizing: border-box;
|
|
|
-}
|
|
|
.order-page {
|
|
|
height: 100%;
|
|
|
display: flex;
|
|
|
@@ -321,16 +397,22 @@ export default {
|
|
|
.info-item {
|
|
|
display: flex;
|
|
|
align-items: center;
|
|
|
+ flex: 1;
|
|
|
+ min-width: 0;
|
|
|
.logo {
|
|
|
- margin-right: 10upx;
|
|
|
- width: 35upx;
|
|
|
- height: 35upx;
|
|
|
- border-radius: 50%;
|
|
|
+ margin-right: 16upx;
|
|
|
+ width: 72upx;
|
|
|
+ height: 72upx;
|
|
|
+ border-radius: 8upx;
|
|
|
+ flex-shrink: 0;
|
|
|
}
|
|
|
.name {
|
|
|
- font-size: 28upx;
|
|
|
+ font-size: 34upx;
|
|
|
font-weight: 600;
|
|
|
color: #333333;
|
|
|
+ overflow: hidden;
|
|
|
+ text-overflow: ellipsis;
|
|
|
+ white-space: nowrap;
|
|
|
}
|
|
|
}
|
|
|
.price-item {
|
|
|
@@ -338,10 +420,92 @@ export default {
|
|
|
font-weight: 600;
|
|
|
color: #333333;
|
|
|
}
|
|
|
+ .top-actions {
|
|
|
+ display: flex;
|
|
|
+ align-items: center;
|
|
|
+ flex-shrink: 0;
|
|
|
+ margin-left: 12upx;
|
|
|
+ }
|
|
|
+ /* 自定义金额：长方形按钮，与头像高度更协调 */
|
|
|
+ .custom-amount-btn {
|
|
|
+ margin: 0;
|
|
|
+ margin-right: 28upx;
|
|
|
+ height: 64upx;
|
|
|
+ line-height: 64upx;
|
|
|
+ padding: 0 20upx;
|
|
|
+ font-size: 26upx;
|
|
|
+ border-radius: 8upx;
|
|
|
+ }
|
|
|
+ /* 时间筛选触发器：长方形，对齐自定义金额按钮 */
|
|
|
+ .date-filter-trigger {
|
|
|
+ display: flex;
|
|
|
+ flex-direction: row;
|
|
|
+ align-items: center;
|
|
|
+ justify-content: center;
|
|
|
+ height: 64upx;
|
|
|
+ padding: 0 14upx;
|
|
|
+ box-sizing: border-box;
|
|
|
+ background: #f0fbf5;
|
|
|
+ border: 1upx solid #08b955;
|
|
|
+ border-radius: 8upx;
|
|
|
+ box-shadow: 0 4upx 12upx rgba(8, 185, 85, 0.12);
|
|
|
+ }
|
|
|
+ .date-filter-icon {
|
|
|
+ flex-shrink: 0;
|
|
|
+ display: flex;
|
|
|
+ align-items: center;
|
|
|
+ justify-content: center;
|
|
|
+ width: 28upx;
|
|
|
+ height: 28upx;
|
|
|
+ margin-right: 8upx;
|
|
|
+ border: 2upx solid #08b955;
|
|
|
+ border-radius: 5upx;
|
|
|
+ box-sizing: border-box;
|
|
|
+ position: relative;
|
|
|
+ }
|
|
|
+ .date-filter-icon::before,
|
|
|
+ .date-filter-icon::after {
|
|
|
+ content: '';
|
|
|
+ position: absolute;
|
|
|
+ top: -6upx;
|
|
|
+ width: 4upx;
|
|
|
+ height: 8upx;
|
|
|
+ background: #08b955;
|
|
|
+ border-radius: 2upx;
|
|
|
+ }
|
|
|
+ .date-filter-icon::before {
|
|
|
+ left: 4upx;
|
|
|
+ }
|
|
|
+ .date-filter-icon::after {
|
|
|
+ right: 4upx;
|
|
|
+ }
|
|
|
+ .date-filter-icon-line {
|
|
|
+ width: 14upx;
|
|
|
+ height: 2upx;
|
|
|
+ margin-top: 4upx;
|
|
|
+ background: #08b955;
|
|
|
+ }
|
|
|
+ .date-filter-text {
|
|
|
+ flex-shrink: 0;
|
|
|
+ line-height: 26upx;
|
|
|
+ font-size: 26upx;
|
|
|
+ color: #08b955;
|
|
|
+ font-weight: 500;
|
|
|
+ }
|
|
|
+ .date-filter-arrow {
|
|
|
+ flex-shrink: 0;
|
|
|
+ align-self: center;
|
|
|
+ width: 12upx;
|
|
|
+ height: 12upx;
|
|
|
+ margin-left: 6upx;
|
|
|
+ border-top: 2upx solid #08b955;
|
|
|
+ border-right: 2upx solid #08b955;
|
|
|
+ transform: rotate(45deg) translateY(-1upx);
|
|
|
+ }
|
|
|
}
|
|
|
}
|
|
|
.shop-list {
|
|
|
- margin-top:80upx;
|
|
|
+ margin-top:120upx;
|
|
|
padding: 20upx 0;
|
|
|
flex: 1;
|
|
|
/* 给底部固定层（分页器 + 操作栏 + 刘海安全区）留出滚动空间，避免最后几笔被挡住 */
|
|
|
@@ -422,4 +586,34 @@ export default {
|
|
|
color: $mainColor !important;
|
|
|
}
|
|
|
}
|
|
|
+.date-range-form {
|
|
|
+ width: 100%;
|
|
|
+}
|
|
|
+.date-range-row {
|
|
|
+ display: flex;
|
|
|
+ align-items: center;
|
|
|
+ height: 84upx;
|
|
|
+ border-bottom: 1upx solid #eee;
|
|
|
+}
|
|
|
+.date-range-row:last-child {
|
|
|
+ border-bottom: 0;
|
|
|
+}
|
|
|
+.date-range-label {
|
|
|
+ flex: 0 0 150upx;
|
|
|
+ font-size: 28upx;
|
|
|
+ color: #333;
|
|
|
+}
|
|
|
+.date-range-picker {
|
|
|
+ flex: 1;
|
|
|
+}
|
|
|
+.date-range-value {
|
|
|
+ height: 84upx;
|
|
|
+ line-height: 84upx;
|
|
|
+ text-align: right;
|
|
|
+ font-size: 28upx;
|
|
|
+ color: #333;
|
|
|
+}
|
|
|
+.date-range-value.placeholder {
|
|
|
+ color: #999;
|
|
|
+}
|
|
|
</style>
|
