@xtdev/xt-miniprogram-ui 1.2.42 → 1.2.43

package/libs/xt-date-picker-loop/index.js

@@ -1,7 +1,7 @@
 /*
  * @Author: Mr.Hu
  * @Date: 2023-12-29 09:48:47
- * @Description: 日期组件-js逻辑
+ * @Description: 日期组件-支持上拉下拉循环选择
  * @LastEditors: Mr.Hu
  */
 let LASTMONTH = null; // 用于储存上一次选中的月份
@@ -12,7 +12,9 @@ const getDaysInMonth = (year, month) => {
 };
 // 深拷贝
 const deepClone = (val) => {
-  if (!val) {return null;}
+  if (!val) {
+    return null;
+  }
   const isObject = (obj) =>
     Object.prototype.toString.call(obj) === "[object object]";
   let newResult = Array.isArray(val) ? [] : {};
@@ -107,18 +109,21 @@ Component({
     checkedType: "start", // 当前选择的日期类型
     clickedEnd: false, // 点击结束时间
     filtType: "dateRange", // 选择器模式
+    btnDisabled: false, // 按钮禁用
+    newDaysArr: [], // 新的天数数组列表，储存拖动之后的天数数组值，用于拖动结束后更新
+    newDateArr: [], // 新的选中值，储存拖动之后当前选中的值，用于拖动结束后更新
     typeEnums: {
       date: "按日筛选",
       dateRange: "按月筛选",
     },
-    indicatorSyle: "font-size: 40rpx;font-weight: 800;height: 60px",
+    indicatorSyle: "font-size: 40rpx;font-weight: 800;height: 60px",// 自定义样式
   },
   lifetimes: {
     created() {},
     async attached() {
       await this.initPickerArr();
       this.setDefaultDate();
-      await this.handelDays("", true);
+      this.handelDays("", true);
     },
   },
   methods: {
@@ -239,9 +244,13 @@ Component({
     },
     // 处理传入日期格式
     transformToArr(dateStr) {
-      if (!dateStr) {return null;}
+      if (!dateStr) {
+        return null;
+      }
       const dateArr = dateStr.split("-");
-      if (!dateArr.length) {return null;}
+      if (!dateArr.length) {
+        return null;
+      }
       return dateArr;
     },
     // 设置默认年月日
@@ -303,143 +312,169 @@ Component({
     },
     // 处理当前月的天数
     handelDays(value, isInitDate = false) {
-      return new Promise((resolve) => {
+      let {
+        data: { days, dateArr, years, months, minDate, maxDate, dateValue },
+      } = this;
+      // 如果没有默认值
+      if (!value) {
+        const { minYear } = this.getMinAndMaxDate();
         let {
-          data: { days, dateArr, years, months, minDate, maxDate, dateValue },
+          data: { currentDate },
         } = this;
-        // 如果没有默认值
-        if (!value) {
-          const { minYear } = this.getMinAndMaxDate();
-          let {
-            data: { currentDate },
-          } = this;
-          currentDate = currentDate || getDefaultDate();
-          value = this.transformToArr(currentDate); // 当前日期数组
-          value = [value[0] - minYear, value[1] - 1, value[2] - 1];
+        currentDate = currentDate || getDefaultDate();
+        value = this.transformToArr(currentDate); // 当前日期数组
+        value = [value[0] - minYear, value[1] - 1, value[2] - 1];
+      }
+      const selYear = years[value?.[0]],
+        selMonth = months[value?.[1]],
+        selDay = days[value?.[2]];
+      let {
+        minYear,
+        minMonth,
+        maxMonth,
+        minDay,
+        maxDay,
+        selYearColum,
+        selMonthColum,
+        selDayColum,
+      } = this.getMinAndMaxDate(`${selYear}-${selMonth}-${selDay}`, value);
+      // 获取当前日期数组，当前选中日期值
+      let newDaysArr = days,
+        newDateArr = value;
+      /****** 处理月份数组下拉列表 start******/
+      // 1.后面插入：如果当前选中的是月份，并且是接近最大月，并且当前月份后面没有重复月份，处理月份下拉数组
+      const isMonthLastColum =
+        selMonth >= maxMonth - 3 && (selMonthColum || selYearColum);
+      if (isMonthLastColum || (selMonth >= maxMonth - 3 && isInitDate)) {
+        for (let i = minMonth; i <= maxMonth; i++) {
+          months.push(i);
         }
-        const selYear = years[value?.[0]],
-          selMonth = months[value?.[1]],
-          selDay = days[value?.[2]];
-        let {
-          minYear,
-          minMonth,
-          maxMonth,
-          minDay,
-          maxDay,
-          selYearColum,
-          selMonthColum,
-          selDayColum,
-        } = this.getMinAndMaxDate(`${selYear}-${selMonth}-${selDay}`, value);
-        // 获取当前日期数组，当前选中日期值
-        let newDaysArr = days,
-          newDateArr = value;
-        /** 处理月数组下拉列表 **/
-        // 1.后面插入：如果当前选中的是月份，并且是接近最大月，并且当前月份后面没有重复月份，处理月份下拉数组
-        const isMonthLastColum =
-          selMonth >= maxMonth - 3 && (selMonthColum || selYearColum);
-        if (isMonthLastColum || (selMonth >= maxMonth - 3 && isInitDate)) {
-          for (let i = minMonth; i <= maxMonth; i++) {
-            months.push(i);
-          }
-          this.setData({
-            months,
-          });
+        this.setData({
+          months,
+        });
+      }
+      // 2.前面插入：如果当前选中的是月份，并且是接近最小月，并且当前月份前面没有重复月份，处理月份下拉数组
+      const isMonthFirstColum =
+        selMonth <= maxMonth - 3 && newDateArr[1] < maxMonth && selMonthColum; // 当前选中的第一月
+      if (isMonthFirstColum || (selMonth <= maxMonth - 3 && isInitDate)) {
+        for (let i = maxMonth; i >= minMonth; i--) {
+          months.unshift(i);
         }
-        // 2.前面插入：如果当前选中的是月份，并且是接近最小月，并且当前月份前面没有重复月份，处理月份下拉数组
-        const isMonthFirstColum =
-          selMonth <= maxMonth - 3 && newDateArr[1] < maxMonth && selMonthColum; // 当前选中的第一月
-        if (isMonthFirstColum || (selMonth <= maxMonth - 3 && isInitDate)) {
-          for (let i = maxMonth; i >= minMonth; i--) {
-            months.unshift(i);
+        newDateArr = [newDateArr[0], newDateArr[1] + maxMonth, newDateArr[2]];
+        this.setData({
+          months,
+        });
+      }
+      /****** 处理月份数组下拉列表 end******/
+
+      /****** 处理天数下拉列表 start******/
+      const firstIndex = findSecondIndexOf(newDaysArr, (el) => el == 1);
+      // 1.切换月份，更新天数组列表
+      if (selMonthColum || selYearColum) {
+        const newArray = [];
+        for (let j = 1; j <= 2; j++) {
+          for (let i = minDay; i <= maxDay; i++) {
+            newArray.push(i);
           }
-          newDateArr = [newDateArr[0], newDateArr[1] + maxMonth, newDateArr[2]];
-          this.setData({
-            months,
-          });
         }
-        /** 处理天数下拉列表 **/
-        const firstIndex = findSecondIndexOf(newDaysArr, (el) => el == 1);
-        // 2.切换月份，更新天数组列表
-        if (selMonthColum || selYear) {
-          const newArray = [];
-          for (let j = 1; j <= 2; j++) {
-            for (let i = minDay; i <= maxDay; i++) {
-              newArray.push(i);
-            }
-          }
-          newDaysArr = newArray;
-          const beforeMonth = LASTMONTH;
-          const prevSelDateParams = this.getMinAndMaxDate(`${selYear}-${beforeMonth}-${selDay}`);
-          // 如果选中的是当月第一天，处理当前选中的下标逻辑
-          if (selDay == 1) {
-            // 获取切换之前的月数
-            const valueDay = maxDay - prevSelDateParams.maxDay;
-            newDateArr = [newDateArr[0], newDateArr[1], newDateArr[2] + valueDay];
-          }
-          // 如果选中的是当月最后一天，处理当前选中的下标逻辑
-          if (selDay == prevSelDateParams.maxDay) {
-            // 获取当前月天数
-            const curSelDateParams = this.getMinAndMaxDate(`${selYear}-${selMonth}-${selDay}`);
-            newDateArr = [newDateArr[0], newDateArr[1], curSelDateParams.maxDay - 1];
-          }
+        newDaysArr = newArray; // 重置当前月的天数组列表
+        const beforeMonth = LASTMONTH; // 获取上次选择月数
+        // 获取切换之前月选中信息
+        const prevSelDateParams = this.getMinAndMaxDate(
+          `${selYear}-${beforeMonth}-${selDay}`
+        );
+        // 如果选中的是当月第一天，处理当前选中的下标逻辑
+        if (selDay == 1) {
+          const valueDay = maxDay - prevSelDateParams.maxDay;
+          newDateArr = [newDateArr[0], newDateArr[1], newDateArr[2] + valueDay];
         }
-        // 天数列表上拉循环选择--后面插入
-        // 1.如果当前选中的是天数，并且是接近最大天数，并且当前天数后面没有重复天数，处理天数下拉数组
-        const isDayLastColum = selDayColum && selDay >= maxDay - 3;
-        // 获取上一个月的天数
-        if (isDayLastColum || (isInitDate && selDay >= maxDay - 3)) {
-          // 如果当前选中的不是天数组最后三条数据，重新组装
-          if (newDaysArr.length > 58 && value[2] <= newDaysArr.length - 3) {
-            newDaysArr = newDaysArr.slice(firstIndex + 1, newDaysArr.length);
-          }
-          for (let i = minDay; i <= maxDay; i++) {
-            newDaysArr.push(i);
-          }
-          this.setData({
-            days: newDaysArr,
-          });
+        // 如果选中的是当月最后一天，处理当前选中的下标逻辑
+        if (selDay == prevSelDateParams.maxDay) {
+          // 获取当前月天数
+          const curSelDateParams = this.getMinAndMaxDate(
+            `${selYear}-${selMonth}-${selDay}`
+          );
+          newDateArr = [
+            newDateArr[0],
+            newDateArr[1],
+            curSelDateParams.maxDay - 1,
+          ];
         }
-        // 天数列表上拉循环选择--前面插入
-        // 1.当前选中天数列表，选中的接近最小天数，并且设置的天数小于最大天数
-        const isDayFirstColum =
-          selDay <= minDay + 3 && newDateArr[2] < maxDay && selDayColum; // 当前选中的第一日
-        // 2. 当前初始日期前面设置添加循环选择
-        if (isDayFirstColum || (isInitDate && selDay <= minDay + 3)) {
-          for (let i = maxDay; i >= minDay; i--) {
-            newDaysArr.unshift(i);
-          }
-          this.setData({
-            days: newDaysArr,
-          });
-          let valueDay = Number(newDateArr[2] + maxDay);
-          newDateArr = [newDateArr[0], newDateArr[1], valueDay];
+      }
+      // 天数列表上拉循环选择--后面插入
+      // 前选中天数列表，选中的接近最大天数，并且当前天数后面没有重复天数，处理天数下拉数组
+      const isDayLastColum = selDayColum && selDay >= maxDay - 3;
+      // 获取上一个月的天数
+      if (isDayLastColum || (isInitDate && selDay >= maxDay - 3)) {
+        // 如果当前选中的不是天数组最后三条数据，重新组装
+        if (
+          newDaysArr.length > 2 * maxDay &&
+          value[2] <= newDaysArr.length - 3
+        ) {
+          newDaysArr = newDaysArr.slice(firstIndex + 1, newDaysArr.length);
         }
-        LASTMONTH = selMonth;// 储存当前选中的月份，为上次选中的月份
-        // 天数选择下拉循环选择
-        // 解决回弹动画延时问题
-        if ((isMonthFirstColum || isDayFirstColum) && !this.data.isRset) {
-          setTimeout(() => {
-            this.setData({
-              days: newDaysArr,
-              dateArr: newDateArr,
-            });
-            resolve();
-          }, 1500);
-        } else {
+        for (let i = minDay; i <= maxDay; i++) {
+          newDaysArr.push(i);
+        }
+      }
+      // 天数列表上拉循环选择--前面插入
+      // 当前选中天数列表，选中的接近最小天数，并且设置的天数小于最大天数
+      const isDayFirstColum =
+        selDay <= minDay + 3 && newDateArr[2] < maxDay && selDayColum; // 当前选中的第一日
+      if (isDayFirstColum || (isInitDate && selDay <= minDay + 3)) {
+        for (let i = maxDay; i >= minDay; i--) {
+          newDaysArr.unshift(i);
+        }
+        let valueDay = newDateArr[2] + maxDay;
+        newDateArr = [newDateArr[0], newDateArr[1], valueDay];
+        this.setData({
+          days: newDaysArr,
+          dateArr: newDateArr
+        }, () => {
           this.setData({
-            days: newDaysArr,
-            dateArr: newDateArr,
-            isRset: false,
+            dateArr: newDateArr
           });
-          resolve();
-        }
+        });
+      }
+      /****** 处理天数循环选择列表 end******/
+
+      LASTMONTH = selMonth; // 储存当前选中的月份，为上次选中的月份
+      // 处理快速拉动引发的bug
+      if (newDateArr[2] > newDaysArr.length) {
+        newDateArr = [newDateArr[0], newDateArr[1], newDaysArr.length - 1];
+      }
+      // 天数选择下拉循环选择
+      this.setData({
+        newDaysArr,
+        newDateArr,
       });
     },
+    // 监听滚动开始，禁用确认按钮
+    bindPickstart(e) {
+      this.setData({
+        btnDisabled: true
+      });
+    },
+    // 监听滚动结束：滚动结束，更新选中时间
+    bindPickend(e) {
+      const {
+        data: { newDaysArr, newDateArr },
+      } = this;
+      this.setData({
+        days: newDaysArr,
+        dateArr: newDateArr,
+        btnDisabled: false
+      });
+      this.updateChangeValue();
+    },
     // 滑动下拉列表
     async bindChange(e) {
       const value = e?.detail?.value;
       // 处理每月可选天数
-      await this.handelDays(value);
+      this.handelDays(value);
+    },
+    // 更新选中的值
+    updateChangeValue() {
       let {
         data: {
           years,
@@ -559,7 +594,6 @@ Component({
     },
     // 重置时间
     async onReset() {
-      this.setData({ isRset: true });
       this.bindChange();
     },
     // 关闭选择器

package/libs/xt-date-picker-loop/index.wxml

@@ -31,7 +31,9 @@
       indicator-style="{{indicatorSyle}}"
       immediate-change="{{true}}"
       mask-class="picker-mask"
-      bindchange="bindChange">
+      bindchange="bindChange"
+      bindpickstart="bindPickstart"
+      bindpickend="bindPickend">
       <picker-view-column>
         <view wx:for="{{years}}" wx:key="index" class="picker-item {{dateArr[0] === index ? 'picker-select' : ''}}">
           {{item}}年
@@ -51,7 +53,7 @@
     <!-- 按钮组 -->
     <view class="btns-group">
       <xt-button catchtap="onReset" class="btn-reset">{{cancelButtonText}}</xt-button>
-      <xt-button catchtap="onConfirm" type="main" class="btn-confirm">{{confirmButtonText}}</xt-button>
+      <xt-button catchtap="onConfirm" disabled="{{btnDisabled}}" type="main" class="btn-confirm">{{confirmButtonText}}</xt-button>
     </view>
   </view>
 </view>

package/package.json

@@ -1,6 +1,6 @@
 {
   "name": "@xtdev/xt-miniprogram-ui",
-  "version": "1.2.42",
+  "version": "1.2.43",
   "description": "",
   "miniprogram": "libs",
   "publishConfig": {