office-tools-m/pages/sign/index.vue

<template>
<<<<<<< HEAD
    <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 margin-bottom10">
            <view class="cancelBtn" @click="reWrite">重写</view>
            <view class="saveBtn margin-left30" @click="save">保存</view>
        </view>
    </view>
</template>

<script>
    export default {
        components: {},
        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() {
                let that = this
                uni.canvasToTempFilePath({
                    canvasId: 'canvas',
                    fileType: 'png',
                    quality: 1, //图片质量
                    success: function(res) {
                        let imgs = [res.tempFilePath]
                        that.$.upload_img(imgs, 0, res => {
                            let imgUrl = res.data //签名图片
                            let mediaUrl = that.$.get_data('mediaUrl') //采集图片
                            if (that.$.isEmpty(mediaUrl)) {
                                mediaUrl = ''
                            }
                            that.$.ajax("POST", "/customer/user/checkTask", {
                                taskId: that.taskId,
                                status: 1, //状态：1同意2拒绝    
                                signImage: imgUrl,
                                userVideo: mediaUrl,
                            }, (res) => {
                                if (res.code === 1000) {
                                    that.$.ti_shi(res.message)
                                    setTimeout(() => {
                                        uni.$emit('signOk')
                                        that.$.back()
                                    }, 1000)
                                } else {
                                    that.$.ti_shi(res.message)
                                }
                            });
                        })
                    },
                    fail(e) {
                        console.log(e)
                    }
                })
            }
        }
    }
</script>

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

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

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

        .btn {
            width: 100%;
            height: 132rpx;
            display: flex;
            align-items: center;
            justify-content: center;

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

            .cancelBtn {
                width: 298rpx;
                height: 86rpx;
                line-height: 86rpx;
                background: #FFFFFF;
                border-radius: 20rpx;
                text-align: center;
                font-size: 32rpx;
                color: #202233;
                border: 1px solid #BBC4CC;
            }
        }
    }
</style>
=======
	<view>
		<signature :salaryId="salaryId" :showCanvas="showCanvas" @closeCanvas="closeCanvas"></signature>
		<uni-popup ref="popup" type="dialog">
			<uni-popup-dialog mode="input" message="成功消息" :duration="2000" :before-close="true" @close="close" @confirm="confirm"></uni-popup-dialog>
		</uni-popup>
	</view>
</template>
<script>
import signature from './signMode/signMode.vue';
export default {
	components: {
		signature
	},
	data() {
		return {
		//打开canvas绘制签名
			showCanvas: true,
			salaryId:'',
			//是否展示操作菜单
			completionSignPath: '' //签名
		}
	},
	onLoad: function(options) {
			this.salaryId=Number(options.id)
			console.log(options, 'options')
			
			
	},
	methods: {
			//隐藏canvas签名组件
			closeCanvas(e) {
				uni.navigateBack({ delta: 1 })
				// this.showCanvas = false;
				console.log(e,'eeee')
				if (e) {
					this.completionSignPath = e
				}
			},
			sign() {
				this.showCanvas = true;
			}
		}
}
</script>
>>>>>>> d5d543f6014ac2bbe7c450bec75cf372ae8284be