uview-plus 3.4.85 → 3.4.91

package/changelog.md

@@ -1,3 +1,21 @@
+## 3.4.91（2025-08-14）
+feat: 新增agreement弹窗协议组件
+
+## 3.4.90（2025-08-13）
+feat: datetimepicker新增datehour类型
+
+## 3.4.89（2025-08-13）
+fix: 修复u-form-item组件缺少对labelPosition的判断
+
+## 3.4.88（2025-08-13）
+fix: subsection组件的disabled属性应为Boolean类型
+
+## 3.4.87（2025-08-12）
+improvment: 签名组件示例前缀改为up
+
+## 3.4.86（2025-08-12）
+feat: 新增signature签名签字组件
+
 ## 3.4.85（2025-08-11）
 feat: 完善图片裁剪功能支持props及JS两种方式
 

package/components/u-agreement/u-agreement.vue

@@ -0,0 +1,76 @@
+<style scoped lang="scss">
+    .agreement-content {
+        width: 100%;;
+        display: inline-block;
+        flex-direction: column;
+        .agreement-url {
+            display: inline-block;
+            color: blue;
+            // #ifdef H5
+            cursor: pointer;
+            // #endif
+        }
+    }
+</style>
+
+<template>
+    <view class="up-agreement">
+        <up-modal v-model:show="show" showCancelButton @confirm="confirm" @cancel="close" confirmText="阅读并同意">
+            <view class="agreement-content">
+                <slot>
+                    我们非常重视您的个人信息和隐私保护。为了更好地保障您的个人权益，在您使用我们的产品前，
+                    请务必审慎阅读《<text class="agreement-url" @click="urlClick('urlProtocol')">用户协议</text>》
+                    和《<text class="agreement-url" @click="urlClick('urlPrivacy')">隐私政策</text>》内的所有条款，
+                    尤其是:1.我们对您的个人信息的收集/保存/使用/对外提供/保护等规则条款，以及您的用户权利等条款;2. 约定我们的限制责任、免责
+                    条款;3.其他以颜色或加粗进行标识的重要条款。如您对以上协议有任何疑问，请先不要同意，您点击“同意并继续”的行为即表示您已阅读
+                    完毕并同意以上协议的全部内容。
+                </slot>
+            </view>
+        </up-modal>
+    </view>
+</template>
+
+<script>
+    export default {
+        name: 'up-agreement',
+        props: {
+            urlProtocol: {
+                type: String,
+                default: '/pages/user_agreement/agreement/info?title=用户协议'
+            },
+            urlPrivacy: {
+                type: String,
+                default: '/pages/user_agreement/agreement/info?title=隐私政策'
+            },
+        },
+        emits: ['confirm'],
+        data() {
+            return {
+                show: false
+            }
+        },
+        methods: {
+            close() {
+                // #ifdef H5
+                window.opener = null;
+                window.close();
+                // #endif
+                // #ifdef APP-PLUS
+                plus.runtime.quit();
+                // #endif
+            },
+            confirm() {
+                this.show = false;
+                this.$emit('confirm', 1);
+            },
+            showModal() {
+                this.show = true;
+            },
+            urlClick(type) {
+                uni.navigateTo({
+                    url: this[type]
+                });
+            }
+        }
+    }
+</script>

package/components/u-datetime-picker/u-datetime-picker.vue

@@ -176,6 +176,9 @@
 							case 'year-month':
 								format = 'YYYY-MM'
 								break;
+							case 'datehour':
+								format = 'YYYY-MM-DD HH'
+								break;
 							case 'datetime':
 								format = 'YYYY-MM-DD HH:mm'
 								break;

package/components/u-form-item/u-form-item.vue

@@ -15,7 +15,7 @@
 					v-if="required || leftIcon || label"
 					:style="{
 						width: addUnit(labelWidth || parentData.labelWidth),
-						marginBottom: parentData.labelPosition === 'left' ? 0 : '5px',
+						marginBottom: (labelPosition || parentData.labelPosition) === 'left' ? 0 : '5px',
 					}"
 				>
 					<!-- 为了块对齐 -->
@@ -62,7 +62,7 @@
 				v-if="!!message && parentData.errorType === 'message'"
 				class="u-form-item__body__right__message"
 				:style="{
-					marginLeft:  addUnit(parentData.labelPosition === 'top' ? 0 : (labelWidth || parentData.labelWidth))
+					marginLeft:  addUnit((labelPosition || parentData.labelPosition) === 'top' ? 0 : (labelWidth || parentData.labelWidth))
 				}"
 			>{{ message }}</text>
 		</slot>

package/components/u-signature/u-signature.vue

@@ -0,0 +1,498 @@
+<template>
+	<view class="u-signature">
+		<view class="u-signature__canvas-wrap">
+			<canvas 
+				class="u-signature__canvas" 
+				:canvas-id="canvasId" 
+				:disable-scroll="true"
+				@touchstart="touchStart"
+				@touchmove="touchMove"
+				@touchend="touchEnd"
+				:style="{
+					width: canvasWidth + 'px',
+					height: canvasHeight + 'px',
+					background: bgColor
+				}"
+			></canvas>
+		</view>
+		
+		<view v-if="showToolbar" class="u-signature__toolbar">
+			<view class="u-signature__toolbar-icons u-flex u-flex-x">
+				<view class="u-signature__toolbar-icon" @click="undo">
+					<up-icon name="arrow-left" size="22" :color="pathStack.length === 0 ? '#ccc' : '#999'"></up-icon>
+				</view>
+				<view class="u-signature__toolbar-icon" @click="clear">
+					<up-icon name="trash" size="25" color="#999"></up-icon>
+				</view>
+				<view class="u-signature__toolbar-icon" @click="toggleBrushSettings">
+					<up-icon name="edit-pen" size="25" color="#999"></up-icon>
+				</view>
+				<view class="u-signature__toolbar-icon" @click="toggleColorSettings">
+					<up-icon name="grid" size="24" color="#999"></up-icon>
+				</view>
+				<view class="u-signature__toolbar-icon" @click="exportSignature">
+					<up-icon name="checkmark" size="25" :color="isEmpty ? '#ccc' : '#999'"></up-icon>
+				</view>
+			</view>
+			
+			<!-- 笔画设置 -->
+			<view v-if="showBrushSettings" class="u-signature__brush-settings">
+				<view class="u-signature__progress">
+					<text class="u-signature__progress-label">笔画大小:</text>
+					<up-slider 
+						v-model="lineWidth" 
+						:min="1" 
+						:max="20" 
+						:step="1"
+						@show-value="true"
+						:value-show="(lineWidth)"
+					></up-slider>
+				</view>
+			</view>
+			
+			<!-- 颜色设置 -->
+			<view v-if="showColorSettings" class="u-signature__color-settings">
+				<view class="u-signature__color-picker">
+                    <text class="u-signature__color-label">笔画颜色:</text>
+					<view class="u-signature__colors">
+						<view 
+							v-for="(color, index) in presetColors" 
+							:key="index"
+							class="u-signature__color-item"
+							:class="{'u-signature__color-item--active': lineColor === color}"
+							:style="{ backgroundColor: color }"
+							@click="selectColor(color)"
+						></view>
+					</view>
+				</view>
+			</view>
+		</view>
+	</view>
+</template>
+
+<script>
+	export default {
+		name: 'u-signature',
+		props: {
+			// 画布宽度
+			width: {
+				type: [String, Number],
+				default: 300
+			},
+			// 画布高度
+			height: {
+				type: [String, Number],
+				default: 200
+			},
+			// 背景颜色
+			bgColor: {
+				type: String,
+				default: '#ffffff'
+			},
+			// 默认笔画颜色
+			color: {
+				type: String,
+				default: '#000000'
+			},
+			// 默认笔画粗细
+			thickness: {
+				type: [String, Number],
+				default: 3
+			},
+			// 是否显示工具栏
+			showToolbar: {
+				type: Boolean,
+				default: true
+			}
+		},
+		data() {
+			return {
+				canvasId: 'u-signature-' + Math.random().toString(36).substr(2, 9),
+				canvasWidth: 300,
+				canvasHeight: 200,
+				lineColor: '#000000',
+				lineWidth: 3,
+				isDrawing: false,
+				pathStack: [], // 存储绘制路径用于回退
+				currentPath: [], // 当前绘制路径
+				ctx: null,
+				isEmpty: true,
+				presetColors: [
+					'#000000', // 黑色
+					'#ff0000', // 红色
+					'#00ff00', // 绿色
+					'#0000ff', // 蓝色
+					'#ffff00', // 黄色
+					'#00ffff', // 青色
+					'#ff00ff', // 紫色
+					'#ffffff'  // 白色
+				],
+				showBrushSettings: false,
+				showColorSettings: false,
+				lastPoint: null // 保存上一个点的坐标
+			}
+		},
+		mounted() {
+			this.initCanvas()
+		},
+		watch: {
+			width: {
+				handler(newVal) {
+					this.canvasWidth = Number(newVal)
+				},
+				immediate: true
+			},
+			height: {
+				handler(newVal) {
+					this.canvasHeight = Number(newVal)
+				},
+				immediate: true
+			},
+			color: {
+				handler(newVal) {
+					this.lineColor = newVal
+				},
+				immediate: true
+			},
+			thickness: {
+				handler(newVal) {
+					this.lineWidth = Number(newVal)
+				},
+				immediate: true
+			}
+		},
+		methods: {
+			initCanvas() {
+				// #ifndef APP-NVUE
+				const ctx = uni.createCanvasContext(this.canvasId, this)
+				this.ctx = ctx
+				this.clearCanvas()
+				// #endif
+				
+				// #ifdef APP-NVUE
+				// NVUE环境下的处理
+				// #endif
+			},
+			
+			touchStart(e) {
+				if (!this.ctx) return
+				
+				this.isDrawing = true
+				this.isEmpty = false
+				this.currentPath = []
+				
+				const { x, y } = this.getCanvasPoint(e)
+				this.ctx.beginPath()
+				this.ctx.moveTo(x, y)
+				this.ctx.setLineCap('round')
+				this.ctx.setLineJoin('round')
+				this.ctx.setStrokeStyle(this.lineColor)
+				this.ctx.setLineWidth(this.lineWidth)
+				
+				// 记录起始点
+				this.currentPath.push({
+					x,
+					y,
+					type: 'start',
+					color: this.lineColor,
+					width: this.lineWidth
+				})
+				
+				// 保存上一个点
+				this.lastPoint = { x, y }
+				
+				// 阻止默认事件以提高性能
+				e.preventDefault()
+			},
+			
+			touchMove(e) {
+				if (!this.isDrawing || !this.ctx) return
+				
+				// 阻止默认事件以提高性能
+				e.preventDefault()
+				
+				const { x, y } = this.getCanvasPoint(e)
+				
+				// 使用更密集的点采样确保线条连贯性
+				if (this.lastPoint) {
+					// 计算两点间距离
+					const distance = Math.sqrt(Math.pow(x - this.lastPoint.x, 2) + Math.pow(y - this.lastPoint.y, 2))
+					// 根据距离确定插值点数量，确保点间距不超过1像素以获得更平滑的线条
+					const steps = Math.max(1, Math.floor(distance / 1))
+					
+					// 在两点间插入插值点
+					for (let i = 1; i <= steps; i++) {
+						const t = i / steps
+						const midX = this.lastPoint.x + (x - this.lastPoint.x) * t
+						const midY = this.lastPoint.y + (y - this.lastPoint.y) * t
+						
+						this.ctx.lineTo(midX, midY)
+						this.ctx.stroke()
+						this.currentPath.push({
+							x: midX,
+							y: midY,
+							type: 'move'
+						})
+					}
+				} else {
+					this.ctx.lineTo(x, y)
+					this.ctx.stroke()
+					this.currentPath.push({
+						x,
+						y,
+						type: 'move'
+					})
+				}
+				
+				this.ctx.draw(true)
+				
+				// 更新上一个点
+				this.lastPoint = { x, y }
+			},
+			
+			touchEnd(e) {
+				if (!this.isDrawing || !this.ctx) return
+				
+				this.isDrawing = false
+				this.ctx.closePath()
+				this.lastPoint = null
+				
+				// 将当前路径加入栈中用于回退
+				if (this.currentPath.length > 0) {
+					this.pathStack.push([...this.currentPath])
+				}
+			},
+			
+			// 获取相对于canvas的坐标点
+			getCanvasPoint(e) {
+				const touch = e.touches[0]
+				const rect = uni.createSelectorQuery().in(this).select('.u-signature__canvas').boundingClientRect()
+				
+				return new Promise((resolve) => {
+					rect.boundingClientRect(data => {
+						const x = touch.x - data.left
+						const y = touch.y - data.top
+						resolve({ x, y })
+					}).exec()
+				})
+			},
+			
+			// 同步获取canvas坐标点（兼容处理）
+			getCanvasPoint(e) {
+				const touch = e.touches[0]
+				const canvas = uni.createSelectorQuery().in(this).select('.u-signature__canvas')
+				
+				// 返回一个包含坐标的对象
+				return {
+					x: touch.x,
+					y: touch.y
+				}
+			},
+			
+			// 选择颜色
+			selectColor(color) {
+				this.lineColor = color
+			},
+			
+			// 回退操作
+			undo() {
+				if (this.pathStack.length === 0) return
+				
+				// 弹出最后一个路径
+				this.pathStack.pop()
+				
+				// 重新绘制
+				this.redraw()
+			},
+			
+			// 重新绘制所有路径
+			redraw() {
+				this.clearCanvas()
+				
+				if (this.pathStack.length === 0) {
+					this.isEmpty = true
+					return
+				}
+				
+				this.isEmpty = false
+				
+				// #ifndef APP-NVUE
+				this.pathStack.forEach(path => {
+					if (path.length === 0) return
+					
+					this.ctx.beginPath()
+					this.ctx.setLineCap('round')
+					this.ctx.setLineJoin('round')
+					
+					let lastPoint = null
+					path.forEach((point, index) => {
+						if (index === 0 && point.type === 'start') {
+							// 设置起始点样式
+							this.ctx.setStrokeStyle(point.color)
+							this.ctx.setLineWidth(point.width)
+							this.ctx.moveTo(point.x, point.y)
+							lastPoint = { x: point.x, y: point.y }
+						} else if (point.type === 'move') {
+							this.ctx.lineTo(point.x, point.y)
+							lastPoint = { x: point.x, y: point.y }
+						}
+					})
+					
+					this.ctx.stroke()
+					this.ctx.draw(true)
+				})
+				// #endif
+			},
+			
+			// 清空画布
+			clear() {
+				this.pathStack = []
+				this.currentPath = []
+				this.isEmpty = true
+				this.lastPoint = null
+				this.clearCanvas()
+			},
+			
+			// 清空画布内容
+			clearCanvas() {
+				if (!this.ctx) return
+				
+				// #ifndef APP-NVUE
+				this.ctx.setFillStyle(this.bgColor)
+				this.ctx.fillRect(0, 0, this.canvasWidth, this.canvasHeight)
+				this.ctx.draw()
+				// #endif
+			},
+			
+			// 导出签名图片
+			exportSignature() {
+				if (this.isEmpty) return
+				
+				// #ifndef APP-NVUE
+				uni.canvasToTempFilePath({
+					canvasId: this.canvasId,
+					fileType: 'png',
+					quality: 1,
+					success: (res) => {
+						this.$emit('confirm', res.tempFilePath)
+					},
+					fail: (err) => {
+						this.$emit('error', err)
+					}
+				}, this)
+				// #endif
+				
+				// #ifdef APP-NVUE
+				// NVUE环境下可能需要特殊处理
+				// #endif
+			},
+			
+			// 切换笔画设置显示
+			toggleBrushSettings() {
+				this.showBrushSettings = !this.showBrushSettings;
+				if (this.showBrushSettings) {
+					this.showColorSettings = false;
+				}
+			},
+			
+			// 切换颜色设置显示
+			toggleColorSettings() {
+				this.showColorSettings = !this.showColorSettings;
+				if (this.showColorSettings) {
+					this.showBrushSettings = false;
+				}
+			},
+		}
+	}
+</script>
+
+<style lang="scss" scoped>
+	.u-signature {
+		display: flex;
+		flex-direction: column;
+		
+		&__canvas-wrap {
+			border: 1px solid #e0e0e0;
+			border-radius: 4px;
+			overflow: hidden;
+		}
+		
+		&__canvas {
+			width: 100%;
+			height: 100%;
+		}
+		
+		&__toolbar {
+			margin-top: 5px;
+            background-color: #fff;
+		}
+		
+		&__toolbar-icons {
+			display: flex;
+			justify-content: space-between;
+			align-items: center;
+			padding: 1px 0;
+			// border: 1px solid #e0e0e0;
+			border-radius: 4px;
+		}
+		
+		&__toolbar-icon {
+			padding: 5px;
+		}
+		
+		&__brush-settings,
+		&__color-settings {
+			margin-top: 15px;
+			padding: 1px;
+			// border: 1px solid #e0e0e0;
+			border-radius: 4px;
+		}
+		
+		&__progress {
+			&-label {
+				display: block;
+				margin-bottom: 10px;
+				font-size: 14px;
+				color: #999;
+			}
+		}
+		
+		&__color-picker {
+			margin-bottom: 10px;
+		}
+		
+		&__color-label {
+			display: block;
+			margin-bottom: 10px;
+			font-size: 14px;
+			color: #999;
+		}
+		
+		&__colors {
+			display: flex;
+            flex-direction: row;
+			flex-wrap: wrap;
+			gap: 10px;
+		}
+		
+		&__color-item {
+			width: 30px;
+			height: 30px;
+			border-radius: 50%;
+			border: 2px solid #f0f0f0;
+			cursor: pointer;
+			
+			&--active {
+				border-color: #2979ff;
+				transform: scale(1.1);
+			}
+		}
+		
+		&__actions {
+			display: flex;
+            flex-direction: row;
+			gap: 10px;
+			justify-content: center;
+		}
+	}
+</style>

package/components/u-subsection/props.js

@@ -60,7 +60,7 @@ export const props = defineMixin({
         },
         // 是否禁用
         disabled: {
-            type: String,
+            type: Boolean,
             default: () => defProps.subsection.disabled
         }
     }

package/package.json

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