uview-plus 3.5.17 → 3.5.20

package/changelog.md

@@ -1,3 +1,12 @@
+## 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-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,6 +18,8 @@
 			:opacity="overlayOpacity"
 		></u-overlay>
 		<u-transition
+			class="u-popup__content—transition"
+			:style="contentStyleWrap"
 			:show="show"
 			:customStyle="transitionStyle"
 			:mode="pageInline ? 'none' : position"
@@ -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 | Number}	minHeight			最小高度，单位任意，数值默认为px（默认 '200' ）
+	 * @property {String | Number}	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.20",
   "description": "零云®uview-plus已兼容vue3支持多语言，100+全面的组件和便捷的工具会让您信手拈来。近期新增拖动排序、条码、图片裁剪、下拉刷新、虚拟列表、签名、Markdown等。",
   "keywords": [
     "uview",