YNUtdPlatform/pages/realName/components/signView.vue

<template>
    <view class="signBox column-me">
        <!-- 这个是自定义的title-可根据自己封装的title的作为调整 -->
        <status-bar title="电子签名" :bgColor="null"></status-bar>
        <view class="topHint">请绘制清晰可辨的签名并保存</view>
        <canvas class="canvas flex1" :canvas-id="cid" :id="cid" @touchstart="touchstart" @touchmove="touchmove"
            @touchend="touchend" :disable-scroll="true"></canvas>
        <view class="btn margin-top10">
            <view class="cancelBtn" @click="reWrite">重写</view>
            <view class="saveBtn margin-left30" @click="save">保存</view>
        </view>
    </view>
</template>

<script>
import { pathToBase64, base64ToPath } from 'image-tools';
import config from '@/config'
    export default {
        components: {},
		props: {
			photoType: {
			  type: String,
			  default: ''
			}
		},
        data() {
            return {
                line: [],
                radius: 0,
                taskId: '',
                //以下与签名有关参数
                dom: null,
                cid: 'canvas', //画布id
                Strokes: [],
                showCanvasDialog: false,
                canvasImg: '', //签名图片
            }
        },
        onLoad(e) {
            this.taskId = e.taskId
        },
        computed: {},
        mounted: function() {
            let that = this
            this.initCanvas()
        },
        methods: {
            initCanvas() {
                let that = this
                this.$nextTick(function() {
                    this.dom = uni.createCanvasContext(this.cid, this);
                    var query = wx.createSelectorQuery();
                    query.select('#canvas').boundingClientRect();
                    query.exec(function(res) {
                        let widths = res[0].width
                        let heights = res[0].height
                        that.dom.rect(0, 0, widths, heights)
                        that.dom.setFillStyle('#FFFFFF')
                        that.dom.fill()
                        that.dom.draw()
                    })
                });
            },
            touchstart(e) {
                this.Strokes.push({
                    imageData: null,
                    style: {
                        color: '#000000',
                        lineWidth: '3',
                    },
                    points: [{
                        x: e.touches[0].x,
                        y: e.touches[0].y,
                        type: e.type,
                    }]
                })
                this.drawLine(this.Strokes[this.Strokes.length - 1], e.type);
            },
            touchmove(e) {
                this.Strokes[this.Strokes.length - 1].points.push({
                    x: e.touches[0].x,
                    y: e.touches[0].y,
                    type: e.type,
                })
                this.drawLine(this.Strokes[this.Strokes.length - 1], e.type);
            },
            touchend(e) {
                if (this.Strokes[this.Strokes.length - 1].points.length < 2) { //当此路径只有一个点的时候
                    this.Strokes.pop();
                }
            },
            drawLine(StrokesItem, type) {
                if (StrokesItem.points.length > 1) {
                    this.dom.setLineCap('round')
                    this.dom.setStrokeStyle(StrokesItem.style.color);
                    this.dom.setLineWidth(StrokesItem.style.lineWidth);
                    this.dom.moveTo(StrokesItem.points[StrokesItem.points.length - 2].x, StrokesItem.points[StrokesItem
                        .points.length -
                        2].y);
                    this.dom.lineTo(StrokesItem.points[StrokesItem.points.length - 1].x, StrokesItem.points[StrokesItem
                        .points.length -
                        1].y);
                    this.dom.stroke();
                    this.dom.draw(true);
                }
            },
            //重写签名
            reWrite() {
                this.Strokes = [];
                this.dom.draw();
                this.initCanvas()
            },
            // 保存图片
            save() {
				console.log(this.photoType)
                let that = this
                uni.canvasToTempFilePath({
                    canvasId: 'canvas',
                    fileType: 'png',
                    quality: 1, //图片质量
                    success: function(res) {
                        // let imgs = [res.tempFilePath]
						console.log(res)
						uni.uploadFile({
							url: config.realFileUrl+`file/upload`, //服务器地址
							// fileType:"pdf",//ZFB必填,不然报错
							filePath: res.tempFilePath,//这个就是我们上面拍照返回或者先中照片返回的数组
							name: "file",
							formData: {
								photoType:that.photoType,
							},
							success: (uploadFileRes) => {
								console.log(uploadFileRes);
								if(uploadFileRes.statusCode==200){
									uploadFileRes=JSON.parse(uploadFileRes.data)
									if(uploadFileRes.code==200){
										that.$emit("signConfirm",uploadFileRes.data.url,res.tempFilePath)
										// this.faceImgUrl=base64;
										// this.entryCruxBean.facePath=JSON.parse(uploadFileRes.data).data.url;
									}else{
										uni.$u.toast(uploadFileRes.msg);
									}
								}else{
									uni.$u.toast('上传失败');
								}
							}
						});
                    },
                    fail(e) {
                        console.log(e)
                    }
                })
            },
			imgToBase64(data) {
			  return new Promise((resolve, reject) => {
				pathToBase64(data)
				  .then(base64 => {
					resolve(base64)
				  })
				  .catch(error => {
					console.error(error)
					reject(error)
				  })
			  })
			},
        }
    }
</script>

<style scoped lang="less">
    .signBox {
        position: relative;
        overflow: hidden;
        background-color: #F6F6F6;
        height: 100%;
        width: 100%;

        .canvas {
            width: 100%;
            background: #FFFFFF;
        }

        .topHint {
            width: 100%;
            height: 60rpx;
            line-height: 60rpx;
            font-size: 28rpx;
            color: #6D7984;
            text-align: center;
            background: ;
        }

        .btn {
            width: 90%;
			margin: 0 auto;
            height: 132rpx;
            display: flex;
            align-items: center;
            justify-content: space-between;

            .saveBtn {
                width: 40%;
                height: 70rpx;
                line-height: 70rpx;
                background: #215AA0;
                border-radius: 20rpx;
                text-align: center;
                font-size: 32rpx;
                color: #FFFFFF;
            }

            .cancelBtn {
                width: 40%;
                height: 70rpx;
                line-height: 70rpx;
                background: #FFFFFF;
                border-radius: 20rpx;
                text-align: center;
                font-size: 32rpx;
                color: #202233;
                border: 1px solid #BBC4CC;
            }
        }
    }
</style>