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

package/uview-plus/components/u-transition-wu/u-transition.vue

@@ -0,0 +1,300 @@
+<template>
+  <!-- #ifndef APP-NVUE -->
+  <view v-show="isShow" ref="ani" :animation="animationData" :class="customClass" :style="transformStyles" @click="onClick">
+    <slot></slot>
+  </view>
+  <!-- #endif -->
+  <!-- #ifdef APP-NVUE -->
+  <view v-if="isShow" ref="ani" :animation="animationData" :class="customClass" :style="transformStyles" @click="onClick">
+    <slot></slot>
+  </view>
+  <!-- #endif -->
+</template>
+
+<script>
+import { createAnimation } from './createAnimation';
+import { mpMixin } from '../../libs/mixin/mpMixin';
+import { mixin } from '../../libs/mixin/mixin';
+/**
+ * transition 过渡动画
+ * @description 过渡动画组件
+ * @tutorial https://ijry.github.io/uview-plus/components/transition.html
+ * @property {Boolean} show = [false|true] 控制组件显示或隐藏
+ * @property {Array|String} mode = [fade|slide-top|slide-right|slide-bottom|slide-left|zoom-in|zoom-out] 过渡动画类型
+ *  @value fade 渐隐渐出过渡
+ *  @value slide-top 由上至下过渡
+ *  @value slide-right 由右至左过渡
+ *  @value slide-bottom 由下至上过渡
+ *  @value slide-left 由左至右过渡
+ *  @value zoom-in 由小到大过渡
+ *  @value zoom-out 由大到小过渡
+ * @property {Number} duration 过渡动画持续时间，单位ms(默认300)
+ * @property {String} timingFunction 使用的动画过渡函数 （默认 'ease-out' ）
+ * @property {Object} customStyle	自定义样式
+ * @property {String} customClass	自定义类名
+ * @event {Function} click 点击组件触发
+ * @event {Function} change	过渡动画结束时触发
+ */
+export default {
+  name: 'u-transition',
+  mixins: [mpMixin, mixin],
+  emits: ['click', 'change'],
+  props: {
+    // 是否展示组件
+    show: {
+      type: Boolean,
+      default: false
+    },
+    // 使用的动画模式
+    mode: {
+      type: [Array, String, null],
+      default() {
+        return 'fade';
+      }
+    },
+    // 动画的执行时间，单位ms
+    duration: {
+      type: [String, Number],
+      default: 300
+    },
+    // 使用的动画过渡函数
+    timingFunction: {
+      type: String,
+      default: 'ease-out'
+    },
+    customClass: {
+      type: String,
+      default: ''
+    },
+    // nvue模式下 是否直接显示，在u-list等cell下面使用就需要设置
+    cellChild: {
+      type: Boolean,
+      default: false
+    }
+  },
+  data() {
+    return {
+      isShow: false,
+      transform: '',
+      opacity: 1,
+      animationData: {},
+      durationTime: 300,
+      config: {}
+    };
+  },
+  watch: {
+    show: {
+      handler(newVal) {
+        if (newVal) {
+          this.open();
+        } else {
+          // 避免上来就执行 close,导致动画错乱
+          if (this.isShow) {
+            this.close();
+          }
+        }
+      },
+      immediate: true
+    }
+  },
+  computed: {
+    // 生成样式数据
+    stylesObject() {
+      let styles = {
+        ...this.customStyle,
+        'transition-duration': this.duration / 1000 + 's'
+      };
+      let transform = '';
+      for (let i in styles) {
+        let line = this.toLine(i);
+        transform += line + ':' + styles[i] + ';';
+      }
+      return transform;
+    },
+    // 初始化动画条件
+    transformStyles() {
+      return 'transform:' + this.transform + ';' + 'opacity:' + this.opacity + ';' + this.stylesObject;
+    }
+  },
+  created() {
+    // 动画默认配置
+    this.config = {
+      duration: this.duration,
+      timingFunction: 'ease',
+      transformOrigin: '50% 50%',
+      delay: 0
+    };
+    this.durationTime = this.duration;
+  },
+  methods: {
+    /**
+     *  ref 触发 初始化动画
+     */
+    init(obj = {}) {
+      if (obj.duration) {
+        this.durationTime = obj.duration;
+      }
+      this.animation = createAnimation(Object.assign(this.config, obj), this);
+    },
+    /**
+     * 点击组件触发回调
+     */
+    onClick() {
+      this.$emit('click', {
+        detail: this.isShow
+      });
+    },
+    /**
+     * ref 触发 动画分组
+     * @param {Object} obj
+     */
+    step(obj, config = {}) {
+      if (!this.animation) return;
+      for (let i in obj) {
+        try {
+          if (typeof obj[i] === 'object') {
+            this.animation[i](...obj[i]);
+          } else {
+            this.animation[i](obj[i]);
+          }
+        } catch (e) {
+          console.error(`方法 ${i} 不存在`);
+        }
+      }
+      this.animation.step(config);
+      return this;
+    },
+    /**
+     *  ref 触发 执行动画
+     */
+    run(fn) {
+      if (!this.animation) return;
+      this.animation.run(fn);
+    },
+    // 开始过度动画
+    open() {
+      clearTimeout(this.timer);
+      this.transform = '';
+      this.isShow = true;
+      let { opacity, transform } = this.styleInit(false);
+      if (typeof opacity !== 'undefined') {
+        this.opacity = opacity;
+      }
+      this.transform = transform;
+      // 确保动态样式已经生效后，执行动画，如果不加 nextTick ，会导致 wx 动画执行异常
+      this.$nextTick(() => {
+        // TODO 定时器保证动画完全执行，目前有些问题，后面会取消定时器
+        this.timer = setTimeout(() => {
+          this.animation = createAnimation(this.config, this);
+          this.tranfromInit(false).step();
+          this.animation.run();
+          this.$emit('change', {
+            detail: this.isShow
+          });
+        }, 20);
+      });
+    },
+    // 关闭过度动画
+    close(type) {
+      if (!this.animation) return;
+      this.tranfromInit(true)
+        .step()
+        .run(() => {
+          this.isShow = false;
+          this.animationData = null;
+          this.animation = null;
+          let { opacity, transform } = this.styleInit(false);
+          this.opacity = opacity || 1;
+          this.transform = transform;
+          this.$emit('change', {
+            detail: this.isShow
+          });
+        });
+    },
+    // 处理动画开始前的默认样式
+    styleInit(type) {
+      let styles = {
+        transform: ''
+      };
+      let buildStyle = (type, mode) => {
+        if (mode === 'fade') {
+          styles.opacity = this.animationType(type)[mode];
+        } else {
+          styles.transform += this.animationType(type)[mode] + ' ';
+        }
+      };
+      if (typeof this.mode === 'string') {
+        buildStyle(type, this.mode);
+      } else {
+        this.mode.forEach((mode) => {
+          buildStyle(type, mode);
+        });
+      }
+      return styles;
+    },
+    // 处理内置组合动画
+    tranfromInit(type) {
+      let buildTranfrom = (type, mode) => {
+        let aniNum = null;
+        if (mode === 'fade') {
+          aniNum = type ? 0 : 1;
+        } else {
+          aniNum = type ? '-100%' : '0';
+          if (mode === 'zoom-in') {
+            aniNum = type ? 0.8 : 1;
+          }
+          if (mode === 'zoom-out') {
+            aniNum = type ? 1.2 : 1;
+          }
+          if (mode === 'slide-right') {
+            aniNum = type ? '100%' : '0';
+          }
+          if (mode === 'slide-bottom') {
+            aniNum = type ? '100%' : '0';
+          }
+        }
+
+        this.animation[this.animationMode()[mode]](aniNum);
+      };
+      if (typeof this.mode === 'string') {
+        buildTranfrom(type, this.mode);
+      } else {
+        this.mode.forEach((mode) => {
+          buildTranfrom(type, mode);
+        });
+      }
+
+      return this.animation;
+    },
+    animationType(type) {
+      return {
+        fade: type ? 1 : 0,
+        'slide-top': `translateY(${type ? '0' : '-100%'})`,
+        'slide-right': `translateX(${type ? '0' : '100%'})`,
+        'slide-bottom': `translateY(${type ? '0' : '100%'})`,
+        'slide-left': `translateX(${type ? '0' : '-100%'})`,
+        'zoom-in': `scaleX(${type ? 1 : 0.8}) scaleY(${type ? 1 : 0.8})`,
+        'zoom-out': `scaleX(${type ? 1 : 1.2}) scaleY(${type ? 1 : 1.2})`
+      };
+    },
+    // 内置动画类型与实际动画对应字典
+    animationMode() {
+      return {
+        fade: 'opacity',
+        'slide-top': 'translateY',
+        'slide-right': 'translateX',
+        'slide-bottom': 'translateY',
+        'slide-left': 'translateX',
+        'zoom-in': 'scale',
+        'zoom-out': 'scale'
+      };
+    },
+    // 驼峰转中横线
+    toLine(name) {
+      return name.replace(/([A-Z])/g, '-$1').toLowerCase();
+    }
+  }
+};
+</script>
+
+<style></style>

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

@@ -0,0 +1,161 @@
+<template>
+  <view class="u-code-wrap">
+    <!-- 此组件功能由js完成，无需写html逻辑 -->
+  </view>
+</template>
+
+<script>
+/**
+ * verificationCode 验证码输入框
+ * @description 考虑到用户实际发送验证码的场景，可能是一个按钮，也可能是一段文字，提示语各有不同，所以本组件 不提供界面显示，只提供提示语，由用户将提示语嵌入到具体的场景
+ * @tutorial https://www.uviewui.com/components/verificationCode.html
+ * @property {Number String} seconds 倒计时所需的秒数（默认60）
+ * @property {String} start-text 开始前的提示语，见官网说明（默认获取验证码）
+ * @property {String} change-text 倒计时期间的提示语，必须带有字母"x"，见官网说明（默认X秒重新获取）
+ * @property {String} end-text 倒计结束的提示语，见官网说明（默认重新获取）
+ * @property {Boolean} keep-running 是否在H5刷新或各端返回再进入时继续倒计时（默认false）
+ * @event {Function} change 倒计时期间，每秒触发一次
+ * @event {Function} start 开始倒计时触发
+ * @event {Function} end 结束倒计时触发
+ * @example <up-verification-code :seconds="seconds" @end="end" @start="start" ref="uCode"
+ */
+export default {
+  name: 'up-verification-code',
+  props: {
+    // 倒计时总秒数
+    seconds: {
+      type: [String, Number],
+      default: 60
+    },
+    // 尚未开始时提示
+    startText: {
+      type: String,
+      default: '获取验证码'
+    },
+    // 正在倒计时中的提示
+    changeText: {
+      type: String,
+      default: 'X秒重新获取'
+    },
+    // 倒计时结束时的提示
+    endText: {
+      type: String,
+      default: '重新获取'
+    },
+    // 是否在H5刷新或各端返回再进入时继续倒计时
+    keepRunning: {
+      type: Boolean,
+      default: false
+    },
+    // 为了区分多个页面，或者一个页面多个倒计时组件本地存储的继续倒计时变了
+    uniqueKey: {
+      type: String,
+      default: ''
+    }
+  },
+  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>
+.u-code-wrap {
+  width: 0;
+  height: 0;
+  position: fixed;
+  z-index: -1;
+}
+</style>