uview-plus 3.5.17 → 3.5.22

package/changelog.md

@@ -1,3 +1,18 @@
+## 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条件编译兼容性
+
+## 3.5.19（2025-08-27）
+feat: popup新增iOS风格手势控制上下高度及下滑关闭
+
+## 3.5.18（2025-08-26）
+feat: 新增coupon优惠券组件
+
 ## 3.5.17（2025-08-26）
 fix: 分支合并冲突修复
 

package/components/u-checkbox/u-checkbox.vue

@@ -199,11 +199,12 @@
 					if (!this.parent) {
 						error('up-checkbox必须搭配up-checkbox-group组件使用')
 					}
+					let value = '';
 					// #ifdef VUE2
-					const value = this.parentData.value
+					value = this.parentData.value
 					// #endif
 					// #ifdef VUE3
-					const value = this.parentData.modelValue
+					value = this.parentData.modelValue
 					// #endif
 					// 设置初始化时，是否默认选中的状态，父组件u-checkbox-group的value可能是array，所以额外判断
 					if (this.checked) {

package/components/u-coupon/u-coupon.vue

@@ -0,0 +1,406 @@
+<template>
+	<view class="up-coupon" :class="[`up-coupon--${shape}`, `up-coupon--${type}`, `up-coupon--${size}`, {'up-coupon--disabled': disabled}]" 
+		:style="[couponStyle]" @click="handleClick">
+		<view class="up-coupon__content">
+			<!-- 左侧金额区域 -->
+			<view class="up-coupon__amount">
+				<slot name="unit" :unit="unit" :unitPosition="unitPosition" v-if="unitPosition === 'left'">
+					<text class="up-coupon__amount-unit" v-if="unitPosition === 'left'">{{ unit }}</text>
+				</slot>
+				<slot name="amount" :amount="amount">
+					<text class="up-coupon__amount-value">{{ amount }}</text>
+				</slot>
+				<slot name="unit" :unit="unit" :unitPosition="unitPosition" v-if="unitPosition === 'right'">
+					<text class="up-coupon__amount-unit" v-if="unitPosition === 'right'">{{ unit }}</text>
+				</slot>
+				<slot name="limit" :limit="limit">
+					<text class="up-coupon__amount-limit" v-if="limit">{{ limit }}</text>
+				</slot>
+			</view>
+			
+			<!-- 中间描述区域 -->
+			<view class="up-coupon__info">
+				<slot name="title" :title="title">
+					<text class="up-coupon__info-title">{{ title }}</text>
+				</slot>
+				<slot name="desc" :desc="desc">
+					<text class="up-coupon__info-desc" v-if="desc">{{ desc }}</text>
+				</slot>
+				<slot name="time" :time="time">
+					<text class="up-coupon__info-time" v-if="time">{{ time }}</text>
+				</slot>
+			</view>
+			
+			<!-- 右侧操作区域 -->
+			<view class="up-coupon__action u-padding-right-20">
+				<slot name="action" :actionText="actionText" :circle="circle">
+                    <up-tag type="error" :bgColor="type ? 'transparent' : '#eb433d'"
+                        :borderColor="type ? '#eee' : '#eb433d'" borderRadius="6px"
+                        size="medium" class="up-coupon__action-text"
+                        :shape="circle ? 'circle': 'circle'">{{ actionText }}</up-tag>
+				</slot>
+			</view>
+		</view>
+		
+		<!-- 红包绳子效果 -->
+		<view v-if="shape === 'envelope'" class="up-coupon__rope"></view>
+		
+		<!-- 默认插槽，可用于添加额外内容 -->
+		<slot></slot>
+	</view>
+</template>
+
+<script>
+	export default {
+		name: 'up-coupon',
+		props: {
+			// 金额
+			amount: {
+				type: [String, Number],
+				default: ''
+			},
+			// 金额单位
+			unit: {
+				type: String,
+				default: '￥'
+			},
+			// 单位位置
+			unitPosition: {
+				type: String,
+				default: 'left'
+			},
+			// 使用限制
+			limit: {
+				type: String,
+				default: ''
+			},
+			// 标题
+			title: {
+				type: String,
+				default: '优惠券'
+			},
+			// 描述
+			desc: {
+				type: String,
+				default: ''
+			},
+			// 有效期
+			time: {
+				type: String,
+				default: ''
+			},
+			// 操作按钮文字
+			actionText: {
+				type: String,
+				default: '使用'
+			},
+			// 形状：coupon-优惠券, envelope-红包, card-卡片
+			shape: {
+				type: String,
+				default: 'coupon'
+			},
+			// 尺寸：small, medium, large
+			size: {
+				type: String,
+				default: 'medium'
+			},
+			// 是否圆形按钮
+			circle: {
+				type: Boolean,
+				default: false
+			},
+			// 是否禁用
+			disabled: {
+				type: Boolean,
+				default: false
+			},
+			// 背景颜色
+			bgColor: {
+				type: String,
+				default: ''
+			},
+			// 文字颜色
+			color: {
+				type: String,
+				default: ''
+			},
+            // 内置背景类型
+            type: {
+				type: String,
+				default: ''
+			},
+		},
+		computed: {
+			couponStyle() {
+				const style = {};
+				if (this.bgColor) style.background = this.bgColor;
+				if (this.color) style.color = this.color;
+				return style;
+			},
+			dotCount() {
+				// 根据尺寸计算锯齿数量
+				const map = {
+					small: 8,
+					medium: 10,
+					large: 12
+				};
+				return map[this.size] || 10;
+			}
+		},
+		methods: {
+			handleClick() {
+				if (this.disabled) return;
+				this.$emit('click');
+			}
+		}
+	}
+</script>
+
+<style lang="scss" scoped>
+	.up-coupon {
+		position: relative;
+		overflow: hidden;
+		border-radius: 8rpx;
+		background: #ffebf0;
+		color: $u-main-color;
+		
+		&--coupon {
+			border-radius: 16rpx;
+			overflow: hidden;
+			
+			&::before {
+				content: '';
+				position: absolute;
+				left: -24rpx;
+				top: 50%;
+				transform: translateY(-50%);
+				width: 48rpx;
+				height: 48rpx;
+				background-color: #fff;
+				border-radius: 50%;
+			}
+			
+			&::after {
+				content: '';
+				position: absolute;
+				right: -24rpx;
+				top: 50%;
+				transform: translateY(-50%);
+				width: 48rpx;
+				height: 48rpx;
+				background-color: #fff;
+				border-radius: 50%;
+			}
+		}
+		
+		&--envelope {
+			border-radius: 16rpx;
+			
+			&::before {
+				content: '';
+				position: absolute;
+				left: 0;
+				top: 0;
+				right: 0;
+				height: 20rpx;
+				background: repeating-linear-gradient(-45deg, #ffd000, #ffd000 10rpx, #ffa000 10rpx, #ffa000 20rpx);
+			}
+		}
+		
+		&--card {
+			border-radius: 16rpx;
+		}
+
+        width: 100%;
+		
+		&--small {
+			// width: 520rpx;
+			height: 160rpx;
+		}
+		
+		&--medium {
+			// width: 600rpx;
+			height: 180rpx;
+		}
+		
+		&--large {
+			// width: 700rpx;
+			height: 220rpx;
+		}
+		
+		&--disabled {
+			opacity: 0.5;
+		}
+		
+		&__content {
+			display: flex;
+            flex-direction: row;
+			align-items: center;
+			justify-content: space-between;
+			height: 100%;
+			padding: 0 30rpx;
+			position: relative;
+			z-index: 2;
+		}
+		
+		&__amount {
+			display: flex;
+			flex-direction: column;
+			align-items: flex-start;
+            padding-left: 10rpx;
+			padding-right: 30rpx;
+            border-right: 1px dashed #ccc;
+			
+			&-unit {
+				font-size: 24rpx;
+				font-weight: normal;
+			}
+			
+			&-value {
+				font-size: 56rpx;
+				font-weight: bold;
+                color: red;
+				line-height: 1;
+				margin: 10rpx 0;
+			}
+			
+			&-limit {
+				font-size: 24rpx;
+				opacity: 0.9;
+			}
+		}
+		
+		&__info {
+			flex: 1;
+			display: flex;
+			flex-direction: column;
+			align-items: flex-start;
+            padding-left: 30rpx;
+			
+			&-title {
+				font-size: 32rpx;
+				font-weight: bold;
+				margin-bottom: 10rpx;
+			}
+			
+			&-desc {
+				font-size: 24rpx;
+				opacity: 0.9;
+				margin-bottom: 10rpx;
+			}
+			
+			&-time {
+				font-size: 20rpx;
+				opacity: 0.8;
+			}
+		}
+		
+		&__action {
+			display: flex;
+            flex-direction: row;
+			align-items: center;
+			justify-content: center;
+		}
+		
+		&__dots {
+			position: absolute;
+			left: 0;
+			top: 0;
+			bottom: 0;
+			width: 100%;
+			display: flex;
+			flex-direction: column;
+			justify-content: space-between;
+			padding: 30rpx 0;
+			z-index: 1;
+		}
+		
+		&__dot {
+			width: 32rpx;
+			height: 32rpx;
+			background-color: #fff;
+			border-radius: 50%;
+			margin: 0 -16rpx;
+			z-index: 3;
+		}
+		
+		&__rope {
+			position: absolute;
+			top: -40rpx;
+			left: 50%;
+			transform: translateX(-50%);
+			width: 80rpx;
+			height: 80rpx;
+			background: linear-gradient(to right, #ffd000, #ffa000);
+			border-radius: 40rpx 40rpx 0 0;
+			z-index: 1;
+			
+			&::before {
+				content: '';
+				position: absolute;
+				top: 0;
+				left: -20rpx;
+				width: 20rpx;
+				height: 40rpx;
+				background: linear-gradient(to bottom, #ffd000, #ffa000);
+				border-radius: 10rpx 0 0 10rpx;
+			}
+			
+			&::after {
+				content: '';
+				position: absolute;
+				top: 0;
+				right: -20rpx;
+				width: 20rpx;
+				height: 40rpx;
+				background: linear-gradient(to bottom, #ffd000, #ffa000);
+				border-radius: 0 10rpx 10rpx 0;
+			}
+		}
+		
+		// 不同主题样式
+		&--primary {
+			background: linear-gradient(90deg, #43afff, #3b8cff);
+            color: #fff;
+            .up-coupon__amount {
+                border-right: 1px dashed #eee;
+            }
+            .up-coupon__amount-value {
+                color: #fff;
+            }
+		}
+		
+		&--success {
+			background: linear-gradient(90deg, #67dda9, #19be6b);
+            color: #fff !important;
+            .up-coupon__amount {
+                border-right: 1px dashed #eee;
+            }
+            .up-coupon__amount-value {
+                color: #fff;
+            }
+		}
+		
+		&--warning {
+			background: linear-gradient(90deg, #ff9739, #ff6a39);
+            color: #fff;
+            .up-coupon__amount {
+                border-right: 1px dashed #eee;
+            }
+            .up-coupon__amount-value {
+                color: #fff;
+            }
+		}
+		
+		&--error {
+			background: linear-gradient(90deg, #ff7070, #ff4747);
+            color: #fff;
+            .up-coupon__amount {
+                border-right: 1px dashed #eee;
+            }
+            .up-coupon__amount-value {
+                color: #fff;
+            }
+		}
+	}
+</style>

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-popup/popup.js

@@ -21,10 +21,13 @@ export default {
         safeAreaInsetBottom: true,
         safeAreaInsetTop: false,
         closeIconPos: 'top-right',
-        round: 0,
+        round: '20px',
         zoom: true,
         bgColor: '',
         overlayOpacity: 0.5,
-        pageInline: false
+        pageInline: false,
+        touchable: false,
+        minHeight: '200px',
+        maxHeight: '600px'
     }
 }

package/components/u-popup/props.js

@@ -81,6 +81,21 @@ export const props = defineMixin({
         pageInline:{
 			type: Boolean,
 			default: () => defProps.popup.pageInline
+		},
+        // 是否页开启手势滑动
+        touchable:{
+			type: Boolean,
+			default: () => defProps.popup.touchable
+		},
+        // 手势滑动最小高度
+        minHeight:{
+			type: [String],
+			default: () => defProps.popup.minHeight
+		},
+        // 手势滑动最大高度
+        maxHeight:{
+			type: [String],
+			default: () => defProps.popup.maxHeight
 		}
     }
 })

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

@@ -18,7 +18,9 @@
 			:opacity="overlayOpacity"
 		></u-overlay>
 		<u-transition
-			:show="show"
+			class="u-popup__content—transition"
+			:style="contentStyleWrap"
+			:show="pageInline ? true : show"
 			:customStyle="transitionStyle"
 			:mode="pageInline ? 'none' : position"
 			:duration="duration"
@@ -33,6 +35,18 @@
 				@touchmove.stop.prevent="noop"
 			>
 				<u-status-bar v-if="safeAreaInsetTop"></u-status-bar>
+				<!-- 增加触摸区域，用于处理手势 -->
+				<view 
+					v-if="touchable && mode === 'bottom'"
+					class="u-popup__content__touch-area"
+					@touchstart="onTouchStart"
+					@touchmove="onTouchMove"
+					@touchend="onTouchEnd"
+					@touchcancel="onTouchEnd"
+				>
+					<!-- iOS风格的横条指示器 -->
+					<view class="u-popup__content__indicator"></view>
+				</view>
 				<slot></slot>
 				<view
 					v-if="closeable"
@@ -78,9 +92,12 @@
 	 * @property {Boolean}			safeAreaInsetBottom	是否为iPhoneX留出底部安全距离 （默认 true ）
 	 * @property {Boolean}			safeAreaInsetTop	是否留出顶部安全距离（状态栏高度） （默认 false ）
 	 * @property {String}			closeIconPos		自定义关闭图标位置（默认 'top-right' ）
-	 * @property {String | Number}	round				圆角值（默认 0）
+	 * @property {String | Number}	round				圆角值（默认 20px）
 	 * @property {String }	        bgColor				背景色值（默认 '' ）
 	 * @property {Boolean}			zoom				当mode=center时 是否开启缩放（默认 true ）
+	 * @property {Boolean}			touchable			是否开启底部弹窗手势功能（默认 false ）
+	 * @property {String}			minHeight			最小高度，单位任意，数值默认为px（默认 '200px' ）
+	 * @property {String}			maxHeight			最大高度，单位任意，数值默认为px（默认 '80%' ）
 	 * @property {Object}			customStyle			组件的样式，对象形式
 	 * @event {Function} open 弹出层打开
 	 * @event {Function} close 弹出层收起
@@ -91,7 +108,13 @@
 		mixins: [mpMixin, mixin, props],
 		data() {
 			return {
-				overlayDuration: this.duration + 50
+				overlayDuration: this.duration + 50,
+				// 触摸相关数据
+				touchStartY: 0,
+				touchStartHeight: 0,
+				isTouching: false,
+				// 当前弹窗高度
+				currentHeight: 'auto'
 			}
 		},
 		watch: {
@@ -145,6 +168,23 @@
 					})
 				}
 			},
+			contentStyleWrap() {
+				const style = {}
+				
+				// 处理手势滑动时的高度变化
+				if (this.mode === 'bottom' && this.touchable) {
+					if (this.currentHeight !== 'auto') {
+						style.height = this.currentHeight
+					}
+					if (this.maxHeight) {
+						style.maxHeight = addUnit(this.maxHeight)
+					}
+					if (this.minHeight) {
+						style.minHeight = addUnit(this.minHeight)
+					}
+				}
+				return style;
+			},
 			contentStyle() {
 				const style = {}
 				// 通过设备信息的safeAreaInsets值来判断是否需要预留顶部状态栏和底部安全局的位置
@@ -171,6 +211,7 @@
 						style.borderRadius = value
 					} 
 				}
+				
 				return deepMerge(style, addStyle(this.customStyle))
 			},
 			position() {
@@ -242,8 +283,61 @@
 						this.retryComputedComponentRect(grandChild)
 					}
 				}
-			}
+			},
 			// #endif
+			
+			// 触摸开始
+			onTouchStart(e) {
+				if (!this.touchable || this.mode !== 'bottom') return;
+				this.isTouching = true;
+				this.touchStartY = e.touches[0].clientY;
+				// 保存当前高度
+				this.touchStartHeight = this.$el.querySelector('.u-popup__content—transition').offsetHeight;
+			},
+			
+			// 触摸移动
+			onTouchMove(e) {
+				if (!this.isTouching || !this.touchable || this.mode !== 'bottom') return;
+				const touchY = e.touches[0].clientY;
+				const deltaY = touchY - this.touchStartY;
+				
+				// 只处理向上滑动（减小高度）和向下滑动（增加高度）
+				if (deltaY !== 0) {
+					const newHeight = this.touchStartHeight - deltaY;
+					const minHeight = parseFloat(addUnit(this.minHeight)) || 200;
+					const maxHeight = this.maxHeight ? 
+						(this.maxHeight.toString().includes('%') ? 
+							getWindowInfo().windowHeight * (parseFloat(this.maxHeight) / 100) : 
+							parseFloat(addUnit(this.maxHeight))) : 
+						getWindowInfo().windowHeight * 0.8;
+					
+					// 限制高度在最小值和最大值之间
+					if (newHeight >= minHeight && newHeight <= maxHeight) {
+						this.currentHeight = newHeight + 'px';
+					}
+				}
+				
+				// 阻止默认滚动行为
+				e.preventDefault();
+			},
+			
+			// 触摸结束
+			onTouchEnd(e) {
+				if (!this.isTouching || !this.touchable || this.mode !== 'bottom') return;
+				this.isTouching = false;
+				
+				const touchY = e.changedTouches[0].clientY;
+				const deltaY = touchY - this.touchStartY;
+				const velocity = Math.abs(deltaY) / (e.timeStamp - e.changedTouches[0].timestamp); // 简单的速度计算
+				
+				// 快速向下滑动时关闭弹窗
+				if (deltaY > 100 || (deltaY > 30 && velocity > 0.5)) {
+					this.close();
+				} else {
+					// 恢复到自适应高度
+					// this.currentHeight = 'auto';
+				}
+			}
 		}
 	}
 </script>
@@ -304,6 +398,27 @@
 				border-bottom-left-radius: 10px;
 				border-bottom-right-radius: 10px;
 			}
+			
+			&__touch-area {
+				// position: absolute;
+				top: 0;
+				left: 0;
+				right: 0;
+				height: 42rpx;
+				z-index: 10;
+				/* #ifndef APP-NVUE */
+				display: flex;
+				/* #endif */
+				justify-content: center;
+				align-items: center;
+			}
+			
+			&__indicator {
+				width: 100px;
+				height: 5px;
+				border-radius: 100px;
+				background-color: #c0c4cc;
+			}
 
 			&__close {
 				position: absolute;
@@ -334,4 +449,4 @@
 			}
 		}
 	}
-</style>
+</style>

package/package.json

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