修改了消费记录页面时间选择样式

pagesme/goldCoin/consumeRecord.vue

@@ -21,9 +21,8 @@
             :placeholder="false"
             :safeAreaInsetBottom="false"
         >
-          <u-tabbar-item text="全部" icon="home" @click="tabbarClick"/>
+          <u-tabbar-item text="当前月" icon="clock" @click="tabbarClick"/>
           <u-tabbar-item text="近三个月" icon="calendar" @click="tabbarClick"/>
-          <u-tabbar-item text="近一个月" icon="clock" @click="tabbarClick"/>
           <u-tabbar-item text="消费类型" icon="grid" @click="tabbarClick"/>
         </u-tabbar>
       </view>
@@ -51,8 +50,27 @@
         </view>
       </view>
     </z-paging>
-<!--    近三个月或者近一个月的日期选择器-->
-    <u-calendar :minDate="minDate" :maxDate="maxDate" :show="calendarShow" mode="range" showLunar="true" @confirm="calendarConfirm" @close="calendarClose"></u-calendar>
+<!--    近三个月的日期选择器-->
+    <u-datetime-picker
+        ref="datetimePicker1"
+        title="开始时间"
+        :show="datePickerShow1"
+        mode="year-month"
+        :formatter="formatter"
+        @confirm="datePickerConfirm1"
+        @cancel="datePickerCancel1"
+    ></u-datetime-picker>
+    <u-datetime-picker
+        ref="datetimePicker2"
+        title="结束时间"
+        :show="datePickerShow2"
+        mode="year-month"
+        :formatter="formatter"
+        @confirm="datePickerConfirm2"
+        @cancel="datePickerCancel2"
+        :minDate="minDate"
+        :maxDate="maxDate"
+    ></u-datetime-picker>
 <!--    消费类型选择器-->
     <u-picker :show="pickerShow" :columns="columns" keyName="label" @confirm="pickerConfirm" @cancel="pickerClose"></u-picker>
   </view>
@@ -79,7 +97,8 @@ export default {
         ]
       ],
       //日期选择器
-      calendarShow:false,
+      datePickerShow1:false,
+      datePickerShow2:false,
       //日期范围
       minDate:'',
       maxDate:'',
@@ -99,6 +118,12 @@ export default {
       },
     };
   },
+  onReady() {
+    // 微信小程序需要用此写法
+    this.$refs.datetimePicker1.setFormatter(this.formatter)
+    // 微信小程序需要用此写法
+    this.$refs.datetimePicker2.setFormatter(this.formatter)
+  },
   onShow() {
     //获取当前页面的页头高度
     this.menuButtonInfo = uni.getMenuButtonBoundingClientRect()
@@ -119,7 +144,82 @@ export default {
     })
   },
   methods: {
+    //开始时间选择器
+    datePickerConfirm1(e){
+      //将时间戳转换成年月
+      const date = new Date(e.value);
+      //获取到这个时间戳的前三年和后三年
+      // 获取当前年份和月份
+      const currentYear = date.getFullYear();
+      const currentMonth = date.getMonth(); // getMonth() 返回0-11
+      // 计算前三个月的Date对象
+      const threeMonthsDateAgo = new Date(date);
+      const threeMonthsDateLater = new Date(date);
+      threeMonthsDateAgo.setMonth(currentMonth - 2);
+      threeMonthsDateLater.setMonth(currentMonth + 2);
+      const agoTime = threeMonthsDateAgo.getTime();
+      const laterTime = threeMonthsDateLater.getTime();
+      this.minDate = agoTime
+      this.maxDate = laterTime
+      // 获取年份和月份
+      const year = date.getFullYear();
+      const month = String(date.getMonth() + 1).padStart(2, '0');
+      const beginDate = `${year}-${month}-01`;
+      this.queryParam.beginTime = beginDate
+      this.datePickerShow1 = false
+      this.datePickerShow2 = true
+    },
+    //结束时间选择器
+    datePickerConfirm2(e){
+      //将时间戳转换成年月
+      const date = new Date(e.value);
+      // 获取年份和月份
+      const year = date.getFullYear();
+      const month = date.getMonth();
+      const formattedDate = `${year}-${String(month + 1).padStart(2, '0')}`;
+      // 获取所选月份的最后一天
+      const nextMonth = new Date(year, month + 1, 1);
+      nextMonth.setDate(nextMonth.getDate() - 1);
+      const lastDay = nextMonth.getDate();
+      const endDate = `${year}-${String(month + 1).padStart(2, '0')}-${String(lastDay).padStart(2, '0')}`;
+      this.queryParam.endTime = endDate
+      this.$refs.paging.reload()
+      this.datePickerShow2 = false
+    },
+    //开始时间选择器取消按钮
+    datePickerCancel1(){
+      this.datePickerShow1 = false
+    },
+    //结束时间选择器取消按钮
+    datePickerCancel2(){
+      this.datePickerShow2 = false
+    },
+    //格式化日期选择器
+    formatter(type, value) {
+      if (type === 'year') {
+        return `${value}年`
+      }
+      if (type === 'month') {
+        return `${value}月`
+      }
+      if (type === 'day') {
+        return `${value}日`
+      }
+      return value
+    },
+    //分页查询
     queryList(pageNo, pageSize) {
+      //页面最初加载时默认加载当前月的数据
+      if (this.queryParam.beginTime === ''){
+        const d = new Date()
+        const year = d.getFullYear()
+        let month = d.getMonth() + 1
+        let day = d.getDate()
+        month = month < 10 ? `0${month}` : month
+        day = day < 10 ? `0${day}` : day
+        this.queryParam.beginTime = `${year}-${month}-01`
+        this.queryParam.endTime = `${year}-${month}-${day}`
+      }
       const params = {
         page:pageNo,
         rows:pageSize,
@@ -140,6 +240,8 @@ export default {
             item.actionTypeName = '用户充值'
           } else if (item.actionType == 11){
             item.actionTypeName = '系统充值'
+          } else if (item.actionType == 12){
+            item.actionTypeName = '系统赠送'
           } else if (item.actionType == 20){
             item.actionTypeName = '点赞'
           } else if (item.actionType == 21){
@@ -160,24 +262,8 @@ export default {
         this.$refs.paging.completeByTotal(this.record,res.data.total);
       })
     },
-    //日期选择器确定
-    calendarConfirm(e) {
-      //将e[0]这个时间变成日期的格式,并且加上时分秒
-      const beginTime = e[0]
-      const endTime = e[e.length-1]
-      this.queryParam.beginTime = beginTime
-      this.queryParam.endTime = endTime
-      this.$refs.paging.reload();
-      this.calendarShow = false
-    },
-    //日期选择器取消
-    calendarClose(){
-      this.calendarShow = false
-    },
     //类型选择器确定
     pickerConfirm(e) {
-      console.log(e);
-      console.log('picker:',e.value[0].value)
       this.queryParam.type = e.value[0].value
       this.$refs.paging.reload();
       this.pickerShow = false
@@ -190,45 +276,24 @@ export default {
     tabbarClick(e){
       this.tabbarValue = e
       if (e === 0){
-        //全部
-        this.$refs.paging.reload();
-      }
-      if (e === 1){
-        //近三个月
-        this.calendarShow = true
-        // 获取当前日期
-        const d = new Date();
-        const year = d.getFullYear();
-        let maxMonth = d.getMonth() + 1;
-        let minMonth = d.getMonth() - 2;
-        let day = d.getDate();
-        // 格式化月份和日期，确保它们是两位数
-        maxMonth = maxMonth < 10 ? `0${maxMonth}` : maxMonth;
-        minMonth = minMonth < 10 ? `0${minMonth}` : minMonth;
-        day = day < 10 ? `0${day}` : day;
-        // 设置 maxDate 为今天
-        this.maxDate = `${year}-${maxMonth}-${day}`;
-        // 设置 minDate 为2个月前的第一天
-        this.minDate = `${year}-${minMonth}-01`;
-      }
-      if (e === 2){
         //近一个月
-        this.calendarShow = true
         // 获取当前日期
         const d = new Date();
-        const year = d.getFullYear();
-        let month = d.getMonth() + 1;
-        let day = d.getDate();
-        console.log('当前日期：', `${year}-${month}-${day}`)
+        const year = d.getFullYear()
+        let month = d.getMonth() + 1
+        let day = d.getDate()
         // 格式化月份和日期，确保它们是两位数
-        month = month < 10 ? `0${month}` : month;
-        day = day < 10 ? `0${day}` : day;
-        // 设置 maxDate 为今天
-        this.maxDate = `${year}-${month}-${day}`;
-        // 设置 minDate 为一个月前的第一天
-        this.minDate = `${year}-${month}-01`;
+        month = month < 10 ? `0${month}` : month
+        day = day < 10 ? `0${day}` : day
+        this.queryParam.beginTime = `${year}-${month}-01`
+        this.queryParam.endTime = `${year}-${month}-${day}`
+        this.$refs.paging.reload()
+      }
+      if (e === 1){
+        //近三个月
+        this.datePickerShow1 = true
       }
-      if (e === 3){
+      if (e === 2){
         //类型
         this.pickerShow = true
       }