diff --git a/src/components/AiDrawer.vue b/src/components/AiDrawer.vue
index 732d7284..ad3da7ea 100644
--- a/src/components/AiDrawer.vue
+++ b/src/components/AiDrawer.vue
@@ -1,7 +1,8 @@
-
- {{ placeholder }}
+
+
+ {{ placeholder }}
@@ -17,7 +18,7 @@ export default {
event: "input"
},
props: {
- seal: String,
+ seal: {default: null},
placeholder: {type: String, default: "请在此处清晰书写你的签名"},
},
data() {
@@ -26,6 +27,11 @@ export default {
url: "/components/pages/sealDrawer"
}
}
+ },
+ methods: {
+ getSeal(image) {
+ this.$emit("input", image)
+ }
}
}
@@ -42,6 +48,11 @@ export default {
& > div {
height: 100%;
}
+
+ .sealImage {
+ width: 100%;
+ height: 100%;
+ }
}
.placeholder {
diff --git a/src/components/pages/sealDrawer.vue b/src/components/pages/sealDrawer.vue
index 82d02f16..7815b65f 100644
--- a/src/components/pages/sealDrawer.vue
+++ b/src/components/pages/sealDrawer.vue
@@ -1,13 +1,11 @@
-
- 重写
-
+ 重写
+ 提交
{{ placeholder }}
-
@@ -16,12 +14,7 @@
export default {
name: "sealDrawer",
appName: "签名",
- model: {
- prop: "seal",
- event: "input"
- },
props: {
- seal: String,
placeholder: {type: String, default: "请在此处清晰书写你的签名"},
},
data() {
@@ -45,48 +38,51 @@ export default {
let canvas = uni.createCanvasContext("drawer")
if (canvas) {
this.drawer = canvas
- this.drawer.lineWidth = 3
- this.drawer.shadowColor = '#333'
- this.drawer.strokeStyle = '#333'
- this.drawer.shadowBlur = 2
+ this.drawer.setLineWidth(3)
+ this.drawer.setShadow(0, 0, 2, '#333')
+ this.drawer.setStrokeStyle('#333')
}
})
},
handleDrawStart(e) {
this.drawing = true
- const canvasX = e.offsetX
- const canvasY = e.offsetY
+ const {x, y} = e.changedTouches?.[0] || {}
this.drawer?.beginPath()
- this.drawer?.moveTo(canvasX, canvasY)
+ this.drawer?.moveTo(x, y)
},
handleDrawEnd() {
this.drawing = false
- const result = this.drawer.canvas?.toDataURL("image/png", 1)
- this.$emit("input", result)
- this.$emit("update:seal", result)
},
handleDrawing(e) {
- console.log(e)
if (this.drawing) {
- const t = e.target?.getBoundingClientRect()
- let canvasX
- let canvasY
- // 根据触发事件类型来进行定位
- if (e.type == "touchmove") {
- canvasX = e.changedTouches[0].clientX - t.x
- canvasY = e.changedTouches[0].clientY - t.y
- } else {
- canvasX = e.offsetX
- canvasY = e.offsetY
- }
- // 连接到移动的位置并上色
- this.drawer?.lineTo(canvasX, canvasY)
- this.drawer?.stroke()
+ const {x, y} = e.changedTouches?.[0] || {}
+ // // 连接到移动的位置并上色
+ this.drawer.lineTo(x, y)
+ this.drawer.stroke()
+ this.drawer.draw(true)
+ this.drawer?.beginPath()
+ this.drawer?.moveTo(x, y)
}
},
handleClean() {
- this.drawer.clearRect(0, 0, this.drawer.canvas.width, this.drawer.canvas.height)
+ this.drawer.clearRect(0, 0, document.body.clientWidth, document.body.clientHeight)
+ this.drawer.draw()
this.drawPlaceholder = true
+ },
+ submit() {
+ uni.canvasToTempFilePath({
+ canvasId: 'drawer',
+ quality: 1,
+ success: res => {
+ // 在H5平台下,tempFilePath 为 base64
+ const result = res.tempFilePath
+ uni.navigateBack({
+ success: () => {
+ uni.$emit("pagePicker:custom", result)
+ }
+ })
+ }
+ })
}
}
}
@@ -116,19 +112,16 @@ export default {
display: flex;
align-items: center;
justify-content: center;
- gap: 8px;
- color: rgba(#fff, .6);
+ color: #fff;
cursor: pointer;
right: 16px;
top: 16px;
+ font-size: 20px;
+ z-index: 2;
- .AiIcon {
- width: auto;
- height: auto;
- }
-
- &:hover {
- color: #fff;
+ &.left {
+ right: unset;
+ left: 16px;
}
}
diff --git a/src/project/hljmz/AppRecoScore/lib/dynaComponent.vue b/src/project/hljmz/AppRecoScore/lib/dynaComponent.vue
index 0d9ffd49..e7ff7430 100644
--- a/src/project/hljmz/AppRecoScore/lib/dynaComponent.vue
+++ b/src/project/hljmz/AppRecoScore/lib/dynaComponent.vue
@@ -2,30 +2,39 @@