优化

hdApp/src/admin/birthday/board.vue

@@ -1,3 +1,7 @@
+<!--
+  生日看板：花店员工查看客户生日与赠礼状态，处理通知、领取及生日补录。
+  时间筛选与订单页左上角 DateSelect 同款，支持快捷项、月份、单日和时段。
+-->
 <template>
   <view class="birthday-board app-content">
     <view class="top-bar">
@@ -12,13 +16,16 @@
         <view class="green-btn outline" @click="goGiftStats">赠礼统计</view>
       </view>
       <view class="filter-row">
-        <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">{{ period === 'custom' ? '已选' : '时间' }}</text>
-          <!-- <text class="date-filter-hint">{{ period === 'custom' ? '重选' : '选择日期' }}</text> -->
-          <view class="date-filter-arrow"></view>
+        <!-- 丰富时间选择：替换原来的开始/结束日期弹窗，旁边快捷项保留 -->
+        <view class="date-chip">
+          <image class="filter-icon" :src="iconSrc('order-calendar')" mode="aspectFit" />
+          <DateSelect
+            ref="dateSelectRef"
+            class="date-select"
+            top="0"
+            :defaultShowName="dateSelectName"
+            @selectDateFn="selectDateFn"
+          />
         </view>
         <view
           v-for="p in periodTabs"
@@ -141,25 +148,6 @@
         </view>
       </template>
     </modal-module>
-
-    <modal-module :show="dateRangeModal" @click="dateRangeModalClick" :maskClosable="true" title="时间区间" padding="30rpx" width="86%">
-      <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" @change="startDateChange" 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" @change="endDateChange" class="date-range-picker">
-              <view :class="['date-range-value', draftEndDate ? '' : 'placeholder']">{{ draftEndDate || '请选择' }}</view>
-            </picker>
-          </view>
-        </view>
-      </template>
-    </modal-module>
   </view>
 </template>
 
@@ -167,13 +155,14 @@
 import list from '@/mixins/list'
 import AppWrapperEmpty from '@/components/app-wrapper-empty'
 import ModalModule from '@/components/plugin/modal'
+import DateSelect from '@/components/module/dateSelect'
 import { getBoardList, getBoardCounts, notifyTomorrow, notifyBirthdayGift, modifyBirthday, collectBirthdayGift } from '@/api/birthday'
 import { iconSrc } from '@/utils/iconSrc'
 
 // 生日看板供花店员工查看客户生日与赠礼状态，并处理通知、领取及生日补录流程。
 export default {
   name: 'BirthdayBoard',
-  components: { AppWrapperEmpty, ModalModule },
+  components: { AppWrapperEmpty, ModalModule, DateSelect },
   mixins: [list],
   data() {
     return {
@@ -181,10 +170,7 @@ export default {
       period: 'tomorrow',
       startDate: '',
       endDate: '',
-      draftStartDate: '',
-      draftEndDate: '',
       statusFilter: -1,
-      dateRangeModal: false,
       birthdayModal: false,
       customId: null,
       lunar: 0,
@@ -192,6 +178,7 @@ export default {
       birthdayDate: '',
       monthArray: Array.from({ length: 12 }, (_, i) => i + 1),
       dateArray: Array.from({ length: 31 }, (_, i) => i + 1),
+      dateSelectName: '时间',
       periodTabs: [
         { name: '今天', value: 'today' },
         { name: '明天', value: 'tomorrow' },
@@ -231,9 +218,13 @@ export default {
     },
     getListParams() {
       const params = { period: this.period }
-      if (this.period === 'custom') {
+      if (this.startDate) {
         params.startDate = this.startDate
+        params.startTime = this.startDate
+      }
+      if (this.endDate) {
         params.endDate = this.endDate
+        params.endTime = this.endDate
       }
       return params
     },
@@ -244,41 +235,25 @@ export default {
         }
       })
     },
+    /**
+     * DateSelect 选了快捷项/月份/时段：走更丰富的时间条件，旁边 pill 仅在命中 today 等时高亮。
+     */
+    selectDateFn(val) {
+      this.period = val.searchTime || 'custom'
+      this.startDate = val.startTime || ''
+      this.endDate = val.endTime || ''
+      this.dateSelectName = val.showName || '时间'
+      this.loadCounts()
+      this.resetList()
+    },
+    /**
+     * 旁边原快捷项：今天/明天/近一周/全部，清空自定义日期。
+     */
     changePeriod(v) {
       this.period = v
       this.startDate = ''
       this.endDate = ''
-      this.loadCounts()
-      this.resetList()
-    },
-    openDateRangeModal() {
-      this.draftStartDate = this.startDate
-      this.draftEndDate = this.endDate
-      this.dateRangeModal = true
-    },
-    startDateChange(e) {
-      this.draftStartDate = e.detail.value
-    },
-    endDateChange(e) {
-      this.draftEndDate = e.detail.value
-    },
-    dateRangeModalClick(e) {
-      if (e.index === 0) {
-        this.dateRangeModal = false
-        return
-      }
-      if (!this.draftStartDate || !this.draftEndDate) {
-        this.$msg('请选择开始日期和结束日期')
-        return
-      }
-      if (this.draftStartDate > this.draftEndDate) {
-        this.$msg('开始日期不能晚于结束日期')
-        return
-      }
-      this.startDate = this.draftStartDate
-      this.endDate = this.draftEndDate
-      this.period = 'custom'
-      this.dateRangeModal = false
+      this.dateSelectName = '时间'
       this.loadCounts()
       this.resetList()
     },
@@ -549,77 +524,29 @@ export default {
 .filter-row > view:not(:first-child) {
   margin-left: 10upx;
 }
-.date-filter-trigger {
-  flex: 1;
-  min-width: 0;
-  display: flex;
-  flex-direction: row;
-  align-items: center;
-  justify-content: center;
+.date-chip {
+  flex-shrink: 0;
+  min-width: 134upx;
   height: 68upx;
   padding: 0 12upx;
-  box-sizing: border-box;
-  background: #f0fbf5;
-  border: 1upx solid #08b955;
   border-radius: 34upx;
-  box-shadow: 0 4upx 12upx rgba(8, 185, 85, 0.12);
-}
-.date-filter-icon {
-  flex-shrink: 0;
   display: flex;
+  flex-direction: row;
   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;
+  background: #fff;
+  border: 1upx solid #e3e8e6;
 }
-.date-filter-hint {
-  margin-left: 8upx;
-  font-size: 22upx;
-  color: #6abf8e;
+.date-select {
+  display: flex;
+  align-items: center;
 }
-.date-filter-arrow {
+.filter-icon {
+  width: 32upx;
+  height: 32upx;
+  margin-right: 6upx;
   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);
 }
 .pill {
   flex: 1;
@@ -638,36 +565,6 @@ export default {
   background: #08b955;
   color: #fff;
 }
-.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;
-}
 .status-tabs {
   display: flex;
   align-items: stretch;

hdApp/src/components/module/dateSelect.vue

@@ -90,6 +90,13 @@ export default {
             type: String,
             default: '今天'
         },
+        // 页面追加的快捷项，如生日看板的「明天」
+        extraOptions:{
+            type: Array,
+            default() {
+                return []
+            }
+        },
         showAllOption: {
             type: Boolean,
             default: false
@@ -118,13 +125,15 @@ export default {
     },
     computed:{
         ...mapGetters(["getDictionariesInfo"]),
-        // 快捷日期项按业务需要追加“全部”，默认保持旧页面选项不变。
+        // 快捷日期项按业务需要追加「明天」等 extraOptions，以及「全部」。
         dateDefaultOptions() {
             const options = this.getDictionariesInfo.dateDefaultOption || [];
-            if (!this.showAllOption) {
-                return options;
+            const extras = this.extraOptions || [];
+            let list = extras.length ? options.concat(extras) : options;
+            if (this.showAllOption) {
+                list = list.concat([{name: '全部', value: 'all' }]);
             }
-            return options.concat([{name: '全部', value: 'all' }]);
+            return list;
         }
     },
     mounted(){

hdApp/src/pagesPurchase/gathering.vue

@@ -1,6 +1,6 @@
 <!--
   采购结清页：按供货商查看未结清挂账，支持勾选结清与自定义金额付款。
-  顶部「自定义金额」与 board 同款时间区间筛选并排，避免浮层挡住列表操作。
+  顶部时间筛选与订单页同款 DateSelect，快捷/月份/单日/时段均可，避免浮层挡住列表操作。
 -->
 <template>
 <view class="app-content">
@@ -12,15 +12,19 @@
           <text class="name">{{ ghsInfo.name}}</text>
         </view>
         <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>
+          <!-- 与订单页左上角同款：日历图标 + DateSelect -->
+          <view class="date-chip">
+            <image class="filter-icon" :src="iconSrc('order-calendar')" mode="aspectFit" />
+            <DateSelect
+              ref="dateSelectRef"
+              class="date-select"
+              top="0"
+              defaultShowName="全部"
+              :showAllOption="true"
+              @selectDateFn="selectDateFn"
+            />
           </view>
         </view>
       </view>
@@ -69,33 +73,6 @@
         </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>
@@ -104,10 +81,11 @@ 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 ModalModule from '@/components/plugin/modal';
+import DateSelect from "@/components/module/dateSelect";
+import { iconSrc } from '@/utils/iconSrc'
 import debtListPage from '@/mixins/debtListPage'
 export default {
-  components: { gatheringList, AppWrapperEmpty, ModalModule, DebtListPager },
+  components: { gatheringList, AppWrapperEmpty, DateSelect, DebtListPager },
   mixins: [debtListPage],
   data () {
     return {
@@ -122,16 +100,10 @@ export default {
 			endTime:'',
       ghsId:0,
       justLoaded: false,
-      salt: '',
-      // board 同款时间区间弹窗状态
-      showDateRangeModal: false,
-      draftStartDate: '',
-      draftEndDate: '',
-      todayDate: ''
+      salt: ''
     }
   },
   onLoad() {
-    this.todayDate = this.formatDate(new Date())
     this.initData()
   },
   onShow () {
@@ -153,10 +125,6 @@ export default {
     })
   },
   computed: {
-    // 触发器文案：未选显示「时间」，已选显示「已选」，与 board 一致
-    dateFilterLabel() {
-      return this.searchTime === 'custom' && this.startTime && this.endTime ? '已选' : '时间'
-    },
     selectList () {
       let list = [];
       if (this.detailsList) {
@@ -190,6 +158,7 @@ export default {
     }
   },
   methods: {
+    iconSrc,
     formatMoney (val) {
       const n = parseFloat(val)
       return isNaN(n) ? '0' : String(n)
@@ -208,6 +177,9 @@ export default {
         showPartialClear: hasPayDebt > 0
       }
     },
+		/**
+		 * 订单页同款时间筛选：searchTime 为快捷项或 custom/byMonth。
+		 */
 		selectDateFn(val){
 			this.searchTime = val.searchTime
 			this.startTime = val.startTime
@@ -217,45 +189,6 @@ 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()
     },
@@ -429,78 +362,37 @@ export default {
       /* 自定义金额：长方形按钮，与头像高度更协调 */
       .custom-amount-btn {
         margin: 0;
-        margin-right: 28upx;
+        margin-right: 16upx;
         height: 64upx;
         line-height: 64upx;
         padding: 0 20upx;
         font-size: 26upx;
         border-radius: 8upx;
       }
-      /* 时间筛选触发器：长方形，对齐自定义金额按钮 */
-      .date-filter-trigger {
+      /* 与订单页左上角同款时间筛选 */
+      .date-chip {
+        min-width: 134upx;
+        height: 64upx;
+        padding: 0 12upx;
+        border-radius: 8upx;
         display: flex;
         flex-direction: row;
         align-items: center;
         justify-content: center;
-        height: 64upx;
-        padding: 0 14upx;
+        flex-shrink: 0;
         box-sizing: border-box;
-        background: #f0fbf5;
-        border: 1upx solid #08b955;
-        border-radius: 8upx;
-        box-shadow: 0 4upx 12upx rgba(8, 185, 85, 0.12);
+        background: #fff;
+        border: 1upx solid #e3e8e6;
       }
-      .date-filter-icon {
-        flex-shrink: 0;
+      .date-select {
         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 {
+      .filter-icon {
+        width: 32upx;
+        height: 32upx;
+        margin-right: 6upx;
         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);
       }
     }
   }
@@ -586,34 +478,4 @@ 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>