@10yun/cv-mobile-ui 0.5.27 → 0.5.30

package/uview-plus/components/u-calendar-wu/wu-calendar-block/wu-calendar-block.vue

@@ -0,0 +1,122 @@
+<template>
+  <view class="wu-calendar-block">
+    <view v-if="showMonth && FoldShowMonth" class="wu-calendar__box-bg">
+      <text class="wu-calendar__box-bg-text">{{ month }}</text>
+    </view>
+    <!-- 月或周日历 -->
+    <view class="wu-calendar__weeks" v-for="(item, index) in weeks" :key="index">
+      <template v-for="(weeks, weeksIndex) in item">
+        <wu-calendar-item
+          :key="weeksIndex"
+          v-if="!monthShowCurrentMonth || !weeks.empty"
+          class="wu-calendar-item--hook"
+          :weekItemStyle="weekItemStyle"
+          :weeks="weeks"
+          :calendar="calendar"
+          :selected="selected"
+          :lunar="lunar"
+          @change="choiceDate"
+          :color="color"
+          :actBadgeColor="actBadgeColor"
+          :startText="startText"
+          :endText="endText"
+          :itemHeight="itemHeight - defaultMargin"
+          :todayDefaultStyle="todayDefaultStyle"
+        ></wu-calendar-item>
+        <view v-else class="wu-calendar__weeks-item" :style="[weekItemStyle]"></view>
+      </template>
+    </view>
+  </view>
+</template>
+
+<script>
+import { mpMixin } from '../../../libs/mixin/mpMixin.js';
+import { mixin } from '../../../libs/mixin/mixin.js';
+import props from './props.js';
+
+import { initVueI18n } from '@dcloudio/uni-i18n';
+import i18nMessages from '../i18n/index.js';
+const { t } = initVueI18n(i18nMessages);
+import wuCalendarItem from '../wu-calendar-item/wu-calendar-item.vue';
+
+export default {
+  components: { wuCalendarItem },
+  emits: ['change'],
+  mixins: [mpMixin, mixin, props],
+  data() {
+    return {
+      FoldShowMonth: false
+    };
+  },
+  mounted() {
+    this.FoldShowMonth = this.FoldStatus == 'open';
+  },
+  computed: {
+    weekItemStyle() {
+      let weeksLength = Object.keys(this.weeks).length;
+      let calendarHeight = this.FoldStatus === 'open' ? this.itemHeight * 6 : this.itemHeight;
+      let margin =
+        weeksLength && this.weeks[weeksLength - 1][0].empty
+          ? this.itemHeight / (weeksLength - 1) + this.defaultMargin
+          : this.defaultMargin;
+      return {
+        marginTop: margin / 2 + 'px',
+        marginBottom: margin / 2 + 'px',
+        height: this.itemHeight - this.defaultMargin + 'px'
+      };
+    }
+  },
+  watch: {
+    FoldStatus(newVal) {
+      this.$nextTick(() => {
+        this.FoldShowMonth = this.FoldStatus == 'open';
+      });
+    }
+  },
+  methods: {
+    choiceDate(weeks) {
+      this.$emit('change', weeks);
+    }
+  }
+};
+</script>
+
+<style scoped>
+.wu-calendar-block .wu-calendar__weeks {
+  position: relative;
+  /* #ifndef APP-NVUE */
+  display: flex;
+  /* #endif */
+  flex-direction: row;
+  padding: 0 8rpx;
+}
+
+.wu-calendar-block .wu-calendar__weeks-item {
+  flex: 1;
+}
+
+.wu-calendar-block .wu-calendar__box-bg {
+  /* #ifndef APP-NVUE */
+  display: flex;
+  /* #endif */
+  justify-content: center;
+  align-items: center;
+  position: absolute;
+  top: 0;
+  left: 0;
+  right: 0;
+  bottom: 0;
+}
+
+.wu-calendar-block .wu-calendar__box-bg-text {
+  font-size: 100rpx;
+  transform: scale(4);
+  font-weight: bold;
+  color: #999;
+  opacity: 0.1;
+  text-align: center;
+  /* #ifndef APP-NVUE */
+  line-height: 1;
+  /* #endif */
+}
+</style>

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

@@ -0,0 +1,55 @@
+export default {
+	props: {
+		color: {
+			type: String,
+			default: '#3c9cff'
+		},
+		startText: {
+			type: String,
+			default: '开始'
+		},
+		endText: {
+			type: String,
+			default: '结束'
+		},
+		weeks: {
+			type: Object,
+			default () {
+				return {}
+			}
+		},
+		calendar: {
+			type: Object,
+			default: () => {
+				return {}
+			}
+		},
+		selected: {
+			type: Array,
+			default: () => {
+				return []
+			}
+		},
+		lunar: {
+			type: Boolean,
+			default: false
+		},
+		itemHeight: {
+			type: Number,
+			default: 64
+		},
+		actBadgeColor: {
+			type: String,
+			default: '#fff',
+		},
+		weekItemStyle: {
+			type: Object,
+			default: {}
+		},
+		// 是否显示今日默认样式(默认为true)
+		todayDefaultStyle: {
+			type: Boolean,
+			default: true
+		},
+	}
+}

package/uview-plus/components/u-calendar-wu/wu-calendar-item/wu-calendar-item.vue

@@ -0,0 +1,293 @@
+<template>
+  <view
+    ref="$weeksBox"
+    class="wu-calendar-item__weeks-box"
+    :style="[
+      calendarItemStyle,
+      weekItemStyle,
+      {
+        borderTopLeftRadius: weeks.beforeRange ? '12rpx' : '',
+        borderBottomLeftRadius: weeks.beforeRange ? '12rpx' : '',
+        borderTopRightRadius: weeks.afterRange ? '12rpx' : '',
+        borderBottomRightRadius: weeks.afterRange ? '12rpx' : ''
+      }
+    ]"
+    @click="choiceDate(weeks)"
+  >
+    <view class="wu-calendar-item__weeks-box-item" :style="[actMultipleStyle, { width: itemWidth, height: itemHeight + 'px' }]">
+      <!-- 自定义打点上方信息 -->
+      <text
+        v-if="weeks.extraInfo && weeks.extraInfo.topInfo"
+        class="wu-calendar-item__weeks-lunar-text"
+        :style="[{ color: weeks.extraInfo.topInfoColor || '#e43d33' }, calendarItemStyle, actMultipleStyle]"
+      >
+        {{ weeks.extraInfo.topInfo }}
+      </text>
+      <!-- 徽标 -->
+      <text
+        v-if="selected && weeks.extraInfo && weeks.extraInfo.badge"
+        class="wu-calendar-item__weeks-box-circle"
+        :style="[badgeStyle]"
+      ></text>
+      <!-- 日期文字 -->
+      <text class="wu-calendar-item__weeks-box-text" :style="[calendarItemStyle, actMultipleStyle]">{{ weeks.date }}</text>
+      <!-- 今日的文字 -->
+      <text
+        v-if="!lunar && !weeks.extraInfo && weeks.isDay && !weeks.beforeRange && !weeks.afterRange"
+        class="wu-calendar-item__weeks-lunar-text"
+        :style="[calendarItemStyle, actMultipleStyle]"
+      >
+        {{ todayText }}
+      </text>
+      <!-- 农历文字 -->
+      <text
+        v-if="lunar && !weeks.extraInfo && !weeks.beforeRange && !weeks.afterRange"
+        class="wu-calendar-item__weeks-lunar-text"
+        :style="[calendarItemStyle, actMultipleStyle]"
+      >
+        {{ dayText }}
+      </text>
+      <!-- 选中的文字展示 -->
+      <text
+        v-if="!weeks.extraInfo && (weeks.beforeRange || weeks.afterRange)"
+        class="wu-calendar-item__weeks-lunar-text"
+        :style="[calendarItemStyle, actMultipleStyle]"
+      >
+        {{ multipleText }}
+      </text>
+      <!-- 自定义打点下方信息 -->
+      <text
+        v-if="weeks.extraInfo && weeks.extraInfo.info"
+        class="wu-calendar-item__weeks-lunar-text"
+        :style="[{ color: weeks.extraInfo.infoColor || '#e43d33' }, calendarItemStyle, actMultipleStyle]"
+      >
+        {{ weeks.extraInfo.info }}
+      </text>
+    </view>
+  </view>
+</template>
+
+<script>
+import { mpMixin } from '../../../libs/mixin/mpMixin.js';
+import { mixin } from '../../../libs/mixin/mixin.js';
+import props from './props.js';
+
+import { initVueI18n } from '@dcloudio/uni-i18n';
+import i18nMessages from '../i18n/index.js';
+const { t } = initVueI18n(i18nMessages);
+import Color from '../../../libs/function/color/index.js';
+
+export default {
+  emits: ['change'],
+  mixins: [mpMixin, mixin, props],
+  computed: {
+    todayText() {
+      return t('wu-calender.today');
+    },
+    // 每项日历样式
+    calendarItemStyle() {
+      let style = {};
+      let color = Color.gradient(this.color, Color.isLight(this.color) ? '#000' : '#fff', 100)[6];
+      // 有顺序别乱动
+      // 选中的日期范围内的样式
+      if (this.weeks.rangeMultiple) {
+        style = {
+          backgroundColor: Color.gradient(this.color, '#fff', 100)[80],
+          color
+        };
+      }
+      // 今天的日期样式
+      if (this.weeks.isDay && this.todayDefaultStyle) {
+        style.color = color;
+      }
+      // 禁用的日期样式
+      if (this.weeks.disable) {
+        style = {
+          backgroundColor: 'rgba(249, 249, 249, 0.3)',
+          color: '#c0c0c0'
+        };
+      }
+      return style;
+    },
+    // 选中的日期样式
+    actMultipleStyle() {
+      if (
+        (this.weeks.beforeRange ||
+          this.weeks.afterRange ||
+          this.weeks.multiples ||
+          (this.calendar.fullDate === this.weeks.fullDate && this.weeks.mode === 'single')) &&
+        !this.weeks.disable
+      ) {
+        // #ifdef APP-NVUE
+        if (this.itemWidth == '100%') return {};
+        return {
+          backgroundColor: this.color,
+          color: '#fff',
+          borderRadius: '12rpx'
+        };
+        // #endif
+        // #ifndef APP-NVUE
+        return {
+          backgroundColor: this.color,
+          color: '#fff',
+          borderRadius: '12rpx'
+        };
+        // #endif
+      }
+    },
+    // 徽标样式
+    badgeStyle() {
+      let style = {
+        backgroundColor: this.weeks.disable ? '#c0c0c0' : '#e43d33',
+        width: '16rpx',
+        height: '16rpx'
+      };
+      if (this.weeks.extraInfo) {
+        if (this.weeks.extraInfo.badgeColor) {
+          // 如果当前是选中日期的徽标且徽标颜色与主题色一致 为了保证 徽标颜色可以被看见 再选中时将其设置为 #fff
+          if (
+            (this.weeks.beforeRange ||
+              this.weeks.afterRange ||
+              this.weeks.multiples ||
+              (this.calendar.fullDate === this.weeks.fullDate && this.weeks.mode === 'single')) &&
+            !this.weeks.disable &&
+            Color.convertFormat(this.weeks.extraInfo.badgeColor) == Color.convertFormat(this.color)
+          ) {
+            style.backgroundColor = this.actBadgeColor;
+          } else {
+            style.backgroundColor = this.weeks.extraInfo.badgeColor;
+          }
+        }
+        if (this.weeks.extraInfo.badgeSize) {
+          style.width = this.weeks.extraInfo.badgeSize;
+          style.height = this.weeks.extraInfo.badgeSize;
+        }
+
+        if (!this.weeks.extraInfo.badgePosition) {
+          style.right = '10rpx';
+          style.top = '10rpx';
+        } else if (this.weeks.extraInfo.badgePosition == 'top-left') {
+          style.top = '10rpx';
+          style.left = '10rpx';
+        } else if (this.weeks.extraInfo.badgePosition == 'top-center') {
+          style.top = '10rpx';
+          style.left = 'center';
+        } else if (this.weeks.extraInfo.badgePosition == 'top-right') {
+          style.top = '10rpx';
+          style.right = '10rpx';
+        } else if (this.weeks.extraInfo.badgePosition == 'bottom-left') {
+          style.bottom = '10rpx';
+          style.left = '10rpx';
+        } else if (this.weeks.extraInfo.badgePosition == 'bottom-center') {
+          style.bottom = '10rpx';
+          style.left = 'center';
+        } else if (this.weeks.extraInfo.badgePosition == 'bottom-right') {
+          style.bottom = '10rpx';
+          style.right = '10rpx';
+        }
+      }
+
+      return style;
+    },
+    // 日期文字
+    dayText() {
+      let text = '';
+      if (this.weeks.isDay) {
+        text = this.todayText;
+      } else if (this.weeks.lunar.festival) {
+        text = this.weeks.lunar.festival;
+      } else if (this.weeks.lunar.isTerm) {
+        text = this.weeks.lunar.Term;
+      } else if (this.weeks.lunar.IDayCn === '初一') {
+        text = this.weeks.lunar.IMonthCn;
+      } else {
+        text = this.weeks.lunar.IDayCn;
+      }
+      return text;
+    },
+    // 选中的文字
+    multipleText() {
+      let text = '';
+      if (this.weeks.afterRange) {
+        text = this.endText;
+      } else if (this.weeks.beforeRange) {
+        text = this.startText;
+      }
+      return text;
+    }
+  },
+  data() {
+    return {
+      itemWidth: '100%'
+    };
+  },
+  methods: {
+    choiceDate(weeks) {
+      this.$emit('change', weeks);
+    }
+  },
+  mounted() {
+    // #ifdef APP-NVUE
+    setTimeout(() => {
+      const dom = uni.requireNativePlugin('dom');
+      dom.getComponentRect(this.$refs.$weeksBox, (res) => {
+        this.itemWidth = res.size.width + 'px';
+      });
+    }, 10);
+    // #endif
+  }
+};
+</script>
+<style scoped>
+.wu-calendar-item__weeks-box {
+  flex: 1;
+  /* #ifndef APP-NVUE */
+  display: flex;
+  /* #endif */
+  flex-direction: column;
+  justify-content: center;
+  align-items: center;
+  padding: 0 0.5px;
+}
+
+.wu-calendar-item__weeks-box-text {
+  font-size: 28rpx;
+  color: #333;
+}
+
+.wu-calendar-item__weeks-lunar-text {
+  font-size: 24rpx;
+  color: #333;
+}
+
+.wu-calendar-item__weeks-box-item {
+  flex: 1;
+  position: relative;
+  /* #ifndef APP-NVUE */
+  display: flex;
+  /* #endif */
+  flex-direction: column;
+  justify-content: center;
+  align-items: center;
+}
+
+.wu-calendar-item__weeks-box-circle {
+  position: absolute;
+  border-radius: 16rpx;
+  background-color: #e43d33;
+}
+
+.wu-calendar-item--disable {
+  background-color: rgba(249, 249, 249, 0.3);
+  color: #c0c0c0;
+}
+
+.wu-calendar-item--extra {
+  color: #e43d33;
+  opacity: 0.8;
+}
+
+.wu-calendar-item--checked {
+  color: #fff;
+}
+</style>

package/uview-plus/components/u-car-keyboard/props.js

@@ -1,5 +1,7 @@
-import defprops from '../../libs/config/props';
-export default {
+import { defineMixin } from '../../libs/vue';
+import defProps from '../../libs/config/props.js';
+
+export const props = defineMixin({
   props: {
     // 是否打乱键盘按键的顺序
     random: {
@@ -12,4 +14,4 @@ export default {
       default: false
     }
   }
-};
+});

package/uview-plus/components/u-car-keyboard/style.css

@@ -1,5 +1,20 @@
 /* #ifndef APP-NVUE */
-view, scroll-view, swiper-item {
+.u-empty,
+.u-empty__wrap,
+.u-tabs,
+.u-tabs__wrapper,
+.u-tabs__wrapper__scroll-view-wrapper,
+.u-tabs__wrapper__scroll-view,
+.u-tabs__wrapper__nav,
+.u-tabs__wrapper__nav__line,
+.up-empty,
+.up-empty__wrap,
+.up-tabs,
+.up-tabs__wrapper,
+.up-tabs__wrapper__scroll-view-wrapper,
+.up-tabs__wrapper__scroll-view,
+.up-tabs__wrapper__nav,
+.up-tabs__wrapper__nav__line {
   display: flex;
   flex-direction: column;
   flex-shrink: 0;
@@ -15,7 +30,7 @@ view, scroll-view, swiper-item {
   /* #endif */
   flex-direction: column;
   justify-content: space-around;
-  background-color: #e0e4e6;
+  background-color: rgb(224, 228, 230);
   align-items: stretch;
   padding: 6px 0 6px;
 }
@@ -77,4 +92,4 @@ view, scroll-view, swiper-item {
 }
 .u-hover-class {
   background-color: #bbbcc6;
-}
+}