uview-pro 0.0.1

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

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

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

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