uview-plus 3.5.20 → 3.5.25

package/changelog.md

@@ -1,3 +1,20 @@
+## 3.5.25（2025-08-28）
+fix: 修复左侧与右侧弹出时页面打开闪现问题
+
+## 3.5.24（2025-08-28）
+feat: 优化tooltip弹窗定位
+
+feat: tooltip组件新增forcePosition支持强制精确定位
+
+## 3.5.23（2025-08-28）
+improvment: 调整pdf阅读器默认高度
+
+## 3.5.22（2025-08-28）
+feat: 新增goods-sku商品SKU选购组件
+
+## 3.5.21（2025-08-27）
+fix: 修复popup组件手势控制参数注释
+
 ## 3.5.20（2025-08-27）
 improvement: 提升checkbox条件编译兼容性
 

package/components/u-goods-sku/u-goods-sku.vue

@@ -0,0 +1,432 @@
+<template>
+    <view class="up-goods-sku"> 
+        <view @click="open">
+            <slot name="trigger"></slot>
+        </view>
+        <up-popup
+            v-model:show="show"
+            mode="bottom"
+            :closeable="pageInline ? false : closeable"
+            :pageInline="pageInline"
+            :border-radius="20"
+            @close="close"
+        >
+            <view class="up-goods-sku-container" :style="{padding: pageInline ? '0px' : ''}">
+                <view class="up-goods-sku__header">
+                    <slot name="header">
+                        <view class="up-goods-sku__header__image">
+                            <image :src="goodsInfo.image || goodsInfo.picture" mode="aspectFill"></image>
+                        </view>
+                        <view class="up-goods-sku__header__info">
+                            <view class="up-goods-sku__header__info__price">
+                                <text class="up-goods-sku__header__info__price__symbol">¥</text>
+                                <text class="up-goods-sku__header__info__price__value">{{ price }}</text>
+                            </view>
+                            <view class="up-goods-sku__header__info__stock">库存 {{ stock }} 件</view>
+                            <view class="up-goods-sku__header__info__selected">已选: {{ selectedSkuText }}</view>
+                        </view>
+                    </slot>
+                </view>
+                
+                <scroll-view class="up-goods-sku__content" scroll-y>
+                    <view v-for="(treeItem, index) in skuTree" :key="index" class="up-goods-sku__content__item">
+                        <view class="up-goods-sku__content__item__title">{{ treeItem.label }}</view>
+                        <view class="up-goods-sku__content__item__list">
+                            <view 
+                                v-for="(leafItem, leafIndex) in treeItem.children" 
+                                :key="leafIndex"
+                                class="up-goods-sku__content__item__list__item"
+                                :class="{
+                                    'up-goods-sku__content__item__list__item--active': isSelected(treeItem.name, leafItem.id),
+                                    'up-goods-sku__content__item__list__item--disabled': isDisabled(treeItem.name, leafItem.id)
+                                }"
+                                @click="onSkuClick(treeItem.name, leafItem)"
+                            >
+                                <text>{{ leafItem.name }}</text>
+                            </view>
+                        </view>
+                    </view>
+                    
+                    <view class="up-goods-sku__content__count">
+                        <view class="up-goods-sku__content__count__title">购买数量</view>
+                        <view class="up-goods-sku__content__count__control">
+                            <up-number-box 
+                                v-model="buyNum" 
+                                :min="1" 
+                                :max="maxBuyNum"
+                                :disabled="!canBuy"
+                                @change="onNumChange"
+                            ></up-number-box>
+                        </view>
+                    </view>
+                </scroll-view>
+                
+                <view class="up-goods-sku__footer">
+                    <up-button 
+                        type="primary" 
+                        :disabled="!canBuy" 
+                        @click="onConfirm"
+                    >
+                        {{ confirmText }}
+                    </up-button>
+                </view>
+            </view>
+        </up-popup>
+    </view>
+</template>
+
+<script>
+	export default {
+		name: 'up-goods-sku',
+		props: {
+			// 商品信息
+			goodsInfo: {
+				type: Object,
+				default: () => ({})
+			},
+			// SKU树形结构
+			skuTree: {
+				type: Array,
+				default: () => []
+			},
+			// SKU列表
+			skuList: {
+				type: Array,
+				default: () => []
+			},
+			// 最大购买数量
+			maxBuy: {
+				type: Number,
+				default: 999
+			},
+			// 确认按钮文字
+			confirmText: {
+				type: String,
+				default: '确定'
+			},
+            // 是否显示关闭弹窗按钮
+            closeable: {
+				type: Boolean,
+				default: true
+			},
+            // 是否页面内联模式
+            pageInline: {
+				type: Boolean,
+				default: false
+			}
+		},
+		data() {
+			return {
+                show: false,
+				// 已选择的SKU
+				selectedSku: {},
+				// 购买数量
+				buyNum: 1
+			}
+		},
+		computed: {
+			// 当前价格
+			price() {
+				const selectedSkuComb = this.getSelectedSkuComb()
+				if (selectedSkuComb) {
+					return selectedSkuComb.price || selectedSkuComb.price_fee
+				}
+				return this.goodsInfo.price || this.goodsInfo.price_fee || 0
+			},
+			// 当前库存
+			stock() {
+				const selectedSkuComb = this.getSelectedSkuComb()
+				if (selectedSkuComb) {
+					return selectedSkuComb.stock || selectedSkuComb.quantity
+				}
+				return this.goodsInfo.stock || this.goodsInfo.quantity || 0
+			},
+			// 最大购买数量
+			maxBuyNum() {
+				const stock = this.stock
+				return stock > this.maxBuy ? this.maxBuy : stock
+			},
+			// 是否可以购买
+			canBuy() {
+				const selectedSkuCount = Object.keys(this.selectedSku).length
+				const skuTreeCount = this.skuTree.length
+				return selectedSkuCount === skuTreeCount && this.buyNum > 0 && this.stock > 0
+			},
+			// 已选SKU文字描述
+			selectedSkuText() {
+				const selected = []
+				Object.keys(this.selectedSku).forEach(key => {
+					const value = this.selectedSku[key]
+					if (value) {
+						this.skuTree.forEach(treeItem => {
+							if (treeItem.name === key) {
+								treeItem.children.forEach(leafItem => {
+									if (leafItem.id === value) {
+										selected.push(leafItem.name)
+									}
+								})
+							}
+						})
+					}
+				})
+				return selected.join(', ')
+			}
+		},
+		watch: {
+		},
+        emits: ['open', 'confirm', 'close'],
+        created() {
+            if (this.pageInline) {
+                this.show = true;
+            }
+		},
+		methods: {
+			// 判断SKU是否被选中
+			isSelected(skuKey, skuValueId) {
+				return this.selectedSku[skuKey] === skuValueId
+			},
+			// 判断SKU是否禁用
+			isDisabled(skuKey, skuValueId) {
+				// 构造一个临时的已选中SKU对象
+				const tempSelected = { ...this.selectedSku, [skuKey]: skuValueId }
+				
+				// 检查是否还有未选择的SKU维度
+				const selectedCount = Object.keys(tempSelected).filter(key => tempSelected[key]).length
+				const totalSkuCount = this.skuTree.length
+				
+				// 如果所有SKU都已选择，则检查组合是否存在
+				if (selectedCount === totalSkuCount) {
+					return !this.getSkuComb(tempSelected)
+				}
+				
+				// 检查当前选择的SKU是否会导致无法组成有效组合
+				for (let i = 0; i < this.skuList.length; i++) {
+					const sku = this.skuList[i]
+					let match = true
+					
+					// 检查已选中的SKU是否匹配
+					for (const key in tempSelected) {
+						if (tempSelected[key] && sku[key] !== tempSelected[key]) {
+							match = false
+							break
+						}
+					}
+					
+					if (match) {
+						return false
+					}
+				}
+				
+				return true
+			},
+			// SKU点击事件
+			onSkuClick(skuKey, skuValue) {
+				// 如果是禁用状态，直接返回
+				if (this.isDisabled(skuKey, skuValue.id)) {
+					return
+				}
+				
+				// 如果已选中，则取消选中
+				if (this.selectedSku[skuKey] === skuValue.id) {
+					this.$set(this.selectedSku, skuKey, '')
+				} else {
+					this.$set(this.selectedSku, skuKey, skuValue.id)
+				}
+			},
+			// 数量改变事件
+			onNumChange(e) {
+				this.buyNum = e.value
+			},
+			// 获取选中的SKU组合
+			getSelectedSkuComb() {
+				return this.getSkuComb(this.selectedSku)
+			},
+			// 根据已选SKU获取组合信息
+			getSkuComb(selectedSku) {
+				const selected = { ...selectedSku }
+				
+				// 过滤掉空值
+				Object.keys(selected).forEach(key => {
+					if (!selected[key]) {
+						delete selected[key]
+					}
+				})
+				
+				// 检查是否所有SKU都已选择
+				if (Object.keys(selected).length !== this.skuTree.length) {
+					return null
+				}
+				
+				// 查找匹配的SKU组合
+				for (let i = 0; i < this.skuList.length; i++) {
+					const sku = this.skuList[i]
+					let match = true
+					
+					for (const key in selected) {
+						if (sku[key] !== selected[key]) {
+							match = false
+							break
+						}
+					}
+					
+					if (match) {
+						return sku
+					}
+				}
+				
+				return null
+			},
+			// 重置选择
+			reset() {
+				this.selectedSku = {}
+				this.buyNum = 1
+			},
+            open() {
+                this.show = true;
+                this.$emit('open')
+            },
+			// 关闭弹窗
+			close() {
+                this.false = true;
+				this.$emit('close')
+			},
+			// 确认选择
+			onConfirm() {
+				if (!this.canBuy) {
+					return
+				}
+				
+				const selectedSkuComb = this.getSelectedSkuComb()
+				this.$emit('confirm', {
+					sku: selectedSkuComb,
+					goodsInfo: this.goodsInfo,
+					num: this.buyNum,
+					selectedText: this.selectedSkuText
+				})
+			}
+		}
+	}
+</script>
+
+<style lang="scss" scoped>
+	.up-goods-sku {
+		background-color: #fff;
+		overflow: hidden;
+
+        .up-goods-sku-container {
+            padding: 4rpx 30rpx;
+        }
+		
+		&__header {
+			display: flex;
+            flex-direction: row;
+			padding: 30rpx 0;
+			position: relative;
+			
+			&__image {
+				width: 180rpx;
+				height: 180rpx;
+				border-radius: 10rpx;
+				overflow: hidden;
+				margin-right: 20rpx;
+				
+				image {
+					width: 100%;
+					height: 100%;
+				}
+			}
+			
+			&__info {
+				flex: 1;
+				
+				&__price {
+					display: flex;
+                    flex-direction: row;
+					align-items: baseline;
+					margin-bottom: 20rpx;
+					
+					&__symbol {
+						font-size: 24rpx;
+						color: #fa3534;
+						margin-right: 4rpx;
+					}
+					
+					&__value {
+						font-size: 36rpx;
+						color: #fa3534;
+						font-weight: bold;
+					}
+				}
+				
+				&__stock {
+					font-size: 26rpx;
+					color: #999;
+					margin-bottom: 20rpx;
+				}
+				
+				&__selected {
+					font-size: 26rpx;
+					color: #333;
+				}
+			}
+		}
+		
+		&__content {
+			max-height: 600rpx;
+			padding: 0 30rpx 30rpx 0;
+			
+			&__item {
+				margin-bottom: 30rpx;
+				
+				&__title {
+					font-size: 28rpx;
+					color: #333;
+					margin-bottom: 20rpx;
+				}
+				
+				&__list {
+					display: flex;
+                    flex-direction: row;
+					flex-wrap: wrap;
+					
+					&__item {
+						padding: 10rpx 20rpx;
+						border: 2rpx solid #eee;
+						border-radius: 10rpx;
+						margin-right: 20rpx;
+						margin-bottom: 20rpx;
+						font-size: 26rpx;
+						color: #333;
+						
+						&--active {
+							border-color: #fa3534;
+							color: #fa3534;
+						}
+						
+						&--disabled {
+							color: #ccc;
+							border-color: #eee;
+						}
+					}
+				}
+			}
+			
+			&__count {
+				display: flex;
+                flex-direction: row;
+				align-items: center;
+				justify-content: space-between;
+				margin-top: 20rpx;
+				
+				&__title {
+					font-size: 28rpx;
+					color: #333;
+				}
+			}
+		}
+		
+		&__footer {
+			padding: 20rpx 0rpx 40rpx 0;
+		}
+	}
+</style>

package/components/u-pdf-reader/props.js

@@ -8,7 +8,7 @@ export default {
         // 组件高度
         height: {
             type: String,
-            default: '700px'
+            default: '500px'
         },
         // pdfjs资源域名
         baseUrl: {

package/components/u-popup/u-popup.vue

@@ -20,7 +20,7 @@
 		<u-transition
 			class="u-popup__content—transition"
 			:style="contentStyleWrap"
-			:show="show"
+			:show="pageInline ? true : show"
 			:customStyle="transitionStyle"
 			:mode="pageInline ? 'none' : position"
 			:duration="duration"
@@ -96,8 +96,8 @@
 	 * @property {String }	        bgColor				背景色值（默认 '' ）
 	 * @property {Boolean}			zoom				当mode=center时 是否开启缩放（默认 true ）
 	 * @property {Boolean}			touchable			是否开启底部弹窗手势功能（默认 false ）
-	 * @property {String | Number}	minHeight			最小高度，单位任意，数值默认为px（默认 '200' ）
-	 * @property {String | Number}	maxHeight			最大高度，单位任意，数值默认为px（默认 '80%' ）
+	 * @property {String}			minHeight			最小高度，单位任意，数值默认为px（默认 '200px' ）
+	 * @property {String}			maxHeight			最大高度，单位任意，数值默认为px（默认 '80%' ）
 	 * @property {Object}			customStyle			组件的样式，对象形式
 	 * @event {Function} open 弹出层打开
 	 * @event {Function} close 弹出层收起

package/components/u-tooltip/props.js

@@ -67,5 +67,10 @@ export const props = defineMixin({
             type: String,
             default: () => defProps.tooltip.triggerMode
         },
+        // 强制定位
+        forcePosition: {
+            type: Object,
+            default: () => defProps.tooltip.forcePosition
+        }
     }
 })

package/components/u-tooltip/tooltip.js

@@ -22,6 +22,7 @@ export default {
         overlay: true,
         showToast: true,
         popupBgColor: '',
-        triggerMode: 'longpress'
+        triggerMode: 'longpress',
+        forcePosition: {}
     }
 }

package/components/u-tooltip/u-tooltip.vue

@@ -29,9 +29,9 @@
 				duration="300"
 				:customStyle="{
 					position: 'absolute', 
-					top: addUnit(tooltipTop),
+					top: addUnit(tooltipTop, 'px'),
 					zIndex: zIndex,
-					...tooltipStyle
+					...tooltipStyleCpu
 				}"
 			>
 				<view
@@ -155,13 +155,14 @@
 				screenGap: 12,
 				// 三角形指示器的宽高，由于对元素进行了角度旋转，精确计算指示器位置时，需要用到其尺寸信息
 				indicatorWidth: 14,
-				tooltipStyle: {}
+				tooltipStyle: {},
+				calcReacted: false
 			}
 		},
 		watch: {
 			async propsChange() {
 				await this.getElRect()
-				this.getTooltipStyle();
+				// this.getTooltipStyle();
 			}
 		},
 		computed: {
@@ -169,28 +170,19 @@
 			// 当一些依赖参数变化时，需要重新计算气泡和指示器的位置信息
 			propsChange() {
 				return [this.text, this.buttons]
-			}
-		},
-		mounted() {
-			this.init()
-		},
-		emits: ["click"],
-		methods: {
-			addStyle,
-			addUnit,
-			async init() {
-				await this.getElRect()
-				this.getTooltipStyle();
 			},
 			// 计算气泡和指示器的位置信息
-			getTooltipStyle() {
+			tooltipStyleCpu() {
+				if (!this.calcReacted) {
+					return {}
+				}
 				const style = {},
 					sysInfo = getWindowInfo()
 				if (this.direction === 'left') {
 					// 右侧显示逻辑
 					style.transform = ``
 					// 垂直居中对齐
-					style.top = '-' + addUnit((this.tooltipInfo.height - this.indicatorWidth) / 2, 'px')
+					style.top = '-' + addUnit((this.textInfo.height - this.tooltipInfo.height) / 2, 'px')
 					style.right = addUnit(this.textInfo.width + this.indicatorWidth, 'px')
 					this.indicatorStyle = {}
 					this.indicatorStyle.right = '-4px'
@@ -199,7 +191,7 @@
 					// 右侧显示逻辑
 					style.transform = ``
 					// 垂直居中对齐
-					style.top = addUnit((this.textInfo.height - this.tooltipInfo.height) / 2, 'px')
+					style.top = '-' + addUnit((this.textInfo.height - this.tooltipInfo.height) / 2, 'px')
 					style.left = addUnit(this.textInfo.width + this.indicatorWidth, 'px')
 					this.indicatorStyle = {}
 					this.indicatorStyle.left = '-4px'
@@ -230,8 +222,21 @@
 						this.indicatorStyle.top = '-4px'
 					}
 				}
-				this.tooltipStyle = style
-				return style
+				let styleMerge = {...style, ...this.forcePosition}
+				this.tooltipStyle = styleMerge
+				return styleMerge
+			}
+		},
+		mounted() {
+			this.init()
+		},
+		emits: ["click"],
+		methods: {
+			addStyle,
+			addUnit,
+			async init() {
+				await this.getElRect()
+				// this.getTooltipStyle();
 			},
 			// 点击触发事件
 			async clickHander() {
@@ -292,6 +297,9 @@
 						// 获取气泡尺寸之后，将其隐藏，为了让下次切换气泡显示与隐藏时，有淡入淡出的效果
 						this.showTooltip = false
 						this.textInfo = await this.queryRect(this.textId)
+						sleep(500).then(() => {
+							this.calcReacted = true
+						})
 						resolve()
 					})
 				})

package/package.json

@@ -2,7 +2,7 @@
   "id": "uview-plus",
   "name": "uview-plus",
   "displayName": "零云®uview-plus3.0重磅发布，全面的Vue3鸿蒙跨端移动组件库，组件丰富维护更新稳定。",
-  "version": "3.5.20",
+  "version": "3.5.25",
   "description": "零云®uview-plus已兼容vue3支持多语言，100+全面的组件和便捷的工具会让您信手拈来。近期新增拖动排序、条码、图片裁剪、下拉刷新、虚拟列表、签名、Markdown等。",
   "keywords": [
     "uview",