@xtdev/xt-miniprogram-ui 1.2.40 → 1.2.42

package/libs/xt-date-picker-loop/README.md

@@ -0,0 +1,77 @@
+<!--
+ * @Author: Mr.Hu
+ * @Date: 2024-01-04 16:02:07
+ * @Description: 
+ * @LastEditors: Mr.Hu
+-->
+# 时间选择器
+
+### 介绍
+用于选择单个时间点或时间范围
+
+### 效果图
+![效果图](https://img.tanjiu.cn/home/jejaRihM8wyBbSekBeneansB3GCTwCD8.png "时间选择器")
+
+### 引入
+在app.json或页面配置json中引入
+```
+"usingComponents": {
+    "xt-date-picker": "@xtdev/xt-miniprogram-ui/xt-date-picker",
+}
+```
+
+## 代码演示
+
+### 基础用法
+![效果图](https://img.tanjiu.cn/home/jejaRihM8wyBbSekBeneansB3GCTwCD8.png "基础用法")
+
+```
+<xt-date-picker show="{{true}}" />
+```
+
+### 指定为按日筛选
+![效果图](https://img.tanjiu.cn/home/bX2eCnbwTyAjaxCFasTHedKfZQEdEDzD.png "指定为按日筛选")
+
+```
+<xt-date-picker show="{{true}}" type="date" />
+```
+### 指定最小和最大可选日期
+![效果图](https://img.tanjiu.cn/home/DCHaTGQBHMy74W5n2YCZeZ6hc3fnkn3D.png "指定最小和最大可选日期")
+
+```
+<xt-date-picker show="{{true}}" minDate="2023-4-1" maxDate="2024-4-1"/>
+```
+### 指定选择器默认选中日期
+![效果图](https://img.tanjiu.cn/home/cfwHk7JrBpGRpihQG2w6HDbw3TsQbs2p.png "指定选择器默认选中日期")
+
+```
+<xt-date-picker show="{{true}}" currentDate="2022-4-1"/>
+```
+### 展示切换模式按钮
+![效果图](https://img.tanjiu.cn/home/sfawPWDsenpxtjWnPhXCxFcsnhQYBhHQ.png "展示切换模式按钮")
+
+```
+<xt-date-picker show="{{true}}" showChangeTab="{{true}}"/>
+```
+
+## API
+
+#### xt-date-picker props
+
+| 参数      | 说明 |  类型 |
+| ----------- | ----------- | ---------- |
+| show      | 是否显示时间选择器，默认false | `Boolean` |
+| title   | 选择器标题  | `String` |
+| type   | 选择模式，默认`dateRange`（可选值为`date`、`dateRange`）  | `String` |
+| minDate   | 最小可选日期  | `String` |
+| maxDate   | 最大可选日期  | `String` |
+| currentDate   | 选择器默认选中的日期，默认为当天  | `Number` |
+| showChangeTab   | 是否展示切换模式按钮，默认false  | `Boolean` |
+| confirmButtonText   | 确认按钮文字  | `String` |
+| cancelButtonText   |  取消按钮文字  | `String` |
+
+## Event
+
+| 事件名      | 说明 | 回调参数 |
+| ----------- | ----------- | ----------- |
+| getDateValue      | 点击确认按钮时触发 | `String` |

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

@@ -0,0 +1,606 @@
+/*
+ * @Author: Mr.Hu
+ * @Date: 2023-12-29 09:48:47
+ * @Description: 日期组件-js逻辑
+ * @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) {
+        this.setData({ filtType: value });
+      },
+    },
+    // 最小可选日期
+    minDate: {
+      type: String,
+      value: "1990-1-1",
+    },
+    // 最大可选日期
+    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", // 当前选择的日期类型
+    clickedEnd: false, // 点击结束时间
+    filtType: "dateRange", // 选择器模式
+    typeEnums: {
+      date: "按日筛选",
+      dateRange: "按月筛选",
+    },
+    indicatorSyle: "font-size: 40rpx;font-weight: 800;height: 60px",
+  },
+  lifetimes: {
+    created() {},
+    async attached() {
+      await this.initPickerArr();
+      this.setDefaultDate();
+      await 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,
+        },
+      } = 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 = `${curYear}年${curMonth}月${curDay}日`;
+        dateArr = [
+          curYear - defaultYear,
+          curMonth - defaultMonth,
+          curDateArr[2] - defaultDay,
+        ];
+        dateValue = `${curYear}-${curMonth}-${curDay}`;
+      } else {
+        // 如果有设置当前日期，则数组下标默认选中当前
+        dateStr = `${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) {
+      return new Promise((resolve) => {
+        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;
+        /** 处理月数组下拉列表 **/
+        // 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,
+          });
+        }
+        /** 处理天数下拉列表 **/
+        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];
+          }
+        }
+        // 天数列表上拉循环选择--后面插入
+        // 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,
+          });
+        }
+        // 天数列表上拉循环选择--前面插入
+        // 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];
+        }
+        LASTMONTH = selMonth;// 储存当前选中的月份，为上次选中的月份
+        // 天数选择下拉循环选择
+        // 解决回弹动画延时问题
+        if ((isMonthFirstColum || isDayFirstColum) && !this.data.isRset) {
+          setTimeout(() => {
+            this.setData({
+              days: newDaysArr,
+              dateArr: newDateArr,
+            });
+            resolve();
+          }, 1500);
+        } else {
+          this.setData({
+            days: newDaysArr,
+            dateArr: newDateArr,
+            isRset: false,
+          });
+          resolve();
+        }
+      });
+    },
+    // 滑动下拉列表
+    async bindChange(e) {
+      const value = e?.detail?.value;
+      // 处理每月可选天数
+      await this.handelDays(value);
+      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;
+      const {
+        data: { clickedEnd },
+      } = this;
+      this.setData({
+        checkedType,
+        clickedEnd: checkedType === "end" ? true : clickedEnd,
+      });
+      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,
+      });
+    },
+    // 重置时间
+    async onReset() {
+      this.setData({ isRset: true });
+      this.bindChange();
+    },
+    // 关闭选择器
+    async onClose() {
+      this.onReset();
+      this.setData({ show: false });
+    },
+    // 确认选择时间
+    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

@@ -0,0 +1,7 @@
+{
+  "component": true,
+  "usingComponents": {
+    "xt-icon": "../xt-icon/index",
+    "xt-button": "../xt-button/index"
+  }
+}

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

@@ -0,0 +1,57 @@
+<view wx:if="{{show}}" class="container">
+  <view class="xt-mask"></view>
+  <view class="xt-popup">
+    <!-- 顶部标题+关闭按钮 -->
+    <view class="xt-popup-head">
+      <view class="xt-popup-head-text">{{title}}</view>
+      <xt-icon catchtap="onClose" icon="shibai-xiao" class="shibai-xiao" size="48"/>
+    </view>
+    <!-- 分割线 -->
+    <view class="head-border"></view>
+    <!-- 切换选择类型按钮 -->
+    <view wx:if="{{showChangeTab}}" class="filter-btn" catchtap="changeFiltType">
+      <view>{{typeEnums[filtType]}}</view>
+      <xt-icon icon="shaixuan" class="shaixuan" size="32"/>
+    </view>
+    <!-- 选中日期 -->
+    <view class="date-sel">
+      <view wx:if="{{filtType === 'date' || filtType === 'yearMonth'}}" class="sel-sigle actived">{{dateStr}}</view>
+      <view wx:else class="sel-range">
+        <view catchtap="switchDateType" data-type="start" class="sel-start actived">{{startDateStr}}</view>
+        <view>至</view>
+        <view catchtap="switchDateType" data-type="end" class="sel-end {{clickedEnd ? 'actived' : ''}}">
+          {{ clickedEnd ? endDateStr : '结束时间'}}
+        </view>
+      </view>
+    </view>
+    <!-- 选择器 -->
+    <picker-view
+      class="picker-box"
+      value="{{dateArr}}"
+      indicator-style="{{indicatorSyle}}"
+      immediate-change="{{true}}"
+      mask-class="picker-mask"
+      bindchange="bindChange">
+      <picker-view-column>
+        <view wx:for="{{years}}" wx:key="index" class="picker-item {{dateArr[0] === index ? 'picker-select' : ''}}">
+          {{item}}年
+        </view>
+      </picker-view-column>
+      <picker-view-column>
+        <view wx:for="{{months}}" wx:key="index" class="picker-item {{dateArr[1] === index ? 'picker-select' : ''}}">
+          {{item}}月
+        </view>
+      </picker-view-column>
+      <picker-view-column wx:if="{{type !== 'yearMonth'}}">
+        <view wx:for="{{days}}" wx:key="index" class="picker-item {{dateArr[2] === index ? 'picker-select' : ''}}">
+          {{item}}日
+        </view>
+      </picker-view-column>
+    </picker-view>
+    <!-- 按钮组 -->
+    <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>
+    </view>
+  </view>
+</view>

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

@@ -0,0 +1,118 @@
+.btns-group {
+  display: flex;
+}
+.btn-reset, .btn-confirm {
+  width: 328rpx;
+}
+.xt-mask {
+  position: fixed;
+  top: 0;
+  left: 0;
+  width: 100%;
+  height: 100%;
+  background: rgba(0, 0, 0, 0.7);
+}
+.xt-popup {
+  position: fixed;
+  bottom: 0;
+  left: 0;
+  width: 100%;
+  height: 1204rpx;
+  padding: 32rpx;
+  border-radius: 24rpx 24rpx 0 0;
+  box-sizing: border-box;
+  background: #fff;
+  z-index: 999;
+}
+.xt-popup-head {
+  display: flex;
+  align-items: center;
+  justify-content: space-between;
+  padding-bottom: 32rpx;
+}
+.xt-popup-head .xt-popup-head-text {
+  line-height: 56rpx;
+  font-size: 40rpx;
+  font-weight: 800;
+  color: #000;
+}
+.xt-popup-head .shibai-xiao {
+  color: #B8B8B8;
+}
+.head-border {
+  width: 100%;
+  height: 2rpx;
+  background: #F5F5F5;
+}
+.filter-btn {
+  display: flex;
+  align-items: center;
+  width: 226rpx;
+  height: 80rpx;
+  margin-top: 32rpx;
+  padding: 16rpx 24rpx;
+  font-size: 34rpx;
+  border-radius: 60rpx;
+  box-sizing: border-box;
+  background: #E5E5E5;
+}
+.filter-btn .shaixuan {
+  margin-left: 8rpx;
+}
+.date-sel {
+  margin-top: 48rpx;
+}
+.sel-sigle, .sel-start, .sel-end {
+  display: flex;
+  align-items: center;
+  justify-content: center;
+  height: 80rpx;
+  border-radius: 60rpx;
+  font-weight: 800;
+  color: #666666;
+  border: 2rpx solid #E5E5E5;
+}
+.date-sel .sel-range {
+  display: flex;
+  align-items: center;
+  justify-content: space-between;
+}
+.date-sel .sel-start, .date-sel .sel-end {
+  width: 296rpx;
+}
+.date-sel .actived {
+  color: #6722AB;
+  border: 2rpx solid #6722AB;
+}
+.picker-box {
+  width: 100%;
+  height: 600rpx;
+  margin-top: 32rpx;
+}
+.btns-group {
+  position: fixed;
+  left: 0;
+  bottom: 0;
+  padding: 32rpx;
+  width: 100%;
+  display: flex;
+  justify-content: space-between;
+  box-sizing: border-box;
+  padding-bottom: calc(constant(safe-area-inset-bottom) + 0rpx);
+  padding-bottom: calc(env(safe-area-inset-bottom) + 0rpx);
+}
+.picker-item {
+  display: flex;
+  align-items: center;
+  justify-content: center;
+  height: 120rpx;
+  font-size: 40rpx;
+  color: #000000;
+  text-align: center;
+}
+.picker-mask {
+}
+.picker-select {
+  font-size: 40rpx;
+  font-weight: 800;
+}

package/package.json

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