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

<template>
<<<<<<< HEAD
    <view class="main-content" v-if="isShow">
        <!-- 签字canvas -->
        <block v-if="showCanvas">
            <canvas
                class="mycanvas" 
                id="mycanvas" 
                canvas-id="mycanvas" 
                @touchstart="touchstart" 
                @touchmove="touchmove" 
                @touchend="touchend"
                disable-scroll="true"
            ></canvas>
            <!-- 旋转canvas -->
            
        </block>
        <block class="" v-else>
            <image :src="imgurl" mode="" class="sign-img"></image>
        </block>
        <canvas
            class="rotatCanvas"
            id="rotatCanvas"
            :style="{ 'z-index': -1, width: `${screenWidth}px`, height: `${(screenWidth * screenWidth) / screenHeight}px` }"
            canvas-id="rotatCanvas"
        ></canvas>
        <view class="button-line">
            <view class="save-button" @tap.stop="finish">保存</view>
            <view class="clear-button" @tap.stop="clear">清除</view>
            <view class="cancel-button" @tap.stop="hide">关闭</view>
        </view>
        <view class="mask" v-if="showModal" @tap.stop>
            <view class="kw-modal flex align-items-center justify-content-center">
                <view class="kw-modal-content">
                    <view class="flex justify-content-end font-size-34 lightgray">
                        <text class="iconfont icon-guanbi" @tap="close"></text>
                    </view>
                    <view class="flex justify-content-center font-size-38 font-600 kw-modal-title">
                        {{title}}
                    </view>
                    <view class="kw-modal-btnbox flex justify-content-between">
                        <view @tap="cancel" class="kw-modal-btn">{{cancelText}}</view>
                        <view @tap="confirm" class="kw-modal-btn">{{confirmText}}</view>
                    </view>
                </view>
            </view>
        </view>
        <view class="mask" v-if="showToast">
            <view class="sign-toast flex align-items-center justify-content-center">
                <view class="toast-box">请先签名</view>
            </view>
        </view>
        
    </view>
</template>
<script>
export default {
    data() {
        return {
            ctx: '', //绘图图像
            points: [], //路径点集合
            screenWidth: '',
            screenHeight: '',
            isRotatShow:false,
            showModal:false,
            showToast:false,
            startX:'',
            startY:'',
            moveX:'',
            moveY:'',
            imgurl:'',
            showCanvas:true,
            title:'提示框',
            cancelText:'取消',
            confirmText:'确认',
        };
    },
    props:{
        isShow:{
            type:Boolean,
            default:true
        }
    },
    mounted() {
        this.createCanvas();
        uni.getSystemInfo({
            success: e => {
                this.screenWidth = e.screenWidth;
                this.screenHeight = e.screenHeight - 110;
                console.log(e,'e')
            }
        });
    },
    methods: {
        show() {
            this.clear();
            this.isShow = true;
        },
        hide() {
            this.$emit('close',false)
            this.showCanvas = true
        },
        close(){
            this.showCanvas = true
            this.showModal = false
        },
        //取消保存
        cancel(){
            this.close()
            //清除画布
            this.clear()
        },
        confirm(){
            this.rotat(this.imgurl);
        },
        save(){
            this.showCanvas = false
            console.log(this.moveX,'moveX')
            console.log(this.moveY,'moveY')
            if(!this.moveX&&!this.moveY){
                this.showToast = true
                setTimeout(()=>{
                    this.showToast = false
                    this.showCanvas = true
                },1500)
                return false
            }
            this.showModal = true
            this.title = '确认签字？一旦确认，不能修改'
        },
        //创建并显示画布
        createCanvas() {
            this.showCanvas = true;
            this.ctx = uni.createCanvasContext('mycanvas', this); //创建绘图对象
            //设置画笔样式
            this.ctx.lineWidth = 2;
            this.ctx.lineCap = 'round';
            this.ctx.lineJoin = 'round';
        },
        //触摸开始，获取到起点
        touchstart(e) {
            let startX = e.changedTouches[0].x;
            let startY = e.changedTouches[0].y;
            let startPoint = {
                X: startX,
                Y: startY
            };
            this.points.push(startPoint);
            //每次触摸开始，开启新的路径
            this.ctx.beginPath();
        },
        //触摸移动，获取到路径点
        touchmove(e) {
            this.moveX = e.changedTouches[0].x;
            this.moveX = e.changedTouches[0].y;
            let moveX = e.changedTouches[0].x;
            let moveY = e.changedTouches[0].y;
            let movePoint = {
                X: moveX,
                Y: moveY
            };
            this.points.push(movePoint); //存点
            let len = this.points.length;
            if (len >= 2) {
                this.draw(); //绘制路径
            }
        },
        // 触摸结束，将未绘制的点清空防止对后续路径产生干扰
        touchend() {
            this.points = [];
        },
        draw() {
            let point1 = this.points[0];
            let point2 = this.points[1];
            this.points.shift();
            this.ctx.moveTo(point1.X, point1.Y);
            this.ctx.lineTo(point2.X, point2.Y);
            this.ctx.stroke();
            this.ctx.draw(true);
        },
        //清空画布
        clear() {
            this.ctx.clearRect(0, 0, this.screenWidth, this.screenHeight);
            this.ctx.draw(true);
            this.moveX = '';
            this.moveY = '';
            this.showCanvas = true
        },
        //完成绘画并保存到本地
        finish() {
            uni.canvasToTempFilePath(
                {
                    canvasId: 'mycanvas',
                    success: res => {
                        this.imgurl = res.tempFilePath
                        this.save()
                    },
                    complete: com => {}
                },
                this
            );
        },
        // 将图片选装
        rotat(e) {
            // this.isRotatShow = true
            // this.showCanvas = true
            let rotatCtx = uni.createCanvasContext('rotatCanvas', this); //创建绘图对象
            // 重新定位中心点
            rotatCtx.translate(0, (this.screenWidth * this.screenWidth) / this.screenHeight);
            // rotatCtx.translate(0, 0);
            // 将画布逆时针旋转90度
            rotatCtx.rotate((270 * Math.PI) / 180);
            // 将签字图片绘制进入Canvas
            rotatCtx.drawImage(e, 0, 0, (this.screenWidth * this.screenWidth) / this.screenHeight, this.screenWidth);
            // 保存后旋转后的结果
            rotatCtx.draw(true);
            setTimeout(() => {
                // 生成图片并回调
                uni.canvasToTempFilePath(
                    {
                        canvasId: 'rotatCanvas',
                        success: val => {
                            console.log('tempFilePath', val.tempFilePath)
                            this.showCanvas = false
                            this.$emit('savesign', {tempFilePath: val.tempFilePath ,flag: true} );
                            setTimeout(() => {
                                this.hide();
                            }, 500);
                        },
                        complete: com => {
                            // console.log(com);
                        }
                    },
                    this
                );
            }, 500);
        }
    }
};
</script>
<style lang="scss" scoped>
.main-content {
    width: 100vw;
    height: 100vh;
    background-color: #ffffff;
    z-index: 9999;
    overflow: hidden;
    max-height:100vh;
}
.mycanvas {
    width: 100vw;
    height: calc(100vh - 120px);
    background-color: #efefef;
    position: fixed;
    left: 0rpx;
    top: 0rpx;
    z-index: 2;
}
.sign-img{
    width: 100vw;
    height: calc(100vh - 110px);
}
.rotatCanvas{
    background-color: red;
}
.button-line {
    transform: rotate(90deg);
    position: fixed;
    bottom: -130rpx;
    left: 260rpx;
    align-items: center;
    justify-content: space-between;
    z-index: 999;
}
.button-style {
    color: #ffffff;
    width: 100px;
    height: 120rpx;
    text-align: center;
    line-height: 120rpx;
    border-radius: 10rpx;
    margin-bottom: 40rpx;
    font-size: 34rpx
}
.save-button {
    @extend .button-style;
    background-color: #02b340;
    height: 140rpx;
    line-height: 140rpx;
}
.clear-button {
    @extend .button-style;
    background-color: #ffa500;
    height: 140rpx;
    line-height: 140rpx;
}
.cancel-button {
    @extend .button-style;
    background-color: #e10b2b;
}
    .mask{
        width: 100vw;
        height: 100vh;
        background: rgba(0,0,0,0.8) ;
        position: absolute;
        top: 0;
        left: 0;
        z-index: 999;
    }
    .kw-modal,.sign-toast{
        width: 50vw;
        height: calc(100vh - 210px);
        transform: rotate(90deg);
        position: absolute;
        top: 0;
        left: 0;
        text-align: center;
        z-index: 999;
    }
    .kw-modal-content{
        width: 690rpx;
        // height: 400rpx;
        background: #efefef;
        border-radius: 30rpx;
        padding: 38rpx 30rpx 70rpx;
        .kw-modal-title{
            margin-top: 22rpx;
        }
        .kw-modal-tips{
            margin-top: 20rpx;
        }
        .kw-modal-inp{
            margin-top: 50rpx;
            .kw-inp{
                border: 1rpx solid #D9D9D9;
                border-radius: 4rpx;
                height: 70rpx;
                line-height: 70rpx;
                padding: 0 30rpx;
            }
            .inp-title{
                margin-right: 20rpx;
            }
        }
        .kw-modal-btnbox{
            margin-top: 100rpx;
            display: flex;
            justify-content: space-around;
            .kw-modal-btn{
                width: 300rpx;
                height: 84rpx;
                background: #D9D9D9;
                border-radius: 60rpx;
                line-height: 84rpx;
                text-align: center;
                font-size: 30rpx;
                &:last-child{
                    color: #FFFFFF;
                    background: #59A3FF;
                }
            }
        }
    }
    .toast-box{
        padding: 15rpx 30rpx;
        // background-color: rgba(0, 0, 0, .7);
        // color: #fff;
        background-color: #ffffff;
        color: #ffa500;
        border-radius: 8rpx;
        font-size: 30rpx;
    }
=======
	<view class="signature-box">
		<!-- 签名 -->
		<view class="signature" v-show="showCanvas">
			<canvas class="mycanvas" canvas-id="mycanvas" @touchstart="touchstart" @touchmove="touchmove"
				@touchend="touchend"></canvas>
		<!-- 	<view style="padding: 5px;
    color: red;" class="text-sm colorred">注意：请用横屏签名</view> -->
			<view class="footer">

				<button @click="finish" type="primary">保存
				</button>
				<button @click="clear" type="default">清除
				</button>
				<button @click="close" type="warn">关闭
				</button>
			</view>
		</view>

		<!-- 签完名后生成的图片 -->
		<!-- <view v-show="SignatureImg" class="SignatureImg">
			<image :src="SignatureImg" mode=""></image>
		</view> -->
		<!-- 清除签完名后生成的图片 -->
		<!-- <button v-show="SignatureImg" @click="obliterate" type="error" :plain="true" :ripple="true"
			ripple-bg-color="#909399" size="medium">清除签名</button> -->
	</view>
</template>
<script>
	import {
		sign
	} from '@/api/workman.js'

	import {
		pathToBase64
	} from '@/utils/jssdk_image_tools.js'
	var x = 20;
	var y = 20;
	export default {
		data() {
			return {
				//绘图图像
				ctx: '',
				//路径点集合
				points: [],
				//签名图片
				SignatureImg: '',
				hasSign: false
			};
		},
		props: {
			salaryId: {
				type: [Number, String],
				default: 0
			},
			showCanvas: {
				type: Boolean,
				default: false
			},
		},
		created() {
			console.log(this.salaryId, 'options333')

		},
		methods: {
			//清除签名的图片
			open() {
				this.$refs.popup.open()
			},
			/**
			 * 点击取消按钮触发
			 * @param {Object} done
			 */
			close() {
				// TODO 做一些其他的事情，before-close 为true的情况下，手动执行 close 才会关闭对话框
				// ...
				this.$refs.popup.close()
			},
			obliterate() {
				if (this.SignatureImg) {
					this.SignatureImg = '';
				}
				this.close();
			},
			//关闭并清空画布
			close() {
				uni.navigateBack({
					delta: 1
				})
				this.clear();
			},
			//创建并显示画布
			createCanvas() {
				this.ctx = uni.createCanvasContext('mycanvas', this); //创建绘图对象
				this.ctx.setFillStyle('#000000')
				this.ctx.fillStyle = '#000000'
				//设置画笔样式
				this.ctx.lineWidth = 4;
				this.ctx.lineCap = 'round';
				this.ctx.lineJoin = 'round';
				console.log(this.ctx)
			},
			//触摸开始，获取到起点
			touchstart(e) {
				let startX = e.changedTouches[0].x;
				let startY = e.changedTouches[0].y;
				let startPoint = {
					X: startX,
					Y: startY
				};
				this.points.push(startPoint);
				//每次触摸开始，开启新的路径
				this.ctx.beginPath();
			},
			//触摸移动，获取到路径点
			touchmove(e) {
				let moveX = e.changedTouches[0].x;
				let moveY = e.changedTouches[0].y;
				let movePoint = {
					X: moveX,
					Y: moveY
				};
				this.points.push(movePoint); //存点
				let len = this.points.length;
				if (len >= 2) {
					this.draw(); //绘制路径
				}
			},
			// 触摸结束，将未绘制的点清空防止对后续路径产生干扰
			touchend() {
				this.points = [];
			},
			//绘制笔迹
			draw() {
				let point1 = this.points[0];
				let point2 = this.points[1];
				this.points.shift();
				this.ctx.moveTo(point1.X, point1.Y);
				this.ctx.lineTo(point2.X, point2.Y);
				this.ctx.stroke();
				this.ctx.draw(true);
				this.hasSign = true
			},
			//清空画布
			clear() {
				this.hasSign = false
				let that = this;
				uni.getSystemInfo({
					success: function(res) {
						let canvasw = res.windowWidth;
						let canvash = res.windowHeight;
						that.ctx.clearRect(0, 0, canvasw, canvash);
						that.ctx.draw(true);
					}
				});
			},
			//完成绘画并保存到本地
			finish() {
				if (!this.hasSign) {
					uni.showToast({
						title: '签名为空不能保存',
						icon: 'none',
						duration: 2000
					})
					return
				}
				let that = this;
				uni.canvasToTempFilePath({
					canvasId: 'mycanvas',
					success: function(res) {
						if (!res || !res.tempFilePath) {
							console.log(res.tempFilePath);
							that.SignatureImg = res.tempFilePath;
							that.$emit('closeCanvas', that.SignatureImg);
							that.close();
						} else {
							//用来解决安卓真机获取到的是canvas图片的临时路径，转成base64格式
							pathToBase64(res.tempFilePath).then(re => {
								uni.setStorageSync('signaTureImg', re)
								console.log(re, 'signaTureImg')
								uni.showLoading({
									title: '签名中'
								})
								sign({
									signId: that.salaryId,
									pictureData: re
								}).then(res => {
									uni.hideLoading()
									that.$modal.confirm('签名成功','',false).then(() => {
										uni.navigateBack()
									})
								}).catch(err => {
									uni.hideLoading()
									
								})
								// that.SignatureImg = re;
								// that.$emit('closeCanvas', that.SignatureImg);
								// 
							})
						}
					}
				});
			}
		},
		mounted() {
			this.createCanvas();
		}
	};
</script>
<style lang="less" scoped>
	.signature-box {
		display: flex;
		flex-direction: column;
		align-items: center;
		background: #fff;

		// height: calc(100vh-44rpx);
		//签名模块
		.signature {
			position: fixed;
			top: 10px;
			left: 2%;
			z-index: 999;
			width: 96%;

			//canvas
			.mycanvas {
				width: 100%;
				// height: calc(100vh - 200upx);
				height: calc(100vh - 60vh);
				background-color: #fff;
				border-radius: 10px 10px 0 0;
			}
			//底部按钮
			.footer {
				height: 130upx;
				display: flex;
				justify-content: space-around;
				align-items: center;
				background-color: #fff;
				border-radius: 0 0 10px 10px;
				border-top: 1px solid #a7a7a733;
			}

			::v-deep .footer uni-button {
				font-size: 16px;
				padding: 8rpx 50rpx;
			}
		}

		//生成的图片
		.SignatureImg {
			image {
				width: 750rpx;
				height: 750rpx;
			}
		}
	}
>>>>>>> d5d543f6014ac2bbe7c450bec75cf372ae8284be
</style>