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

package/uview-plus/components/u-checkbox-group/u-checkbox-group.vue

@@ -0,0 +1,112 @@
+<template>
+  <view class="u-checkbox-group" :class="bemClass">
+    <slot></slot>
+  </view>
+</template>
+<script>
+import props from './props.js';
+import mpMixin from '../../libs/mixin/mpMixin.js';
+import mixin from '../../libs/mixin/mixin.js';
+/**
+ * checkboxGroup 复选框组
+ * @description 复选框组件一般用于需要多个选择的场景，该组件功能完整，使用方便
+ * @tutorial https://ijry.github.io/uview-plus/components/checkbox.html
+ * @property {String}			name			标识符
+ * @property {Array}			value			绑定的值
+ * @property {String}			shape			形状，circle-圆形，square-方形 （默认 'square' ）
+ * @property {Boolean}			disabled		是否禁用全部checkbox （默认 false ）
+ * @property {String}			activeColor		选中状态下的颜色，如设置此值，将会覆盖parent的activeColor值 （默认 '#2979ff' ）
+ * @property {String}			inactiveColor	未选中的颜色 （默认 '#c8c9cc' ）
+ * @property {String | Number}	size			整个组件的尺寸 单位px （默认 18 ）
+ * @property {String}			placement		布局方式，row-横向，column-纵向 （默认 'row' ）
+ * @property {String | Number}	labelSize		label的字体大小，px单位  （默认 14 ）
+ * @property {String}			labelColor		label的字体颜色 （默认 '#303133' ）
+ * @property {Boolean}			labelDisabled	是否禁止点击文本操作 (默认 false )
+ * @property {String}			iconColor		图标颜色 （默认 '#ffffff' ）
+ * @property {String | Number}	iconSize		图标的大小，单位px （默认 12 ）
+ * @property {String}			iconPlacement	勾选图标的对齐方式，left-左边，right-右边  （默认 'left' ）
+ * @property {Boolean}			borderBottom	placement为row时，是否显示下边框 （默认 false ）
+ * @event {Function}	change	任一个checkbox状态发生变化时触发，回调为一个对象
+ * @event {Function}	input	修改通过v-model绑定的值时触发，回调为一个对象
+ * @example <u-checkbox-group></u-checkbox-group>
+ */
+export default {
+  name: 'u-checkbox-group',
+  mixins: [mpMixin, mixin, props],
+  computed: {
+    // 这里computed的变量，都是子组件u-checkbox需要用到的，由于头条小程序的兼容性差异，子组件无法实时监听父组件参数的变化
+    // 所以需要手动通知子组件，这里返回一个parentData变量，供watch监听，在其中去通知每一个子组件重新从父组件(u-checkbox-group)
+    // 拉取父组件新的变化后的参数
+    parentData() {
+      return [
+        // #ifdef VUE2
+        this.value,
+        // #endif
+        // #ifdef VUE3
+        this.modelValue,
+        // #endif
+        this.disabled,
+        this.inactiveColor,
+        this.activeColor,
+        this.size,
+        this.labelDisabled,
+        this.shape,
+        this.iconSize,
+        this.borderBottom,
+        this.placement
+      ];
+    },
+    bemClass() {
+      // this.bem为一个computed变量，在mixin中
+      return this.bem('checkbox-group', ['placement']);
+    }
+  },
+  watch: {
+    // 当父组件需要子组件需要共享的参数发生了变化，手动通知子组件
+    parentData: {
+      handler() {
+        if (this.children.length) {
+          this.children.map((child) => {
+            // 判断子组件(u-checkbox)如果有init方法的话，就就执行(执行的结果是子组件重新从父组件拉取了最新的值)
+            typeof child.init === 'function' && child.init();
+          });
+        }
+      },
+      deep: true
+    }
+  },
+  data() {
+    return {};
+  },
+  created() {
+    this.children = [];
+  },
+  // #ifdef VUE3
+  emits: ['update:modelValue', 'change'],
+  // #endif
+  methods: {
+    // 将其他的checkbox设置为未选中的状态
+    unCheckedOther(childInstance) {
+      const values = [];
+      this.children.map((child) => {
+        // 将被选中的checkbox，放到数组中返回
+        if (child.isChecked) {
+          values.push(child.name);
+        }
+      });
+      // 发出事件
+      this.$emit('change', values);
+      // 修改通过v-model绑定的值
+      // #ifdef VUE3
+      this.$emit('update:modelValue', values);
+      // #endif
+      // #ifdef VUE2
+      this.$emit('input', values);
+      // #endif
+    }
+  }
+};
+</script>
+<style scoped>
+@import './style.css';
+</style>

package/uview-plus/components/u-circle-progress/props.js

@@ -0,0 +1,9 @@
+import defprops from '../../libs/config/props';
+export default {
+  props: {
+    percentage: {
+      type: [String, Number],
+      default: defprops.circleProgress.percentage
+    }
+  }
+};

package/uview-plus/components/u-circle-progress/style.css

@@ -0,0 +1,80 @@
+/* #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-circle-progress {
+  /* #ifndef APP-NVUE */
+  display: flex;
+  /* #endif */
+  flex-direction: row;
+  position: relative;
+  border-radius: 100px;
+  height: 100px;
+  width: 100px;
+  background-color: #c8c8c8;
+  overflow: hidden;
+  justify-content: space-between;
+}
+.u-circle-progress__circle {
+  border-radius: 100px;
+  height: 90px;
+  width: 90px;
+  transform: translate(-50%, -50%);
+  background-color: white;
+  left: 50px;
+  top: 50px;
+  position: absolute;
+}
+.u-circle-progress__left {
+  position: absolute;
+  left: 0;
+  width: 50px;
+  height: 100px;
+  overflow: hidden;
+  box-sizing: border-box;
+}
+.u-circle-progress__left__circle {
+  box-sizing: border-box;
+  border-left-color: transparent;
+  border-bottom-color: transparent;
+  border-top-left-radius: 50px;
+  border-top-right-radius: 50px;
+  border-bottom-right-radius: 50px;
+  border-top-color: #42b983;
+  border-right-color: #42b983;
+  border-width: 5px;
+  width: 100px;
+  height: 100px;
+  transform: rotate(225deg);
+}
+.u-circle-progress__right {
+  position: absolute;
+  right: 0;
+  width: 50px;
+  height: 100px;
+  overflow: hidden;
+}
+.u-circle-progress__right__circle {
+  position: absolute;
+  right: 0;
+  box-sizing: border-box;
+  border-top-color: transparent;
+  border-right-color: transparent;
+  border-top-left-radius: 50px;
+  border-bottom-left-radius: 50px;
+  border-bottom-right-radius: 50px;
+  border-left-color: #c8c8c8;
+  border-bottom-color: #c8c8c8;
+  border-width: 5px;
+  width: 100px;
+  height: 100px;
+  transform: rotate(45deg);
+  transform-origin: center center;
+}

package/uview-plus/components/u-circle-progress/style.scss

@@ -0,0 +1,86 @@
+@import '../../libs/css/components.scss';
+
+.u-circle-progress {
+  @include flex(row);
+  position: relative;
+  border-radius: 100px;
+  height: 100px;
+  width: 100px;
+  // transform: rotate(0deg);
+  // background-color: rgb(66, 185, 131);
+  background-color: rgb(200, 200, 200);
+  overflow: hidden;
+  justify-content: space-between;
+
+  &__circle {
+    border-radius: 100px;
+    height: 90px;
+    width: 90px;
+    transform: translate(-50%, -50%);
+    background-color: rgb(255, 255, 255);
+    left: 50px;
+    top: 50px;
+    position: absolute;
+  }
+
+  &__left {
+    position: absolute;
+    left: 0;
+    width: 50px;
+    height: 100px;
+    overflow: hidden;
+    box-sizing: border-box;
+    // background-color: rgb(66, 185, 131);
+    // background-color: rgb(200, 200, 200);
+    // transform-origin: left center;
+
+    &__circle {
+      box-sizing: border-box;
+      // background-color: red;
+      border-left-color: transparent;
+      border-bottom-color: transparent;
+      border-top-left-radius: 50px;
+      border-top-right-radius: 50px;
+      border-bottom-right-radius: 50px;
+      // border-left-color: rgb(66, 185, 131);
+      // border-bottom-color: rgb(66, 185, 131);
+      border-top-color: rgb(66, 185, 131);
+      border-right-color: rgb(66, 185, 131);
+      border-width: 5px;
+      width: 100px;
+      height: 100px;
+      transform: rotate(225deg);
+      // border-radius: 100px;
+    }
+  }
+
+  &__right {
+    position: absolute;
+    right: 0;
+    width: 50px;
+    height: 100px;
+    overflow: hidden;
+
+    &__circle {
+      position: absolute;
+      right: 0;
+      box-sizing: border-box;
+      // background-color: red;
+      border-top-color: transparent;
+      border-right-color: transparent;
+      border-top-left-radius: 50px;
+      border-bottom-left-radius: 50px;
+      border-bottom-right-radius: 50px;
+      // border-left-color: rgb(66, 185, 131);
+      // border-bottom-color: rgb(66, 185, 131);
+      border-left-color: rgb(200, 200, 200);
+      border-bottom-color: rgb(200, 200, 200);
+      border-width: 5px;
+      width: 100px;
+      height: 100px;
+      transform: rotate(45deg);
+      transform-origin: center center;
+      // border-radius: 100px;
+    }
+  }
+}

package/uview-plus/components/u-circle-progress/u-circle-progress.vue

@@ -0,0 +1,99 @@
+<template>
+  <view class="u-circle-progress">
+    <view class="u-circle-progress__left">
+      <view class="u-circle-progress__left__circle" :style="[leftSyle]" ref="left-circle"></view>
+    </view>
+    <view class="u-circle-progress__right">
+      <view class="u-circle-progress__right__circle" ref="right-circle" :style="[rightSyle]"></view>
+    </view>
+    <view class="u-circle-progress__circle"></view>
+  </view>
+</template>
+<script>
+import props from './props.js';
+import mpMixin from '../../libs/mixin/mpMixin.js';
+import mixin from '../../libs/mixin/mixin.js';
+// #ifdef APP-NVUE
+const animation = uni.requireNativePlugin('animation');
+// #endif
+/**
+ * CircleProgress 圆形进度条 TODO: 待完善
+ * @description 展示操作或任务的当前进度，比如上传文件，是一个圆形的进度环。
+ * @tutorial https://ijry.github.io/uview-plus/components/circleProgress.html
+ * @property {String | Number}	percentage	圆环进度百分比值，为数值类型，0-100 (默认 30 )
+ * @example
+ */
+export default {
+  name: 'u-circle-progress',
+  mixins: [mpMixin, mixin, props],
+  data() {
+    return {
+      leftBorderColor: 'rgb(200, 200, 200)',
+      rightBorderColor: 'rgb(200, 200, 200)'
+    };
+  },
+  computed: {
+    leftSyle() {
+      const style = {};
+      style.borderTopColor = this.leftBorderColor;
+      style.borderRightColor = this.leftBorderColor;
+      return style;
+    },
+    rightSyle() {
+      const style = {};
+      style.borderLeftColor = this.rightBorderColor;
+      style.borderBottomColor = this.rightBorderColor;
+      return style;
+    }
+  },
+  mounted() {
+    uni.$u.sleep().then(() => {
+      this.rightBorderColor = 'rgb(66, 185, 131)';
+      // this.init()
+    });
+  },
+  methods: {
+    init() {
+      animation.transition(
+        this.$refs['right-circle'].ref,
+        {
+          styles: {
+            transform: 'rotate(45deg)',
+            transformOrigin: 'center center'
+          }
+        },
+        () => {
+          this.rightBorderColor = 'rgb(66, 185, 131)';
+          // animation.transition(this.$refs['right-circle'].ref, {
+          // 	styles: {
+          // 		transform: 'rotate(225deg)',
+          // 		transformOrigin: 'center center'
+          // 	},
+          // 	duration: 3000,
+          // }, () => {
+          // 	animation.transition(this.$refs['left-circle'].ref, {
+          // 		styles: {
+          // 			transform: 'rotate(45deg)',
+          // 			transformOrigin: 'center center'
+          // 		},
+          // 	}, () => {
+          // 		this.leftBorderColor = 'rgb(66, 185, 131)'
+          // 		animation.transition(this.$refs['left-circle'].ref, {
+          // 			styles: {
+          // 				transform: 'rotate(225deg)',
+          // 				transformOrigin: 'center center'
+          // 			},
+          // 			duration: 1500,
+          // 		}, () => {
+          // 		})
+          // 	})
+          // })
+        }
+      );
+    }
+  }
+};
+</script>
+<style scoped>
+@import './style.css';
+</style>

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

@@ -0,0 +1,35 @@
+import defprops from '../../libs/config/props';
+export default {
+  props: {
+    // 倒计时总秒数
+    seconds: {
+      type: [String, Number],
+      default: defprops.code.seconds
+    },
+    // 尚未开始时提示
+    startText: {
+      type: String,
+      default: defprops.code.startText
+    },
+    // 正在倒计时中的提示
+    changeText: {
+      type: String,
+      default: defprops.code.changeText
+    },
+    // 倒计时结束时的提示
+    endText: {
+      type: String,
+      default: defprops.code.endText
+    },
+    // 是否在H5刷新或各端返回再进入时继续倒计时
+    keepRunning: {
+      type: Boolean,
+      default: defprops.code.keepRunning
+    },
+    // 为了区分多个页面，或者一个页面多个倒计时组件本地存储的继续倒计时变了
+    uniqueKey: {
+      type: String,
+      default: defprops.code.uniqueKey
+    }
+  }
+};

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

@@ -0,0 +1,11 @@
+/* #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 */

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

@@ -0,0 +1 @@
+@import '../../libs/css/components.scss';

package/uview-plus/components/u-code/u-code.vue

@@ -0,0 +1,129 @@
+<template>
+  <view class="u-code">
+    <!-- 此组件功能由js完成，无需写html逻辑 -->
+  </view>
+</template>
+<script>
+import props from './props.js';
+import mpMixin from '../../libs/mixin/mpMixin.js';
+import mixin from '../../libs/mixin/mixin.js';
+/**
+ * Code 验证码输入框
+ * @description 考虑到用户实际发送验证码的场景，可能是一个按钮，也可能是一段文字，提示语各有不同，所以本组件 不提供界面显示，只提供提示语，由用户将提示语嵌入到具体的场景
+ * @tutorial https://ijry.github.io/uview-plus/components/code.html
+ * @property {String | Number}	seconds			倒计时所需的秒数（默认 60 ）
+ * @property {String}			startText		开始前的提示语，见官网说明（默认 '获取验证码' ）
+ * @property {String}			changeText		倒计时期间的提示语，必须带有字母"x"，见官网说明（默认 'X秒重新获取' ）
+ * @property {String}			endText			倒计结束的提示语，见官网说明（默认 '重新获取' ）
+ * @property {Boolean}			keepRunning		是否在H5刷新或各端返回再进入时继续倒计时（ 默认false ）
+ * @property {String}			uniqueKey		为了区分多个页面，或者一个页面多个倒计时组件本地存储的继续倒计时变了
+ *
+ * @event {Function}	change	倒计时期间，每秒触发一次
+ * @event {Function}	start	开始倒计时触发
+ * @event {Function}	end		结束倒计时触发
+ * @example <u-code ref="uCode" @change="codeChange" seconds="20"></u-code>
+ */
+export default {
+  name: 'u-code',
+  mixins: [mpMixin, mixin, props],
+  data() {
+    return {
+      secNum: this.seconds,
+      timer: null,
+      canGetCode: true // 是否可以执行验证码操作
+    };
+  },
+  mounted() {
+    this.checkKeepRunning();
+  },
+  watch: {
+    seconds: {
+      immediate: true,
+      handler(n) {
+        this.secNum = n;
+      }
+    }
+  },
+  methods: {
+    checkKeepRunning() {
+      // 获取上一次退出页面(H5还包括刷新)时的时间戳，如果没有上次的保存，此值可能为空
+      let lastTimestamp = Number(uni.getStorageSync(this.uniqueKey + '_$uCountDownTimestamp'));
+      if (!lastTimestamp) return this.changeEvent(this.startText);
+      // 当前秒的时间戳
+      let nowTimestamp = Math.floor(+new Date() / 1000);
+      // 判断当前的时间戳，是否小于上一次的本该按设定结束，却提前结束的时间戳
+      if (this.keepRunning && lastTimestamp && lastTimestamp > nowTimestamp) {
+        // 剩余尚未执行完的倒计秒数
+        this.secNum = lastTimestamp - nowTimestamp;
+        // 清除本地保存的变量
+        uni.removeStorageSync(this.uniqueKey + '_$uCountDownTimestamp');
+        // 开始倒计时
+        this.start();
+      } else {
+        // 如果不存在需要继续上一次的倒计时，执行正常的逻辑
+        this.changeEvent(this.startText);
+      }
+    },
+    // 开始倒计时
+    start() {
+      // 防止快速点击获取验证码的按钮而导致内部产生多个定时器导致混乱
+      if (this.timer) {
+        clearInterval(this.timer);
+        this.timer = null;
+      }
+      this.$emit('start');
+      this.canGetCode = false;
+      // 这里放这句，是为了一开始时就提示，否则要等setInterval的1秒后才会有提示
+      this.changeEvent(this.changeText.replace(/x|X/, this.secNum));
+      this.setTimeToStorage();
+      this.timer = setInterval(() => {
+        if (--this.secNum) {
+          // 用当前倒计时的秒数替换提示字符串中的"x"字母
+          this.changeEvent(this.changeText.replace(/x|X/, this.secNum));
+        } else {
+          clearInterval(this.timer);
+          this.timer = null;
+          this.changeEvent(this.endText);
+          this.secNum = this.seconds;
+          this.$emit('end');
+          this.canGetCode = true;
+        }
+      }, 1000);
+    },
+    // 重置，可以让用户再次获取验证码
+    reset() {
+      this.canGetCode = true;
+      clearInterval(this.timer);
+      this.secNum = this.seconds;
+      this.changeEvent(this.endText);
+    },
+    changeEvent(text) {
+      this.$emit('change', text);
+    },
+    // 保存时间戳，为了防止倒计时尚未结束，H5刷新或者各端的右上角返回上一页再进来
+    setTimeToStorage() {
+      if (!this.keepRunning || !this.timer) return;
+      // 记录当前的时间戳，为了下次进入页面，如果还在倒计时内的话，继续倒计时
+      // 倒计时尚未结束，结果大于0；倒计时已经开始，就会小于初始值，如果等于初始值，说明没有开始倒计时，无需处理
+      if (this.secNum > 0 && this.secNum <= this.seconds) {
+        // 获取当前时间戳(+ new Date()为特殊写法)，除以1000变成秒，再去除小数部分
+        let nowTimestamp = Math.floor(+new Date() / 1000);
+        // 将本该结束时候的时间戳保存起来 => 当前时间戳 + 剩余的秒数
+        uni.setStorage({
+          key: this.uniqueKey + '_$uCountDownTimestamp',
+          data: nowTimestamp + Number(this.secNum)
+        });
+      }
+    }
+  },
+  // 组件销毁的时候，清除定时器，否则定时器会继续存在，系统不会自动清除
+  beforeDestroy() {
+    this.setTimeToStorage();
+    clearTimeout(this.timer);
+    this.timer = null;
+  }
+};
+</script>
+<style scoped>
+@import './style.css';
+</style>

package/uview-plus/components/u-code-input/props.js

@@ -0,0 +1,80 @@
+import defprops from '../../libs/config/props';
+export default {
+  props: {
+    // 键盘弹起时，是否自动上推页面
+    adjustPosition: {
+      type: Boolean,
+      default: defprops.codeInput.adjustPosition
+    },
+    // 最大输入长度
+    maxlength: {
+      type: [String, Number],
+      default: defprops.codeInput.maxlength
+    },
+    // 是否用圆点填充
+    dot: {
+      type: Boolean,
+      default: defprops.codeInput.dot
+    },
+    // 显示模式，box-盒子模式，line-底部横线模式
+    mode: {
+      type: String,
+      default: defprops.codeInput.mode
+    },
+    // 是否细边框
+    hairline: {
+      type: Boolean,
+      default: defprops.codeInput.hairline
+    },
+    // 字符间的距离
+    space: {
+      type: [String, Number],
+      default: defprops.codeInput.space
+    },
+    // 预置值
+    value: {
+      type: [String, Number],
+      default: defprops.codeInput.value
+    },
+    // 是否自动获取焦点
+    focus: {
+      type: Boolean,
+      default: defprops.codeInput.focus
+    },
+    // 字体是否加粗
+    bold: {
+      type: Boolean,
+      default: defprops.codeInput.bold
+    },
+    // 字体颜色
+    color: {
+      type: String,
+      default: defprops.codeInput.color
+    },
+    // 字体大小
+    fontSize: {
+      type: [String, Number],
+      default: defprops.codeInput.fontSize
+    },
+    // 输入框的大小，宽等于高
+    size: {
+      type: [String, Number],
+      default: defprops.codeInput.size
+    },
+    // 是否隐藏原生键盘，如果想用自定义键盘的话，需设置此参数为true
+    disabledKeyboard: {
+      type: Boolean,
+      default: defprops.codeInput.disabledKeyboard
+    },
+    // 边框和线条颜色
+    borderColor: {
+      type: String,
+      default: defprops.codeInput.borderColor
+    },
+    // 是否禁止输入"."符号
+    disabledDot: {
+      type: Boolean,
+      default: defprops.codeInput.disabledDot
+    }
+  }
+};