@10yun/cv-mobile-ui 0.5.53 → 0.5.55

package/other/z-paging/components/z-paging/i18n/index.js

@@ -0,0 +1,8 @@
+import en from './en.json'
+import zhHans from './zh-Hans.json'
+import zhHant from './zh-Hant.json'
+export default {
+	en,
+	'zh-Hans': zhHans,
+	'zh-Hant': zhHant
+}

package/other/z-paging/components/z-paging/i18n/zh-Hans.json

@@ -0,0 +1,23 @@
+{	
+	"zp.refresher.default": "继续下拉刷新",
+	"zp.refresher.pulling": "松开立即刷新",
+	"zp.refresher.refreshing": "正在刷新...",
+	"zp.refresher.complete": "刷新成功",
+	"zp.refresher.f2": "松手进入二楼",
+	
+	"zp.loadingMore.default": "点击加载更多",
+	"zp.loadingMore.loading": "正在加载...",
+	"zp.loadingMore.noMore": "没有更多了",
+	"zp.loadingMore.fail": "加载失败，点击重新加载",
+	
+	"zp.emptyView.title": "没有数据哦~",
+	"zp.emptyView.reload": "重新加载",
+	"zp.emptyView.error": "很抱歉，加载失败",
+	
+	"zp.refresherUpdateTime.title": "最后更新：",
+	"zp.refresherUpdateTime.none": "无",
+	"zp.refresherUpdateTime.today": "今天",
+	"zp.refresherUpdateTime.yesterday": "昨天",
+	
+	"zp.systemLoading.title": "加载中..."
+}

package/other/z-paging/components/z-paging/i18n/zh-Hant.json

@@ -0,0 +1,23 @@
+{	
+	"zp.refresher.default": "繼續下拉重繪",
+	"zp.refresher.pulling": "鬆開立即重繪",
+	"zp.refresher.refreshing": "正在重繪...",
+	"zp.refresher.complete": "重繪成功",
+	"zp.refresher.f2": "鬆手進入二樓",
+	
+	"zp.loadingMore.default": "點擊加載更多",
+	"zp.loadingMore.loading": "正在加載...",
+	"zp.loadingMore.noMore": "沒有更多了",
+	"zp.loadingMore.fail": "加載失敗，點擊重新加載",
+	
+	"zp.emptyView.title": "沒有數據哦~",
+	"zp.emptyView.reload": "重新加載",
+	"zp.emptyView.error": "很抱歉，加載失敗",
+	
+	"zp.refresherUpdateTime.title": "最後更新：",
+	"zp.refresherUpdateTime.none": "無",
+	"zp.refresherUpdateTime.today": "今天",
+	"zp.refresherUpdateTime.yesterday": "昨天",
+	
+	"zp.systemLoading.title": "加載中..."
+}

package/other/z-paging/components/z-paging/js/hooks/useZPaging.js

@@ -0,0 +1,25 @@
+// [z-paging]useZPaging hooks
+
+import { onPageScroll, onReachBottom, onPullDownRefresh } from '@dcloudio/uni-app';
+
+function useZPaging(paging) {
+	const cPaging = !!paging ? paging.value || paging : null;
+	
+	onPullDownRefresh(() => {
+		if (!cPaging || !cPaging.value) return;
+		cPaging.value.reload().catch(() => {});
+	})
+	
+	onPageScroll(e => {
+		if (!cPaging || !cPaging.value) return;
+		cPaging.value.updatePageScrollTop(e.scrollTop);
+		e.scrollTop < 10 && cPaging.value.doChatRecordLoadMore();
+	})
+	
+	onReachBottom(() => {
+		if (!cPaging || !cPaging.value) return;
+		cPaging.value.pageReachBottom();
+	})
+}
+
+export default useZPaging

package/other/z-paging/components/z-paging/js/hooks/useZPagingComp.js

@@ -0,0 +1,25 @@
+// [z-paging]useZPagingComp hooks
+
+function useZPagingComp(paging) {
+	const cPaging = !!paging ? paging.value || paging : null;
+	
+	const reload = () => {
+		if (!cPaging || !cPaging.value) return;
+		cPaging.value.reload().catch(() => {});
+	}
+	const updatePageScrollTop = scrollTop => {
+		if (!cPaging || !cPaging.value) return;
+		cPaging.value.updatePageScrollTop(scrollTop);
+	}
+	const doChatRecordLoadMore = () => {
+		if (!cPaging || !cPaging.value) return;
+		cPaging.value.doChatRecordLoadMore();
+	}
+	const pageReachBottom = () => {
+		if (!cPaging || !cPaging.value) return;
+		cPaging.value.pageReachBottom();
+	}
+	return { reload, updatePageScrollTop, doChatRecordLoadMore, pageReachBottom };
+}
+
+export default useZPagingComp

package/other/z-paging/components/z-paging/js/modules/back-to-top.js

@@ -0,0 +1,125 @@
+// [z-paging]点击返回顶部view模块
+import u from '.././z-paging-utils'
+
+export default {
+	props: {
+		// 自动显示点击返回顶部按钮，默认为否
+		autoShowBackToTop: {
+			type: Boolean,
+			default: u.gc('autoShowBackToTop', false)
+		},
+		// 点击返回顶部按钮显示/隐藏的阈值(滚动距离)，单位为px，默认为400rpx
+		backToTopThreshold: {
+			type: [Number, String],
+			default: u.gc('backToTopThreshold', '400rpx')
+		},
+		// 点击返回顶部按钮的自定义图片地址，默认使用z-paging内置的图片
+		backToTopImg: {
+			type: String,
+			default: u.gc('backToTopImg', '')
+		},
+		// 点击返回顶部按钮返回到顶部时是否展示过渡动画，默认为是
+		backToTopWithAnimate: {
+			type: Boolean,
+			default: u.gc('backToTopWithAnimate', true)
+		},
+		// 点击返回顶部按钮与底部的距离，注意添加单位px或rpx，默认为160rpx
+		backToTopBottom: {
+			type: [Number, String],
+			default: u.gc('backToTopBottom', '160rpx')
+		},
+		// 点击返回顶部按钮的自定义样式
+		backToTopStyle: {
+			type: Object,
+			default: u.gc('backToTopStyle', {}),
+		},
+		// iOS点击顶部状态栏、安卓双击标题栏时，滚动条返回顶部，只支持竖向，默认为是
+		enableBackToTop: {
+			type: Boolean,
+			default: u.gc('enableBackToTop', true)
+		},
+	},
+	data() {
+		return {
+			// 点击返回顶部的class
+			backToTopClass: 'zp-back-to-top zp-back-to-top-hide',
+			// 上次点击返回顶部的时间
+			lastBackToTopShowTime: 0,
+			// 点击返回顶部显示的class是否在展示中，使得按钮展示/隐藏过度效果更自然
+			showBackToTopClass: false,
+		}
+	},
+	computed: {
+		backToTopThresholdUnitConverted() {
+			return u.addUnit(this.backToTopThreshold, this.unit);
+		},
+		backToTopBottomUnitConverted() {
+			return u.addUnit(this.backToTopBottom, this.unit);
+		},
+		finalEnableBackToTop() {
+			return this.usePageScroll ? false : this.enableBackToTop;
+		},
+		finalBackToTopThreshold() {
+			return u.convertToPx(this.backToTopThresholdUnitConverted);
+		},
+		finalBackToTopStyle() {
+			const backToTopStyle = this.backToTopStyle;
+			if (!backToTopStyle.bottom) {
+				backToTopStyle.bottom = this.windowBottom + u.convertToPx(this.backToTopBottomUnitConverted) + 'px';
+			}
+			if(!backToTopStyle.position){
+				backToTopStyle.position = this.usePageScroll ? 'fixed': 'absolute';
+			}
+			return backToTopStyle;
+		},
+		finalBackToTopClass() {
+			return `${this.backToTopClass} zp-back-to-top-${this.unit}`;
+		}
+	},
+	methods: {
+		// 点击了返回顶部
+		_backToTopClick() {
+			let callbacked = false;
+			this.$emit('backToTopClick', toTop => {
+				(toTop === undefined || toTop === true) && this._handleToTop();
+				callbacked = true;
+			});
+			// 如果用户没有禁止默认的返回顶部事件，则触发滚动到顶部
+			this.$nextTick(() => {
+				!callbacked && this._handleToTop();
+			})
+		},
+		// 处理滚动到顶部（聊天记录模式中为滚动到底部）
+		_handleToTop() {
+			!this.backToTopWithAnimate && this._checkShouldShowBackToTop(0);
+			!this.useChatRecordMode ? this.scrollToTop(this.backToTopWithAnimate) : this.scrollToBottom(this.backToTopWithAnimate);
+		},
+		// 判断是否要显示返回顶部按钮
+		_checkShouldShowBackToTop(scrollTop) {
+			if (!this.autoShowBackToTop) {
+				this.showBackToTopClass = false;
+				return;
+			}
+			if (scrollTop > this.finalBackToTopThreshold) {
+				if (!this.showBackToTopClass) {
+					// 记录当前点击返回顶部按钮显示的class生效了
+					this.showBackToTopClass = true;
+					this.lastBackToTopShowTime = new Date().getTime();
+					// 当滚动到需要展示返回顶部的阈值内，则延迟300毫秒展示返回到顶部按钮
+					u.delay(() => {
+						this.backToTopClass = 'zp-back-to-top zp-back-to-top-show';
+					}, 300)
+				}
+			} else {
+				// 如果当前点击返回顶部按钮显示的class是生效状态并且滚动小于触发阈值，则隐藏返回顶部按钮
+				if (this.showBackToTopClass) {
+					this.backToTopClass = 'zp-back-to-top zp-back-to-top-hide';
+					u.delay(() => {
+						this.showBackToTopClass = false;
+					}, new Date().getTime() - this.lastBackToTopShowTime < 500 ? 0 : 300)
+				}
+			}
+		},
+	}
+}
+

package/other/z-paging/components/z-paging/js/modules/chat-record-mode.js

@@ -0,0 +1,149 @@
+// [z-paging]聊天记录模式模块
+import u from '.././z-paging-utils'
+
+export default {
+	props: {
+		// 使用聊天记录模式，默认为否
+		useChatRecordMode: {
+			type: Boolean,
+			default: u.gc('useChatRecordMode', false)
+		},
+		// 使用聊天记录模式时滚动到顶部后，列表垂直移动偏移距离。默认0rpx。单位px（暂时无效）
+		chatRecordMoreOffset: {
+			type: [Number, String],
+			default: u.gc('chatRecordMoreOffset', '0rpx')
+		},
+		// 使用聊天记录模式时是否自动隐藏键盘：在用户触摸列表时候自动隐藏键盘，默认为是
+		autoHideKeyboardWhenChat: {
+			type: Boolean,
+			default: u.gc('autoHideKeyboardWhenChat', true)
+		},
+		// 使用聊天记录模式中键盘弹出时是否自动调整slot="bottom"高度，默认为是
+		autoAdjustPositionWhenChat: {
+			type: Boolean,
+			default: u.gc('autoAdjustPositionWhenChat', true)
+		},
+		// 使用聊天记录模式中键盘弹出时占位高度偏移距离。默认0rpx。单位px
+		chatAdjustPositionOffset: {
+			type: [Number, String],
+			default: u.gc('chatAdjustPositionOffset', '0rpx')
+		},
+		// 使用聊天记录模式中键盘弹出时是否自动滚动到底部，默认为否
+		autoToBottomWhenChat: {
+			type: Boolean,
+			default: u.gc('autoToBottomWhenChat', false)
+		},
+		// 使用聊天记录模式中reload时是否显示chatLoading，默认为否
+		showChatLoadingWhenReload: {
+			type: Boolean,
+			default: u.gc('showChatLoadingWhenReload', false)
+		},
+		// 在聊天记录模式中滑动到顶部状态为默认状态时，以加载中的状态展示，默认为是。若设置为否，则默认会显示【点击加载更多】，然后才会显示loading
+		chatLoadingMoreDefaultAsLoading: {
+			type: Boolean,
+			default: u.gc('chatLoadingMoreDefaultAsLoading', true)
+		},
+	},
+	data() {
+		return {
+			// 键盘高度
+			keyboardHeight: 0,
+			// 键盘高度是否未改变，此时占位高度变化不需要动画效果
+			isKeyboardHeightChanged: false,
+		}
+	},
+	computed: {
+		finalChatRecordMoreOffset() {
+			return u.convertToPx(this.chatRecordMoreOffset);
+		},
+		finalChatAdjustPositionOffset() {
+			return u.convertToPx(this.chatAdjustPositionOffset);
+		},
+		// 聊天记录模式旋转180度style
+		chatRecordRotateStyle() {
+			let cellStyle;
+			// 在vue中，直接将列表倒置，因此在vue的cell中，也直接写style="transform: scaleY(-1)"转回来即可。
+			// #ifndef APP-NVUE
+			cellStyle = this.useChatRecordMode ? { transform: 'scaleY(-1)' } : {};
+			// #endif
+			
+			// 在nvue中，需要考虑数据量不满一页的情况，因为nvue中的list无法通过flex-end修改不满一页的起始位置，会导致不满一页时列表数据从底部开始，因此需要特别判断
+			// 当数据不满一屏的时候，不进行列表倒置
+			// #ifdef APP-NVUE
+			cellStyle = this.useChatRecordMode ? { transform: this.isFirstPageAndNoMore ? 'scaleY(1)' : 'scaleY(-1)' } : {};
+			// #endif
+			
+			this.$emit('update:cellStyle', cellStyle);
+			this.$emit('cellStyleChange', cellStyle);
+			
+			// 在聊天记录模式中，如果列表没有倒置并且当前是第一页，则需要自动滚动到最底部
+			this.$nextTick(() => {
+				if (this.isFirstPage && this.isChatRecordModeAndNotInversion) {
+					this.$nextTick(() => {
+						// 这里多次触发滚动到底部是为了避免在某些情况下，即使是在nextTick但是cell未渲染完毕导致滚动到底部位置不正确的问题
+						this._scrollToBottom(false);
+						u.delay(() => {
+							this._scrollToBottom(false);
+							u.delay(() => {
+								this._scrollToBottom(false);
+							}, 50)
+						}, 50)
+					})
+				}
+			})
+			return cellStyle;
+		},
+		// 是否是聊天记录列表并且有配置transform
+		isChatRecordModeHasTransform() {
+			return this.useChatRecordMode && this.chatRecordRotateStyle && this.chatRecordRotateStyle.transform;
+		},
+		// 是否是聊天记录列表并且列表未倒置
+		isChatRecordModeAndNotInversion() {
+			return this.isChatRecordModeHasTransform && this.chatRecordRotateStyle.transform === 'scaleY(1)';
+		},
+		// 是否是聊天记录列表并且列表倒置
+		isChatRecordModeAndInversion() {
+			return this.isChatRecordModeHasTransform && this.chatRecordRotateStyle.transform === 'scaleY(-1)';
+		},
+		// 最终的聊天记录模式中底部安全区域的高度，如果开启了底部安全区域并且键盘未弹出，则添加底部区域高度
+		chatRecordModeSafeAreaBottom() {
+			return this.safeAreaInsetBottom && !this.keyboardHeight ? this.safeAreaBottom : 0;
+		}
+	},
+	mounted() {
+		// 监听键盘高度变化（H5、百度小程序、抖音小程序、飞书小程序不支持）
+		// #ifndef H5 || MP-BAIDU || MP-TOUTIAO
+		if (this.useChatRecordMode) {
+			uni.onKeyboardHeightChange(this._handleKeyboardHeightChange);
+		}
+		// #endif
+	},
+	methods: {
+		// 添加聊天记录
+		addChatRecordData(data, toBottom = true, toBottomWithAnimate = true) {
+			if (!this.useChatRecordMode) return;
+			this.isTotalChangeFromAddData = true;
+			this.addDataFromTop(data, toBottom, toBottomWithAnimate);
+		},
+		// 手动触发滚动到顶部加载更多，聊天记录模式时有效
+		doChatRecordLoadMore() {
+			this.useChatRecordMode && this._onLoadingMore('click');
+		},
+		// 处理键盘高度变化
+		_handleKeyboardHeightChange(res) {
+			this.$emit('keyboardHeightChange', res);
+			if (this.autoAdjustPositionWhenChat) {
+				this.isKeyboardHeightChanged = true;
+				this.keyboardHeight = res.height > 0 ? res.height + this.finalChatAdjustPositionOffset : res.height;
+			}
+			if (this.autoToBottomWhenChat && this.keyboardHeight > 0) {
+				u.delay(() => {
+					this.scrollToBottom(false);
+					u.delay(() => {
+						this.scrollToBottom(false);
+					})
+				})
+			} 
+		}
+	}
+}

package/other/z-paging/components/z-paging/js/modules/common-layout.js

@@ -0,0 +1,152 @@
+// [z-paging]通用布局相关模块
+import u from '.././z-paging-utils'
+
+// #ifdef APP-NVUE
+const weexDom = weex.requireModule('dom');
+// #endif
+
+export default {
+	data() {
+		return {
+			systemInfo: null,
+			cssSafeAreaInsetBottom: -1,
+			isReadyDestroy: false,
+		}
+	},
+	computed: {
+		// 顶部可用距离
+		windowTop() {
+			if (!this.systemInfo) return 0;
+			// 暂时修复vue3中隐藏系统导航栏后windowTop获取不正确的问题，具体bug详见https://ask.dcloud.net.cn/question/141634
+			// 感谢litangyu！！https://github.com/SmileZXLee/uni-z-paging/issues/25
+			// #ifdef VUE3 && H5
+			const pageHeadNode = document.getElementsByTagName("uni-page-head");
+			if (!pageHeadNode.length) return 0;
+			// #endif
+			return this.systemInfo.windowTop || 0;
+		},
+		// 底部安全区域高度
+		safeAreaBottom() {
+			if (!this.systemInfo) return 0;
+			let safeAreaBottom = 0;
+			// #ifdef APP-PLUS
+			safeAreaBottom = this.systemInfo.safeAreaInsets.bottom || 0 ;
+			// #endif
+			// #ifndef APP-PLUS
+			safeAreaBottom = Math.max(this.cssSafeAreaInsetBottom, 0);
+			// #endif
+			return safeAreaBottom;
+		},
+		// 是否是比较老的webview，在一些老的webview中，需要进行一些特殊处理
+		isOldWebView() {
+			// #ifndef APP-NVUE || MP-KUAISHOU
+			try {
+				const systemInfos = u.getSystemInfoSync(true).system.split(' ');
+				const deviceType = systemInfos[0];
+				const version = parseInt(systemInfos[1]);
+				if ((deviceType === 'iOS' && version <= 10) || (deviceType === 'Android' && version <= 6)) {
+					return true;
+				}
+			} catch(e) {
+				return false;
+			}
+			// #endif
+			return false;
+		},
+		// 当前组件的$slots，兼容不同平台
+		zSlots() {
+			// #ifdef VUE2
+			
+			// #ifdef MP-ALIPAY
+			return this.$slots;
+			// #endif
+			
+			return this.$scopedSlots || this.$slots;
+			// #endif
+			
+			return this.$slots;
+		},
+	},
+	beforeDestroy() {
+		this.isReadyDestroy = true;
+	},
+	// #ifdef VUE3
+	unmounted() {
+		this.isReadyDestroy = true;
+	},
+	// #endif
+	methods: {
+		// 更新fixed模式下z-paging的布局
+		updateFixedLayout() {
+			this.fixed && this.$nextTick(() => {
+				this.systemInfo = u.getSystemInfoSync();
+			})
+		},
+		// 获取节点尺寸
+		_getNodeClientRect(select, inDom = true, scrollOffset = false) {
+			if (this.isReadyDestroy) {
+				return Promise.resolve(false);
+			};
+			// nvue中获取节点信息
+			// #ifdef APP-NVUE
+			select = select.replace(/[.|#]/g, '');
+			const ref = this.$refs[select];
+			return new Promise((resolve, reject) => {
+				if (ref) {
+					weexDom.getComponentRect(ref, option => {
+						resolve(option && option.result ? [option.size] : false);
+					})
+				} else {
+					resolve(false);
+				}
+			});
+			return;
+			// #endif
+			
+			// vue中获取节点信息
+			//#ifdef MP-ALIPAY
+			inDom = false;
+			//#endif
+			
+			/*
+			inDom可能是true、false，也可能是具体的dom节点
+			如果inDom不为false，则使用uni.createSelectorQuery().in()进行查询，如果inDom为true，则in中的是this，否则in中的为具体的dom
+			如果inDom为false，则使用uni.createSelectorQuery()进行查询
+			*/
+			let res = !!inDom ? uni.createSelectorQuery().in(inDom === true ? this : inDom) : uni.createSelectorQuery();
+			scrollOffset ? res.select(select).scrollOffset() : res.select(select).boundingClientRect();
+			return new Promise((resolve, reject) => {
+				res.exec(data => {
+					resolve((data && data != '' && data != undefined && data.length) ? data : false);
+				});
+			});
+		},
+		// 获取slot="left"和slot="right"宽度并且更新布局
+		_updateLeftAndRightWidth(targetStyle, parentNodePrefix) {
+			this.$nextTick(() => {
+				let delayTime = 0;
+				// #ifdef MP-BAIDU
+				delayTime = 10;
+				// #endif
+				setTimeout(() => {
+					['left','right'].map(position => {
+						this._getNodeClientRect(`.${parentNodePrefix}-${position}`).then(res => {
+							this.$set(targetStyle, position, res ? res[0].width + 'px' : '0px');
+						});
+					})
+				}, delayTime)
+			})
+		},
+		// 通过获取css设置的底部安全区域占位view高度设置bottom距离（直接通过systemInfo在部分平台上无法获取到底部安全区域）
+		_getCssSafeAreaInsetBottom(success) {
+			this._getNodeClientRect('.zp-safe-area-inset-bottom').then(res => {
+				this.cssSafeAreaInsetBottom = res ? res[0].height : -1;
+				res && success && success();
+			});
+		},
+		// 同步获取系统信息，兼容不同平台（供z-paging-swiper使用）
+		_getSystemInfoSync(useCache = false) {
+			return u.getSystemInfoSync(useCache);
+		}
+	}
+}