311 lines
3.7 KiB
Vue
311 lines
3.7 KiB
Vue
<template>
|
|
|
|
<view>
|
|
|
|
<!-- #ifdef MP-WEIXIN -->
|
|
|
|
<page-container
|
|
|
|
v-if="usePageContainer && show"
|
|
|
|
:show="show"
|
|
|
|
:overlay="false"
|
|
|
|
@leave="close"
|
|
|
|
/>
|
|
|
|
<!-- #endif -->
|
|
|
|
<u-popup v-model="show" mode="bottom" :closeable="true" @close="close" close-icon-pos='top-right'
|
|
|
|
:safe-area-inset-bottom="true" :mask-close-able="false">
|
|
|
|
<view class="handwritten flex-col flex-ali-center">
|
|
|
|
<text class="title">签字确认</text>
|
|
|
|
<view class="">
|
|
|
|
<canvas :style="{width: '686rpx',height: '480rpx',border:'1px solid #2979FF'}" disable-scroll="true"
|
|
|
|
data-id="1" @touchstart="penStart" @touchmove="penMove" @touchend="penEnd"
|
|
|
|
canvas-id="canvas"></canvas>
|
|
|
|
</view>
|
|
|
|
<view class="flex-row" style="margin-top: 80rpx;">
|
|
|
|
<view class="retDraw" @click="retDraw">重写</view>
|
|
|
|
<view style="width: 343rpx;height: 86rpx;">
|
|
|
|
<u-button :throttle-time="0" @click="onConfirm" type="primary" :loading="loading"
|
|
|
|
:custom-style="{borderRadius:'0'}">确定</u-button>
|
|
|
|
</view>
|
|
|
|
</view>
|
|
|
|
</view>
|
|
|
|
</u-popup>
|
|
|
|
</view>
|
|
|
|
</template>
|
|
|
|
|
|
|
|
<script>
|
|
|
|
import Mycanvas from "@/common/js/handwriting.js";
|
|
|
|
export default {
|
|
|
|
name: 'd-handwritten',
|
|
|
|
props: {
|
|
|
|
value: {
|
|
|
|
type: Boolean,
|
|
|
|
default: false
|
|
|
|
},
|
|
|
|
usePageContainer: {
|
|
|
|
type: Boolean,
|
|
|
|
default: false
|
|
|
|
},
|
|
|
|
},
|
|
|
|
data() {
|
|
|
|
return {
|
|
|
|
show: this.value,
|
|
|
|
canvas: null,
|
|
|
|
loading: false
|
|
|
|
}
|
|
|
|
},
|
|
|
|
watch: {
|
|
|
|
value(v) {
|
|
|
|
this.show = v
|
|
|
|
},
|
|
|
|
show(v) {
|
|
|
|
this.$emit('input', v)
|
|
|
|
if (v) {
|
|
|
|
this.$nextTick(() => this.initCanvas())
|
|
|
|
}
|
|
|
|
},
|
|
|
|
},
|
|
|
|
mounted() {
|
|
|
|
this.$nextTick(() => {
|
|
|
|
if (this.show) this.initCanvas()
|
|
|
|
})
|
|
|
|
},
|
|
|
|
methods: {
|
|
|
|
initCanvas() {
|
|
|
|
this.canvas = new Mycanvas({
|
|
|
|
lineColor: '#1A1A1A',
|
|
|
|
lineSise: 50,
|
|
|
|
canvasName: 'canvas',
|
|
|
|
}, this)
|
|
|
|
},
|
|
|
|
close() {
|
|
|
|
this.show = false
|
|
|
|
},
|
|
|
|
retDraw() {
|
|
|
|
if (this.canvas && typeof this.canvas.retDraw === 'function') {
|
|
|
|
this.canvas.retDraw()
|
|
|
|
}
|
|
|
|
},
|
|
|
|
penStart(event) {
|
|
|
|
if (!this.canvas) return
|
|
|
|
this.canvas.penStart(event)
|
|
|
|
},
|
|
|
|
penMove(event) {
|
|
|
|
if (!this.canvas) return
|
|
|
|
this.canvas.penMove(event)
|
|
|
|
},
|
|
|
|
penEnd(event) {
|
|
|
|
if (!this.canvas) return
|
|
|
|
this.canvas.penEnd(event)
|
|
|
|
},
|
|
|
|
onConfirm() {
|
|
|
|
this.loading = true
|
|
|
|
this.saveCanvas()
|
|
|
|
},
|
|
|
|
async saveCanvas() {
|
|
|
|
if (!this.canvas || typeof this.canvas.saveCanvas !== 'function') {
|
|
|
|
this.loading = false
|
|
|
|
uni.showToast({ title: '签名板未就绪', icon: 'none' })
|
|
|
|
return
|
|
|
|
}
|
|
|
|
try {
|
|
|
|
const pic = await this.canvas.saveCanvas(this)
|
|
|
|
this.loading = false
|
|
|
|
const base64 = typeof pic === 'string' ? pic : (pic && pic.base64)
|
|
|
|
if (!base64 && !(pic && pic.tempFilePath)) {
|
|
|
|
uni.showToast({ title: '请先签名', icon: 'none' })
|
|
|
|
return
|
|
|
|
}
|
|
|
|
this.show = false
|
|
|
|
this.$emit('saveCanvas', pic)
|
|
|
|
} catch (e) {
|
|
|
|
this.loading = false
|
|
|
|
uni.showToast({ title: '签名导出失败', icon: 'none' })
|
|
|
|
}
|
|
|
|
},
|
|
|
|
},
|
|
|
|
}
|
|
|
|
</script>
|
|
|
|
|
|
|
|
<style lang="scss" scoped>
|
|
|
|
.handwritten {
|
|
|
|
width: 750rpx;
|
|
|
|
background: #FFFFFF;
|
|
|
|
border-radius: 16rpx 16rpx 0px 0px;
|
|
|
|
height: calc(840rpx + env(safe-area-inset-bottom));
|
|
|
|
padding-bottom: env(safe-area-inset-bottom);
|
|
|
|
}
|
|
|
|
|
|
|
|
.title {
|
|
|
|
font-size: 32rpx;
|
|
|
|
font-family: PingFang SC-Regular, PingFang SC;
|
|
|
|
font-weight: 400;
|
|
|
|
color: #323233;
|
|
|
|
margin-top: 30rpx;
|
|
|
|
margin-bottom: 48rpx;
|
|
|
|
}
|
|
|
|
|
|
|
|
.retDraw {
|
|
|
|
width: 343rpx;
|
|
|
|
height: 86rpx;
|
|
|
|
background: #FFFFFF rgba(41, 121, 255, 0);
|
|
|
|
font-size: 32rpx;
|
|
|
|
font-family: PingFang SC-Medium, PingFang SC;
|
|
|
|
font-weight: 500;
|
|
|
|
color: #2979FF;
|
|
|
|
line-height: 86rpx;
|
|
|
|
text-align: center;
|
|
|
|
}
|
|
|
|
</style>
|
|
|