@xtdev/xt-miniprogram-ui 1.2.59 → 1.2.60

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

@@ -1,684 +0,0 @@
-/*
- * @Author: Mr.Hu
- * @Date: 2023-12-29 09:48:47
- * @Description: 日期组件-支持上拉下拉循环选择
- * @LastEditors: Mr.Hu
- */
-let LASTMONTH = null; // 用于储存上一次选中的月份
-// 获取当前月份的天数
-const getDaysInMonth = (year, month) => {
-  const daysInMonth = new Date(year, month, 0).getDate();
-  return daysInMonth;
-};
-// 深拷贝
-const deepClone = (val) => {
-  if (!val) {
-    return null;
-  }
-  const isObject = (obj) =>
-    Object.prototype.toString.call(obj) === "[object object]";
-  let newResult = Array.isArray(val) ? [] : {};
-  for (const key in val) {
-    if (Object.prototype.hasOwnProperty.call(val, key)) {
-      newResult[key] = isObject(val[key]) ? deepClone(val[key]) : val[key];
-    }
-  }
-  return newResult;
-};
-// 获取默认时间
-const getDefaultDate = () => {
-  const now = new Date();
-  return `${now.getFullYear()}-${now.getMonth() + 1}-${now.getDate()}`;
-};
-// 查找数组中第二个出现的元素下标
-const findSecondIndexOf = (arr, predicate) => {
-  const firstIndex = arr.findIndex(predicate);
-  if (firstIndex === -1) {
-    return -1; // 如果没有找到匹配项，返回-1
-  }
-  // 从第一个匹配项的下一个位置继续查找
-  return arr.slice(firstIndex + 1).findIndex(predicate);
-};
-
-Component({
-  behaviors: [],
-  properties: {
-    // 选择器显示隐藏
-    show: {
-      type: Boolean,
-      value: false,
-    },
-    // 弹窗标题
-    title: {
-      type: String,
-      value: "日期筛选",
-    },
-    // 日期选择器模式 date 年月日选择 dateRange 时间范围选择 yearMonth 年月
-    type: {
-      type: String,
-      value: "dateRange",
-      observer: function (value) {
-        const getValue = () => {
-          switch(value) {
-            case "daterange":
-              return "dateRange";
-            case "yearmonth":
-              return "yearMonth";
-            default:
-              return value;
-          }
-        }
-        this.setData({ filtType: getValue(value) });
-      },
-    },
-    // 最小可选日期
-    minDate: {
-      type: String,
-      value: "",
-    },
-    // 最大可选日期
-    maxDate: {
-      type: String,
-      value: "",
-    },
-    // 当前时间
-    currentDate: {
-      type: String,
-      value: "",
-    },
-    // 展示切换按钮
-    showChangeTab: {
-      type: Boolean,
-      value: false,
-    },
-    // 确认按钮文字
-    confirmButtonText: {
-      type: String,
-      value: "确认",
-    },
-    // 取消按钮文字
-    cancelButtonText: {
-      type: String,
-      value: "重置",
-    },
-  },
-  data: {
-    years: [], // 年份数组
-    months: [], // 月份数组
-    days: [], // 天份数组
-    dateArr: [9999, 1, 1], // 下拉数组下标
-    dateValue: "", // 选中的日期值
-    dateStr: "", // 选中的日期显示字符
-    startDateArr: [], // 开始日期数组下标
-    startDateValue: "", // 开始日期选中值
-    startDateStr: "", // 开始日期字符
-    endDateArr: [], // 结束日期数组下标
-    endDateValue: "", // 结束日期选中值
-    endDateStr: "", // 结束日期字符
-    defaultDate: "", // 默认日期（组件接收的|当前时间）
-    checkedType: "start", // 当前选择的日期类型
-    filtType: "dateRange", // 选择器模式
-    btnDisabled: false, // 按钮禁用
-    newDaysArr: [], // 新的天数数组列表，储存拖动之后的天数数组值，用于拖动结束后更新
-    newDateArr: [], // 新的选中值，储存拖动之后当前选中的值，用于拖动结束后更新
-    typeEnums: {
-      date: "按日筛选",
-      dateRange: "按月筛选",
-    },
-    indicatorSyle: "font-size: 40rpx;font-weight: 800;height: 60px",// 自定义样式
-  },
-  lifetimes: {
-    created() {},
-    async attached() {
-      await this.initPickerArr();
-      this.setDefaultDate();
-      this.handelDays("", true);
-    },
-  },
-  methods: {
-    // 初始化日期数组
-    initPickerArr(curSelDate, dateValue) {
-      const {
-        minYear,
-        maxYear,
-        minMonth,
-        maxMonth,
-        minDay,
-        maxDay,
-        selYearColum,
-        selMonthColum,
-        selDayColum,
-      } = this.getMinAndMaxDate(curSelDate, dateValue);
-      return new Promise((resolve) => {
-        if (selDayColum) {
-          resolve();
-          return;
-        }
-        const years = [],
-          months = [],
-          days = [];
-
-        for (let i = minYear; i <= maxYear; i++) {
-          years.push(i);
-        }
-        for (let i = minMonth; i <= maxMonth; i++) {
-          months.push(i);
-        }
-        for (let i = minDay; i <= maxDay; i++) {
-          days.push(i);
-        }
-        if (curSelDate) {
-          this.setData({
-            months,
-          });
-        } else if (selMonthColum) {
-          this.setData({
-            days,
-          });
-        } else {
-          this.setData({
-            years,
-            months,
-            days,
-          });
-        }
-        resolve();
-      });
-    },
-    // 获取最小最大年月日, 当前所选择的列
-    getMinAndMaxDate(curSelDate, dateValue) {
-      let {
-        data: { minDate, maxDate, currentDate, dateArr },
-      } = this;
-      currentDate = currentDate || getDefaultDate();
-      let minYear,
-        maxYear,
-        minMonth,
-        maxMonth,
-        minDay,
-        maxDay = 31;
-      const selYearColum =
-        dateValue && dateArr ? dateValue[0] !== dateArr[0] : false; // 选择的是年份列
-      const selMonthColum =
-        dateValue && dateArr ? dateValue[1] !== dateArr[1] : false; // 选择的是月份列
-      const selDayColum =
-        dateValue && dateArr ? dateValue[2] !== dateArr[2] : false; // 选择的是日份列
-      const curDateArr = this.transformToArr(
-        curSelDate ? curSelDate : currentDate
-      );
-      // 当前日期数组
-      const curYear = curDateArr[0],
-        curMonth = curDateArr[1],
-        curDay = curDateArr[2];
-      if (minDate && minDate.length) {
-        const minDateArr = this.transformToArr(minDate);
-        minYear = Number(minDateArr[0]);
-        minMonth = curYear && curYear == minDateArr[0] ? minDateArr[1] : 1;
-        minDay =
-          curYear && curYear == minDateArr[0] && curMonth == minDateArr[1]
-            ? minDateArr[2]
-            : 1;
-      } else {
-        minYear = 1990;
-        minMonth = 1;
-        minDay = 1;
-      }
-      if (maxDate && maxDate.length) {
-        const maxDateArr = this.transformToArr(maxDate);
-        maxYear = maxDateArr[0];
-        maxMonth = curYear && curYear == maxDateArr[0] ? maxDateArr[1] : 12;
-        maxDay =
-          curYear && curYear == maxDateArr[0] && curMonth == maxDateArr[1]
-            ? maxDateArr[2]
-            : 31;
-      } else {
-        maxYear = new Date().getFullYear();
-        maxMonth = 12;
-        maxDay = getDaysInMonth(curYear, curMonth);
-      }
-      return {
-        minYear,
-        maxYear,
-        minMonth,
-        maxMonth,
-        minDay,
-        maxDay,
-        curYear,
-        curMonth,
-        curDay,
-        selYearColum,
-        selMonthColum,
-        selDayColum,
-      };
-    },
-    // 处理传入日期格式
-    transformToArr(dateStr) {
-      if (!dateStr) {
-        return null;
-      }
-      const dateArr = dateStr.split("-");
-      if (!dateArr.length) {
-        return null;
-      }
-      return dateArr;
-    },
-    // 设置默认年月日
-    setDefaultDate() {
-      const now = new Date();
-      let {
-        data: {
-          dateValue,
-          currentDate,
-          dateStr,
-          dateArr,
-          defaultDate,
-          minDate,
-          filtType
-        },
-      } = this;
-      currentDate = currentDate || getDefaultDate();
-      let curDateArr = this.transformToArr(currentDate); // 当前日期数组
-      const curYear = curDateArr[0];
-      const curMonth = curDateArr[1];
-      const curDay = curDateArr[2];
-      const minDateArr = this.transformToArr(minDate); // 最小可选日期数组
-      const defaultYear = minDateArr ? minDateArr[0] : 1990;
-      const defaultMonth =
-        minDateArr && curYear == minDateArr[0] ? minDateArr[1] : 1;
-      const defaultDay =
-        minDateArr && curYear == minDateArr[0] && curMonth == minDateArr[1]
-          ? minDateArr[2]
-          : 1;
-      if (curDateArr && curDateArr.length) {
-        // 如果有设置当前日期，则数组下标选中当前日期
-        dateStr = filtType === "yearMonth" ? `${curYear}年${curMonth}月` : `${curYear}年${curMonth}月${curDay}日`;
-        dateArr = [
-          curYear - defaultYear,
-          curMonth - defaultMonth,
-          curDateArr[2] - defaultDay,
-        ];
-        dateValue = `${curYear}-${curMonth}-${curDay}`;
-      } else {
-        // 如果有设置当前日期，则数组下标默认选中当前
-        dateStr = filtType === "yearMonth" ? `${now.getFullYear()}年${
-          now.getMonth() + 1
-        }月` : `${now.getFullYear()}年${
-          now.getMonth() + 1
-        }月${now.getDate()}日`;
-        dateArr = [now.getFullYear() - 1990, now.getMonth(), now.getDate() - 1];
-        dateValue = `${now.getFullYear()}-${
-          now.getMonth() + 1
-        }-${now.getDate()}`;
-      }
-      // 储存当前传入的原始值
-      defaultDate = JSON.parse(JSON.stringify(dateValue));
-      this.setData({
-        dateArr,
-        dateStr,
-        dateValue,
-        defaultDate,
-        startDateArr: dateArr,
-        startDateStr: dateStr,
-        startDateValue: dateValue,
-      });
-    },
-    // 处理当前月的天数
-    handelDays(value, isInitDate = false) {
-      let {
-        data: { days, dateArr, years, months, minDate, maxDate, dateValue },
-      } = 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];
-      }
-      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);
-        }
-        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);
-        }
-        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);
-          }
-        }
-        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,
-          ];
-        }
-      }
-      // 天数列表上拉循环选择--后面插入
-      // 前选中天数列表，选中的接近最大天数，并且当前天数后面没有重复天数，处理天数下拉数组
-      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);
-        }
-        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({
-            dateArr: newDateArr
-          });
-        });
-      }
-      /****** 处理天数循环选择列表 end******/
-
-      LASTMONTH = selMonth; // 储存当前选中的月份，为上次选中的月份
-      // 处理快速拉动引发的bug
-      if (newDateArr[2] > newDaysArr.length) {
-        newDateArr = [newDateArr[0], newDateArr[1], newDaysArr.length - 1];
-      }
-      // 解决天数undefined问题
-      if (newDateArr[2] < 0) {
-        newDateArr[2] = 0;
-      }
-      // 天数选择下拉循环选择
-      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;
-      // 处理每月可选天数
-      this.handelDays(value);
-    },
-    // 更新选中的值
-    updateChangeValue() {
-      let {
-        data: {
-          years,
-          months,
-          days,
-          dateValue,
-          dateStr,
-          dateArr,
-          filtType,
-          checkedType,
-          startDateArr,
-          endDateArr,
-          startDateValue,
-          endDateValue,
-          startDateStr,
-          endDateStr,
-        },
-      } = this;
-      dateStr = `${years[dateArr[0]]}年${months[dateArr[1]]}月${
-        days[dateArr[2]]
-      }日`;
-      dateValue = `${years[dateArr[0]]}-${months[dateArr[1]]}-${
-        days[dateArr[2]]
-      }`;
-      if (filtType === "yearMonth") {
-        dateStr = `${years[dateArr[0]]}年${months[dateArr[1]]}月`;
-        dateValue = `${years[dateArr[0]]}-${months[dateArr[1]]}`;
-        // 如果是按年月筛选
-        this.setData({
-          dateStr,
-          dateValue,
-        });
-      } else if (filtType === "date") {
-        // 如果是按年月日筛选
-        this.setData({
-          dateStr,
-          dateValue,
-        });
-      } else if (checkedType === "start") {
-        this.setData({
-          startDateArr: dateArr,
-          startDateStr: dateStr,
-          startDateValue: dateValue,
-        });
-      } else {
-        this.setData({
-          endDateArr: dateArr,
-          endDateStr: dateStr,
-          endDateValue: dateValue,
-        });
-      }
-    },
-    // 更改筛选类型
-    changeFiltType() {
-      const {
-        data: { filtType, dateValue, dateStr, dateArr },
-      } = this;
-      this.setData({
-        filtType: filtType === "date" ? "dateRange" : "date",
-      });
-      if (filtType === "date") {
-        this.setData({
-          startDateValue: dateValue,
-          startDateStr: dateStr,
-          startDateArr: dateArr,
-        });
-        return;
-      }
-      this.onReset();
-    },
-    // 切换日期类型
-    switchDateType(e) {
-      const checkedType = e.currentTarget.dataset.type;
-      this.setData({
-        checkedType,
-      });
-      this.showCheckedPicker();
-    },
-    // 反显选中的日期下拉值
-    showCheckedPicker() {
-      let {
-        data: {
-          startDateValue,
-          endDateValue,
-          checkedType,
-          startDateArr,
-          endDateArr,
-          dateArr,
-          startDateStr,
-          endDateStr,
-        },
-      } = this;
-      // 如果当前切换到结束时间选项
-      if (checkedType === "end") {
-        if (!endDateValue) {
-          // 如果当前没有选结束时间
-          endDateValue = startDateValue;
-          endDateArr = startDateArr;
-          endDateStr = startDateStr;
-        } else {
-          dateArr = [endDateArr[0], endDateArr[1], endDateArr[2]];
-        }
-      }
-      if (checkedType === "start") {
-        dateArr = [startDateArr[0], startDateArr[1], startDateArr[2]];
-      }
-      this.setData({
-        endDateStr,
-        endDateValue,
-        endDateArr,
-        dateArr,
-      });
-    },
-    // 重置时间
-    onReset() {
-      const { data: { defaultDate, filtType, minDate } } = this;
-      let resetDateValue, resetDateStr, resetDateArr;
-      let { data: { dateStr } } = this;
-      let curDateArr = this.transformToArr(defaultDate);
-      let minDateArr = this.transformToArr(minDate);
-      if (filtType === 'yearMonth') {
-        resetDateStr = `${curDateArr[0]}年${curDateArr[1]}月`;
-        resetDateValue = `${curDateArr[0]}-${curDateArr[1]}`;
-      } else {
-        resetDateStr = `${curDateArr[0]}年${curDateArr[1]}月${curDateArr[2]}日`;
-        resetDateValue = `${curDateArr[0]}-${curDateArr[1]}-${curDateArr[2]}`;
-      }
-      const resetArrYear = curDateArr[0] - (minDateArr && minDateArr[0] ? minDateArr[0] : 1990);
-      const resetArrMonth = minDateArr && minDateArr[1] ? curDateArr[1] - minDateArr[1] : curDateArr[1] - 1;
-      const resetArrDay = curDateArr[2] - 1;
-      resetDateArr = [resetArrYear,  resetArrMonth, resetArrDay];
-      this.setData({
-        dateArr: resetDateArr,
-        dateStr: resetDateStr,
-        dateValue: resetDateValue
-      });
-      if (filtType === 'dateRange') {
-        this.setData({
-          startDateValue: resetDateValue,
-          startDateArr: resetDateArr,
-          startDateStr: resetDateStr,
-          endDateArr: [],
-          endDateStr: '',
-          endDateValue: ''
-        })
-      }
-      this.triggerEvent("onReset", {});
-    },
-    // 关闭选择器
-    onClose() {
-      // this.onReset();
-      this.setData({ show: false });
-      this.triggerEvent("onClose", {});
-    },
-    // 确认选择时间
-    onConfirm() {
-      const {
-        data: { filtType, dateValue, dateStr, startDateValue, endDateValue },
-      } = this;
-      let pickerDate;
-      if (filtType === "date") {
-        // 如果按年月日筛选
-        pickerDate = `${dateValue} 00:00:00`;
-      } else if (filtType === "yearMonth") {
-        // 如果按年月筛选
-        pickerDate = dateValue;
-      } else {
-        if (!endDateValue) {
-          wx.showToast({
-            title: "请选择结束时间",
-            icon: "none",
-          });
-          return;
-        }
-        if (new Date(startDateValue) > new Date(endDateValue)) {
-          wx.showToast({
-            title: "开始时间不能大于结束时间",
-            icon: "none",
-          });
-          return;
-        }
-        pickerDate = [`${startDateValue} 00:00:00`, `${endDateValue} 23:59:59`];
-      }
-      this.setData({ show: false });
-      this.triggerEvent("getDateValue", {
-        pickerDate,
-        pickerDateText: dateStr,
-      });
-    },
-  },
-});

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

@@ -1,8 +0,0 @@
-{
-  "component": true,
-  "styleIsolation": "apply-shared",
-  "usingComponents": {
-    "xt-icon": "../xt-icon/index",
-    "xt-button": "../xt-button/index"
-  }
-}