This commit is contained in:
2025-12-18 13:22:47 +08:00
3 changed files with 27 additions and 8 deletions
@@ -1,7 +1,7 @@
<template>
<div class="signature-wrap">
<canvas id="canvas"></canvas>
<div class="action-buttons">
<div :class="isLikelyMobile() ? 'action-buttons' : 'action-buttons pc-action-buttons'">
<button @click="clear" class="action-button-danger" type="button">清空</button>
<button @click="undo" class="action-button-warning" type="button">撤销</button>
<button @click="save" class="action-button-primary" type="button">确定</button>
@@ -48,6 +48,13 @@ module.exports = {
rotate() {
signature.getRotateCanvas(90)
},
isLikelyMobile() {
const isTouchDevice = 'ontouchstart' in window || navigator.maxTouchPoints > 0;
const isSmallScreen = window.screen.width <= 768;
const hasMobileUA = /Android|iPhone|iPad|iPod|BlackBerry|IEMobile|Opera Mini/i.test(navigator.userAgent);
return hasMobileUA || (isTouchDevice && isSmallScreen);
},
save() {
if (signature.isEmpty()) {
alert("请签字后再保存")
@@ -56,7 +63,11 @@ module.exports = {
// const png = signature.getPNG()
//旋转一下 横过来
const rotateCanvas = signature.getRotateCanvas(-90)
this.$emit("save", rotateCanvas.toDataURL())
if (this.isLikelyMobile()) {
this.$emit("save", rotateCanvas.toDataURL())
} else {
this.$emit("save", signature.toDataURL())
}
}
},
mounted() {
@@ -110,6 +121,13 @@ module.exports = {
row-gap: 20px;
}
.signature-wrap .pc-action-buttons {
bottom: 50px;
right: 50px;
left: unset;
transform: rotate(0deg);
}
.action-buttons button {
color: #ffffff;
position: relative;
@@ -51,7 +51,6 @@ module.exports = {
this.$emit("input", this.signatureContent)
}
this.signatureAddress = origin + "/platform/signature/scanPcCode?id=" + this.id
console.log(this.signatureAddress)
},
signatureAgain() {
const val = sessionStorage.getItem("h5-scan-code-signature-" + this.id)
@@ -59,8 +58,8 @@ module.exports = {
this.$emit("input", val)
}
},
mounted() {
this.init()
async mounted() {
await this.init()
webSocketPubSub.subscribe("h5-scan-code-signature", (data) => {
console.info("ws:收到签字成功消息:", data)
this.signatureContent = data.value
@@ -69,8 +68,10 @@ module.exports = {
// 可选:轮询或 watch ready 状态
const checkReady = () => {
if (window.webSocketPubSub.ws.readyState === 1) {
this.loading = false; // 允许签字
if (webSocketPubSub.ws && webSocketPubSub.ws.readyState === WebSocket.OPEN) {
console.info("ws.readyState is open");
this.loading = false;
console.log(this.signatureAddress)
} else {
setTimeout(checkReady, 100);
}
@@ -202,7 +202,7 @@
// )
// 连接建立时不立即发送 join,等待订阅完成
this.ping()
console.log('websocket open success')
console.info('websocket open success')
}
}