@xtdev/xt-miniprogram-ui 1.2.60 → 1.2.61

package/libs/xt-date-picker/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/index.js

@@ -0,0 +1,443 @@
+/*
+ * @Author: Mr.Hu
+ * @Date: 2023-12-29 09:48:47
+ * @Description: 日期组件-js逻辑
+ * @LastEditors: Mr.Hu
+ */
+// 获取当前月份的天数
+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()}`;
+}
+Component({
+  behaviors: [],
+  properties: {
+    // 选择器显示隐藏
+    show: {
+      type: Boolean,
+      value: false,
+    },
+    // 弹窗标题
+    title: {
+      type: String,
+      value: '日期筛选'
+    },
+    // 日期选择器模式 date 年月日选择 dateRange 时间范围选择
+    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: {
+    show: false,
+    years: [], // 年份数组
+    months: [], // 月份数组
+    days: [], // 天份数组
+    dateArr: [9999, 1, 1], // 下拉数组下标
+    dateValue: '', // 选中的日期值
+    dateStr: '', // 选中的日期显示字符
+    startDateArr: [], // 开始日期数组下标
+    startDateValue: '', // 开始日期选中值
+    startDateStr: '', // 开始日期字符
+    endDateArr: [], // 结束日期数组下标
+    endDateValue: '', // 结束日期选中值
+    endDateStr: '', // 结束日期字符
+    defaultDate: '', // 默认日期（组件接收的|当前时间）
+    checkedType: 'start', // 当前选择的日期类型
+    filtType: 'dateRange', // 选择器模式
+    typeEnums: {
+      date: '按日筛选',
+      dateRange: '按月筛选',
+    },
+    indicatorSyle: 'font-weight: 800;height: 112rpx'
+  },
+  lifetimes: {
+    created() {
+    },
+    async attached() {
+      await this.initPickerArr();
+      this.setDefaultDate();
+    }
+  },
+  methods: {
+    // 初始化日期数组
+    initPickerArr(curSelDate, dateValue) {
+      return new Promise(resolve => {
+        let { data: { minDate, maxDate, currentDate, dateArr } } = this;
+        currentDate = currentDate || getDefaultDate();
+        const curDateArr = this.transformToArr(curSelDate ? curSelDate : currentDate); //当前日期数组
+        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; // 选择的是日份列
+        if (selDayColum) resolve();
+        const curYear = curDateArr[0], curMonth= curDateArr[1], curDay = curDateArr[2];
+        let minYear, maxYear, minMonth, maxMonth, minDay, maxDay = 31; 
+        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 = 31;
+        }
+        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 && selYearColum) {
+          this.setData({
+            months
+          })
+        } else if (curSelDate && selMonthColum) {
+          this.setData({
+            days
+          })
+        } else {
+          this.setData({
+            years,
+            months,
+            days
+          })
+        }
+        resolve();
+      })
+    },
+    // 处理传入日期格式
+    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
+      });
+    },
+    // 渲染天数
+    renderDayList(curMonthDays) {
+      let dayList = Array.from({ length: curMonthDays }, (v, k) => (+k + 1).toString());
+      dayList = dayList.map(day => {
+        if (day < 10) {
+          day = `0${day}`;
+        }
+        return day;
+      });
+      return dayList;
+    },
+    // 处理当前月的天数
+    handelDays(value) {
+      const { data: { days, dateArr, years, months, minDate, maxDate } } = this;
+      const minDateArr = minDate ? this.transformToArr(minDate) : [];
+      const maxDateArr = maxDate ? this.transformToArr(maxDate) : [];
+      const selYear = years[value[0]], selMonth = months[value[1]], selDay = days.length > value[2] + 1 ? value[2] + 1 : days.length;
+      const curColumnLen = days.length; // 当前日数组对应的数组长度
+      // 当前月是最小可选月份
+      const isMinMonth = selYear == minDateArr[0] && selMonth+1 <= minDateArr[1];
+      // 当前月是最大可选月份
+      const isMaxMonth = (`${selYear}-${selMonth}` == `${maxDateArr[0]}-${maxDateArr[1]}`) && (selMonth == maxDateArr[1]);
+      const curMonthDays = isMaxMonth ? maxDateArr[2] : getDaysInMonth(selYear, selMonth);
+      const oldDateArr = dateArr; // 获取老的下标选项
+      let newDaysArr = days, newDateArr = value;
+      // 如果当前所选月份的天数大于当前月所有天数
+      if (curColumnLen > curMonthDays) {
+        // 获取当前月天数
+        const dayList = this.renderDayList(curMonthDays);
+        // 数组选项重新赋值
+        newDaysArr = dayList;
+      } else if (curColumnLen < curMonthDays) {
+        const dayList = this.renderDayList(curMonthDays);
+        newDaysArr = dayList;
+      }
+      // 设置新的下标选项
+      if (isMinMonth) {
+        newDateArr = [
+          newDateArr[0],
+          (newDateArr[1] + 1 - minDateArr[1]) > 0 ? (newDateArr[1] + 1 - minDateArr[1]) : 0,
+          selDay > curMonthDays ? dayList.length : newDateArr[2]
+      ];
+      } else if (isMaxMonth) {
+        // 当前所选年份是最大月
+        newDateArr = [newDateArr[0], newDateArr[1], newDateArr[2]];
+      } else if (selYear == minDateArr[0] && selYear < years[dateArr[0]]) {
+        // 当前所选年份是最小年，并且从大年份到小年份
+        newDateArr = [
+          newDateArr[0],
+          (newDateArr[1] + 1 - minDateArr[1]) > 0 ? (newDateArr[1] + 1 - minDateArr[1]) : 0,
+          newDateArr[2]
+        ];
+      } else if (years[dateArr[0]] == minDateArr[0] && selYear > years[dateArr[0]]) {
+        // 上一个所选年份是最小年，并且从小年份到小年份
+        newDateArr = [
+          newDateArr[0],
+          (Number(newDateArr[1]) + Number(minDateArr[1]) - 1),
+          newDateArr[2]
+        ];
+      } else if (years[dateArr[0]] == maxDateArr[0] && selYear > years[dateArr[0]]) {
+        // 如果是最大年，并且从小年份到大年份
+        newDateArr = [
+          newDateArr[0],
+          newDateArr[0] > maxDateArr[0] ? maxDateArr[0] : newDateArr[0],
+          newDateArr[2]
+        ];
+      }
+      this.setData({
+        days: newDaysArr,
+        dateArr: newDateArr
+      })
+    },
+    // 滑动下拉列表
+    async bindChange(e) {
+      const value = e.detail.value;
+      const { data: { years: year, months: month, days: day } } = this;
+      // 渲染下拉列表
+      await this.initPickerArr(`${year[value[0]]}-${month[value[1]]}-${day[value[2]]}`, value);
+      // 处理每月可选天数
+      this.handelDays(value);
+      let { data: {
+        years, months, days,
+        dateValue, dateStr, dateArr,
+        filtType, checkedType,
+        startDateArr, endDateArr,
+        startDateValue, endDateValue,
+        startDateStr, endDateStr
+      } } = this;
+      if (filtType === 'date') {
+        // 如果是按月筛选
+        dateStr = `${years[dateArr[0]]}年${months[dateArr[1]]}月${days[dateArr[2]]}日`;
+        dateValue = `${years[dateArr[0]]}-${months[dateArr[1]]}-${days[dateArr[2]]}`;
+        this.setData({
+          dateStr,
+          dateValue
+        });
+      } else {
+        // 如果是按日筛选
+        if (checkedType === 'start') {
+          this.setData({
+            startDateArr: dateArr,
+            startDateStr: `${years[dateArr[0]]}年${months[dateArr[1]]}月${days[dateArr[2]]}日`,
+            startDateValue: `${years[dateArr[0]]}-${months[dateArr[1]]}-${days[dateArr[2]]}`,
+          })
+        } else {
+          this.setData({
+            endDateArr: dateArr,
+            endDateStr: `${years[dateArr[0]]}年${months[dateArr[1]]}月${days[dateArr[2]]}日`,
+            endDateValue: `${years[dateArr[0]]}-${months[dateArr[1]]}-${days[dateArr[2]]}`,
+          })
+        }
+      }
+    },
+    // 更改筛选类型
+    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
+      })
+    },
+    // 关闭选择器
+    onClose() {
+      this.onReset();
+      this.setData({ show: false });
+      this.triggerEvent("onClose", {});
+    },
+    // 重置时间
+    onReset() {
+      this.initPickerArr();
+      const { data: { defaultDate, filtType, minDate } } = this;
+      let resetDateValue, resetDateStr, resetDateArr;
+      let { data: { dateStr } } = this;
+      let curDateArr = this.transformToArr(defaultDate);
+      let minDateArr = this.transformToArr(minDate);
+      resetDateStr = `${curDateArr[0]}年${curDateArr[1]}月${curDateArr[2]}日`;
+      resetDateArr = [curDateArr[0] - (minDateArr && minDateArr[0] ? minDateArr[0] : 1990),  curDateArr[1] - 1, curDateArr[2] - 1];
+      resetDateValue = `${curDateArr[0]}-${curDateArr[1]}-${curDateArr[2]}`;
+      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", {});
+    },
+    // 确认选择时间
+    onConfirm() {
+      const { data: { filtType, dateValue, startDateValue, endDateValue } } = this;
+      let checkedDate;
+      if (filtType === 'date') {
+        // 如果按月筛选
+        checkedDate = dateValue;
+      } else {
+        if (!endDateValue) {
+          wx.showToast({
+            title: '请选择结束时间',
+            icon: 'none'
+          })
+          return;
+        }
+        if (new Date(startDateValue) > new Date(endDateValue)) {
+          wx.showToast({
+            title: '开始时间不能大于结束时间',
+            icon: 'none'
+          })
+          return;
+        }
+        checkedDate = [startDateValue, endDateValue];
+      }
+      this.triggerEvent('getDateValue', checkedDate)
+    }
+  },
+});

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

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

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

@@ -0,0 +1,58 @@
+<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'}}" class="sel-sigle actived">{{dateStr}}</view>
+      <view wx:else class="sel-range">
+        <view catchtap="switchDateType" data-type="start" class="sel-start {{checkedType == 'start' ? 'actived' : ''}}">
+          {{startDateStr}}
+        </view>
+        <view>至</view>
+        <view catchtap="switchDateType" data-type="end" class="sel-end {{checkedType  == 'end' ? 'actived' : ''}}">
+          {{ endDateStr || '结束时间'}}
+        </view>
+      </view>
+    </view>
+    <!-- 选择器 -->
+    <picker-view
+      class="picker-box"
+      value="{{dateArr}}"
+      indicatorStyle="{{indicatorSyle}}"
+      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>
+        <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/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: 360rpx;
+  margin-top: 80rpx;
+}
+.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: 34rpx;
+  font-size: 34rpx;
+  color: #000000;
+  text-align: center;
+}
+.picker-mask {
+}
+.picker-select {
+  font-size: 34rpx;
+  font-weight: 800;
+}