rhb-server/mes-ui/rhb-app/components/FullScreenSignature.vue

<template>
	<view class="signature-fullscreen">
<!-- 		<view v-if="signatureImg" class="signature-view-link">
			<text @click="viewSignature"
				style="color: #007aff; text-decoration: underline; font-size: 36rpx; cursor: pointer;">
				查看现有签名
			</text>
		</view> -->
		<view class="signature-board">
			<l-signature disableScroll ref="signatureRef" :penColor="penColor" :penSize="penSize"
				:openSmooth="openSmooth" />
		</view>
		<view class="signature-btns">
			<u-button :ripple="true" style="font-size: 40rpx; width: 32%;" @click="onClick('return')"
				type="info">返回</u-button>
			<u-button :ripple="true" style="font-size: 40rpx; width: 32%;margin-left: 2%;" @click="onClick('clear')"
				type="error">清空</u-button>
			<u-button :ripple="true" style="font-size: 40rpx; width: 32%;margin-left: 2%;" @click="onClick('undo')"
				type="primary">撤消</u-button>
			<u-button :ripple="true" style="font-size: 40rpx; width: 32%;margin-left: 2%;" @click="onClick('save')"
				type="success">保存</u-button>
		</view>
	</view>
</template>

<script>
	export default {
		name: "FullScreenSignature",
		props: {
			signatureImg: String, // 现有签名图片
			penColor: {
				type: String,
				default: "red"
			},
			penSize: {
				type: Number,
				default: 4
			},
			openSmooth: {
				type: Boolean,
				default: true
			}
		},
		methods: {
			viewSignature() {
				// 你可以自定义查看签名的逻辑，比如预览图片
				uni.previewImage({
					urls: [this.signatureImg]
				});
			},
			onClick(type) {
				if(type == 'return'){
							this.showSign = false;
							this.$emit('save', 'return');
							return
				}
				if (type == 'openSmooth') {
					this.openSmooth = !this.openSmooth
					return
				}
				if (type == 'save') {
					this.$refs.signatureRef.canvasToTempFilePath({
						success: (res) => {
							// 检查是否为空
							if (res.isEmpty) {
								uni.showToast({
									title: "请先签字",
									icon: "none",
								});
								return;
							}

							// 获取图片路径
							const url = res.tempFilePath;
							// 检查是否为base64格式
							if (url && url.startsWith('data:image/')) {
								// 直接使用base64数据
								this.$emit('save', url);
								return
							} else {
								// 如果是文件路径，需要转换为base64
								this.convertToBase64(0, url);
								return;
							}

							// 关闭签名弹窗
							this.showSign = false;

							// 显示成功提示
							uni.showToast({
								title: '签名已保存',
								icon: 'success'
							});
						},
						fail: (err) => {

							uni.showToast({
								title: '生成签名图片失败',
								icon: 'none'
							});
						}
					})
					return
				}
				if (this.$refs.signatureRef)
					this.$refs.signatureRef[type]()
			},
			convertToBase64(type, filePath) {
				const fs = uni.getFileSystemManager();
				fs.readFile({
					filePath: filePath,
					encoding: "base64", // 指定编码为base64
					success: (res) => {
						// 构造data URL
						const base64String = `data:image/png;base64,${res.data}`;

						if (type === 0) {
							// 保存到表单
							this.$emit('save', base64String);


						} else {
							this.form.holderSignatureImg = base64String;
							this.holderShowSign = false;
						}


					},
					fail: (err) => {

						uni.showToast({
							title: '转换签名图片失败',
							icon: 'none'
						});
					},
				});
			},
			// onClick(action) {
			// 	if (action === 'clear') {
			// 		this.$refs.signatureRef.clear();
			// 	} else if (action === 'undo') {
			// 		this.$refs.signatureRef.undo();
			// 	} else if (action === 'save') {
			// 		this.$refs.signatureRef.save().then(img => {
			// 			this.$emit('save', img); // 通过emit把图片传给父页面
			// 		});
			// 	}
			// }
		}
	};
</script>

<style scoped>
	.signature-fullscreen {
		position: fixed;
		top: 0;
		left: 0;
		right: 0;
		bottom: 0;
		width: 100vw;
		background: #fff;
		z-index: 9999;
		display: flex;
		flex-direction: column;
		justify-content: flex-start;
		align-items: center;
		padding-top: 40rpx;
	}

	.signature-view-link {
		width: 100%;
		text-align: center;
		margin-bottom: 20rpx;
	}

	.signature-board {
		width: 750rpx;
		height: 1300rpx;
	}

	.signature-btns {
		display: flex;
		flex-direction: row;
		justify-content: space-between;
		margin-top: 30rpx;
		width: 90vw;
	}
</style>