@10yun/cv-mobile-ui 0.5.18 → 0.5.20

package/uview-plus/components/u-calendar/month.vue

@@ -0,0 +1,478 @@
+<template>
+  <view class="u-calendar-month-wrapper" ref="u-calendar-month-wrapper">
+    <view
+      v-for="(item, index) in months"
+      :key="index"
+      :class="[`u-calendar-month-${index}`]"
+      :ref="`u-calendar-month-${index}`"
+      :id="`month-${index}`"
+    >
+      <text v-if="index !== 0" class="u-calendar-month__title">{{ item.year }}年{{ item.month }}月</text>
+      <view class="u-calendar-month__days">
+        <view v-if="showMark" class="u-calendar-month__days__month-mark-wrapper">
+          <text class="u-calendar-month__days__month-mark-wrapper__text">{{ item.month }}</text>
+        </view>
+        <view
+          class="u-calendar-month__days__day"
+          v-for="(item1, index1) in item.date"
+          :key="index1"
+          :style="[dayStyle(index, index1, item1)]"
+          @tap="clickHandler(index, index1, item1)"
+          :class="[item1.selected && 'u-calendar-month__days__day__select--selected']"
+        >
+          <view class="u-calendar-month__days__day__select" :style="[daySelectStyle(index, index1, item1)]">
+            <text
+              class="u-calendar-month__days__day__select__info"
+              :class="[item1.disabled && 'u-calendar-month__days__day__select__info--disabled']"
+              :style="[textStyle(item1)]"
+            >
+              {{ item1.day }}
+            </text>
+            <text
+              v-if="getBottomInfo(index, index1, item1)"
+              class="u-calendar-month__days__day__select__buttom-info"
+              :class="[item1.disabled && 'u-calendar-month__days__day__select__buttom-info--disabled']"
+              :style="[textStyle(item1)]"
+            >
+              {{ getBottomInfo(index, index1, item1) }}
+            </text>
+            <text v-if="item1.dot" class="u-calendar-month__days__day__select__dot"></text>
+          </view>
+        </view>
+      </view>
+    </view>
+  </view>
+</template>
+<script>
+// #ifdef APP-NVUE
+// 由于nvue不支持百分比单位，需要查询宽度来计算每个日期的宽度
+const dom = uni.requireNativePlugin('dom');
+// #endif
+import mpMixin from '../../libs/mixin/mpMixin.js';
+import mixin from '../../libs/mixin/mixin.js';
+import defprops from '../../libs/config/props';
+// import dayjs from '../../libs/util/dayjs.js';
+import dayjs from 'dayjs/esm/index';
+export default {
+  name: 'u-calendar-month',
+  mixins: [mpMixin, mixin],
+  props: {
+    // 是否显示月份背景色
+    showMark: {
+      type: Boolean,
+      default: true
+    },
+    // 主题色，对底部按钮和选中日期有效
+    color: {
+      type: String,
+      default: '#3c9cff'
+    },
+    // 月份数据
+    months: {
+      type: Array,
+      default: () => []
+    },
+    // 日期选择类型
+    mode: {
+      type: String,
+      default: 'single'
+    },
+    // 日期行高
+    rowHeight: {
+      type: [String, Number],
+      default: 58
+    },
+    // mode=multiple时，最多可选多少个日期
+    maxCount: {
+      type: [String, Number],
+      default: Infinity
+    },
+    // mode=range时，第一个日期底部的提示文字
+    startText: {
+      type: String,
+      default: '开始'
+    },
+    // mode=range时，最后一个日期底部的提示文字
+    endText: {
+      type: String,
+      default: '结束'
+    },
+    // 默认选中的日期，mode为multiple或range是必须为数组格式
+    defaultDate: {
+      type: [Array, String, Date],
+      default: null
+    },
+    // 最小的可选日期
+    minDate: {
+      type: [String, Number],
+      default: 0
+    },
+    // 最大可选日期
+    maxDate: {
+      type: [String, Number],
+      default: 0
+    },
+    // 如果没有设置maxDate，则往后推多少个月
+    maxMonth: {
+      type: [String, Number],
+      default: 2
+    },
+    // 是否为只读状态，只读状态下禁止选择日期
+    readonly: {
+      type: Boolean,
+      default: defprops.calendar.readonly
+    },
+    // 日期区间最多可选天数，默认无限制，mode = range时有效
+    maxRange: {
+      type: [Number, String],
+      default: Infinity
+    },
+    // 范围选择超过最多可选天数时的提示文案，mode = range时有效
+    rangePrompt: {
+      type: String,
+      default: ''
+    },
+    // 范围选择超过最多可选天数时，是否展示提示文案，mode = range时有效
+    showRangePrompt: {
+      type: Boolean,
+      default: true
+    },
+    // 是否允许日期范围的起止时间为同一天，mode = range时有效
+    allowSameDay: {
+      type: Boolean,
+      default: false
+    }
+  },
+  data() {
+    return {
+      // 每个日期的宽度
+      width: 0,
+      // 当前选中的日期item
+      item: {},
+      selected: []
+    };
+  },
+  watch: {
+    selectedChange: {
+      immediate: true,
+      handler(n) {
+        this.setDefaultDate();
+      }
+    }
+  },
+  computed: {
+    // 多个条件的变化，会引起选中日期的变化，这里统一管理监听
+    selectedChange() {
+      return [this.minDate, this.maxDate, this.defaultDate];
+    },
+    dayStyle(index1, index2, item) {
+      return (index1, index2, item) => {
+        const style = {};
+        let week = item.week;
+        // 不进行四舍五入的形式保留2位小数
+        const dayWidth = Number(
+          parseFloat(this.width / 7)
+            .toFixed(3)
+            .slice(0, -1)
+        );
+        // 得出每个日期的宽度
+        // #ifdef APP-NVUE
+        style.width = uni.$u.addUnit(dayWidth);
+        // #endif
+        style.height = uni.$u.addUnit(this.rowHeight);
+        if (index2 === 0) {
+          // 获取当前为星期几，如果为0，则为星期天，减一为每月第一天时，需要向左偏移的item个数
+          week = (week === 0 ? 7 : week) - 1;
+          style.marginLeft = uni.$u.addUnit(week * dayWidth);
+        }
+        if (this.mode === 'range') {
+          // 之所以需要这么写，是因为DCloud公司的iOS客户端的开发者能力有限导致的bug
+          style.paddingLeft = 0;
+          style.paddingRight = 0;
+          style.paddingBottom = 0;
+          style.paddingTop = 0;
+        }
+        return style;
+      };
+    },
+    daySelectStyle() {
+      return (index1, index2, item) => {
+        let date = dayjs(item.date).format('YYYY-MM-DD'),
+          style = {};
+        // 判断date是否在selected数组中，因为月份可能会需要补0，所以使用dateSame判断，而不用数组的includes判断
+        if (this.selected.some((item) => this.dateSame(item, date))) {
+          style.backgroundColor = this.color;
+        }
+        if (this.mode === 'single') {
+          if (date === this.selected[0]) {
+            // 因为需要对nvue的兼容，只能这么写，无法缩写，也无法通过类名控制等等
+            style.borderTopLeftRadius = '3px';
+            style.borderBottomLeftRadius = '3px';
+            style.borderTopRightRadius = '3px';
+            style.borderBottomRightRadius = '3px';
+          }
+        } else if (this.mode === 'range') {
+          if (this.selected.length >= 2) {
+            const len = this.selected.length - 1;
+            // 第一个日期设置左上角和左下角的圆角
+            if (this.dateSame(date, this.selected[0])) {
+              style.borderTopLeftRadius = '3px';
+              style.borderBottomLeftRadius = '3px';
+            }
+            // 最后一个日期设置右上角和右下角的圆角
+            if (this.dateSame(date, this.selected[len])) {
+              style.borderTopRightRadius = '3px';
+              style.borderBottomRightRadius = '3px';
+            }
+            // 处于第一和最后一个之间的日期，背景色设置为浅色，通过将对应颜色进行等分，再取其尾部的颜色值
+            if (dayjs(date).isAfter(dayjs(this.selected[0])) && dayjs(date).isBefore(dayjs(this.selected[len]))) {
+              style.backgroundColor = uni.$u.colorGradient(this.color, '#ffffff', 100)[90];
+              // 增加一个透明度，让范围区间的背景色也能看到底部的mark水印字符
+              style.opacity = 0.7;
+            }
+          } else if (this.selected.length === 1) {
+            // 之所以需要这么写，是因为DCloud公司的iOS客户端的开发者能力有限导致的bug
+            // 进行还原操作，否则在nvue的iOS，uni-app有bug，会导致诡异的表现
+            style.borderTopLeftRadius = '3px';
+            style.borderBottomLeftRadius = '3px';
+          }
+        } else {
+          if (this.selected.some((item) => this.dateSame(item, date))) {
+            style.borderTopLeftRadius = '3px';
+            style.borderBottomLeftRadius = '3px';
+            style.borderTopRightRadius = '3px';
+            style.borderBottomRightRadius = '3px';
+          }
+        }
+        return style;
+      };
+    },
+    // 某个日期是否被选中
+    textStyle() {
+      return (item) => {
+        const date = dayjs(item.date).format('YYYY-MM-DD'),
+          style = {};
+        // 选中的日期，提示文字设置白色
+        if (this.selected.some((item) => this.dateSame(item, date))) {
+          style.color = '#ffffff';
+        }
+        if (this.mode === 'range') {
+          const len = this.selected.length - 1;
+          // 如果是范围选择模式，第一个和最后一个之间的日期，文字颜色设置为高亮的主题色
+          if (dayjs(date).isAfter(dayjs(this.selected[0])) && dayjs(date).isBefore(dayjs(this.selected[len]))) {
+            style.color = this.color;
+          }
+        }
+        return style;
+      };
+    },
+    // 获取底部的提示文字
+    getBottomInfo() {
+      return (index1, index2, item) => {
+        const date = dayjs(item.date).format('YYYY-MM-DD');
+        const bottomInfo = item.bottomInfo;
+        // 当为日期范围模式时，且选择的日期个数大于0时
+        if (this.mode === 'range' && this.selected.length > 0) {
+          if (this.selected.length === 1) {
+            // 选择了一个日期时，如果当前日期为数组中的第一个日期，则显示底部文字为“开始”
+            if (this.dateSame(date, this.selected[0])) return this.startText;
+            else return bottomInfo;
+          } else {
+            const len = this.selected.length - 1;
+            // 如果数组中的日期大于2个时，第一个和最后一个显示为开始和结束日期
+            if (this.dateSame(date, this.selected[0]) && this.dateSame(date, this.selected[1]) && len === 1) {
+              // 如果长度为2，且第一个等于第二个日期，则提示语放在同一个item中
+              return `${this.startText}/${this.endText}`;
+            } else if (this.dateSame(date, this.selected[0])) {
+              return this.startText;
+            } else if (this.dateSame(date, this.selected[len])) {
+              return this.endText;
+            } else {
+              return bottomInfo;
+            }
+          }
+        } else {
+          return bottomInfo;
+        }
+      };
+    }
+  },
+  mounted() {
+    this.init();
+  },
+  methods: {
+    init() {
+      // 初始化默认选中
+      this.$emit('monthSelected', this.selected);
+      this.$nextTick(() => {
+        // 这里需要另一个延时，因为获取宽度后，会进行月份数据渲染，只有渲染完成之后，才有真正的高度
+        // 因为nvue下，$nextTick并不是100%可靠的
+        uni.$u.sleep(10).then(() => {
+          this.getWrapperWidth();
+          this.getMonthRect();
+        });
+      });
+    },
+    // 判断两个日期是否相等
+    dateSame(date1, date2) {
+      return dayjs(date1).isSame(dayjs(date2));
+    },
+    // 获取月份数据区域的宽度，因为nvue不支持百分比，所以无法通过css设置每个日期item的宽度
+    getWrapperWidth() {
+      // #ifdef APP-NVUE
+      dom.getComponentRect(this.$refs['u-calendar-month-wrapper'], (res) => {
+        this.width = res.size.width;
+      });
+      // #endif
+      // #ifndef APP-NVUE
+      this.$uGetRect('.u-calendar-month-wrapper').then((size) => {
+        this.width = size.width;
+      });
+      // #endif
+    },
+    getMonthRect() {
+      // 获取每个月份数据的尺寸，用于父组件在scroll-view滚动事件中，监听当前滚动到了第几个月份
+      const promiseAllArr = this.months.map((item, index) => this.getMonthRectByPromise(`u-calendar-month-${index}`));
+      // 一次性返回
+      Promise.all(promiseAllArr).then((sizes) => {
+        let height = 1;
+        const topArr = [];
+        for (let i = 0; i < this.months.length; i++) {
+          // 添加到months数组中，供scroll-view滚动事件中，判断当前滚动到哪个月份
+          topArr[i] = height;
+          height += sizes[i].height;
+        }
+        // 由于微信下，无法通过this.months[i].top的形式(引用类型)去修改父组件的month的top值，所以使用事件形式对外发出
+        this.$emit('updateMonthTop', topArr);
+      });
+    },
+    // 获取每个月份区域的尺寸
+    getMonthRectByPromise(el) {
+      // #ifndef APP-NVUE
+      // $uGetRect为uView自带的节点查询简化方法，详见文档介绍：https://ijry.github.io/uview-plus/js/getRect.html
+      // 组件内部一般用this.$uGetRect，对外的为uni.$u.getRect，二者功能一致，名称不同
+      return new Promise((resolve) => {
+        this.$uGetRect(`.${el}`).then((size) => {
+          resolve(size);
+        });
+      });
+      // #endif
+      // #ifdef APP-NVUE
+      // nvue下，使用dom模块查询元素高度
+      // 返回一个promise，让调用此方法的主体能使用then回调
+      return new Promise((resolve) => {
+        dom.getComponentRect(this.$refs[el][0], (res) => {
+          resolve(res.size);
+        });
+      });
+      // #endif
+    },
+    // 点击某一个日期
+    clickHandler(index1, index2, item) {
+      if (this.readonly) {
+        return;
+      }
+      this.item = item;
+      const date = dayjs(item.date).format('YYYY-MM-DD');
+      if (item.disabled) return;
+      // 对上一次选择的日期数组进行深度克隆
+      let selected = uni.$u.deepClone(this.selected);
+      if (this.mode === 'single') {
+        // 单选情况下，让数组中的元素为当前点击的日期
+        selected = [date];
+      } else if (this.mode === 'multiple') {
+        if (selected.some((item) => this.dateSame(item, date))) {
+          // 如果点击的日期已在数组中，则进行移除操作，也就是达到反选的效果
+          const itemIndex = selected.findIndex((item) => item === date);
+          selected.splice(itemIndex, 1);
+        } else {
+          // 如果点击的日期不在数组中，且已有的长度小于总可选长度时，则添加到数组中去
+          if (selected.length < this.maxCount) selected.push(date);
+        }
+      } else {
+        // 选择区间形式
+        if (selected.length === 0 || selected.length >= 2) {
+          // 如果原来就为0或者大于2的长度，则当前点击的日期，就是开始日期
+          selected = [date];
+        } else if (selected.length === 1) {
+          // 如果已经选择了开始日期
+          const existsDate = selected[0];
+          // 如果当前选择的日期小于上一次选择的日期，则当前的日期定为开始日期
+          if (dayjs(date).isBefore(existsDate)) {
+            selected = [date];
+          } else if (dayjs(date).isAfter(existsDate)) {
+            // 当前日期减去最大可选的日期天数，如果大于起始时间，则进行提示
+            if (dayjs(dayjs(date).subtract(this.maxRange, 'day')).isAfter(dayjs(selected[0])) && this.showRangePrompt) {
+              if (this.rangePrompt) {
+                uni.$u.toast(this.rangePrompt);
+              } else {
+                uni.$u.toast(`选择天数不能超过 ${this.maxRange} 天`);
+              }
+              return;
+            }
+            // 如果当前日期大于已有日期，将当前的添加到数组尾部
+            selected.push(date);
+            const startDate = selected[0];
+            const endDate = selected[1];
+            const arr = [];
+            let i = 0;
+            do {
+              // 将开始和结束日期之间的日期添加到数组中
+              arr.push(dayjs(startDate).add(i, 'day').format('YYYY-MM-DD'));
+              i++;
+              // 累加的日期小于结束日期时，继续下一次的循环
+            } while (dayjs(startDate).add(i, 'day').isBefore(dayjs(endDate)));
+            // 为了一次性修改数组，避免computed中多次触发，这里才用arr变量一次性赋值的方式，同时将最后一个日期添加近来
+            arr.push(endDate);
+            selected = arr;
+          } else {
+            // 选择区间时，只有一个日期的情况下，且不允许选择起止为同一天的话，不允许选择自己
+            if (selected[0] === date && !this.allowSameDay) return;
+            selected.push(date);
+          }
+        }
+      }
+      this.setSelected(selected);
+    },
+    // 设置默认日期
+    setDefaultDate() {
+      if (!this.defaultDate) {
+        // 如果没有设置默认日期，则将当天日期设置为默认选中的日期
+        const selected = [dayjs().format('YYYY-MM-DD')];
+        return this.setSelected(selected, false);
+      }
+      let defaultDate = [];
+      const minDate = this.minDate || dayjs().format('YYYY-MM-DD');
+      const maxDate =
+        this.maxDate ||
+        dayjs(minDate)
+          .add(this.maxMonth - 1, 'month')
+          .format('YYYY-MM-DD');
+      if (this.mode === 'single') {
+        // 单选模式，可以是字符串或数组，Date对象等
+        if (!uni.$u.test.array(this.defaultDate)) {
+          defaultDate = [dayjs(this.defaultDate).format('YYYY-MM-DD')];
+        } else {
+          defaultDate = [this.defaultDate[0]];
+        }
+      } else {
+        // 如果为非数组，则不执行
+        if (!uni.$u.test.array(this.defaultDate)) return;
+        defaultDate = this.defaultDate;
+      }
+      // 过滤用户传递的默认数组，取出只在可允许最大值与最小值之间的元素
+      defaultDate = defaultDate.filter((item) => {
+        return dayjs(item).isAfter(dayjs(minDate).subtract(1, 'day')) && dayjs(item).isBefore(dayjs(maxDate).add(1, 'day'));
+      });
+      this.setSelected(defaultDate, false);
+    },
+    setSelected(selected, event = true) {
+      this.selected = selected;
+      event && this.$emit('monthSelected', this.selected);
+    }
+  }
+};
+</script>
+<style scoped>
+@import './style.css';
+</style>

package/uview-plus/components/u-calendar/props.js

@@ -0,0 +1,145 @@
+import defprops from '../../libs/config/props';
+export default {
+  props: {
+    // 日历顶部标题
+    title: {
+      type: String,
+      default: defprops.calendar.title
+    },
+    // 是否显示标题
+    showTitle: {
+      type: Boolean,
+      default: defprops.calendar.showTitle
+    },
+    // 是否显示副标题
+    showSubtitle: {
+      type: Boolean,
+      default: defprops.calendar.showSubtitle
+    },
+    // 日期类型选择，single-选择单个日期，multiple-可以选择多个日期，range-选择日期范围
+    mode: {
+      type: String,
+      default: defprops.calendar.mode
+    },
+    // mode=range时，第一个日期底部的提示文字
+    startText: {
+      type: String,
+      default: defprops.calendar.startText
+    },
+    // mode=range时，最后一个日期底部的提示文字
+    endText: {
+      type: String,
+      default: defprops.calendar.endText
+    },
+    // 自定义列表
+    customList: {
+      type: Array,
+      default: defprops.calendar.customList
+    },
+    // 主题色，对底部按钮和选中日期有效
+    color: {
+      type: String,
+      default: defprops.calendar.color
+    },
+    // 最小的可选日期
+    minDate: {
+      type: [String, Number],
+      default: defprops.calendar.minDate
+    },
+    // 最大可选日期
+    maxDate: {
+      type: [String, Number],
+      default: defprops.calendar.maxDate
+    },
+    // 默认选中的日期，mode为multiple或range是必须为数组格式
+    defaultDate: {
+      type: [Array, String, Date, null],
+      default: defprops.calendar.defaultDate
+    },
+    // mode=multiple时，最多可选多少个日期
+    maxCount: {
+      type: [String, Number],
+      default: defprops.calendar.maxCount
+    },
+    // 日期行高
+    rowHeight: {
+      type: [String, Number],
+      default: defprops.calendar.rowHeight
+    },
+    // 日期格式化函数
+    formatter: {
+      type: [Function, null],
+      default: defprops.calendar.formatter
+    },
+    // 是否显示农历
+    showLunar: {
+      type: Boolean,
+      default: defprops.calendar.showLunar
+    },
+    // 是否显示月份背景色
+    showMark: {
+      type: Boolean,
+      default: defprops.calendar.showMark
+    },
+    // 确定按钮的文字
+    confirmText: {
+      type: String,
+      default: defprops.calendar.confirmText
+    },
+    // 确认按钮处于禁用状态时的文字
+    confirmDisabledText: {
+      type: String,
+      default: defprops.calendar.confirmDisabledText
+    },
+    // 是否显示日历弹窗
+    show: {
+      type: Boolean,
+      default: defprops.calendar.show
+    },
+    // 是否允许点击遮罩关闭日历
+    closeOnClickOverlay: {
+      type: Boolean,
+      default: defprops.calendar.closeOnClickOverlay
+    },
+    // 是否为只读状态，只读状态下禁止选择日期
+    readonly: {
+      type: Boolean,
+      default: defprops.calendar.readonly
+    },
+    // 	是否展示确认按钮
+    showConfirm: {
+      type: Boolean,
+      default: defprops.calendar.showConfirm
+    },
+    // 日期区间最多可选天数，默认无限制，mode = range时有效
+    maxRange: {
+      type: [Number, String],
+      default: defprops.calendar.maxRange
+    },
+    // 范围选择超过最多可选天数时的提示文案，mode = range时有效
+    rangePrompt: {
+      type: String,
+      default: defprops.calendar.rangePrompt
+    },
+    // 范围选择超过最多可选天数时，是否展示提示文案，mode = range时有效
+    showRangePrompt: {
+      type: Boolean,
+      default: defprops.calendar.showRangePrompt
+    },
+    // 是否允许日期范围的起止时间为同一天，mode = range时有效
+    allowSameDay: {
+      type: Boolean,
+      default: defprops.calendar.allowSameDay
+    },
+    // 圆角值
+    round: {
+      type: [Boolean, String, Number],
+      default: defprops.calendar.round
+    },
+    // 最多展示月份数量
+    monthNum: {
+      type: [Number, String],
+      default: 3
+    }
+  }
+};

package/uview-plus/components/u-calendar/style.css

@@ -0,0 +1,14 @@
+/* #ifndef APP-NVUE */
+view, scroll-view, swiper-item {
+  display: flex;
+  flex-direction: column;
+  flex-shrink: 0;
+  flex-grow: 0;
+  flex-basis: auto;
+  align-items: stretch;
+  align-content: flex-start;
+}
+/* #endif */
+.u-calendar__confirm {
+  padding: 7px 18px;
+}

package/uview-plus/components/u-calendar/style.scss

@@ -0,0 +1,7 @@
+@import '../../libs/css/components.scss';
+
+.u-calendar {
+  &__confirm {
+    padding: 7px 18px;
+  }
+}