stellar-ui-v2 1.37.0 → 1.38.0

package/common/usePosition.js

@@ -0,0 +1,159 @@
+// 位置钩子函数
+import utils from '@/common/utils.js';
+
+let pxMenuButtonTop = -1; // 胶囊按钮top 单位 px
+let pxMenuBottonBottom = -1; // 胶囊按钮bottom 单位 px
+let pxMenuButtonHeight = -1; // 胶囊按钮height 单位 px
+let pxMenuButtonWidth = -1; // 胶囊按钮width 单位 px
+let pxMenuButtonLeft = -1; // 胶囊按钮left 单位 px
+let pxMenuBottomRight = -1; // 胶囊按钮right 单位 px
+let navbarHeight = -1; // 自定义导航栏高度 单位 rpx
+let navbarWidth = -1; // 自定义导航栏宽度 单位 rpx
+let navbarTop = -1; // 自定义导航栏顶部到屏幕顶部的高度 单位 rpx
+let navbarBottom = -1; // 自定义导航栏底部到屏幕顶部的高度 单位 rpx
+
+let tabbarHeight = -1;
+
+let safeAreaInsetBottom = -1; // 底部安全距离
+
+let addHeight = 16; // 加宽的高度，自定义导航的加宽的总高度为 addHeight * 2 单位rpx
+
+let backgroundControlledHeight = 40; //背景图片可控距离 单位40rpx,背景图片会多做40px的高度
+
+// ui设计图上使用的参考胶囊按钮bottom位置 单位rpx
+// 设计图使用的iphone 13机型 px单位为83px，159.6153846153846为在iphone13下的rpx值
+let designedMenuBottonBottom = 159.6153846153846;
+let backgroundPositionY = -1; // 背景图片精确适配胶囊按钮后的 background-position ypos的值，单位rpx
+
+let systemInfo = utils.getWindowInfo();
+// 手机可使用区域的高度 单位rpx
+let windowHeight = utils.px2rpx(systemInfo.windowHeight);
+// 手机可使用区域的高度 单位px
+let pxWindowHeight = systemInfo.windowHeight;
+// 手机可使用区域的宽度 单位rpx
+let windowWidth = utils.px2rpx(systemInfo.windowWidth);
+// 手机可使用区域的宽度 单位px
+let pxWindowWidth = systemInfo.windowWidth;
+let flag = false;
+function getData(menuButtonInfo) {
+	if (pxMenuButtonTop === -1) {
+		// #ifdef H5
+
+		pxMenuButtonTop = 55;
+		pxMenuBottonBottom = 92;
+		pxMenuButtonWidth = 87;
+		pxMenuButtonHeight = 26;
+		pxMenuButtonLeft = 281;
+		pxMenuBottomRight = 368;
+		// #endif
+
+		// #ifdef MP
+		pxMenuButtonTop = menuButtonInfo.top;
+		pxMenuBottonBottom = menuButtonInfo.bottom;
+		pxMenuButtonWidth = menuButtonInfo.width;
+		pxMenuButtonHeight = menuButtonInfo.height;
+		pxMenuButtonLeft = menuButtonInfo.left;
+		pxMenuBottomRight = menuButtonInfo.right;
+		// #endif
+		// 支付宝开发工具的胶囊按钮数据是错误的，使用固定数据适配开发工具
+		// #ifdef MP-ALIPAY
+		if (systemInfo.platform === 'devtools') {
+			pxMenuButtonTop = 55;
+			pxMenuBottonBottom = 92;
+			pxMenuButtonWidth = 87;
+			pxMenuButtonHeight = 26;
+			pxMenuButtonLeft = 281;
+			pxMenuBottomRight = 368;
+		}
+		// #endif
+
+		navbarTop = utils.px2rpx(pxMenuButtonTop - uni.upx2px(addHeight));
+		navbarWidth = utils.px2rpx(pxMenuButtonLeft);
+		navbarHeight = utils.px2rpx(pxMenuButtonHeight + uni.upx2px(addHeight * 2));
+		navbarBottom = utils.px2rpx(pxMenuBottonBottom + uni.upx2px(addHeight));
+		if (systemInfo.safeAreaInsets == null || systemInfo.safeAreaInsets.bottom == 0) {
+			safeAreaInsetBottom = 20;
+		} else {
+			safeAreaInsetBottom = utils.px2rpx(systemInfo.safeAreaInsets.bottom);
+		}
+		// 计算tabbar的总高度，包含安全距离 单位 rpx
+		tabbarHeight = 0;
+		tabbarHeight += 94;
+		tabbarHeight += safeAreaInsetBottom;
+		// 背景图片精确适配胶囊按钮后的 background-position ypos的值，单位rpx
+		backgroundPositionY = -backgroundControlledHeight + utils.px2rpx(pxMenuBottonBottom) - designedMenuBottonBottom;
+	}
+}
+// 仅支付宝用，支付宝偶尔会在第一时间拿不到数据，通过延迟方法得到数据
+function refreshData(pageThis) {
+	setTimeout(() => {
+		let menuButtonInfo = uni.getMenuButtonBoundingClientRect();
+		if (menuButtonInfo.error == 1111) {
+			// 支付宝有可能得不到胶囊按钮信息
+			refreshData(pageThis);
+		} else {
+			getData(menuButtonInfo);
+			pageThis.navbarTop = navbarTop;
+			pageThis.navbarBottom = navbarBottom;
+			pageThis.navbarWidth = navbarWidth;
+			pageThis.navbarHeight = navbarHeight;
+			pageThis.safeAreaInsetBottom = safeAreaInsetBottom;
+			pageThis.backgroundPositionY = backgroundPositionY;
+			pageThis.tabbarHeight = tabbarHeight;
+			pageThis.windowHeight = windowHeight;
+			pageThis.windowWidth = windowWidth;
+		}
+	}, 100);
+}
+
+let usePosition = function () {
+	if (pxMenuButtonTop === -1) {
+		let menuButtonInfo = null;
+		// #ifdef H5
+		getData(menuButtonInfo);
+		// #endif
+		// #ifdef MP-WEIXIN
+		menuButtonInfo = wx.getMenuButtonBoundingClientRect();
+		getData(menuButtonInfo);
+		// #endif
+
+		// #ifdef MP-ALIPAY
+		menuButtonInfo = my.getMenuButtonBoundingClientRect();
+		if (menuButtonInfo.error == 1111) {
+			// 支付宝有可能得不到胶囊按钮信息
+		} else {
+			getData(menuButtonInfo);
+		}
+		// #endif
+	}
+	return {
+		/**自定义导航栏高度 单位 rpx*/
+		navbarHeight,
+		/**自定义导航栏宽度 单位 rpx*/
+		navbarWidth,
+		/**自定义导航栏顶部到屏幕顶部的高度 单位 rpx*/
+		navbarTop,
+		/**自定义导航栏底部到屏幕顶部的高度 单位 rpx*/
+		navbarBottom,
+		/**安全距离*/
+		safeAreaInsetBottom,
+		/**背景图片精确适配胶囊按钮后的 background-position ypos的值，单位rpx*/
+		backgroundPositionY,
+		/**计算tabbar的总高度，包含安全距离 单位 rpx*/
+		tabbarHeight,
+		/**手机可使用区域的高度 单位rpx*/
+		windowHeight,
+		/**手机可使用区域的高度 单位px*/
+		pxWindowHeight,
+		/**手机可使用区域的宽度 单位rpx*/
+		windowWidth,
+		/**手机可使用区域的宽度 单位px*/
+		pxWindowWidth,
+		/**支付宝专用方法 刷新数据
+		/*@pageThis 将this传进入，会将所有this上和pos上名称一致的属性，自动赋值
+		*/
+		refreshData,
+	};
+};
+
+export default usePosition;

package/common/utils.js

@@ -0,0 +1,303 @@
+import config from './config.js';
+
+let throLast = 0; // 节流方法用变量
+let throTimer = null; // 节流方法用的变量
+let windowWidth = null;
+let utils = {
+    /**px转rpx*/
+    px2rpx(px) {
+        if (windowWidth == null) {
+            windowWidth = this.getWindowInfo().windowWidth;
+        }
+        let rpx = (px * 750) / windowWidth;
+        return rpx;
+    },
+    /**rpx转px 比uni.upx2px精度更高*/
+    rpx2px(rpx) {
+        if (!rpx) return '0px';
+        if (windowWidth == null) {
+            windowWidth = this.getWindowInfo().windowWidth;
+        }
+        let px = (parseInt(rpx) * windowWidth) / 750;
+        return `${px}px`;
+    },
+    /**兼容css中的单位
+     * 如果值为数字，则拼接 'rpx'，否则直接返回字符串的值
+     */
+    addUnit(val) {
+        let newVal;
+        if (this.isNumber(val)) {
+            newVal = val + 'rpx';
+        } else {
+            newVal = val;
+        }
+
+        // #ifdef H5
+        if (newVal.indexOf('rpx') >= 0) {
+            newVal = this.rpx2px(newVal);
+        }
+        // #endif
+        return newVal;
+    },
+    /**拼接image的src
+     * val 图片地址
+     * isTheme 是否包含皮肤
+     * systemThemeBaseUrl 系统皮肤路径
+     */
+    joinSrc(val, isTheme = false, systemTheme = null) {
+        if (val === '' || val == null) {
+            val = '空图片/空图片.png';
+            // val = 'none'
+        }
+        // 如果图片地址包含http https前缀，则不拼接全局图片前缀
+        let baseUrl = '';
+        systemTheme = systemTheme ?? config.IMAGE_SYSTEM_THENE;
+        if (/^(data:image|wxfile:)/g.test(val)) {
+            return val;
+        } else if (/^(http:|https:)/g.test(val)) {
+            return val + '?' + new Date().getTime();
+        } else {
+            baseUrl = config.IMAGE_BASE_URL;
+            baseUrl += isTheme ? systemTheme : config.IMAGE_COMMON;
+            return baseUrl + val + '?' + new Date().getTime();
+        }
+    },
+    /**拼接background的url，支持 joinUrl('图片.png no-repeat cover/100% 100%')完整写法
+     * val 图片地址
+     * isTheme 是否包含皮肤
+     * systemThemeBaseUrl 系统皮肤路径
+     */
+    joinUrl(val, isTheme = false, systemTheme = null) {
+        if (val === '' || val == null) {
+            // val = '空图片/空图片.png'
+            return 'none';
+        }
+        // 如果图片地址包含http https前缀，则不拼接全局图片前缀
+        let baseUrl = '';
+        systemTheme = systemTheme ?? config.IMAGE_SYSTEM_THENE;
+        if (/^(http:|https:)/g.test(val) === false) {
+            baseUrl = config.IMAGE_BASE_URL;
+            baseUrl += isTheme ? systemTheme : config.IMAGE_COMMON;
+        }
+
+        // 第一个空格后面的内容，拼接到url外面去
+        let index = val.indexOf(' ');
+        let str = '';
+        let url = '';
+        let other = '';
+        if (index > 0) {
+            url = val.substr(0, index) + '?' + new Date().getTime();
+            other = val.substr(index + 1);
+            str = `url('${baseUrl}${url}') ${other}`;
+        } else {
+            url = val + '?' + new Date().getTime();
+            str = `url('${baseUrl}${url}')`;
+        }
+        return str;
+    },
+    /**字符串是否为数字
+     *@value 要判断的字符串
+     */
+    isNumber(value) {
+        return !isNaN(parseFloat(value)) && isFinite(value);
+    },
+    /**分转元
+     *@val 传入的分
+     *@digits 精度，-1 不使用精度 0 保留0位小数 1 保留1位小数 2保留2位小数
+     *@defaultVal 默认值
+     *@part 取值部分 0 取全部值 1 取元部分 2取角分部分
+     */
+    fenToYuan(val, digits = -1, defaultVal = '', part = 0) {
+        let part1 = Math.floor(val / 100); // 元部分
+        let part2 = val % 100; // 角分部分
+        let newVal = '';
+        if (val == null || val === '') {
+            newVal = defaultVal;
+        } else {
+            if (digits === -1) {
+                newVal = val / 100;
+            } else {
+                newVal = (val / 100).toFixed(digits);
+            }
+        }
+        newVal = String(newVal);
+        // 取全部
+        if (part === 0) {
+            return newVal;
+            // 取元部分
+        } else if (part === 1) {
+            return newVal.split('.')[0];
+            // 取角分部分
+        } else if (part === 2) {
+            if (newVal.split('.').length > 1) {
+                return '.' + newVal.split('.')[1];
+            } else {
+                return '';
+            }
+        }
+    },
+    /**节流
+     *@fn 要节流的方法
+     *@args 要节流方法的参数，如果最后一个参数是 {delay:2000}，则该参数为节流时间参数，不记入方法参数
+     */
+    thro(fn, ...args) {
+        let delay = 500;
+        let lastArgs = null;
+        if (args.length > 0) {
+            lastArgs = args[args.length - 1];
+            if (lastArgs?.delay != null) {
+                delay = lastArgs.delay;
+                args.pop();
+            }
+        }
+        let now = new Date().getTime();
+        if (throLast === 0 || now - throLast > delay) {
+            clearTimeout(throTimer);
+            fn.call(this, ...args);
+            throLast = now;
+            throTimer = setTimeout(() => {
+                throLast = 0;
+            }, delay);
+        }
+    },
+    /**
+     * 替换html默认样式
+     * @html 要替换的文本
+     * @tag 标签名
+     * @checkProperties 检测的样式属性，如果存在该属性，则不添加样式，支持字符串和数组
+     * @replaceProperty 替换后的样式属性值
+     */
+    richTextTagAddStyle(html, tag, checkProperties, replaceProperty) {
+        // 如果checkProperties为字符串，转成字符串数组
+        if (Object.prototype.toString.call(checkProperties) === '[object String]') {
+            checkProperties = [checkProperties];
+        }
+        // 构建正则表达式模式
+        var pattern = new RegExp(`<${tag}\\b((?:[^>]*\\s+)?style="[^"]*")?[^>]*>`, 'gi');
+
+        // 查找匹配的标签
+        var matches = html.match(pattern);
+        // 遍历匹配的标签并替换属性样式
+        if (matches) {
+            for (var i = 0; i < matches.length; i++) {
+                var match = matches[i];
+                var styleMatch = match.match(/style="([^"]+)"/i); // 提取标签中的style属性
+
+                if (styleMatch) {
+                    var styleValue = styleMatch[1];
+                    var styleProperties = styleValue.split(';');
+
+                    // 检查样式属性是否符合要求
+                    var hasMatchingProperty = false;
+                    for (var j = 0; j < styleProperties.length; j++) {
+                        var styleProperty = styleProperties[j].trim();
+
+                        // 检查属性名是否完全匹配
+                        var attributeName = styleProperty.split(':')[0].trim();
+                        if (checkProperties.includes(attributeName)) {
+                            hasMatchingProperty = true;
+                            break;
+                        }
+                    }
+
+                    // 如果标签匹配且样式属性不符合要求，则替换或添加指定属性的样式
+                    if (!hasMatchingProperty) {
+                        var replacedMatch = match.replace(/(style="[^"]*)(")/, `$1${replaceProperty}"`);
+                        html = html.replace(match, replacedMatch);
+                    }
+                } else {
+                    // 如果标签中没有样式属性，则添加指定属性的样式
+                    var replacedMatch = match.replace('>', ` style="${replaceProperty}">`);
+                    html = html.replace(match, replacedMatch);
+                }
+            }
+        }
+
+        // 返回替换后的HTML文本
+        return html;
+    },
+    /**
+     * 获取设备设置
+     */
+    getSystemSetting() {
+        // #ifdef MP-WEIXIN
+        return wx.getSystemSetting();
+        // #endif
+
+        // #ifndef MP-WEIXIN
+        return uni.getSystemInfoSync();
+        // #endif
+    },
+    /**
+     * 获取微信APP授权设置
+     */
+    getAppAuthorizeSetting() {
+        // #ifdef MP-WEIXIN
+        return wx.getAppAuthorizeSetting();
+        // #endif
+
+        // #ifndef MP-WEIXIN
+        return uni.getSystemInfoSync();
+        // #endif
+    },
+
+    /**
+     * 获取设备基础信息
+     */
+    getDeviceInfo() {
+        // #ifdef MP-WEIXIN
+        return wx.getDeviceInfo();
+        // #endif
+
+        // #ifndef MP-WEIXIN
+        return uni.getSystemInfoSync();
+        // #endif
+    },
+
+    /**
+     * 获取窗口信息
+     */
+    getWindowInfo() {
+        // #ifdef MP-WEIXIN
+        let windowInfo = wx.getWindowInfo();
+        windowInfo.safeAreaInsets = {
+            bottom: windowInfo.screenHeight - windowInfo.safeArea.bottom,
+        };
+        return windowInfo;
+        // #endif
+
+        // #ifndef MP-WEIXIN
+        return uni.getSystemInfoSync();
+        // #endif
+    },
+
+    /**
+     * 获取微信APP基础信息
+     */
+    getAppBaseInfo() {
+        // #ifdef MP-WEIXIN
+        return wx.getAppBaseInfo();
+        // #endif
+
+        // #ifndef MP-WEIXIN
+        return uni.getSystemInfoSync();
+        // #endif
+    },
+    querySelector(selectors, component, all = false) {
+        const selectFn = all ? 'selectAll' : 'select';
+        return new Promise((resolve, reject) => {
+            try {
+                uni.createSelectorQuery()
+                    .in(component)[selectFn](selectors)
+                    .boundingClientRect((data) => {
+                        resolve(data);
+                    })
+                    .exec();
+            } catch (e) {
+                reject(e);
+            }
+        });
+    },
+};
+
+export default utils;

package/components/item-view/item-view.vue

@@ -0,0 +1,84 @@
+<template>
+	<view class="demo-view-item" :class="{ hidden: !dataOpen }">
+		<view class="item-title" @click="onOpen">
+			<view class="title-text">{{ title }}</view>
+			<view class="title-icon">
+				<ste-icon code="&#xe676;" size="20" />
+			</view>
+		</view>
+		<view class="item-content">
+			<slot />
+		</view>
+	</view>
+</template>
+
+<script>
+export default {
+	props: {
+		title: String,
+		open: Boolean,
+	},
+	data() {
+		return {
+			dataOpen: false,
+		};
+	},
+	watch: {
+		open: {
+			handler(v) {
+				this.dataOpen = v;
+			},
+			immediate: true,
+		},
+	},
+	methods: {
+		onOpen() {
+			this.dataOpen = !this.dataOpen;
+			this.$emit('change', this.dataOpen);
+		},
+	},
+};
+</script>
+
+<style lang="scss" scoped>
+.demo-view-item {
+	width: 100%;
+	margin-bottom: 30rpx;
+	.item-title {
+		width: 100%;
+		height: 60rpx;
+		font-size: 28rpx;
+		color: #666;
+		display: flex;
+		align-items: center;
+		justify-content: space-between;
+		background-color: #f5f5f5;
+		padding: 0 18rpx;
+		.title-icon {
+			width: 20rpx;
+			height: 20rpx;
+			display: flex;
+			align-items: center;
+			justify-content: center;
+			transition: 0.3s;
+			transform: rotate(180deg);
+		}
+	}
+	.item-content {
+		top: -100%;
+		border: 1px solid #ddd;
+		padding: 18rpx;
+	}
+	&.hidden {
+		height: 60rpx;
+		.title-icon {
+			transform: rotate(0);
+		}
+		.item-content {
+			height: 0;
+			padding: 0 18rpx;
+			overflow: hidden;
+		}
+	}
+}
+</style>