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

<template>
	<view class="page">
		<navbar title="编辑模板" leftClick @leftClick="$utils.navigateBack" />

		<view style="padding: 25rpx;background-color: #fff;">
			<canvas-drag ref="canvasRef"
			id="canvas-drag" :graph="graph" 
			:width="width" :height="height"
			@onDrawArrChange="onDrawArrChange"
			enableUndo="true"></canvas-drag>
		</view>


		<view class="btn-list">
			<view class="uni-color-btn" @tap="onAddImage">新建签名</view>
			<view class="uni-color-btn" @tap="onChangeBgImage">导入合同</view>
			<view class="uni-color-btn" @tap="onUndo">后退</view>
			<view class="uni-color-btn" @tap="onClearCanvas">清空</view>
			<view class="uni-color-btn" @tap="submit">保存</view>
			<!-- <view class="uni-color-btn" @tap="onExportJSON">导出模板</view> -->
			<!-- <view class="uni-color-btn" @tap="onAddText">添加文字</view> -->
		</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 {
				height: 750,
				width: 700,
				drawArr : [],
			}
		},
		onLoad() {

		},
		mounted() {},
		methods: {
			// 签名位置更新时
			onDrawArrChange(arr){
				this.drawArr = arr
			},
			/**
			 * 添加签名位置
			 */
			onAddImage() {
				wx.chooseImage({
					success: res => {
						this.setData({
							graph: {
								w: 100,
								h: 50,
								type: 'image',
								url: res.tempFilePaths[0]
							}
						});
					}
				});
			},

			/**
			 * 导入合同
			 */
			onChangeBgImage() {
				let self = this
				wx.chooseImage({
					success: res => {
						uni.getImageInfo({
							src: res.tempFilePaths[0],
							success: image => {
								console.log(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)

								self.$nextTick(() => {
									this.$refs.canvasRef.changeBgImage(image.path)
								})
							}
						})
					}
				});
			},
			// 后退
			onUndo(event) {
				this.$refs.canvasRef.undo();
			},
			/**
			 * 导出当前画布为模板
			 */
			onExportJSON() {
				this.$refs.canvasRef.exportFun().then(imgArr => {
					console.log(imgArr);
					uni.previewImage({
						urls: [imgArr],
						current: 0,
					})
				}).catch(e => {
					console.error(e);
				});
			},
			/**
			 * 添加文本
			 */
			onAddText() {
				this.setData({
					graph: {
						type: 'text',
						text: 'helloworld'
					}
				});
			},

			onClearCanvas(event) {
				let _this = this;
				_this.setData({
					canvasBg: null
				});
				this.$refs.canvasRef.clearCanvas();
			},
			submit() {
				uni.setStorageSync('drawArrJson', JSON.stringify(this.drawArr))
				uni.navigateBack(-1)
			},
		}
	}
</script>

<style scoped lang="scss">
	.page {
		padding-bottom: 100rpx;
		.btn-list {
			display: flex;
			flex-wrap: wrap;
			padding: 20rpx;
			gap: 20rpx;
			.uni-color-btn {
				margin: 0;
				border-radius: 10rpx;
			}
		}
	}
</style>