From 36e61236a026fde814a69436282577d1c62286cd Mon Sep 17 00:00:00 2001
From: huliyong <2783385703@qq.com>
Date: Mon, 13 Jan 2025 15:43:26 +0800
Subject: [PATCH] =?UTF-8?q?=E4=B8=8A=E4=BC=A0=E4=BF=AE=E6=94=B9?=
MIME-Version: 1.0
Content-Type: text/plain; charset=UTF-8
Content-Transfer-Encoding: 8bit

---
 components/canvas-drag/index.css             |   16 +
 components/canvas-drag/index.vue             | 1047 ++++++++++++++++++++++++++
 components/canvas-drag/setData.js            |   63 ++
 mixins/configList.js                         |   28 +-
 pages.json                                   |   30 +-
 pages/index/center.vue                       |    8 +-
 pages_order/{mine => contract}/contract.vue  |    2 +-
 pages_order/contract/contractDetail.vue      |  195 +++++
 pages_order/contract/contractManage.vue      |   88 +++
 pages_order/contract/contractManageEdit.vue  |  153 ++++
 pages_order/contract/electronicSignature.vue |  188 +++++
 pages_order/mine/contractDetail.vue          |   44 --
 static/components/canvas-drag/close.png      |  Bin 0 -> 2695 bytes
 static/components/canvas-drag/scale.png      |  Bin 0 -> 2010 bytes
 14 files changed, 1795 insertions(+), 67 deletions(-)
 create mode 100644 components/canvas-drag/index.css
 create mode 100644 components/canvas-drag/index.vue
 create mode 100644 components/canvas-drag/setData.js
 rename pages_order/{mine => contract}/contract.vue (96%)
 create mode 100644 pages_order/contract/contractDetail.vue
 create mode 100644 pages_order/contract/contractManage.vue
 create mode 100644 pages_order/contract/contractManageEdit.vue
 create mode 100644 pages_order/contract/electronicSignature.vue
 delete mode 100644 pages_order/mine/contractDetail.vue
 create mode 100644 static/components/canvas-drag/close.png
 create mode 100644 static/components/canvas-drag/scale.png

diff --git a/components/canvas-drag/index.css b/components/canvas-drag/index.css
new file mode 100644
index 0000000..6ae5b16
--- /dev/null
+++ b/components/canvas-drag/index.css
@@ -0,0 +1,16 @@
+/* components/canvas-drag/index.wxss */
+.movable-label {
+    margin-top: 300rpx;
+  width: 750rpx;
+  height: 400rpx;
+  background: #eee;
+}
+.movable-block {
+    width: 120rpx;
+    height: 120rpx;
+    background: #ccc;
+}
+.movable-block .image-con {
+    width: 100%;
+    height: 100%;
+}
\ No newline at end of file
diff --git a/components/canvas-drag/index.vue b/components/canvas-drag/index.vue
new file mode 100644
index 0000000..ee4f09b
--- /dev/null
+++ b/components/canvas-drag/index.vue
@@ -0,0 +1,1047 @@
+<template>
+	<canvas canvas-id="canvas-drag" disable-scroll="true" @touchstart="start" @touchmove="move" @touchend="end"
+		:style="'width: ' + width + 'rpx; height: ' + height + 'rpx;'"></canvas>
+</template>
+
+<script>
+	// components/canvas-drag/index.js
+	let DELETE_ICON = '/static/components/canvas-drag/close.png'; // 删除按钮
+	// 删除按钮
+	let DRAG_ICON = '/static/components/canvas-drag/scale.png'; // 缩放按钮
+	// 缩放按钮
+	const STROKE_COLOR = 'red';
+	const ROTATE_ENABLED = true;
+	let isMove = false; // 标识触摸后是否有移动，用来判断是否需要增加操作历史
+	// 标识触摸后是否有移动，用来判断是否需要增加操作历史
+	const DEBUG_MODE = false; // 打开调试后会渲染操作区域边框（无背景时有效）
+	// 打开调试后会渲染操作区域边框（无背景时有效）
+	const dragGraph = function({
+		x = 30,
+		y = 30,
+		w,
+		h,
+		type,
+		text,
+		fontSize = 20,
+		color = 'red',
+		url = null,
+		rotate = 0,
+		sourceId = null,
+		selected = true,
+		permitSelected = false,
+	}, canvas, factor) {
+		if (type === 'text') {
+			canvas.setFontSize(fontSize);
+			const textWidth = canvas.measureText(text).width;
+			const textHeight = fontSize + 10;
+			this.centerX = x + textWidth / 2;
+			this.centerY = y + textHeight / 2;
+			this.w = textWidth;
+			this.h = textHeight;
+		} else {
+			this.centerX = x + w / 2;
+			this.centerY = y + h / 2;
+			this.w = w;
+			this.h = h;
+		}
+
+		this.x = x;
+		this.y = y; // 4个顶点坐标
+		this.permitSelected = permitSelected; // 4个顶点坐标
+
+		this.square = [
+			[this.x, this.y],
+			[this.x + this.w, this.y],
+			[this.x + this.w, this.y + this.h],
+			[this.x, this.y + this.h]
+		];
+		this.fileUrl = url;
+		this.text = text;
+		this.fontSize = fontSize;
+		this.color = color;
+		this.ctx = canvas;
+		this.rotate = rotate;
+		this.type = type;
+		this.selected = selected;
+		this.factor = factor;
+		this.sourceId = sourceId;
+		this.MIN_WIDTH = 20;
+		this.MIN_FONTSIZE = 10;
+	};
+	dragGraph.prototype = {
+		/**
+		 * 绘制元素
+		 */
+		paint() {
+			this.ctx.save(); // 由于measureText获取文字宽度依赖于样式，所以如果是文字元素需要先设置样式
+
+			let textWidth = 0;
+			let textHeight = 0;
+
+			if (this.type === 'text') {
+				this.ctx.setFontSize(this.fontSize);
+				this.ctx.setTextBaseline('middle');
+				this.ctx.setTextAlign('center');
+				this.ctx.setFillStyle(this.color);
+				textWidth = this.ctx.measureText(this.text).width;
+				textHeight = this.fontSize + 10; // 字体区域中心点不变，左上角位移
+
+				this.x = this.centerX - textWidth / 2;
+				this.y = this.centerY - textHeight / 2;
+			} // 旋转元素
+
+
+			this.ctx.translate(this.centerX, this.centerY);
+			this.ctx.rotate(this.rotate * Math.PI / 180);
+			this.ctx.translate(-this.centerX, -this.centerY); // 渲染元素
+
+			if (this.type === 'text') {
+				this.ctx.fillText(this.text, this.centerX, this.centerY);
+			} else if (this.type === 'image') {
+				this.ctx.drawImage(this.fileUrl, this.x, this.y, this.w, this.h);
+			} // 如果是选中状态，绘制选择虚线框，和缩放图标、删除图标
+
+
+			if (this.selected && !this.permitSelected) {
+				this.ctx.setLineDash([2, 5]);
+				this.ctx.setLineWidth(2);
+				this.ctx.setStrokeStyle(STROKE_COLOR);
+				this.ctx.lineDashOffset = 6;
+
+				if (this.type === 'text') {
+					this.ctx.strokeRect(this.x, this.y, textWidth, textHeight);
+					this.ctx.drawImage(DELETE_ICON, this.x - 15, this.y - 15, 30, 30);
+					this.ctx.drawImage(DRAG_ICON, this.x + textWidth - 15, this.y + textHeight - 15, 30, 30);
+				} else {
+					this.ctx.strokeRect(this.x, this.y, this.w, this.h);
+					this.ctx.drawImage(DELETE_ICON, this.x - 15, this.y - 15, 30, 30);
+					this.ctx.drawImage(DRAG_ICON, this.x + this.w - 15, this.y + this.h - 15, 30, 30);
+				}
+			}
+
+			this.ctx.restore();
+		},
+
+		/**
+		 * 给矩形描边
+		 * @private
+		 */
+		_drawBorder() {
+			let p = this.square;
+			let ctx = this.ctx;
+			this.ctx.save();
+			this.ctx.beginPath();
+			ctx.setStrokeStyle('orange');
+
+			this._draw_line(this.ctx, p[0], p[1]);
+
+			this._draw_line(this.ctx, p[1], p[2]);
+
+			this._draw_line(this.ctx, p[2], p[3]);
+
+			this._draw_line(this.ctx, p[3], p[0]);
+
+			ctx.restore();
+		},
+
+		/**
+		 * 画一条线
+		 * @param ctx
+		 * @param a
+		 * @param b
+		 * @private
+		 */
+		_draw_line(ctx, a, b) {
+			ctx.moveTo(a[0], a[1]);
+			ctx.lineTo(b[0], b[1]);
+			ctx.stroke();
+		},
+
+		/**
+		 * 判断点击的坐标落在哪个区域
+		 * @param {*} x 点击的坐标
+		 * @param {*} y 点击的坐标
+		 */
+		isInGraph(x, y) {
+			// 删除区域左上角的坐标和区域的高度宽度
+			const delW = 30;
+			const delH = 30; // 旋转后的删除区域坐标
+
+			const transformedDelCenter = this._rotatePoint(this.x, this.y, this.centerX, this.centerY, this.rotate);
+
+			const transformDelX = transformedDelCenter[0] - delW / 2;
+			const transformDelY = transformedDelCenter[1] - delH / 2; // 变换区域左上角的坐标和区域的高度宽度
+
+			const scaleW = 30;
+			const scaleH = 30;
+
+			const transformedScaleCenter = this._rotatePoint(this.x + this.w, this.y + this.h, this.centerX, this
+				.centerY, this.rotate); // 旋转后的变换区域坐标
+
+
+			const transformScaleX = transformedScaleCenter[0] - scaleW / 2;
+			const transformScaleY = transformedScaleCenter[1] - scaleH / 2; // 调试使用，标识可操作区域
+
+			if (DEBUG_MODE) {
+				// 标识删除按钮区域
+				this.ctx.setLineWidth(1);
+				this.ctx.setStrokeStyle('red');
+				this.ctx.strokeRect(transformDelX, transformDelY, delW, delH); // 标识旋转/缩放按钮区域
+
+				this.ctx.setLineWidth(1);
+				this.ctx.setStrokeStyle('black');
+				this.ctx.strokeRect(transformScaleX, transformScaleY, scaleW, scaleH); // 标识移动区域
+
+				this._drawBorder();
+			}
+
+			if (x - transformScaleX >= 0 && y - transformScaleY >= 0 && transformScaleX + scaleW - x >= 0 &&
+				transformScaleY + scaleH - y >= 0) {
+				// 缩放区域
+				return 'transform';
+			} else if (x - transformDelX >= 0 && y - transformDelY >= 0 && transformDelX + delW - x >= 0 &&
+				transformDelY + delH - y >= 0) {
+				// 删除区域
+				return 'del';
+			} else if (this.insidePolygon(this.square, [x, y])) {
+				return 'move';
+			} // 不在选择区域里面
+
+
+			return false;
+		},
+
+		/**
+		 *  判断一个点是否在多边形内部
+		 *  @param points 多边形坐标集合
+		 *  @param testPoint 测试点坐标
+		 *  返回true为真，false为假
+		 *  */
+		insidePolygon(points, testPoint) {
+			let x = testPoint[0],
+				y = testPoint[1];
+			let inside = false;
+
+			for (let i = 0, j = points.length - 1; i < points.length; j = i++) {
+				let xi = points[i][0],
+					yi = points[i][1];
+				let xj = points[j][0],
+					yj = points[j][1];
+				let intersect = yi > y != yj > y && x < (xj - xi) * (y - yi) / (yj - yi) + xi;
+				if (intersect) inside = !inside;
+			}
+
+			return inside;
+		},
+
+		/**
+		 * 计算旋转后矩形四个顶点的坐标（相对于画布）
+		 * @private
+		 */
+		_rotateSquare() {
+			this.square = [this._rotatePoint(this.x, this.y, this.centerX, this.centerY, this.rotate), this
+				._rotatePoint(this.x + this.w, this.y, this.centerX, this.centerY, this.rotate), this._rotatePoint(
+					this.x + this.w, this.y + this.h, this.centerX, this.centerY, this.rotate), this._rotatePoint(
+					this.x, this.y + this.h, this.centerX, this.centerY, this.rotate)
+			];
+		},
+
+		/**
+		 * 计算旋转后的新坐标（相对于画布）
+		 * @param x
+		 * @param y
+		 * @param centerX
+		 * @param centerY
+		 * @param degrees
+		 * @returns {*[]}
+		 * @private
+		 */
+		_rotatePoint(x, y, centerX, centerY, degrees) {
+			let newX = (x - centerX) * Math.cos(degrees * Math.PI / 180) - (y - centerY) * Math.sin(degrees * Math.PI /
+				180) + centerX;
+			let newY = (x - centerX) * Math.sin(degrees * Math.PI / 180) + (y - centerY) * Math.cos(degrees * Math.PI /
+				180) + centerY;
+			return [newX, newY];
+		},
+
+		/**
+		 *
+		 * @param {*} px 手指按下去的坐标
+		 * @param {*} py 手指按下去的坐标
+		 * @param {*} x 手指移动到的坐标
+		 * @param {*} y 手指移动到的坐标
+		 * @param {*} currentGraph 当前图层的信息
+		 */
+		transform(px, py, x, y, currentGraph) {
+			// 获取选择区域的宽度高度
+			if (this.type === 'text') {
+				this.ctx.setFontSize(this.fontSize);
+				const textWidth = this.ctx.measureText(this.text).width;
+				const textHeight = this.fontSize + 10;
+				this.w = textWidth;
+				this.h = textHeight; // 字体区域中心点不变，左上角位移
+
+				this.x = this.centerX - textWidth / 2;
+				this.y = this.centerY - textHeight / 2;
+			} else {
+				this.centerX = this.x + this.w / 2;
+				this.centerY = this.y + this.h / 2;
+			}
+
+			const diffXBefore = px - this.centerX;
+			const diffYBefore = py - this.centerY;
+			const diffXAfter = x - this.centerX;
+			const diffYAfter = y - this.centerY;
+			const angleBefore = Math.atan2(diffYBefore, diffXBefore) / Math.PI * 180;
+			const angleAfter = Math.atan2(diffYAfter, diffXAfter) / Math.PI * 180; // 旋转的角度
+
+			if (ROTATE_ENABLED) {
+				this.rotate = currentGraph.rotate + angleAfter - angleBefore;
+			}
+
+			const lineA = Math.sqrt(Math.pow(this.centerX - px, 2) + Math.pow(this.centerY - py, 2));
+			const lineB = Math.sqrt(Math.pow(this.centerX - x, 2) + Math.pow(this.centerY - y, 2));
+
+			if (this.type === 'image') {
+				let resize_rito = lineB / lineA;
+				let new_w = currentGraph.w * resize_rito;
+				let new_h = currentGraph.h * resize_rito;
+
+				if (currentGraph.w < currentGraph.h && new_w < this.MIN_WIDTH) {
+					new_w = this.MIN_WIDTH;
+					new_h = this.MIN_WIDTH * currentGraph.h / currentGraph.w;
+				} else if (currentGraph.h < currentGraph.w && new_h < this.MIN_WIDTH) {
+					new_h = this.MIN_WIDTH;
+					new_w = this.MIN_WIDTH * currentGraph.w / currentGraph.h;
+				}
+
+				this.w = new_w;
+				this.h = new_h;
+				this.x = currentGraph.x - (new_w - currentGraph.w) / 2;
+				this.y = currentGraph.y - (new_h - currentGraph.h) / 2;
+			} else if (this.type === 'text') {
+				const fontSize = currentGraph.fontSize * ((lineB - lineA) / lineA + 1);
+				this.fontSize = fontSize <= this.MIN_FONTSIZE ? this.MIN_FONTSIZE : fontSize; // 旋转位移后重新计算坐标
+
+				this.ctx.setFontSize(this.fontSize);
+				const textWidth = this.ctx.measureText(this.text).width;
+				const textHeight = this.fontSize + 10;
+				this.w = textWidth;
+				this.h = textHeight; // 字体区域中心点不变，左上角位移
+
+				this.x = this.centerX - textWidth / 2;
+				this.y = this.centerY - textHeight / 2;
+			}
+		},
+
+		toPx(rpx) {
+			return rpx * this.factor;
+		}
+
+	};
+
+	export default {
+		data() {
+			return {
+				bgImage: '',
+				history: []
+			};
+		},
+
+		components: {},
+		props: {
+			graph: {
+				type: Object,
+				default: () => ({})
+			},
+			bgColor: {
+				type: String,
+				default: ''
+			},
+			bgSourceId: {
+				type: String,
+				default: ''
+			},
+			width: {
+				type: Number,
+				default: 750
+			},
+			height: {
+				type: Number,
+				default: 750
+			},
+			enableUndo: {
+				type: Boolean,
+				default: false
+			}
+		},
+		watch: {
+			graph: {
+				handler: 'onGraphChange',
+				deep: true
+			}
+		},
+
+		/**
+		 * 绘制元素
+		 */
+		paint() {
+			this.ctx.save(); // 由于measureText获取文字宽度依赖于样式，所以如果是文字元素需要先设置样式
+
+			let textWidth = 0;
+			let textHeight = 0;
+
+			if (this.type === 'text') {
+				this.ctx.setFontSize(this.fontSize);
+				this.ctx.setTextBaseline('middle');
+				this.ctx.setTextAlign('center');
+				this.ctx.setFillStyle(this.color);
+				textWidth = this.ctx.measureText(this.text).width;
+				textHeight = this.fontSize + 10; // 字体区域中心点不变，左上角位移
+
+				this.x = this.centerX - textWidth / 2;
+				this.y = this.centerY - textHeight / 2;
+			} // 旋转元素
+
+
+			this.ctx.translate(this.centerX, this.centerY);
+			this.ctx.rotate(this.rotate * Math.PI / 180);
+			this.ctx.translate(-this.centerX, -this.centerY); // 渲染元素
+
+			if (this.type === 'text') {
+				this.ctx.fillText(this.text, this.centerX, this.centerY);
+			} else if (this.type === 'image') {
+				this.ctx.drawImage(this.fileUrl, this.x, this.y, this.w, this.h);
+			} // 如果是选中状态，绘制选择虚线框，和缩放图标、删除图标
+
+
+			if (this.selected && !this.permitSelected) {
+				this.ctx.setLineDash([2, 5]);
+				this.ctx.setLineWidth(2);
+				this.ctx.setStrokeStyle(STROKE_COLOR);
+				this.ctx.lineDashOffset = 6;
+
+				if (this.type === 'text') {
+					this.ctx.strokeRect(this.x, this.y, textWidth, textHeight);
+					this.ctx.drawImage(DELETE_ICON, this.x - 15, this.y - 15, 30, 30);
+					this.ctx.drawImage(DRAG_ICON, this.x + textWidth - 15, this.y + textHeight - 15, 30, 30);
+				} else {
+					this.ctx.strokeRect(this.x, this.y, this.w, this.h);
+					this.ctx.drawImage(DELETE_ICON, this.x - 15, this.y - 15, 30, 30);
+					this.ctx.drawImage(DRAG_ICON, this.x + this.w - 15, this.y + this.h - 15, 30, 30);
+				}
+			}
+
+			this.ctx.restore();
+		},
+
+		/**
+		 * 给矩形描边
+		 * @private
+		 */
+		_drawBorder() {
+			let p = this.square;
+			let ctx = this.ctx;
+			this.ctx.save();
+			this.ctx.beginPath();
+			ctx.setStrokeStyle('orange');
+
+			this._draw_line(this.ctx, p[0], p[1]);
+
+			this._draw_line(this.ctx, p[1], p[2]);
+
+			this._draw_line(this.ctx, p[2], p[3]);
+
+			this._draw_line(this.ctx, p[3], p[0]);
+
+			ctx.restore();
+		},
+
+		/**
+		 * 画一条线
+		 * @param ctx
+		 * @param a
+		 * @param b
+		 * @private
+		 */
+		_draw_line(ctx, a, b) {
+			ctx.moveTo(a[0], a[1]);
+			ctx.lineTo(b[0], b[1]);
+			ctx.stroke();
+		},
+
+		/**
+		 * 判断点击的坐标落在哪个区域
+		 * @param {*} x 点击的坐标
+		 * @param {*} y 点击的坐标
+		 */
+		isInGraph(x, y) {
+			// 删除区域左上角的坐标和区域的高度宽度
+			const delW = 30;
+			const delH = 30; // 旋转后的删除区域坐标
+
+			const transformedDelCenter = this._rotatePoint(this.x, this.y, this.centerX, this.centerY, this.rotate);
+
+			const transformDelX = transformedDelCenter[0] - delW / 2;
+			const transformDelY = transformedDelCenter[1] - delH / 2; // 变换区域左上角的坐标和区域的高度宽度
+
+			const scaleW = 30;
+			const scaleH = 30;
+
+			const transformedScaleCenter = this._rotatePoint(this.x + this.w, this.y + this.h, this.centerX, this.centerY,
+				this.rotate); // 旋转后的变换区域坐标
+
+
+			const transformScaleX = transformedScaleCenter[0] - scaleW / 2;
+			const transformScaleY = transformedScaleCenter[1] - scaleH / 2; // 调试使用，标识可操作区域
+
+			if (DEBUG_MODE) {
+				// 标识删除按钮区域
+				this.ctx.setLineWidth(1);
+				this.ctx.setStrokeStyle('red');
+				this.ctx.strokeRect(transformDelX, transformDelY, delW, delH); // 标识旋转/缩放按钮区域
+
+				this.ctx.setLineWidth(1);
+				this.ctx.setStrokeStyle('black');
+				this.ctx.strokeRect(transformScaleX, transformScaleY, scaleW, scaleH); // 标识移动区域
+
+				this._drawBorder();
+			}
+
+			if (x - transformScaleX >= 0 && y - transformScaleY >= 0 && transformScaleX + scaleW - x >= 0 &&
+				transformScaleY + scaleH - y >= 0) {
+				// 缩放区域
+				return 'transform';
+			} else if (x - transformDelX >= 0 && y - transformDelY >= 0 && transformDelX + delW - x >= 0 && transformDelY +
+				delH - y >= 0) {
+				// 删除区域
+				return 'del';
+			} else if (this.insidePolygon(this.square, [x, y])) {
+				return 'move';
+			} // 不在选择区域里面
+
+
+			return false;
+		},
+
+		/**
+		 *  判断一个点是否在多边形内部
+		 *  @param points 多边形坐标集合
+		 *  @param testPoint 测试点坐标
+		 *  返回true为真，false为假
+		 *  */
+		insidePolygon(points, testPoint) {
+			let x = testPoint[0],
+				y = testPoint[1];
+			let inside = false;
+
+			for (let i = 0, j = points.length - 1; i < points.length; j = i++) {
+				let xi = points[i][0],
+					yi = points[i][1];
+				let xj = points[j][0],
+					yj = points[j][1];
+				let intersect = yi > y != yj > y && x < (xj - xi) * (y - yi) / (yj - yi) + xi;
+				if (intersect) inside = !inside;
+			}
+
+			return inside;
+		},
+
+		/**
+		 * 计算旋转后矩形四个顶点的坐标（相对于画布）
+		 * @private
+		 */
+		_rotateSquare() {
+			this.square = [this._rotatePoint(this.x, this.y, this.centerX, this.centerY, this.rotate), this._rotatePoint(
+				this.x + this.w, this.y, this.centerX, this.centerY, this.rotate), this._rotatePoint(this.x + this
+				.w, this.y + this.h, this.centerX, this.centerY, this.rotate), this._rotatePoint(this.x, this.y +
+				this.h, this.centerX, this.centerY, this.rotate)];
+		},
+
+		/**
+		 * 计算旋转后的新坐标（相对于画布）
+		 * @param x
+		 * @param y
+		 * @param centerX
+		 * @param centerY
+		 * @param degrees
+		 * @returns {*[]}
+		 * @private
+		 */
+		_rotatePoint(x, y, centerX, centerY, degrees) {
+			let newX = (x - centerX) * Math.cos(degrees * Math.PI / 180) - (y - centerY) * Math.sin(degrees * Math.PI /
+				180) + centerX;
+			let newY = (x - centerX) * Math.sin(degrees * Math.PI / 180) + (y - centerY) * Math.cos(degrees * Math.PI /
+				180) + centerY;
+			return [newX, newY];
+		},
+
+		/**
+		 *
+		 * @param {*} px 手指按下去的坐标
+		 * @param {*} py 手指按下去的坐标
+		 * @param {*} x 手指移动到的坐标
+		 * @param {*} y 手指移动到的坐标
+		 * @param {*} currentGraph 当前图层的信息
+		 */
+		transform(px, py, x, y, currentGraph) {
+			// 获取选择区域的宽度高度
+			if (this.type === 'text') {
+				this.ctx.setFontSize(this.fontSize);
+				const textWidth = this.ctx.measureText(this.text).width;
+				const textHeight = this.fontSize + 10;
+				this.w = textWidth;
+				this.h = textHeight; // 字体区域中心点不变，左上角位移
+
+				this.x = this.centerX - textWidth / 2;
+				this.y = this.centerY - textHeight / 2;
+			} else {
+				this.centerX = this.x + this.w / 2;
+				this.centerY = this.y + this.h / 2;
+			}
+
+			const diffXBefore = px - this.centerX;
+			const diffYBefore = py - this.centerY;
+			const diffXAfter = x - this.centerX;
+			const diffYAfter = y - this.centerY;
+			const angleBefore = Math.atan2(diffYBefore, diffXBefore) / Math.PI * 180;
+			const angleAfter = Math.atan2(diffYAfter, diffXAfter) / Math.PI * 180; // 旋转的角度
+
+			if (ROTATE_ENABLED) {
+				this.rotate = currentGraph.rotate + angleAfter - angleBefore;
+			}
+
+			const lineA = Math.sqrt(Math.pow(this.centerX - px, 2) + Math.pow(this.centerY - py, 2));
+			const lineB = Math.sqrt(Math.pow(this.centerX - x, 2) + Math.pow(this.centerY - y, 2));
+
+			if (this.type === 'image') {
+				let resize_rito = lineB / lineA;
+				let new_w = currentGraph.w * resize_rito;
+				let new_h = currentGraph.h * resize_rito;
+
+				if (currentGraph.w < currentGraph.h && new_w < this.MIN_WIDTH) {
+					new_w = this.MIN_WIDTH;
+					new_h = this.MIN_WIDTH * currentGraph.h / currentGraph.w;
+				} else if (currentGraph.h < currentGraph.w && new_h < this.MIN_WIDTH) {
+					new_h = this.MIN_WIDTH;
+					new_w = this.MIN_WIDTH * currentGraph.w / currentGraph.h;
+				}
+
+				this.w = new_w;
+				this.h = new_h;
+				this.x = currentGraph.x - (new_w - currentGraph.w) / 2;
+				this.y = currentGraph.y - (new_h - currentGraph.h) / 2;
+			} else if (this.type === 'text') {
+				const fontSize = currentGraph.fontSize * ((lineB - lineA) / lineA + 1);
+				this.fontSize = fontSize <= this.MIN_FONTSIZE ? this.MIN_FONTSIZE : fontSize; // 旋转位移后重新计算坐标
+
+				this.ctx.setFontSize(this.fontSize);
+				const textWidth = this.ctx.measureText(this.text).width;
+				const textHeight = this.fontSize + 10;
+				this.w = textWidth;
+				this.h = textHeight; // 字体区域中心点不变，左上角位移
+
+				this.x = this.centerX - textWidth / 2;
+				this.y = this.centerY - textHeight / 2;
+			}
+		},
+
+		toPx(rpx) {
+			return rpx * this.factor;
+		},
+
+		beforeMount() {
+			const sysInfo = wx.getSystemInfoSync();
+			const screenWidth = sysInfo.screenWidth;
+			this.factor = screenWidth / 750;
+
+			if (typeof this.drawArr === 'undefined') {
+				this.drawArr = [];
+			}
+
+			this.ctx = wx.createCanvasContext('canvas-drag', this);
+			this.draw();
+		},
+
+		created() {
+			uni.downloadFile({
+				url: DELETE_ICON, //仅为示例，并非真实的资源
+				success: (res) => {
+					if (res.statusCode === 200) {
+						console.log('下载成功：' + res.tempFilePath);
+						DELETE_ICON = res.tempFilePath;
+					}
+				}
+			})
+			uni.downloadFile({
+				url: DRAG_ICON, //仅为示例，并非真实的资源
+				success: (res) => {
+					if (res.statusCode === 200) {
+						console.log('下载成功：' + res.tempFilePath);
+						DRAG_ICON = res.tempFilePath;
+					}
+				}
+			})
+		},
+
+		methods: {
+			toPx(rpx) {
+				return rpx * this.factor;
+			},
+
+			initBg() {
+				this.bgColor = '';
+				this.bgSourceId = '';
+				this.bgImage = '';
+			},
+
+			initHistory() {
+				this.history = [];
+			},
+
+			recordHistory() {
+				if (!this.enableUndo) {
+					return;
+				}
+
+				this.exportJson().then(imgArr => {
+					this.history.push(JSON.stringify(imgArr));
+				}).catch(e => {
+					console.error(e);
+				});
+			},
+
+			undo() {
+				if (!this.enableUndo) {
+					console.log(`后退功能未启用，请设置enableUndo="{{true}}"`);
+					return;
+				}
+
+				if (this.history.length > 1) {
+					this.history.pop();
+					let newConfigObj = this.history[this.history.length - 1];
+					this.initByArr(JSON.parse(newConfigObj));
+				} else {
+					console.log('已是第一步，不能回退');
+				}
+			},
+
+			onGraphChange(n, o) {
+				if (JSON.stringify(n) === '{}') return;
+				this.drawArr.push(new dragGraph(Object.assign({
+					x: 30,
+					y: 30
+				}, n), this.ctx, this.factor));
+				
+				this.emitDrawArrChange()
+				
+				this.draw(); // 参数有变化时记录历史
+
+				this.recordHistory();
+			},
+
+			initByArr(newArr) {
+				this.drawArr = []; // 重置绘画元素
+
+				this.initBg(); // 重置绘画背景
+				// 循环插入 drawArr
+
+				newArr.forEach((item, index) => {
+					switch (item.type) {
+						case 'bgColor':
+							this.bgImage = '';
+							this.bgSourceId = '';
+							this.bgColor = item.color;
+							break;
+
+						case 'bgImage':
+							this.bgColor = '';
+							this.bgImage = item.url;
+
+							if (item.sourceId) {
+								this.bgSourceId = item.sourceId;
+							}
+
+							break;
+
+						case 'image':
+						case 'text':
+							if (index === newArr.length - 1) {
+								item.selected = true;
+							} else {
+								item.selected = false;
+							}
+
+							this.drawArr.push(new dragGraph(item, this.ctx, this.factor));
+							break;
+					}
+				});
+				this.draw();
+			},
+
+			draw() {
+				if (this.bgImage !== '') {
+					this.ctx.drawImage(this.bgImage, 0, 0, this.toPx(this.width), this.toPx(this.height));
+				}
+
+				if (this.bgColor !== '') {
+					this.ctx.save();
+					this.ctx.setFillStyle(this.bgColor);
+					this.ctx.fillRect(0, 0, this.toPx(this.width), this.toPx(this.height));
+					this.ctx.restore();
+				}
+
+				this.drawArr.forEach(item => {
+					item.paint();
+				});
+				return new Promise(resolve => {
+					this.ctx.draw(false, () => {
+						resolve();
+					});
+				});
+			},
+
+			start(e) {
+				isMove = false; // 重置移动标识
+
+				const {
+					x,
+					y
+				} = e.touches[0];
+				this.tempGraphArr = [];
+				let lastDelIndex = null; // 记录最后一个需要删除的索引
+
+				this.drawArr && this.drawArr.forEach((item, index) => {
+					const action = item.isInGraph(x, y);
+
+					if (action) {
+						item.action = action;
+						this.tempGraphArr.push(item); // 保存点击时的坐标
+
+						this.currentTouch = {
+							x,
+							y
+						};
+
+						if (action === 'del') {
+							lastDelIndex = index; // 标记需要删除的元素
+							item.selected = true;
+						}
+					} else {
+						item.action = false;
+						item.selected = false;
+					}
+				}); // 保存点击时元素的信息
+
+				if (this.tempGraphArr.length > 0) {
+					for (let i = 0; i < this.tempGraphArr.length; i++) {
+						let lastIndex = this.tempGraphArr.length - 1; // 对最后一个元素做操作
+
+						if (i === lastIndex) {
+							// 未选中的元素，不执行删除和缩放操作
+							if (lastDelIndex !== null && this.tempGraphArr[i].selected) {
+								if (this.drawArr[lastDelIndex].action == 'del') {
+									this.drawArr.splice(lastDelIndex, 1);
+									this.ctx.clearRect(0, 0, this.toPx(this.width), this.toPx(this.height));
+								}
+							} else {
+								this.tempGraphArr[lastIndex].selected = true;
+								this.currentGraph = Object.assign({}, this.tempGraphArr[lastIndex]);
+							}
+						} else {
+							// 不是最后一个元素，不需要选中，也不记录状态
+							this.tempGraphArr[i].action = false;
+							this.tempGraphArr[i].selected = false;
+						}
+					}
+				}
+
+				this.draw();
+			},
+
+			move(e) {
+				const {
+					x,
+					y
+				} = e.touches[0];
+
+				if (this.tempGraphArr && this.tempGraphArr.length > 0) {
+					isMove = true; // 有选中元素，并且有移动时，设置移动标识
+
+					const currentGraph = this.tempGraphArr[this.tempGraphArr.length - 1];
+
+					if (currentGraph.action === 'move') {
+						currentGraph.centerX = this.currentGraph.centerX + (x - this.currentTouch.x);
+						currentGraph.centerY = this.currentGraph.centerY + (y - this.currentTouch
+						.y); // 使用中心点坐标计算位移，不使用 x,y 坐标，因为会受旋转影响。
+
+						if (currentGraph.type !== 'text') {
+							currentGraph.x = currentGraph.centerX - this.currentGraph.w / 2;
+							currentGraph.y = currentGraph.centerY - this.currentGraph.h / 2;
+						}
+					} else if (currentGraph.action === 'transform') {
+						currentGraph.transform(this.currentTouch.x, this.currentTouch.y, x, y, this.currentGraph);
+					} // 更新4个坐标点（相对于画布的坐标系）
+
+
+					currentGraph._rotateSquare();
+
+					this.draw();
+				}
+			},
+
+			end(e) {
+				
+				this.emitDrawArrChange()
+				
+				this.tempGraphArr = [];
+
+				if (isMove) {
+					isMove = false; // 重置移动标识
+					// 用户操作结束时记录历史
+
+					this.recordHistory();
+				}
+			},
+			
+			emitDrawArrChange(){
+				
+				let arr = this.drawArr.map(item => {
+					return {
+						x : item.x,
+						y : item.y,
+						w : item.w,
+						h : item.h,
+					}
+				})
+				this.$emit('onDrawArrChange', arr)
+			},
+
+			exportFun() {
+				return new Promise((resolve, reject) => {
+					this.drawArr = this.drawArr.map(item => {
+						item.selected = false;
+						return item;
+					});
+					this.draw().then(() => {
+						wx.canvasToTempFilePath({
+							canvasId: 'canvas-drag',
+							success: res => {
+								resolve(res.tempFilePath);
+							},
+							fail: e => {
+								reject(e);
+							}
+						}, this);
+					});
+				});
+			},
+
+			exportJson() {
+				return new Promise((resolve, reject) => {
+					let exportArr = this.drawArr.map(item => {
+						item.selected = false;
+
+						switch (item.type) {
+							case 'image':
+								return {
+									type: 'image',
+										url: item.fileUrl,
+										y: item.y,
+										x: item.x,
+										w: item.w,
+										h: item.h,
+										rotate: item.rotate,
+										sourceId: item.sourceId
+								};
+								break;
+
+							case 'text':
+								return {
+									type: 'text',
+										text: item.text,
+										color: item.color,
+										fontSize: item.fontSize,
+										y: item.y,
+										x: item.x,
+										w: item.w,
+										h: item.h,
+										rotate: item.rotate
+								};
+								break;
+						}
+					});
+
+					if (this.bgImage) {
+						let tmp_img_config = {
+							type: 'bgImage',
+							url: this.bgImage
+						};
+
+						if (this.bgSourceId) {
+							tmp_img_config['sourceId'] = this.bgSourceId;
+						}
+
+						exportArr.unshift(tmp_img_config);
+					} else if (this.bgColor) {
+						exportArr.unshift({
+							type: 'bgColor',
+							color: this.bgColor
+						});
+					}
+
+					resolve(exportArr);
+				});
+			},
+
+			changColor(color) {
+				const selected = this.drawArr.filter(item => item.selected);
+
+				if (selected.length > 0) {
+					selected[0].color = color;
+				}
+
+				this.draw(); // 改变文字颜色时记录历史
+
+				this.recordHistory();
+			},
+
+			changeBgColor(color) {
+				this.bgImage = '';
+				this.bgColor = color;
+				this.draw(); // 改变背景颜色时记录历史
+
+				this.recordHistory();
+			},
+
+			changeBgImage(newBgImg) {
+				this.bgColor = '';
+
+				if (typeof newBgImg == 'string') {
+					this.bgSourceId = '';
+					this.bgImage = newBgImg;
+				} else {
+					this.bgSourceId = newBgImg.sourceId;
+					this.bgImage = newBgImg.url;
+				}
+
+				this.draw(); // 改变背景图片时记录历史
+
+				this.recordHistory();
+			},
+
+			clearCanvas() {
+				this.ctx.clearRect(0, 0, this.toPx(this.width), this.toPx(this.height));
+				this.ctx.draw();
+				this.drawArr = [];
+				this.initBg(); // 重置绘画背景
+
+				this.initHistory(); // 清空历史记录
+			}
+
+		}
+	};
+</script>
+<style>
+	@import "./index.css";
+</style>
\ No newline at end of file
diff --git a/components/canvas-drag/setData.js b/components/canvas-drag/setData.js
new file mode 100644
index 0000000..2126535
--- /dev/null
+++ b/components/canvas-drag/setData.js
@@ -0,0 +1,63 @@
+
+
+
+
+export default {
+	data() {
+		return {
+		}
+	},
+	methods: {
+		// 设置数据
+		setData: function(obj, callback) {
+			let that = this;
+			const handleData = (tepData, tepKey, afterKey) => {
+				tepKey = tepKey.split('.');
+				tepKey.forEach(item => {
+					if (tepData[item] === null || tepData[item] === undefined) {
+						let reg = /^[0-9]+$/;
+						tepData[item] = reg.test(afterKey) ? [] : {};
+						tepData = tepData[item];
+					} else {
+						tepData = tepData[item];
+					}
+				});
+				return tepData;
+			};
+			const isFn = function(value) {
+				return typeof value == 'function' || false;
+			};
+			Object.keys(obj).forEach(function(key) {
+				let val = obj[key];
+				key = key.replace(/\]/g, '').replace(/\[/g, '.');
+				let front, after;
+				let index_after = key.lastIndexOf('.');
+				if (index_after != -1) {
+					after = key.slice(index_after + 1);
+					front = handleData(that, key.slice(0, index_after), after);
+				} else {
+					after = key;
+					front = that;
+				}
+				if (front.$data && front.$data[after] === undefined) {
+					Object.defineProperty(front, after, {
+						get() {
+							return front.$data[after];
+						},
+						set(newValue) {
+							front.$data[after] = newValue;
+							that.$forceUpdate();
+						},
+						enumerable: true,
+						configurable: true
+					});
+					front[after] = val;
+				} else {
+					that.$set(front, after, val);
+				}
+			});
+			// this.$forceUpdate();
+			isFn(callback) && this.$nextTick(callback);
+		},
+	}
+}
\ No newline at end of file
diff --git a/mixins/configList.js b/mixins/configList.js
index fd8ca93..c972abf 100644
--- a/mixins/configList.js
+++ b/mixins/configList.js
@@ -1,13 +1,13 @@
-
-
-import { mapState } from 'vuex'
+import {
+	mapState
+} from 'vuex'
 export default {
 	data() {
 		return {
 			// 默认的全局分享内容
 			Gshare: {
 				title: '特易招',
-				path: '/pages/index/index',    // 全局分享的路径，比如 首页
+				path: '/pages/index/index', // 全局分享的路径，比如 首页
 				// imageUrl: '/static/image/login/logo.png',    // 全局分享的图片(可本地可网络)
 			}
 		}
@@ -17,27 +17,27 @@ export default {
 	},
 	// 定义全局分享
 	// 1.发送给朋友
-    onShareAppMessage(res) {
+	onShareAppMessage(res) {
 		let o = {
 			...this.Gshare,
-			title : this.configList.config_app_name,
+			title: this.configList.config_app_name,
 		}
-		if(this.userInfo.id){
+		if (this.userInfo.id) {
 			o.path = this.Gshare.path + '?shareId=' + this.userInfo.id
 		}
-        return o
-    },
+		return o
+	},
 	//2.分享到朋友圈
-    onShareTimeline(res) {
+	onShareTimeline(res) {
 		let o = {
 			...this.Gshare,
-			title : this.configList.config_app_name,
+			title: this.configList.config_app_name,
 		}
-		if(this.userInfo.id){
+		if (this.userInfo.id) {
 			o.path = this.Gshare.path + '?shareId=' + this.userInfo.id
 		}
-        return o
-    },
+		return o
+	},
 	methods: {
 	}
 }
\ No newline at end of file
diff --git a/pages.json b/pages.json
index 371555a..bf1b983 100644
--- a/pages.json
+++ b/pages.json
@@ -91,12 +91,6 @@
 					"navigationBarTextStyle": "white"
 				}
 			},
-			{
-				"path": "mine/contract",
-				"style": {
-					"enablePullDownRefresh": true
-				}
-			},
 			{
 				"path": "mine/promotion"
 			},
@@ -191,7 +185,29 @@
 				"path": "work/workTypeList"
 			},
 			{
-				"path": "mine/contractDetail"
+				"path": "contract/contractDetail"
+			},
+			{
+				"path": "contract/contract",
+				"style": {
+					"enablePullDownRefresh": true
+				}
+			},
+			{
+				"path": "contract/contractManage",
+				"style": {
+					"enablePullDownRefresh": true
+				}
+			},
+			{
+				"path": "contract/contractManageEdit",
+				"style": {
+				}
+			},
+			{
+				"path": "contract/electronicSignature",
+				"style": {
+				}
 			}
 		]
 	}],
diff --git a/pages/index/center.vue b/pages/index/center.vue
index 27d0963..7cf4edb 100644
--- a/pages/index/center.vue
+++ b/pages/index/center.vue
@@ -192,11 +192,17 @@
 						<text class="grid-text">兑换码</text>
 					</uv-grid-item>
 
-					<uv-grid-item @click="$utils.navigateTo('/pages_order/mine/contract')">
+					<uv-grid-item @click="$utils.navigateTo('/pages_order/contract/contract')">
 						<image class="image" src="/static/image/center/5.png" mode=""></image>
 						<text class="grid-text">电子合同</text>
 					</uv-grid-item>
 
+					<uv-grid-item @click="$utils.navigateTo('/pages_order/contract/contractManage')"
+					v-if="role">
+						<image class="image" src="/static/image/center/5.png" mode=""></image>
+						<text class="grid-text">合同模板</text>
+					</uv-grid-item>
+
 					<uv-grid-item @click="$utils.navigateTo('/pages_order/mine/promotion')">
 						<image class="image" src="/static/image/center/5.png" mode=""></image>
 						<text class="grid-text">面对面分享</text>
diff --git a/pages_order/mine/contract.vue b/pages_order/contract/contract.vue
similarity index 96%
rename from pages_order/mine/contract.vue
rename to pages_order/contract/contract.vue
index eae3856..0d16439 100644
--- a/pages_order/mine/contract.vue
+++ b/pages_order/contract/contract.vue
@@ -17,7 +17,7 @@
 		<view class="content">
 			<view class="projectContent"
 			v-for="(item, index) in list"
-			@click="$utils.navigateTo('/pages_order/mine/contractDetail?id=' + item.id)"
+			@click="$utils.navigateTo('/pages_order/contract/contractDetail?id=' + item.id)"
 			:key="index">
 				<image src="../static/contract/contract.png" alt="" />
 				<view class="itemList">
diff --git a/pages_order/contract/contractDetail.vue b/pages_order/contract/contractDetail.vue
new file mode 100644
index 0000000..e60bb0a
--- /dev/null
+++ b/pages_order/contract/contractDetail.vue
@@ -0,0 +1,195 @@
+<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>
diff --git a/pages_order/contract/contractManage.vue b/pages_order/contract/contractManage.vue
new file mode 100644
index 0000000..26a7cbb
--- /dev/null
+++ b/pages_order/contract/contractManage.vue
@@ -0,0 +1,88 @@
+<template>
+	<view class="page">
+		<navbar title="合同模板"
+		leftClick 
+		@leftClick="$utils.navigateBack"/>
+		
+		
+		<view class="content">
+			<view class="projectContent"
+			@click="$utils.navigateTo('/pages_order/contract/contractManageEdit')"
+			>
+				<image src="../static/contract/contract.png" alt="" />
+				<view class="info">
+					<view class="projectName">
+						xxxx电子合同
+					</view>
+					<view class="text">
+						甲方：湖南瀚海科技有限公司
+					</view>
+					<view class="text">
+						乙方：四川特能博世科技有限公司
+					</view>
+				</view>
+				<view class="run"
+				@click.stop="$utils.navigateTo('/pages_order/contract/contractManageEdit')">
+					<uv-icon 
+					name="arrow-right" 
+					color="#2979ff" 
+					size="30rpx"></uv-icon>
+				</view>
+			</view>
+		</view>
+		<image src="/static/image/1.png" mode=""></image>
+	</view>
+</template>
+
+<script>
+	export default {
+		data() {
+			return {
+				
+			}
+		},
+		methods: {
+			
+		}
+	}
+</script>
+
+<style scoped lang="scss">
+	.page{
+		.content {
+			width: 100%;
+			height: 100%;
+			.projectContent {
+				background-color: #fff;
+				display: flex;
+				margin: 30rpx;
+				border-radius: 20rpx;
+				image {
+					width: 140rpx;
+					height: 120rpx;
+					margin: 20rpx;
+				}
+				.info {
+					margin: 28rpx 10rpx;
+					.projectName {
+						font-size: 32rpx;
+					}
+					.text {
+						font-size: 24rpx;
+					}
+				}
+				.run{
+					margin: auto;
+					margin-right: 30rpx;
+					height: 60rpx;
+					width: 60rpx;
+					border-radius: 50%;
+					border: 1px solid $uni-color;
+					display: flex;
+					justify-content: center;
+					align-items: center;
+				}
+			}
+		}
+	}
+</style>
diff --git a/pages_order/contract/contractManageEdit.vue b/pages_order/contract/contractManageEdit.vue
new file mode 100644
index 0000000..e8fac5f
--- /dev/null
+++ b/pages_order/contract/contractManageEdit.vue
@@ -0,0 +1,153 @@
+<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>
\ No newline at end of file
diff --git a/pages_order/contract/electronicSignature.vue b/pages_order/contract/electronicSignature.vue
new file mode 100644
index 0000000..2de378b
--- /dev/null
+++ b/pages_order/contract/electronicSignature.vue
@@ -0,0 +1,188 @@
+<template>
+	<div class="contain">
+		<navbar 
+		title="电子签名" 
+		v-if="!crosswise"
+		leftClick 
+		@leftClick="$utils.navigateBack"/>
+		
+		<view 
+		class="electronic-contract"
+		:class="{crosswise}">
+			<canvas 
+			canvas-id="mycanvas" 
+			class="mycanvas" 
+			:style="{height, width}"
+			disable-scroll="true"
+			@touchstart="ontouchstart" 
+			@touchmove="touchmove"></canvas>
+			<view class="title"
+			v-if="crosswise">
+				请旋转屏幕，按文字方向开始签名
+			</view>
+		</view>
+
+		<view class="btn-list">
+			<view class="uni-color-btn" @click="clear">
+				清除
+			</view>
+			<view class="uni-color-btn" @click="close">
+				完成
+			</view>
+		</view>
+	</div>
+</template>
+
+<script>
+	export default {
+		data() {
+			return {
+				oc: null,
+				points: [], //路径点集合
+				show: true,
+				height : '350rpx',
+				width : '700rpx',
+				crosswise : false,
+				options : {},
+			}
+		},
+		onReady() {
+			this.open()
+		},
+		onLoad(options) {
+			this.options = options
+		},
+		onShow() {
+			this.initPM()
+		},
+		methods: {
+			initPM(){
+				if(!this.crosswise) return
+				let info = uni.getSystemInfoSync();
+				console.log(info.windowWidth);
+				console.log(info.windowHeight);
+				
+				
+			},
+			open() {
+				this.initCanvas();
+			},
+			close() {
+				uni.canvasToTempFilePath({
+					canvasId: "mycanvas",
+					success: (res) => {
+						console.log(res.tempFilePath);
+						const canvas = res.tempFilePath;
+						
+						uni.setStorageSync('electronicSignature', canvas)
+						let o = this.options
+						uni.navigateBack(-1)
+					},
+					fail(error) {
+						console.error("转化图片错误!", error)
+					}
+				});
+			},
+
+			initCanvas() {
+				this.oc = uni.createCanvasContext("mycanvas");
+			},
+
+			ontouchstart(e) {
+				this.points = []
+
+				const startX = e.changedTouches[0].x;
+				const startY = e.changedTouches[0].y;
+
+				let startPoint = {
+					X: startX,
+					Y: startY,
+				};
+				this.points.push(startPoint);
+			},
+
+			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(); //绘制路径
+				}
+			},
+
+			draw() {
+				if (this.points.length < 2) return;
+
+				this.oc.beginPath();
+				this.oc.moveTo(this.points[0].X, this.points[0].Y);
+
+				// for (let i = 1; i < this.points.length; i++) {
+				// 	let point = this.points[i];
+				// 	this.oc.lineTo(point.X, point.Y);
+				// }
+				
+				this.oc.lineTo(this.points[1].X, this.points[1].Y);
+				
+				this.points.shift()
+
+				this.oc.setStrokeStyle('#000000');
+				this.oc.setLineWidth(5);
+				this.oc.setLineCap('round');
+				this.oc.setLineJoin('round');
+				this.oc.stroke();
+				this.oc.draw(true);
+			},
+			//清空画布
+			clear() {
+				let that = this;
+				uni.getSystemInfo({
+					success: (res) => {
+						let canvasw = res.windowWidth;
+						let canvash = res.windowHeight;
+						that.oc.clearRect(0, 0, canvasw, canvash);
+						that.oc.draw(true);
+					},
+				});
+			},
+		}
+	};
+</script>
+
+<style lang="scss" scoped>
+	.contain {
+		position: relative;
+		.mycanvas {
+			background-color: #fff;
+			border-radius: 20rpx;
+		}
+		.electronic-contract{
+			display: flex;
+			justify-content: center;
+			align-items: center;
+			margin: 25rpx;
+		}
+		.crosswise{
+			.title{
+				writing-mode: vertical-lr; /* 垂直从上到下 */
+				transform: skewY(180deg); /* 颠倒文本 */
+				display: inline-block; /* 需要设置为内联块 */
+			}
+		}
+		.btn-list {
+			display: flex;
+			padding: 20rpx;
+			justify-content: space-around;
+
+			.uni-color-btn {
+				border-radius: 10rpx;
+				margin: 0;
+				padding: 20rpx 40rpx;
+			}
+		}
+	}
+</style>
\ No newline at end of file
diff --git a/pages_order/mine/contractDetail.vue b/pages_order/mine/contractDetail.vue
deleted file mode 100644
index 01b3b5d..0000000
--- a/pages_order/mine/contractDetail.vue
+++ /dev/null
@@ -1,44 +0,0 @@
-<template>
-	<view class="page">
-		<navbar title="电子合同"
-		leftClick 
-		@leftClick="$utils.navigateBack"/>
-		
-		
-		
-	</view>
-</template>
-
-<script>
-	export default {
-		data() {
-			return {
-				id : 0,
-				detail : {},
-			}
-		},
-		onLoad({id}) {
-			this.id = id
-			this.getDetail()
-		},
-		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
-						}
-					})
-			},
-		}
-	}
-</script>
-
-<style scoped lang="scss">
-
-</style>
diff --git a/static/components/canvas-drag/close.png b/static/components/canvas-drag/close.png
new file mode 100644
index 0000000000000000000000000000000000000000..15be005da2f50d39030b09a4c1ed9387a00c8203
GIT binary patch
literal 2695
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

literal 0
HcmV?d00001

diff --git a/static/components/canvas-drag/scale.png b/static/components/canvas-drag/scale.png
new file mode 100644
index 0000000000000000000000000000000000000000..173217798242f4878677b91e898cdf709c231c8d
GIT binary patch
literal 2010
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
Pa@z_bV)>tjCl&q;jQ<!_

literal 0
HcmV?d00001