fusions-ui 1.2.7 → 1.2.8

package/components/code-verify/src/composables/use-code-verify.ts

@@ -0,0 +1,132 @@
+import { onMounted, ref, watch, onUnmounted, type SetupContext } from 'vue';
+import type { CodeVerifyProps, CodeVerifyEmits } from '../code-verify';
+
+export const useCodeVerify = (props: CodeVerifyProps, $emit: SetupContext<CodeVerifyEmits>['emit']) => {
+	const text = ref(props.startText);
+	const secNum = ref(props.seconds);
+	const timer = ref(null);
+	const opacity = ref<string | number>('');
+	const canGetCode = ref(true); // 是否可以执行验证码操作
+	
+	const checkKeepRunning = () => {
+		// 获取上一次退出页面(H5还包括刷新)时的时间戳，如果没有上次的保存，此值可能为空
+		const lastTimestamp = Number(uni.getStorageSync(props.uniqueKey + '_$fuCountDownTimestamp'))
+		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 + '_$fuCountDownTimestamp')
+			// 开始倒计时
+			startTimer()
+		} else {
+			// 如果不存在需要继续上一次的倒计时，执行正常的逻辑
+			changeEvent(props.startText)
+		}
+	};
+	
+	const handleStart = () => {
+		if(!secNum.value || timer.value) return
+		text.value = props.sendText || '';
+		opacity.value = `opacity: ${props.isOpacity? '.6': 1};`;
+		$emit('send')
+		changeEvent(props.sendText)
+	};
+	
+	const startTimer = () => {
+		// 防止快速点击获取验证码的按钮而导致内部产生多个定时器导致混乱
+		if(timer.value) {
+			clearInterval(timer.value)
+			timer.value = null;
+		}
+		$emit('start')
+		canGetCode.value = false;
+		// 这里放这句，是为了一开始时就提示，否则要等setInterval的1秒后才会有提示
+		text.value = props.changeText.replace(/x|X/, String(secNum.value));
+		changeEvent(props.changeText.replace(/x|X/, String(secNum.value)))
+		timer.value = setInterval(() => {
+			if (--secNum.value) {
+				// 用当前倒计时的秒数替换提示字符串中的"s"字母
+				text.value = props.changeText.replace(/x|X/, String(secNum.value));
+				changeEvent(props.changeText.replace(/x|X/, String(secNum.value)))
+			} else {
+				clearInterval(timer.value)
+				timer.value = null;
+				text.value = props.endText || '';
+				changeEvent(props.endText)
+				secNum.value = props.seconds;
+				opacity.value = 1;
+				$emit('end')
+				canGetCode.value = true;
+			}
+		}, 1000)
+		setTimeToStorage()
+	};
+	
+	const changeEvent = (text: string) => {
+		$emit('change', text)
+	};
+	
+	// 重置，可以让用户再次获取验证码
+	const reset = () => {
+		canGetCode.value = false;
+		clearInterval(timer.value)
+		timer.value = null;
+		secNum.value = props.seconds;
+		text.value = props.startText;
+		opacity.value = 1;
+		changeEvent(props.startText)
+	};
+	
+	// 保存时间戳，为了防止倒计时尚未结束，H5刷新或者各端的右上角返回上一页再进来
+	const setTimeToStorage = () => {
+		if(!props.keepRunning || !timer.value) return
+		// 记录当前的时间戳，为了下次进入页面，如果还在倒计时内的话，继续倒计时
+		// 倒计时尚未结束，结果大于0；倒计时已经开始，就会小于初始值，如果等于初始值，说明没有开始倒计时，无需处理
+		if(secNum.value > 0 && secNum.value <= props.seconds) {
+			// 获取当前时间戳(+ new Date()为特殊写法)，除以1000变成秒，再去除小数部分
+			let nowTimestamp = Math.floor((+ new Date()) / 1000)
+			// 将本该结束时候的时间戳保存起来 => 当前时间戳 + 剩余的秒数
+			uni.setStorage({
+				key: props.uniqueKey + '_$fuCountDownTimestamp',
+				data: nowTimestamp + Number(secNum.value)
+			})
+		}
+	};
+	
+	// 生命周期
+	onMounted(() => {
+		checkKeepRunning()
+		if(props.startState) {
+			startTimer()
+		}
+	});
+	
+	onUnmounted(() => {
+		setTimeToStorage()
+		clearTimeout(timer.value)
+		timer.value = null;
+	});
+	
+	// watch监听事件
+	watch(() => props.seconds, (newVal) => {
+		secNum.value = newVal;
+	}, { immediate: true });
+	
+	watch(() => props.successVal, (newVal) =>  {
+		if(newVal) {
+			startTimer()
+		}
+	})
+		
+	return {
+		text,
+		opacity,
+		handleStart,
+		startTimer,
+		reset
+	}
+}

package/components/collapse/index.ts

@@ -0,0 +1 @@
+export * from './src/collapse'

package/components/collapse/src/collapse.ts

@@ -0,0 +1,41 @@
+import type { ExtractPropTypes } from 'vue';
+
+export const collapseProps = {
+	/**
+	 * @description 当前激活面板改变时触发(如果是手风琴模式，参数类型为string，否则为array)
+	 */
+	modelValue: {
+		type: [String, Array],
+		default: ''
+	},
+	/**
+	 * @description 是否开启手风琴效果是否开启手风琴效果
+	 */
+	accordion: {
+		type: Boolean,
+		default: false
+	},
+	/**
+	 * @description 自定义背景色
+	 */
+	bgColor: {
+		type: String,
+		default: '#FFFFFF'
+	}
+};
+
+export const collapseEmits = {
+	'update:modelValue': (_e: string | string[]) => true,
+	/**
+	 * 切换面板时触发
+	 * @param value 当前激活的值（手风琴模式为string，否则为array）
+	 */
+	change: (_e: string | string[]) => true,
+	/**
+	 * 触发子项变化时（内部使用）
+	 */
+	activeItem: (_e: any) => true
+}
+
+export type CollapseProps = ExtractPropTypes<typeof collapseProps>;
+export type CollapseEmits = typeof collapseEmits;

package/components/collapse/src/collapse.vue

@@ -0,0 +1,48 @@
+<template>
+	<view class="fu-collapse" :style="{background: bgColor}">
+		<slot />
+	</view>
+</template>
+
+<script lang="ts" setup>
+	/**
+	 * Collapse 折叠面板
+	 * @description 此组件面板展示可以折叠 / 展开的内容区域
+	 * @tutorial http://www.fusions.top/components/collapse.html
+	 * @property {String | Array} value 当前激活面板改变时触发(如果是手风琴模式，参数类型为string，否则为array)
+	 * @property {Boolean} accordion = [true|false] 是否开启手风琴效果是否开启手风琴效果
+	 * @property {String} bgColor  自定义背景色  默认（'#FFFFFF'） 透明色设置transparent
+	 * 
+	 * @event {Function} change 切换面板时触发，如果是手风琴模式，返回类型为string，否则为array
+	 * @example <fu-collapse></fu-collapse>
+	 */
+	import { collapseEmits, collapseProps } from './collapse';
+	import { useCollapseProps } from './composables';
+	
+	defineOptions({ name: 'FuCollapse', options: { virtualHost: true } });
+	
+	const props = defineProps(collapseProps);
+	const $emit = defineEmits(collapseEmits);
+	
+	const {
+		names,
+		setOpen,
+		setAccordion,
+		resize,
+		handleChange
+	} = useCollapseProps(props, $emit);
+</script>
+
+<style lang="scss" scoped>
+	@use '../../../style/components.scss';
+	
+	.fu-collapse {
+		@include components.flex(column);
+		/* #ifndef APP-NVUE */
+		width: 100%;
+		/* #endif */
+		/* #ifdef APP-NVUE */
+		flex: 1;
+		/* #endif */
+	}
+</style>

package/components/collapse/src/composables/index.ts

@@ -0,0 +1 @@
+export * from './use-collapse'

package/components/collapse/src/composables/use-collapse.ts

@@ -0,0 +1,150 @@
+import { ref, watch, computed, onMounted, nextTick, provide, type SetupContext } from 'vue';
+import type { CollapseProps, CollapseEmits } from '../collapse';
+
+// 定义子项接口
+interface CollapseItem {
+	nameSync: string | number;
+	isOpen: boolean;
+	getCollapseHeight?: () => void;
+	getNvueHwight?: () => void;
+}
+
+export const useCollapseProps = (props: CollapseProps, $emit: SetupContext<CollapseEmits>['emit']) => {
+	// 存储所有子项实例
+	const childrens = ref<CollapseItem[]>([]);
+	// 存储所有子项的 name
+	const names = ref<(string | number)[]>([]);
+	
+	// computed计算属性
+	const dataValue = computed(() => {
+		return props.modelValue
+	})
+	
+	// 根据值设置子项的展开状态
+	const setOpen = (val: any) => {
+		const isString = typeof val === 'string'
+		const isArray = Array.isArray(val)
+		childrens.value.forEach((item) => {
+			if (isString) {
+				if (val === item.nameSync) {
+					if (!props.accordion) {
+						console.warn('accordion 属性为 false ,v-model 类型应该为 array')
+						return
+					}
+					item.isOpen = true;
+				} else if(props.accordion) {
+					item.isOpen = false;
+				}
+			}
+			if (isArray) {
+				const shouldOpen = (val as string[]).includes(item.nameSync as string);
+				
+				if(shouldOpen) {
+					if (props.accordion) {
+						console.warn('accordion 属性为 true ,v-model 类型应该为 string')
+						return
+					}
+					item.isOpen = true;
+				} else {
+					item.isOpen = false;
+				}
+			}
+		})
+		emit(val)
+	};
+	
+	// 处理手风琴模式（关闭其他项）
+	const setAccordion = (self: CollapseItem) => {
+		if (!props.accordion) return
+		childrens.value.forEach((item) => {
+			if (self !== item) {
+				item.isOpen = false;
+			}
+		})
+	};
+	
+	// 重新计算所有子项的高度
+	const resize = () => {
+		childrens.value.forEach((item) => {
+			// #ifndef APP-NVUE
+			item.getCollapseHeight?.()
+			// #endif
+			// #ifdef APP-NVUE
+			item.getNvueHwight?.()
+			// #endif
+		})
+	};
+	
+	// 处理子项状态变化
+	const handleChange = (isOpen: boolean, self: any) => {
+		let activeItem = [];
+	
+		if (props.accordion) {
+			activeItem = isOpen ? self.nameSync : ''
+		} else {
+			childrens.value.forEach((item) => {
+				if (item.isOpen) {
+					activeItem.push(item.nameSync)
+				}
+			})
+		}
+		$emit('change', activeItem)
+		emit(activeItem)
+	};
+	
+	// 统一处理 emit
+	const emit = (val: string | string[]) => {
+		$emit('update:modelValue', val)
+	};
+	
+	const registerItem = (item: CollapseItem) => {
+		childrens.value.push(item);
+		if (item.nameSync) {
+			names.value.push(item.nameSync);
+		}
+	};
+	
+	const unregisterItem = (item: CollapseItem) => {
+		const index = childrens.value.indexOf(item);
+		if (index > -1) {
+			childrens.value.splice(index, 1);
+		}
+		if (item.nameSync) {
+			const nameIndex = names.value.indexOf(item.nameSync);
+			if (nameIndex > -1) {
+				names.value.splice(nameIndex, 1);
+			}
+		}
+	};
+	
+	onMounted(() => {
+		nextTick(() => {
+			setOpen(dataValue.value)
+		})
+	});
+	
+	// watch监听事件
+	watch(() => dataValue.value, (newVal) => {
+		setOpen(newVal)
+	});
+	
+	// 提供父组件上下文
+	provide('collapseContext', {
+		childrens,
+		names,
+		setAccordion,
+		handleChange,
+		registerItem,
+		unregisterItem
+	});
+	
+	return {
+		names,
+		setOpen,
+		setAccordion,
+		resize,
+		handleChange,
+		registerItem,
+		unregisterItem
+	}
+}

package/components/collapse-item/index.ts

@@ -0,0 +1 @@
+export * from './src/collapse-item'

package/components/collapse-item/src/collapse-item.ts

@@ -0,0 +1,102 @@
+import type { ExtractPropTypes } from 'vue';
+
+export const collpaseItemProps = {
+	/**
+	 * @description 唯一标志符
+	 */
+	name: {
+		type: [String, Number],
+		default: ''
+	},
+	/**
+	 * @description 列表标题
+	 */
+	title: {
+		type: String,
+		default: ''
+	},
+	/**
+	 * @description 是否禁用
+	 * @default false
+	 */
+	disabled: {
+		type: Boolean,
+		default: false
+	},
+	
+	/**
+	 * @description 是否显示动画
+	 * @default false
+	 */
+	showAnimation: {
+		type: Boolean,
+		default: () => {
+			let value: boolean;
+			// #ifdef APP-PLUS
+			// app 端默认不开启动画，卡顿严重
+			value = false;
+			// #endif
+			// #ifndef APP-PLUS
+			value = true;
+			// #endif
+			return value
+		}
+	},
+	/**
+	 * @description 是否展开
+	 * @default false
+	 */
+	open: {
+		type: Boolean,
+		default: false
+	},
+	/**
+	 * @description 缩略图
+	 */
+	thumb: {
+		type: String,
+		default: ''
+	},
+	/**
+	 * @description 标题分隔线显示类型
+	 * @default 'auto'
+	 */
+	titleBorder: {
+		type: String,
+		default: 'auto'
+	},
+	/**
+	 * @description 是否显示分隔线
+	 * @default true
+	 */
+	border: {
+		type: Boolean,
+		default: true
+	},
+	/**
+	 * @description 是否显示右侧箭头
+	 * @default true
+	 */
+	showArrow: {
+		type: Boolean,
+		default: true
+	},
+	/**
+	 * @description 背景颜色
+	 * @default '#FFFFFF'
+	 */
+	bgColor: {
+		type: String,
+		default: '#FFFFFF'
+	},
+	/**
+	 * @description 内间距
+	 * @default '0 30rpx'
+	 */
+	padding: {
+		type: String,
+		default: '0 30rpx'
+	}
+};
+
+export type CollapseItemProps = ExtractPropTypes<typeof collpaseItemProps>;

package/components/{fu-collapse-item/fu-collapse-item.vue → collapse-item/src/collapse-item.vue}

@@ -35,18 +35,13 @@
 	</view>
 </template>
 
-<script>
-	import mpMixin from '../../libs/mixin/mpMixin.js'
-	import props from './props.js'
-	// #ifdef APP-NVUE
-	const dom = weex.requireModule('dom')
-	// #endif
+<script lang="ts" setup>
 	/**
 	 * CollapseItem 折叠面板子组件
 	 * @description 此组件折叠面板子组件 需配合fu-collapse组件一起使用
 	 * @property {String} title 标题文字
 	 * @property {String} thumb 标题左侧缩略图
-	 * @property {String} name 唯一标志符
+	 * @property {String | Number} name 唯一标志符
 	 * @property {Boolean} open = [true|false] 是否展开组件
 	 * @property {Boolean} titleBorder = [true|false] 是否显示标题分隔线
 	 * @property {Boolean} border = [true|false] 是否显示分隔线  默认true
@@ -59,158 +54,24 @@
 	 * @event {Function} change 某个item被打开或者收起时触发
 	 * @example <fu-collapse-item :title="item.title" v-for="(item, index) in list" :key="index">{{ item.name }}</fu-collapse-item>
 	 */
-	export default {
-		name:"FuCollapseItem",
-		mixins: [mpMixin, props],
-		data() {
-			// 随机生生元素ID，解决百度小程序获取同一个元素位置信息的bug
-			const elId = this.$fu.uuid()
-			return {
-				isOpen: false,
-				isheight: null,
-				height: 0,
-				elId,
-				nameSync: 0
-			};
-		},
-		updated(e) {
-			this.$nextTick(() => {
-				this.init(true)
-			})
-		},
-		created() {
-			this.collapse = this.getCollapse();
-			this.oldHeight = 0;
-			this.handleClick(this.open, 'init');
-		},
-		// #ifndef VUE3
-		destroyed() {
-			if (this.__isUnmounted) return
-			this.uninstall()
-		},
-		// #endif
-		// #ifdef VUE3
-		unmounted() {
-			this.__isUnmounted = true
-			this.uninstall()
-		},
-		// #endif
-		mounted() {
-			if (!this.collapse) return
-			if (this.name !== '') {
-				this.nameSync = this.name
-			} else {
-				this.nameSync = this.collapse.childrens.length + ''
-			}
-			if (this.collapse.names.indexOf(this.nameSync) === -1) {
-				this.collapse.names.push(this.nameSync)
-			} else {
-				console.warn(`name 值 ${this.nameSync} 重复`);
-			}
-			if (this.collapse.childrens.indexOf(this) === -1) {
-				this.collapse.childrens.push(this)
-			}
-			this.init()
-		},
-		methods: {
-			init(type) {
-				// #ifndef APP-NVUE
-				this.getCollapseHeight(type)
-				// #endif
-				// #ifdef APP-NVUE
-				this.getNvueHwight(type)
-				// #endif
-			},
-			
-			uninstall() {
-				if (this.collapse) {
-					this.collapse.childrens.forEach((item, index) => {
-						if (item === this) {
-							this.collapse.childrens.splice(index, 1)
-						}
-					})
-					this.collapse.names.forEach((item, index) => {
-						if (item === this.nameSync) {
-							this.collapse.names.splice(index, 1)
-						}
-					})
-				}
-			},
-			
-			handleClick(isOpen, type) {
-				if (this.disabled) return
-				this.isOpen = isOpen;
-				if (this.isOpen && this.collapse) {
-					this.collapse.setAccordion(this)
-				}
-				if (type !== 'init') {
-					this.collapse.handleChange(isOpen, this)
-				}
-			},
-			
-			getCollapseHeight(type, index = 0) {
-				const views = uni.createSelectorQuery().in(this)
-				views.select(`#${this.elId}`).fields({size: true}, data => {
-					// 兼容百度中可能获取不到节点信息 ，需要循环获取
-					if (index >= 10) return
-					if (!data) {
-						index++
-						this.getCollapseHeight(false, index)
-						return
-					}
-					// #ifdef APP-NVUE
-					this.height = data.height + 1;
-					// #endif
-					// #ifndef APP-NVUE
-					this.height = data.height;
-					// #endif
-					this.isheight = true;
-					if (type) return
-					this.handleClick(this.isOpen, 'init')
-				}).exec()
-			},
-			
-			getNvueHwight(type) {
-				const result = dom.getComponentRect(this.$refs['collapse--hook'], option => {
-					if (option && option.result && option.size) {
-						// #ifdef APP-NVUE
-						this.height = option.size.height + 1;
-						// #endif
-						// #ifndef APP-NVUE
-						this.height = option.size.height;
-						// #endif
-						this.isheight = true;
-						if (type) return
-						this.handleClick(this.open, 'init')
-					}
-				})
-			},
-			
-			/**
-			 * 获取父元素实例
-			 */
-			getCollapse(name = 'FuCollapse') {
-				let parent = this.$parent;
-				let parentName = parent.$options.name;
-				while (parentName !== name) {
-					parent = parent.$parent;
-					if (!parent) return false;
-					parentName = parent.$options.name;
-				}
-				return parent;
-			}
-		},
-		watch: {
-			open(val) {
-				this.isOpen = val
-				this.handleClick(val, 'init')
-			}
-		}
-	}
+	import { collpaseItemProps } from './collapse-item';
+	import { useCollapseItem } from './composables';
+	
+	defineOptions({ name: 'FuCollapseItem', options: { virtualHost: true } });
+	
+	const props = defineProps(collpaseItemProps);
+	
+	const {
+		elId,
+		isOpen,
+		isheight,
+		height,
+		handleClick
+	} = useCollapseItem(props);
 </script>
 
 <style lang="scss" scoped>
-	@import '../../libs/style/components.scss';
+	@use '../../../style/components.scss';
 	
 	.fu-collapse-item {
 		/* #ifndef APP-NVUE */
@@ -218,7 +79,7 @@
 		/* #endif */
 		
 		&__title {
-			@include flex(row);
+			@include components.flex(row);
 			/* #ifndef APP-NVUE */
 			width: 100%;
 			box-sizing: border-box;
@@ -232,7 +93,7 @@
 			}
 	
 			&-box {
-				@include flex(row);
+				@include components.flex(row);
 				/* #ifndef APP-NVUE */
 				width: 100%;
 				box-sizing: border-box;
@@ -286,7 +147,7 @@
 			}
 	
 			&-arrow {
-				@include flex;
+				@include components.flex;
 				/* #ifndef APP-NVUE */
 				box-sizing: border-box;
 				/* #endif */

package/components/collapse-item/src/composables/index.ts

@@ -0,0 +1 @@
+export * from './use-collapse-item'