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

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>

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

@@ -1,3 +1,221 @@
-<template>
  <view class="u-waterfall">
    <view ref="u-left-column" id="u-left-column" class="u-column">
      <slot name="left" :leftList="leftList"></slot>
    </view>
    <view ref="u-right-column" id="u-right-column" class="u-column">
      <slot name="right" :rightList="rightList"></slot>
    </view>
  </view>
 * waterfall 瀑布流
 * @description 这是一个瀑布流形式的组件，内容分为左右两列，结合uview的懒加载组件效果更佳。相较于某些只是奇偶数左右分别，或者没有利用vue作用域插槽的做法，uview的瀑布流实现了真正的 组件化，搭配LazyLoad 懒加载和loadMore 加载更多组件，让您开箱即用，眼前一亮。
 * @tutorial https://uview-plus.jiangruyi.com/components/waterfall.html
 * @property {Array} flow-list 用于渲染的数据
 * @property {String Number} add-time 单条数据添加到队列的时间间隔，单位ms，见上方注意事项说明（默认200）
 * @example <u-waterfall :flowList="flowList"></u-waterfall>
 */
  name: 'u-waterfall',
  props: {
    // #ifdef VUE2
    value: {
      // 瀑布流数据
      type: Array,
      required: true,
      default: function () {
        return [];
      }
    },
    // #endif
    // #ifdef VUE3
    modelValue: {
      // 瀑布流数据
      type: Array,
      required: true,
      default: function () {
        return [];
      }
    },
    // #endif
    // 每次向结构插入数据的时间间隔，间隔越长，越能保证两列高度相近，但是对用户体验越不好
    // 单位ms
    addTime: {
      type: [Number, String],
      default: 200
    },
    // id值，用于清除某一条数据时，根据此idKey名称找到并移除，如数据为{idx: 22, name: 'lisa'}
    // 那么该把idKey设置为idx
    idKey: {
      type: String,
      default: 'id'
    }
  },
  mixins: [mpMixin, mixin],
  data() {
    return {
      leftList: [],
      rightList: [],
      tempList: [],
      children: []
    };
  },
  watch: {
    copyFlowList(nVal, oVal) {
      if (!nVal || nVal.length == 0) {
        this.clear(false);
        // console.log('clear');
      } else {
        // 取差值，即这一次数组变化新增的部分
        let startIndex = Array.isArray(oVal) && oVal.length > 0 ? oVal.length : 0;
        // 拼接上原有数据
        this.tempList = this.tempList.concat(this.cloneData(nVal.slice(startIndex)));
        this.splitData();
      }
    }
  },
  mounted() {
    this.tempList = this.cloneData(this.copyFlowList);
    this.splitData();
  },
  computed: {
    // 破坏flowList变量的引用，否则watch的结果新旧值是一样的
    copyFlowList() {
      // #ifdef VUE3
      if (!this.modelValue || this.modelValue.length == 0) {
        this.clear(false);
        // console.log('clear');
        return [];
      } else {
        return this.cloneData(this.modelValue);
      }
      // #endif
      // #ifdef VUE2
      return this.cloneData(this.value);
      // #endif
    }
  },
  emits: ['update:modelValue'],
  methods: {
    async splitData() {
      if (!this.tempList.length) return;
      let leftRect = await this.$uGetRect('#u-left-column');
      let rightRect = await this.$uGetRect('#u-right-column');
      // 如果左边小于或等于右边，就添加到左边，否则添加到右边
      let item = this.tempList[0];
      // 解决多次快速上拉后，可能数据会乱的问题，因为经过上面的两个await节点查询阻塞一定时间，加上后面的定时器干扰
      // 数组可能变成[]，导致此item值可能为undefined
      if (!item) return;
      if (leftRect.height < rightRect.height) {
        this.leftList.push(item);
      } else if (leftRect.height > rightRect.height) {
        this.rightList.push(item);
      } else {
        // 这里是为了保证第一和第二张添加时，左右都能有内容
        // 因为添加第一张，实际队列的高度可能还是0，这时需要根据队列元素长度判断下一个该放哪边
        if (this.leftList.length <= this.rightList.length) {
          this.leftList.push(item);
        } else {
          this.rightList.push(item);
        }
      }
      // 移除临时列表的第一项
      this.tempList.splice(0, 1);
      // 如果临时数组还有数据，继续循环
      if (this.tempList.length) {
        setTimeout(() => {
          this.splitData();
        }, this.addTime);
      }
    },
    // 复制而不是引用对象和数组
    cloneData(data) {
      return JSON.parse(JSON.stringify(data));
    },
    // 清空数据列表
    clear(bak = true) {
      this.leftList = [];
      this.rightList = [];
      // 同时清除父组件列表中的数据
      if (bak) {
        // #ifdef VUE2
        this.$emit('input', []);
        // #endif
        // #ifdef VUE3
        this.$emit('update:modelValue', []);
        // #endif
      }
      this.tempList = [];
    },
    // 清除某一条指定的数据，根据id实现
    remove(id) {
      // 如果findIndex找不到合适的条件，就会返回-1
      let index = -1;
      index = this.leftList.findIndex((val) => val[this.idKey] == id);
      if (index != -1) {
        // 如果index不等于-1，说明已经找到了要找的id，根据index索引删除这一条数据
        this.leftList.splice(index, 1);
      } else {
        // 同理于上方面的方法
        index = this.rightList.findIndex((val) => val[this.idKey] == id);
        if (index != -1) this.rightList.splice(index, 1);
      }
      // 同时清除父组件的数据中的对应id的条目
      // #ifdef VUE2
      index = this.value.findIndex((val) => val[this.idKey] == id);
      if (index != -1) this.$emit('input', this.value.splice(index, 1));
      // #endif
      // #ifdef VUE3
      index = this.modelValue.findIndex((val) => val[this.idKey] == id);
      if (index != -1) this.$emit('update:modelValue', this.modelValue.splice(index, 1));
      // #endif
    },
    // 修改某条数据的某个属性
    modify(id, key, value) {
      // 如果findIndex找不到合适的条件，就会返回-1
      let index = -1;
      index = this.leftList.findIndex((val) => val[this.idKey] == id);
      if (index != -1) {
        // 如果index不等于-1，说明已经找到了要找的id，修改对应key的值
        this.leftList[index][key] = value;
      } else {
        // 同理于上方面的方法
        index = this.rightList.findIndex((val) => val[this.idKey] == id);
        if (index != -1) this.rightList[index][key] = value;
      }
      // 修改父组件的数据中的对应id的条目
      // #ifdef VUE2
      index = this.value.findIndex((val) => val[this.idKey] == id);
      // #endif
      // #ifdef VUE3
      index = this.modelValue.findIndex((val) => val[this.idKey] == id);
      // #endif
      if (index != -1) {
        // 首先复制一份value的数据
        // #ifdef VUE2
        let data = this.cloneData(this.value);
        // #endif
        // #ifdef VUE3
        let data = this.cloneData(this.modelValue);
        // #endif
        // 修改对应索引的key属性的值为value
        data[index][key] = value;
        // 修改父组件通过v-model绑定的变量的值
        // #ifdef VUE2
        this.$emit('input', data);
        // #endif
        // #ifdef VUE3
        this.$emit('update:modelValue', data);
        // #endif
      }
    }
  }
-@import './style.css';
-</style>
+<template>
+  <view class="u-waterfall">
+    <view ref="u-left-column" id="u-left-column" class="u-column">
+      <slot name="left" :leftList="leftList"></slot>
+    </view>
+    <view ref="u-right-column" id="u-right-column" class="u-column">
+      <slot name="right" :rightList="rightList"></slot>
+    </view>
+  </view>
+</template>
+<script>
+/**
+ * waterfall 瀑布流
+ * @description 这是一个瀑布流形式的组件，内容分为左右两列，结合uview的懒加载组件效果更佳。相较于某些只是奇偶数左右分别，或者没有利用vue作用域插槽的做法，uview的瀑布流实现了真正的 组件化，搭配LazyLoad 懒加载和loadMore 加载更多组件，让您开箱即用，眼前一亮。
+ * @tutorial https://uview-plus.jiangruyi.com/components/waterfall.html
+ * @property {Array} flow-list 用于渲染的数据
+ * @property {String Number} add-time 单条数据添加到队列的时间间隔，单位ms，见上方注意事项说明（默认200）
+ * @example <up-waterfall :flowList="flowList"></up-waterfall>
+ */
+import { mpMixin } from '../../libs/mixin/mpMixin';
+import { mixin } from '../../libs/mixin/mixin';
+export default {
+  name: 'u-waterfall',
+  props: {
+    // #ifdef VUE2
+    value: {
+      // 瀑布流数据
+      type: Array,
+      required: true,
+      default: function () {
+        return [];
+      }
+    },
+    // #endif
+    // #ifdef VUE3
+    modelValue: {
+      // 瀑布流数据
+      type: Array,
+      required: true,
+      default: function () {
+        return [];
+      }
+    },
+    // #endif
+    // 每次向结构插入数据的时间间隔，间隔越长，越能保证两列高度相近，但是对用户体验越不好
+    // 单位ms
+    addTime: {
+      type: [Number, String],
+      default: 200
+    },
+    // id值，用于清除某一条数据时，根据此idKey名称找到并移除，如数据为{idx: 22, name: 'lisa'}
+    // 那么该把idKey设置为idx
+    idKey: {
+      type: String,
+      default: 'id'
+    }
+  },
+  mixins: [mpMixin, mixin],
+  data() {
+    return {
+      leftList: [],
+      rightList: [],
+      tempList: [],
+      children: []
+    };
+  },
+  watch: {
+    copyFlowList(nVal, oVal) {
+      if (!nVal || nVal.length == 0) {
+        this.clear(false);
+        // console.log('clear');
+      } else {
+        // 取差值，即这一次数组变化新增的部分
+        let startIndex = Array.isArray(oVal) && oVal.length > 0 ? oVal.length : 0;
+        // 拼接上原有数据
+        this.tempList = this.tempList.concat(this.cloneData(nVal.slice(startIndex)));
+        this.splitData();
+      }
+    }
+  },
+  mounted() {
+    this.tempList = this.cloneData(this.copyFlowList);
+    this.splitData();
+  },
+  computed: {
+    // 破坏flowList变量的引用，否则watch的结果新旧值是一样的
+    copyFlowList() {
+      // #ifdef VUE3
+      if (!this.modelValue || this.modelValue.length == 0) {
+        this.clear(false);
+        // console.log('clear');
+        return [];
+      } else {
+        return this.cloneData(this.modelValue);
+      }
+      // #endif
+      // #ifdef VUE2
+      return this.cloneData(this.value);
+      // #endif
+    }
+  },
+  emits: ['update:modelValue'],
+  methods: {
+    async splitData() {
+      if (!this.tempList.length) return;
+      let leftRect = await this.$uGetRect('#u-left-column');
+      let rightRect = await this.$uGetRect('#u-right-column');
+      // 如果左边小于或等于右边，就添加到左边，否则添加到右边
+      let item = this.tempList[0];
+      // 解决多次快速上拉后，可能数据会乱的问题，因为经过上面的两个await节点查询阻塞一定时间，加上后面的定时器干扰
+      // 数组可能变成[]，导致此item值可能为undefined
+      if (!item) return;
+      if (leftRect.height < rightRect.height) {
+        this.leftList.push(item);
+      } else if (leftRect.height > rightRect.height) {
+        this.rightList.push(item);
+      } else {
+        // 这里是为了保证第一和第二张添加时，左右都能有内容
+        // 因为添加第一张，实际队列的高度可能还是0，这时需要根据队列元素长度判断下一个该放哪边
+        if (this.leftList.length <= this.rightList.length) {
+          this.leftList.push(item);
+        } else {
+          this.rightList.push(item);
+        }
+      }
+      // 移除临时列表的第一项
+      this.tempList.splice(0, 1);
+      // 如果临时数组还有数据，继续循环
+      if (this.tempList.length) {
+        setTimeout(() => {
+          this.splitData();
+        }, this.addTime);
+      }
+    },
+    // 复制而不是引用对象和数组
+    cloneData(data) {
+      return JSON.parse(JSON.stringify(data));
+    },
+    // 清空数据列表
+    clear(bak = true) {
+      this.leftList = [];
+      this.rightList = [];
+      // 同时清除父组件列表中的数据
+      if (bak) {
+        // #ifdef VUE2
+        this.$emit('input', []);
+        // #endif
+        // #ifdef VUE3
+        this.$emit('update:modelValue', []);
+        // #endif
+      }
+      this.tempList = [];
+    },
+    // 清除某一条指定的数据，根据id实现
+    remove(id) {
+      // 如果findIndex找不到合适的条件，就会返回-1
+      let index = -1;
+      index = this.leftList.findIndex((val) => val[this.idKey] == id);
+      if (index != -1) {
+        // 如果index不等于-1，说明已经找到了要找的id，根据index索引删除这一条数据
+        this.leftList.splice(index, 1);
+      } else {
+        // 同理于上方面的方法
+        index = this.rightList.findIndex((val) => val[this.idKey] == id);
+        if (index != -1) this.rightList.splice(index, 1);
+      }
+      // 同时清除父组件的数据中的对应id的条目
+      // #ifdef VUE2
+      index = this.value.findIndex((val) => val[this.idKey] == id);
+      if (index != -1) this.$emit('input', this.value.splice(index, 1));
+      // #endif
+      // #ifdef VUE3
+      index = this.modelValue.findIndex((val) => val[this.idKey] == id);
+      if (index != -1) this.$emit('update:modelValue', this.modelValue.splice(index, 1));
+      // #endif
+    },
+    // 修改某条数据的某个属性
+    modify(id, key, value) {
+      // 如果findIndex找不到合适的条件，就会返回-1
+      let index = -1;
+      index = this.leftList.findIndex((val) => val[this.idKey] == id);
+      if (index != -1) {
+        // 如果index不等于-1，说明已经找到了要找的id，修改对应key的值
+        this.leftList[index][key] = value;
+      } else {
+        // 同理于上方面的方法
+        index = this.rightList.findIndex((val) => val[this.idKey] == id);
+        if (index != -1) this.rightList[index][key] = value;
+      }
+      // 修改父组件的数据中的对应id的条目
+      // #ifdef VUE2
+      index = this.value.findIndex((val) => val[this.idKey] == id);
+      // #endif
+      // #ifdef VUE3
+      index = this.modelValue.findIndex((val) => val[this.idKey] == id);
+      // #endif
+      if (index != -1) {
+        // 首先复制一份value的数据
+        // #ifdef VUE2
+        let data = this.cloneData(this.value);
+        // #endif
+        // #ifdef VUE3
+        let data = this.cloneData(this.modelValue);
+        // #endif
+        // 修改对应索引的key属性的值为value
+        data[index][key] = value;
+        // 修改父组件通过v-model绑定的变量的值
+        // #ifdef VUE2
+        this.$emit('input', data);
+        // #endif
+        // #ifdef VUE3
+        this.$emit('update:modelValue', data);
+        // #endif
+      }
+    }
+  }
+};
+</script>
+<style scoped>
+@import './style.css';
+</style>