113 lines
2.5 KiB
Vue
113 lines
2.5 KiB
Vue
|
<template>
|
||
|
|
<view>
|
||
|
|
<u-popup v-model="show" mode="bottom" :closeable="true" @close="show=false" 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="saveCanvas();loading=true" 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: {
|
||
|
|
// 是否显示d-handwritten
|
||
|
|
value: {
|
||
|
|
type: Boolean,
|
||
|
|
default: false
|
||
|
|
},
|
||
|
|
},
|
||
|
|
data() {
|
||
|
|
return {
|
||
|
|
show: this.value,
|
||
|
|
canvas: '',
|
||
|
|
loading: false
|
||
|
|
}
|
||
|
|
},
|
||
|
|
watch: {
|
||
|
|
value() {
|
||
|
|
this.show = this.value
|
||
|
|
}
|
||
|
|
},
|
||
|
|
methods: {
|
||
|
|
// 清除画布
|
||
|
|
retDraw() {
|
||
|
|
this.canvas.retDraw();
|
||
|
|
},
|
||
|
|
// 笔迹开始
|
||
|
|
penStart(event) {
|
||
|
|
this.canvas.penStart(event);
|
||
|
|
},
|
||
|
|
// 笔迹移动
|
||
|
|
penMove(event) {
|
||
|
|
this.canvas.penMove(event);
|
||
|
|
},
|
||
|
|
// 笔迹结束
|
||
|
|
penEnd(event) {
|
||
|
|
this.canvas.penEnd(event);
|
||
|
|
},
|
||
|
|
// 保存
|
||
|
|
async saveCanvas() {
|
||
|
|
let pic = await this.canvas.saveCanvas(this);
|
||
|
|
this.loading = false;
|
||
|
|
this.$emit('saveCanvas', pic)
|
||
|
|
}
|
||
|
|
},
|
||
|
|
onReady() {
|
||
|
|
this.$nextTick(() => {
|
||
|
|
this.canvas = new Mycanvas({
|
||
|
|
lineColor: this.lineColor,
|
||
|
|
lineSise: this.lineSise,
|
||
|
|
canvasName: "canvas"
|
||
|
|
}, this)
|
||
|
|
})
|
||
|
|
}
|
||
|
|
}
|
||
|
|
</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>
|