recruitment-wechat-uniapp-241012/pages_order/contract/contractDetail.vue

<template>
	<view class="page">
		<navbar title="电子合同"
		leftClick 
		@leftClick="$utils.navigateBack"/>
		
		<view style="padding: 25rpx;">
			<canvas-drag ref="canvasRef"
			id="canvas-drag" 
			:graph="graph" 
			:width="width" 
			:height="height"
			bgColor="#fff"
			enableUndo="true"></canvas-drag>
			
			<!-- <canvas
			canvas-id="mycanvas" 
			class="mycanvas" 
			v-if="!imagePath"
			:style="{height : height + 'rpx', width : width + 'rpx'}"
			disable-scroll="true"></canvas> -->
			
			<image :src="imagePath"
			v-if="imagePath"
			style="width: 700rpx;"
			mode="widthFix"></image>
		</view>
		
		<view class="uni-color-btn"
		@click.stop="onChangeBgImage">
			导入合同
		</view>
		
		<view class="uni-color-btn"
		@click.stop="toSignature">
			签名
		</view>
		
		<view class="uni-color-btn"
		@click.stop="onExportJSON">
			保存合同
		</view>
	
	</view>
</template>

<script>
	import canvasDrag from "@/components/canvas-drag/index";
	import setData from "@/components/canvas-drag/setData.js";
	export default {
		components: {
			canvasDrag
		},
		mixins : [setData],
		data() {
			return {
				id : 0,
				detail : {},
				height: 750,
				width: 700,
				ctx : null,
				imagePath : 0,
			}
		},
		onLoad({id}) {
			this.id = id
			this.getDetail()
		},
		onShow() {
			this.initCanvas()
			this.syntheticSignature()
		},
		methods: {
			// 获取合同内容
			getDetail(){
				let data = {
					contractId: this.id
				}
				if (uni.getStorageSync('token')) {
					// data.token = uni.getStorageSync('token')
				}
				this.$api('queryContracById', data, res => {
					if (res.code == 200) {
						this.detail = res.result
					}
				})
			},

			initCanvas() {
				this.ctx = uni.createCanvasContext("mycanvas")
			},
			
			// 去签名
			toSignature(){
				uni.navigateTo({
					url: `/pages_order/contract/electronicSignature?id=${this.id}&signature=1`
				})
			},
			
			// 导出合同
			onExportJSON() {
				uni.showLoading({
					title: '保存中...'
				})
				this.$refs.canvasRef.exportFun().then(image => {
					console.log(image);
					uni.hideLoading()
					// this.imagePath = image
					uni.previewImage({
						urls: [image],
						current: 0,
					})
				}).catch(e => {
					uni.hideLoading()
					console.error(e);
				});
			},

			/**
			 * 导入合同
			 */
			onChangeBgImage() {
				let self = this
				wx.chooseImage({
					success: res => {
						uni.getImageInfo({
							src: res.tempFilePaths[0],
							success: image => {

								let allwh = image.height + image.width
								let imgw = (image.width / allwh).toFixed(2)
								let imgh = (image.height / allwh).toFixed(2)

								self.height = imgh * Math.ceil(this.width / imgw)
								
								// this.width = image.width
								// this.height = image.height

								self.$nextTick(() => {
									this.$refs.canvasRef.changeBgImage(image.path)
								// 	this.ctx.drawImage(image.path, 0, 0, this.ctx.width, this.ctx.height)
								// 	this.ctx.stroke();
								// 	this.ctx.draw(false, () => {
								// 		wx.canvasToTempFilePath({
								// 			canvasId: 'mycanvas',
								// 			success: res => {
								// 				// this.imagePath = res.tempFilePath
								// 				uni.previewImage({
								// 					urls: [res.tempFilePath],
								// 					current: 0,
								// 				})
								// 			},
								// 			fail: e => {
								// 			}
								// 		}, this);
								// 	});
									
								})
							}
						})
					}
				});
			},
			
			// 合成签名
			syntheticSignature(){
				let url = uni.getStorageSync('electronicSignature')
				if(!url) return
				uni.removeStorageSync('electronicSignature')
				this.setData({
					graph: {
						w: 100,
						h: 50,
						x : 0,
						y : 0,
						type: 'image',
						url,
						permitSelected : true,
					}
				});
				// this.$nextTick(() => {
				// 	this.onExportJSON()
				// })
			},
		}
	}
</script>

<style scoped lang="scss">
.page{
	.mycanvas{
		background-color: #fff;
	}
}
</style>