完善时间组件

src/components/FilterTime.vue

@@ -130,6 +130,7 @@ function confirmDate() {
 
 // 更新显示文本
 function updateDisplayText() {
+    console.log('zx1111', state.startTime, state.endTime)
     if (state.startTime && state.endTime) {
         state.displayText = `${state.startTime} 至 ${state.endTime}`
     }

src/pages-A/withdrawalDetails/index.vue

@@ -8,9 +8,9 @@ import { useTokenStore } from '@/store/token'
 import { changtime, menuButtonInfo, safeAreaInsets, systemInfo } from '@/utils'
 
 definePage({
-    style: {
-        navigationBarTitleText: '提现明细',
-    },
+  style: {
+    navigationBarTitleText: '提现明细',
+  },
 })
 
 const userStore = useUserStore()
@@ -19,87 +19,97 @@ const tokenStore = useTokenStore()
 const { userInfo } = storeToRefs(userStore)
 
 function menuClick(page: string) {
-    uni.navigateTo({
-        url: `/pages-A/${page}/index`,
-    })
+  uni.navigateTo({
+    url: `/pages-A/${page}/index`,
+  })
 }
 
 const show = ref(false)
-const filterValue = ref<string[]>([])
-function confirm() {
-    // 函数实现
+// up-datetime-picker 返回字符串格式，FilterTime 返回数组格式
+const filterValue = ref<string[] | string>([])
+function confirm(value) {
+  // up-datetime-picker 组件确认时保持字符串格式 YYYY-MM
+  console.log(111, value)
+  filterValue.value = changtime(value.value, 'YYYY年MM月')
     show.value = false
 }
 function cancel() {
-    show.value = false
+  show.value = false
 }
 function close() {
-    show.value = false
+  show.value = false
 }
 function showTimeFilter() {
-    show.value = true
+  show.value = true
 }
 
 // 处理时间选择变化
-function handleTimeChange(value: string[]) {
-    console.log('时间选择变化', value)
-    filterValue.value = value
+function handleTimeChange(value: string | string[]) {
+  console.log('时间选择变化', value)
+  filterValue.value = value
 }
 
 // 格式化时间显示
 function formatTimeDisplay() {
-    if (!filterValue.value || filterValue.value[0] === '' || filterValue.value[1] === '') {
-        return '全部时间'
-    }
-    return `${filterValue.value[0]} 至 ${filterValue.value[1]}`
+  console.log('formatTimeDisplay1111', filterValue.value)
+  // 处理 filterValue 是字符串的情况（单个月份）
+  if (typeof filterValue.value === 'string') {
+    return filterValue.value
+  }
+  // 处理 filterValue 是数组的情况（时间范围）
+  if (!filterValue.value || !filterValue.value[0] || !filterValue.value[1]) {
+    // 当天的YYYY年MM月
+    return changtime(new Date(), 'YYYY年MM月')
+  }
+  return `${filterValue.value[0]} 至 ${filterValue.value[1]}`
 }
 const wjsList = ref([
-    {
-        id: 1,
-        nickName: '昵称1',
-        name: '优惠券1',
-        price: 1000,
-        date: '2023-08-01 10:00:00',
-    },
-    {
-        id: 2,
-        nickName: '昵称2',
-        name: '优惠券2',
-        price: 1300,
-        date: '2023-10-01 10:00:00',
-    },
+  {
+    id: 1,
+    nickName: '昵称1',
+    name: '优惠券1',
+    price: 1000,
+    date: '2023-08-01 10:00:00',
+  },
+  {
+    id: 2,
+    nickName: '昵称2',
+    name: '优惠券2',
+    price: 1300,
+    date: '2023-10-01 10:00:00',
+  },
 ])
 const yjsList = ref([
-    {
-        id: 1,
-        nickName: '昵称3',
-        name: '优惠券3',
-        price: 2300,
-        date: '2023-10-01 10:00:00',
-    },
-    {
-        id: 2,
-        nickName: '昵称4',
-        name: '优惠券4',
-        price: 300,
-        date: '2023-10-01 10:00:00',
-    },
+  {
+    id: 1,
+    nickName: '昵称3',
+    name: '优惠券3',
+    price: 2300,
+    date: '2023-10-01 10:00:00',
+  },
+  {
+    id: 2,
+    nickName: '昵称4',
+    name: '优惠券4',
+    price: 300,
+    date: '2023-10-01 10:00:00',
+  },
 ])
 const list = ref([])
 onLoad(() => {
-    list.value = [...wjsList.value]
+  list.value = [...wjsList.value]
 })
 
 function goPage(page: string) {
-    uni.navigateTo({
-        url: `/pages-A/${page}/index`,
-    })
+  uni.navigateTo({
+    url: `/pages-A/${page}/index`,
+  })
 }
 
 const filterTimeRef = ref()
 function openDatePicker() {
-    // 调用子组件的方法
-    filterTimeRef.value.openPopup()
+  // 调用子组件的方法
+  filterTimeRef.value.openPopup()
 }
 </script>
 
@@ -140,11 +150,14 @@ function openDatePicker() {
             </view>
         </view>
         <up-datetime-picker
-            v-model="filterValue"
+            :value="Array.isArray(filterValue) ? filterValue[0] : filterValue"
             mode="year-month"
             :show="show"
             close-on-click-overlay
-            @confirm="confirm"
+            @confirm="(value) => {
+                // filterValue.value = value;
+                confirm(value);
+            }"
             @cancel="cancel"
         />
         <FilterTime ref="filterTimeRef" v-model="filterValue" @update:value="handleTimeChange" />

src/utils/directive.ts

@@ -16,18 +16,18 @@ export function changtime(value: number | string | Date, format: string = 'YYYY
 
     const year = date.getFullYear()
     const month = String(date.getMonth() + 1).padStart(2, '0')
-    //   const day = String(date.getDate()).padStart(2, '0')
-    //   const hours = String(date.getHours()).padStart(2, '0')
-    //   const minutes = String(date.getMinutes()).padStart(2, '0')
-    //   const seconds = String(date.getSeconds()).padStart(2, '0')
+    const day = String(date.getDate()).padStart(2, '0')
+    const hours = String(date.getHours()).padStart(2, '0')
+    const minutes = String(date.getMinutes()).padStart(2, '0')
+    const seconds = String(date.getSeconds()).padStart(2, '0')
 
     return format
         .replace('YYYY', String(year))
         .replace('MM', month)
-    // .replace('DD', day)
-    // .replace('HH', hours)
-    // .replace('mm', minutes)
-    // .replace('ss', seconds)
+        .replace('DD', day)
+        .replace('HH', hours)
+        .replace('mm', minutes)
+        .replace('ss', seconds)
 }
 
 /**