From c16f8df489b47adbcda2e3f1af9a6d546c213d12 Mon Sep 17 00:00:00 2001
From: =?UTF-8?q?=E8=AE=B8=E5=85=81=E6=9E=9E?= <3422692813@qq.com>
Date: Thu, 31 Oct 2024 15:20:22 +0800
Subject: [PATCH] =?UTF-8?q?=E6=9B=B4=E6=96=B0=E7=AD=BE=E5=AD=97=E7=89=88?=
 =?UTF-8?q?=E6=A0=B7=E5=BC=8F?=
MIME-Version: 1.0
Content-Type: text/plain; charset=UTF-8
Content-Transfer-Encoding: 8bit

---
 pages-order/addOrder/addOrder.vue    |   3 +-
 pages-repair/sign/pickerColor.vue    | 145 +++++++
 pages-repair/sign/sign.vue           | 619 +++++++++++++++++++++++++++
 pages-repair/signature/signature.vue |  34 +-
 pages.json                           |   6 +
 5 files changed, 789 insertions(+), 18 deletions(-)
 create mode 100644 pages-repair/sign/pickerColor.vue
 create mode 100644 pages-repair/sign/sign.vue

diff --git a/pages-order/addOrder/addOrder.vue b/pages-order/addOrder/addOrder.vue
index 36bfeaa..13d1345 100644
--- a/pages-order/addOrder/addOrder.vue
+++ b/pages-order/addOrder/addOrder.vue
@@ -257,7 +257,8 @@ export default {
         itemList: this.formatItem(this.selectedProj)
       }
       uni.navigateTo({
-        url: '/pages-repair/signature/signature?data=' + JSON.stringify(data)
+        // url: '/pages-repair/signature/signature?data=' + JSON.stringify(data)
+        url: '/pages-repair/sign/sign?data=' + JSON.stringify(data)
       })
       // request({
       //   url: '/admin-api/repair/tickets/create',
diff --git a/pages-repair/sign/pickerColor.vue b/pages-repair/sign/pickerColor.vue
new file mode 100644
index 0000000..b074da1
--- /dev/null
+++ b/pages-repair/sign/pickerColor.vue
@@ -0,0 +1,145 @@
+<template>
+	<view v-show="isShow">
+		<view class="shade" @tap="hide">
+			<view class="pop">
+				<view class="list flex_col" v-for="(item,index) in colorArr" :key="index">
+					<view v-for="(v,i) in item" :key="i" :style="{'backgroundColor':v}" :data-color="v"
+						:data-index="index" :data-i="i" :class="{'active':(index==pickerArr[0] && i==pickerArr[1])}"
+						@tap.stop="picker"></view>
+				</view>
+			</view>
+		</view>
+
+	</view>
+</template>
+
+<script>
+	export default {
+		name: 'picker-color',
+		props: {
+			isShow: {
+				type: Boolean,
+				default: false,
+			},
+			bottom: {
+				type: Number,
+				default: 0,
+			}
+		},
+		data() {
+			return {
+				colorArr: [
+					['#000000', '#111111', '#222222', '#333333', '#444444', '#666666', '#999999', '#CCCCCC', '#EEEEEE',
+						'#FFFFFF'
+					],
+					['#ff0000', '#ff0033', '#ff3399', '#ff33cc', '#cc00ff', '#9900ff', '#cc00cc', '#cc0099', '#cc3399',
+						'#cc0066'
+					],
+					['#cc3300', '#cc6600', '#ff9933', '#ff9966', '#ff9999', '#ff99cc', '#ff99ff', '#cc66ff', '#9966ff',
+						'#cc33ff'
+					],
+					['#663300', '#996600', '#996633', '#cc9900', '#a58800', '#cccc00', '#ffff66', '#ffff99', '#ffffcc',
+						'#ffcccc'
+					],
+					['#336600', '#669900', '#009900', '#009933', '#00cc00', '#66ff66', '#339933', '#339966', '#009999',
+						'#33cccc'
+					],
+					['#003366', '#336699', '#3366cc', '#0099ff', '#000099', '#0000cc', '#660066', '#993366', '#993333',
+						'#800000'
+					]
+				],
+				pickerColor: '',
+				pickerArr: [-1, -1]
+			};
+		},
+		methods: {
+			picker(e) {
+				let data = e.currentTarget.dataset;
+				this.pickerColor = data.color;
+				this.pickerArr = [data.index, data.i];
+				this.$emit("callback", this.pickerColor);
+			},
+			hide() {
+				this.$emit("callback", '');
+			},
+		},
+
+	}
+</script>
+
+<style scoped>
+	.shade {
+		position: fixed;
+		top: 0;
+		right: 0;
+		bottom: 0;
+		left: 0;
+		background-color: rgba(0, 0, 0, 0.5);
+		z-index: 99;
+		display: flex;
+		justify-content: center;
+		align-items: center
+	}
+
+	.pop {
+		border-radius: 8px;
+		background-color: #fff;
+		z-index: 100;
+		padding: 12upx;
+		font-size: 32upx;
+		transform: rotate(90deg);
+	}
+
+	.flex_col {
+		display: flex;
+		flex-direction: row;
+		flex-wrap: nowrap;
+		justify-content: flex-start;
+		align-items: center;
+		align-content: center;
+	}
+
+	.list {
+		justify-content: space-between;
+	}
+
+	.list>view {
+		width: 60upx;
+		height: 60upx;
+		margin: 5upx;
+		box-sizing: border-box;
+		border-radius: 3px;
+		box-shadow: 0 0 2px #ccc;
+	}
+
+	.list .active {
+		box-shadow: 0 0 2px #09f;
+		transform: scale(1.05, 1.05);
+	}
+
+	.preview {
+		width: 180upx;
+		height: 60upx;
+	}
+
+	.value {
+		margin: 0 40upx;
+		flex-grow: 1;
+	}
+
+	.ok {
+		width: 160upx;
+		height: 60upx;
+		line-height: 60upx;
+		text-align: center;
+		background-color: #ff9933;
+		color: #fff;
+		border-radius: 4px;
+		letter-spacing: 3px;
+		font-size: 32upx;
+	}
+
+	.ok:active {
+		background-color: rgb(255, 107, 34);
+	}
+</style>
\ No newline at end of file
diff --git a/pages-repair/sign/sign.vue b/pages-repair/sign/sign.vue
new file mode 100644
index 0000000..510beca
--- /dev/null
+++ b/pages-repair/sign/sign.vue
@@ -0,0 +1,619 @@
+<template>
+	<view>
+		<view class="wrapper">
+			<view class="handBtn">
+				<!-- #ifdef MP-WEIXIN -->
+				<image @click="selectColorEvent('black','#1A1A1A')"
+					:src="selectColor === 'black' ? '/static/other/color_black_selected.png' : '/static/other/color_black.png'"
+					class="black-select"></image>
+				<image @click="selectColorEvent('red','#ca262a')"
+					:src="selectColor === 'red' ? '/static/other/color_red_selected.png' : '/static/other/color_red.png'"
+					class="red-select"></image>
+				<!-- #endif -->
+				<!-- #ifndef MP-WEIXIN -->
+				<div class="color_pic" :style="{background:lineColor}" @click="showPickerColor=true"></div>
+				<!-- #endif -->
+				<button @click="clear" class="delBtn">清空</button>
+<!--				<button @click="saveCanvasAsImg" class="saveBtn">保存</button>-->
+<!--				<button @click="previewCanvasImg" class="previewBtn">预览</button>-->
+				<button @click="undo" class="saveBtn">撤销</button>
+				<button @click="subCanvas" class="subBtn">完成</button>
+			</view>
+			<view class="handCenter">
+				<canvas class="handWriting" :disable-scroll="true" @touchstart="uploadScaleStart"
+					@touchmove="uploadScaleMove" @touchend="uploadScaleEnd" canvas-id="handWriting"></canvas>
+			</view>
+			<view class="handRight">
+				<view class="handTitle">请签名</view>
+			</view>
+		</view>
+
+		<pickerColor :isShow="showPickerColor" :bottom="0" @callback='getPickerColor' />
+	</view>
+</template>
+
+<script>
+	import pickerColor from "./pickerColor.vue"
+  import upload from "@/utils/upload";
+  import request from "@/utils/request";
+	export default {
+		components: {
+			pickerColor
+		},
+		data() {
+			return {
+        data:{},
+				showPickerColor: false,
+				ctx: '',
+				canvasWidth: 0,
+				canvasHeight: 0,
+				selectColor: 'black',
+				lineColor: '#1A1A1A',
+				points: [],
+				historyList: [],
+				canAddHistory: true,
+				getImagePath: () => {
+					return new Promise((resolve) => {
+						uni.canvasToTempFilePath({
+							canvasId: 'handWriting',
+							fileType: 'png',
+							quality: 1, //图片质量
+							success: res => resolve(res.tempFilePath),
+						})
+					})
+				},
+				toDataURL: void 0,
+				requestAnimationFrame: void 0,
+			};
+		},
+		props: { //可用于修改的参数放在props里   也可单独放在外面做成组件调用  传值
+			minSpeed: { //画笔最小速度
+				type: Number,
+				default: 1.5
+			},
+			minWidth: { //线条最小粗度
+				type: Number,
+				default: 3,
+			},
+			maxWidth: { //线条最大粗度
+				type: Number,
+				default: 10
+			},
+			openSmooth: { //开启平滑线条（笔锋）
+				type: Boolean,
+				default: true
+			},
+			maxHistoryLength: { //历史最大长度
+				type: Number,
+				default: 20
+			},
+			maxWidthDiffRate: { //最大差异率
+				type: Number,
+				default: 20
+			},
+			bgColor: { //背景色
+				type: String,
+				default: ''
+			},
+		},
+		onLoad(data) {
+			this.ctx = uni.createCanvasContext("handWriting");
+			this.$nextTick(() => {
+				uni.createSelectorQuery().select('.handCenter').boundingClientRect(rect => {
+						this.canvasWidth = rect.width;
+						this.canvasHeight = rect.height;
+						this.drawBgColor()
+					})
+					.exec();
+			});
+      if (data.data){
+        console.log('传递过来的内容',  JSON.parse(data.data))
+        this.data = JSON.parse(data.data)
+        console.log('此时的data',this.data)
+      }
+		},
+		methods: {
+			getPickerColor(color) {
+				this.showPickerColor = false;
+				if (color) {
+					this.lineColor = color;
+				}
+			},
+			// 笔迹开始
+			uploadScaleStart(e) {
+				this.canAddHistory = true
+				this.ctx.setStrokeStyle(this.lineColor)
+				this.ctx.setLineCap("round") //'butt'、'round'、'square'
+			},
+			// 笔迹移动
+			uploadScaleMove(e) {
+				let temX = e.changedTouches[0].x
+				let temY = e.changedTouches[0].y
+				this.initPoint(temX, temY)
+				this.onDraw()
+			},
+			/**
+			 * 触摸结束
+			 */
+			uploadScaleEnd() {
+				this.canAddHistory = true;
+				this.points = [];
+			},
+			/**
+			 * 记录点属性
+			 */
+			initPoint(x, y) {
+				var point = {
+					x: x,
+					y: y,
+					t: Date.now()
+				};
+				var prePoint = this.points.slice(-1)[0];
+				if (prePoint && (prePoint.t === point.t || prePoint.x === x && prePoint.y === y)) {
+					return;
+				}
+				if (prePoint && this.openSmooth) {
+					var prePoint2 = this.points.slice(-2, -1)[0];
+					point.distance = Math.sqrt(Math.pow(point.x - prePoint.x, 2) + Math.pow(point.y - prePoint.y, 2));
+					point.speed = point.distance / (point.t - prePoint.t || 0.1);
+					point.lineWidth = this.getLineWidth(point.speed);
+					if (prePoint2 && prePoint2.lineWidth && prePoint.lineWidth) {
+						var rate = (point.lineWidth - prePoint.lineWidth) / prePoint.lineWidth;
+						var maxRate = this.maxWidthDiffRate / 100;
+						maxRate = maxRate > 1 ? 1 : maxRate < 0.01 ? 0.01 : maxRate;
+						if (Math.abs(rate) > maxRate) {
+							var per = rate > 0 ? maxRate : -maxRate;
+							point.lineWidth = prePoint.lineWidth * (1 + per);
+						}
+					}
+				}
+				this.points.push(point);
+				this.points = this.points.slice(-3);
+			},
+			/**
+			 * @param {Object}
+			 * 线宽
+			 */
+			getLineWidth(speed) {
+				var minSpeed = this.minSpeed > 10 ? 10 : this.minSpeed < 1 ? 1 : this.minSpeed; //1.5
+				var addWidth = (this.maxWidth - this.minWidth) * speed / minSpeed;
+				var lineWidth = Math.max(this.maxWidth - addWidth, this.minWidth);
+				return Math.min(lineWidth, this.maxWidth);
+			},
+			/**
+			 * 绘画逻辑
+			 */
+			onDraw() {
+				if (this.points.length < 2) return;
+				this.addHistory();
+				var point = this.points.slice(-1)[0];
+				var prePoint = this.points.slice(-2, -1)[0];
+				let that = this
+				var onDraw = function onDraw() {
+					if (that.openSmooth) {
+						that.drawSmoothLine(prePoint, point);
+					} else {
+						that.drawNoSmoothLine(prePoint, point);
+					}
+				};
+				if (typeof this.requestAnimationFrame === 'function') {
+					this.requestAnimationFrame(function() {
+						return onDraw();
+					});
+				} else {
+					onDraw();
+				}
+			},
+			//添加历史图片地址
+			addHistory() {
+				if (!this.maxHistoryLength || !this.canAddHistory) return;
+				this.canAddHistory = false;
+				if (!this.getImagePath) {
+					this.historyList.length++;
+					return;
+				}
+				//历史地址 (暂时无用)
+				let that = this
+				that.getImagePath().then(function(url) {
+					if (url) {
+						that.historyList.push(url)
+						that.historyList = that.historyList.slice(-that.maxHistoryLength);
+					}
+				});
+			},
+			//画平滑线
+			drawSmoothLine(prePoint, point) {
+				var dis_x = point.x - prePoint.x;
+				var dis_y = point.y - prePoint.y;
+
+				if (Math.abs(dis_x) + Math.abs(dis_y) <= 2) {
+					point.lastX1 = point.lastX2 = prePoint.x + dis_x * 0.5;
+					point.lastY1 = point.lastY2 = prePoint.y + dis_y * 0.5;
+				} else {
+					point.lastX1 = prePoint.x + dis_x * 0.3;
+					point.lastY1 = prePoint.y + dis_y * 0.3;
+					point.lastX2 = prePoint.x + dis_x * 0.7;
+					point.lastY2 = prePoint.y + dis_y * 0.7;
+				}
+				point.perLineWidth = (prePoint.lineWidth + point.lineWidth) / 2;
+				if (typeof prePoint.lastX1 === 'number') {
+					this.drawCurveLine(prePoint.lastX2, prePoint.lastY2, prePoint.x, prePoint.y, point.lastX1, point
+						.lastY1, point.perLineWidth);
+					if (prePoint.isFirstPoint) return;
+					if (prePoint.lastX1 === prePoint.lastX2 && prePoint.lastY1 === prePoint.lastY2) return;
+					var data = this.getRadianData(prePoint.lastX1, prePoint.lastY1, prePoint.lastX2, prePoint.lastY2);
+					var points1 = this.getRadianPoints(data, prePoint.lastX1, prePoint.lastY1, prePoint.perLineWidth / 2);
+					var points2 = this.getRadianPoints(data, prePoint.lastX2, prePoint.lastY2, point.perLineWidth / 2);
+					this.drawTrapezoid(points1[0], points2[0], points2[1], points1[1]);
+				} else {
+					point.isFirstPoint = true;
+				}
+			},
+			//画不平滑线
+			drawNoSmoothLine(prePoint, point) {
+				point.lastX = prePoint.x + (point.x - prePoint.x) * 0.5;
+				point.lastY = prePoint.y + (point.y - prePoint.y) * 0.5;
+				if (typeof prePoint.lastX === 'number') {
+					this.drawCurveLine(prePoint.lastX, prePoint.lastY, prePoint.x, prePoint.y, point.lastX, point.lastY,
+						this.maxWidth);
+				}
+			},
+			//画线
+			drawCurveLine(x1, y1, x2, y2, x3, y3, lineWidth) {
+				lineWidth = Number(lineWidth.toFixed(1));
+				this.ctx.setLineWidth && this.ctx.setLineWidth(lineWidth);
+				this.ctx.lineWidth = lineWidth;
+				this.ctx.beginPath();
+				this.ctx.moveTo(Number(x1.toFixed(1)), Number(y1.toFixed(1)));
+				this.ctx.quadraticCurveTo(Number(x2.toFixed(1)), Number(y2.toFixed(1)), Number(x3.toFixed(1)), Number(y3
+					.toFixed(1)));
+				this.ctx.stroke();
+				this.ctx.draw && this.ctx.draw(true);
+			},
+			//画梯形
+			drawTrapezoid(point1, point2, point3, point4) {
+				this.ctx.beginPath();
+				this.ctx.moveTo(Number(point1.x.toFixed(1)), Number(point1.y.toFixed(1)));
+				this.ctx.lineTo(Number(point2.x.toFixed(1)), Number(point2.y.toFixed(1)));
+				this.ctx.lineTo(Number(point3.x.toFixed(1)), Number(point3.y.toFixed(1)));
+				this.ctx.lineTo(Number(point4.x.toFixed(1)), Number(point4.y.toFixed(1)));
+				this.ctx.setFillStyle && this.ctx.setFillStyle(this.lineColor);
+				this.ctx.fillStyle = this.lineColor;
+				this.ctx.fill();
+				this.ctx.draw && this.ctx.draw(true);
+			},
+			//获取弧度
+			getRadianData(x1, y1, x2, y2) {
+				var dis_x = x2 - x1;
+				var dis_y = y2 - y1;
+				if (dis_x === 0) {
+					return {
+						val: 0,
+						pos: -1
+					};
+				}
+				if (dis_y === 0) {
+					return {
+						val: 0,
+						pos: 1
+					};
+				}
+				var val = Math.abs(Math.atan(dis_y / dis_x));
+				if (x2 > x1 && y2 < y1 || x2 < x1 && y2 > y1) {
+					return {
+						val: val,
+						pos: 1
+					};
+				}
+				return {
+					val: val,
+					pos: -1
+				};
+			},
+			//获取弧度点
+			getRadianPoints(radianData, x, y, halfLineWidth) {
+				if (radianData.val === 0) {
+					if (radianData.pos === 1) {
+						return [{
+							x: x,
+							y: y + halfLineWidth
+						}, {
+							x: x,
+							y: y - halfLineWidth
+						}];
+					}
+					return [{
+						y: y,
+						x: x + halfLineWidth
+					}, {
+						y: y,
+						x: x - halfLineWidth
+					}];
+				}
+				var dis_x = Math.sin(radianData.val) * halfLineWidth;
+				var dis_y = Math.cos(radianData.val) * halfLineWidth;
+				if (radianData.pos === 1) {
+					return [{
+						x: x + dis_x,
+						y: y + dis_y
+					}, {
+						x: x - dis_x,
+						y: y - dis_y
+					}];
+				}
+				return [{
+					x: x + dis_x,
+					y: y - dis_y
+				}, {
+					x: x - dis_x,
+					y: y + dis_y
+				}];
+			},
+			/**
+			 * 背景色
+			 */
+			drawBgColor() {
+				if (!this.bgColor) return;
+				this.ctx.setFillStyle && this.ctx.setFillStyle(this.bgColor);
+				this.ctx.fillStyle = this.bgColor;
+				this.ctx.fillRect(0, 0, this.canvasWidth, this.canvasHeight);
+				this.ctx.draw && this.ctx.draw(true);
+			},
+			//图片绘制
+			drawByImage(url) {
+				this.ctx.clearRect(0, 0, this.canvasWidth, this.canvasHeight);
+				try {
+					this.ctx.drawImage(url, 0, 0, this.canvasWidth, this.canvasHeight);
+					this.ctx.draw && this.ctx.draw(true);
+				} catch (e) {
+					this.historyList.length = 0;
+				}
+			},
+			/**
+			 * 清空
+			 */
+			clear() {
+				this.ctx.clearRect(0, 0, this.canvasWidth, this.canvasHeight);
+				this.ctx.draw && this.ctx.draw();
+				this.drawBgColor();
+				this.historyList.length = 0;
+			},
+			//撤消
+			undo() {
+				if (!this.getImagePath || !this.historyList.length) return;
+				var pngURL = this.historyList.splice(-1)[0];
+				this.drawByImage(pngURL);
+				if (this.historyList.length === 0) {
+					this.clear();
+				}
+			},
+			//是否为空
+			isEmpty() {
+				return this.historyList.length === 0;
+			},
+			/**
+			 * @param {Object} str
+			 * @param {Object} color
+			 * 选择颜色
+			 */
+			selectColorEvent(str, color) {
+				this.selectColor = str;
+				this.lineColor = color;
+				this.ctx.setStrokeStyle(this.lineColor)
+			},
+			//完成
+			subCanvas() {
+				if (this.isEmpty()) {
+					uni.showToast({
+						title: '没有任何绘制内容哦',
+						icon: 'none',
+					});
+					return
+				}
+        console.log(this.data,'uploa')
+        const newData = this.data
+				uni.canvasToTempFilePath({
+					canvasId: 'handWriting',
+					fileType: 'png',
+					quality: 1, //图片质量
+					success(res) {
+						uni.showToast({
+							title: '以保存'
+						});
+            upload({
+              url: '/admin-api/common/upload',
+              filePath: res.tempFilePath,
+            }).then((res) => {
+              console.log('服务器返回图片地址', res);
+              console.log('打印data',newData)
+              newData.image = res.data.url
+              console.log('提交的内容', newData)
+              request({
+                url: '/admin-api/repair/tickets/create',
+                method: 'POST',
+                data: newData
+              }).then(res => {
+                uni.showToast({
+                  title: '创建工单成功',
+                  icon: 'success'
+                })
+                uni.navigateTo({
+                  url: `/pages-order/orderDetail/orderDetail?id=${res.data.id}&isDetail=0`
+                });
+              })
+            });
+					}
+				});
+			},
+			//保存到相册
+			saveCanvasAsImg() {
+				uni.canvasToTempFilePath({
+					canvasId: 'handWriting',
+					fileType: 'png',
+					quality: 1, //图片质量
+					success(res) {
+						uni.saveImageToPhotosAlbum({
+							filePath: res.tempFilePath,
+							success(res) {
+								uni.showToast({
+									title: '已保存到相册',
+									duration: 2000
+								});
+
+							}
+						});
+					}
+				});
+			},
+			//预览
+			previewCanvasImg() {
+				uni.canvasToTempFilePath({
+					canvasId: 'handWriting',
+					fileType: 'jpg',
+					quality: 1, //图片质量
+					success(res) {
+						uni.previewImage({
+							urls: [res.tempFilePath] //预览图片 数组
+						});
+					}
+				});
+			},
+		}
+	};
+</script>
+
+<style>
+	page {
+		background: #fbfbfb;
+		height: auto;
+		overflow: hidden;
+	}
+
+	.wrapper {
+		width: 100%;
+		height: 95vh;
+		margin: 40rpx 0;
+		overflow: hidden;
+		display: flex;
+		align-content: center;
+		flex-direction: row;
+		justify-content: center;
+		font-size: 28rpx;
+	}
+
+	.handWriting {
+		background: #fff;
+		width: 100%;
+		height: 95vh;
+	}
+
+	.handRight {
+		display: inline-flex;
+		align-items: center;
+	}
+
+	.handCenter {
+		border: 4rpx dashed #e9e9e9;
+		flex: 5;
+		overflow: hidden;
+		box-sizing: border-box;
+	}
+
+	.handTitle {
+		transform: rotate(90deg);
+		flex: 1;
+		color: #666;
+	}
+
+	.handBtn button {
+		font-size: 28rpx;
+	}
+
+	.handBtn {
+		height: 95vh;
+		display: inline-flex;
+		flex-direction: column;
+		justify-content: space-between;
+		align-content: space-between;
+		flex: 1;
+	}
+
+	.delBtn {
+		position: absolute;
+		top: 250rpx;
+		left: 0rpx;
+		transform: rotate(90deg);
+		color: #666;
+	}
+
+	.delBtn image {
+		position: absolute;
+		top: 13rpx;
+		left: 25rpx;
+	}
+
+	.subBtn {
+		position: absolute;
+		bottom: 52rpx;
+		left: -3rpx;
+		display: inline-flex;
+		transform: rotate(90deg);
+		background: #008ef6;
+		color: #fff;
+		margin-bottom: 30rpx;
+		text-align: center;
+		justify-content: center;
+	}
+
+	/*Peach - 新增 - 保存*/
+
+	.saveBtn {
+		position: absolute;
+		top: 375rpx;
+		left: 0rpx;
+		transform: rotate(90deg);
+		color: #666;
+	}
+
+	.previewBtn {
+		position: absolute;
+		top: 500rpx;
+		left: 0rpx;
+		transform: rotate(90deg);
+		color: #666;
+	}
+
+	.undoBtn {
+		position: absolute;
+		top: 625rpx;
+		left: 0rpx;
+		transform: rotate(90deg);
+		color: #666;
+	}
+
+	.black-select {
+		width: 60rpx;
+		height: 60rpx;
+		position: absolute;
+		top: 30rpx;
+		left: 25rpx;
+	}
+
+	.red-select {
+		width: 60rpx;
+		height: 60rpx;
+		position: absolute;
+		top: 140rpx;
+		left: 25rpx;
+	}
+
+	.color_pic {
+		width: 70rpx;
+		height: 70rpx;
+		border-radius: 25px;
+		position: absolute;
+		top: 60rpx;
+		left: 18rpx;
+		border: 1px solid #ddd;
+	}
+</style>
diff --git a/pages-repair/signature/signature.vue b/pages-repair/signature/signature.vue
index 091c68d..be5feaa 100644
--- a/pages-repair/signature/signature.vue
+++ b/pages-repair/signature/signature.vue
@@ -6,12 +6,12 @@
         确定维修项目无误后请客户签字确认
       </view>
       <canvas
-        canvas-id="signatureCanvas"
-        class="canvas"
-        :disable-scroll="true"
-        @touchstart="startSign"
-        @touchmove="drawSign"
-        @touchend="endSign"
+          canvas-id="signatureCanvas"
+          class="canvas"
+          :disable-scroll="true"
+          @touchstart="startSign"
+          @touchmove="drawSign"
+          @touchend="endSign"
       ></canvas>
       <view class="buttons">
         <button @click="clearSign">清除</button>
@@ -27,21 +27,21 @@ import VNavigationBar from "@/components/VNavigationBar.vue";
 import request from "@/utils/request";
 
 export default {
-  components: {VNavigationBar},
+  components: { VNavigationBar },
   data() {
     return {
       context: null,   // Canvas上下文
       isSigning: false, // 是否正在签名中
-      data:{}
+      data: {}
     };
   },
   onLoad(data) {
     // 获取 canvas 上下文
     this.context = uni.createCanvasContext("signatureCanvas", this);
     this.context.fillStyle = "white";
-    if (data.data){
-      console.log('传递过来的内容',  JSON.parse(data.data))
-      this.data = JSON.parse(data.data)
+    if (data.data) {
+      console.log('传递过来的内容', JSON.parse(data.data));
+      this.data = JSON.parse(data.data);
     }
   },
   methods: {
@@ -60,7 +60,7 @@ export default {
       this.context.setStrokeStyle("#000000");  // 设定笔触颜色
       this.context.setLineWidth(2);            // 设定线条宽度
       this.context.setLineCap("round");        // 圆形笔触
-      this.context.stroke();
+      this.context.stroke();                   // 实线
       this.context.draw(true);  // 连续绘制
     },
     // 结束签名
@@ -87,8 +87,8 @@ export default {
             filePath: tempFilePath,
           }).then((res) => {
             console.log('服务器返回图片地址', res);
-            this.data.image = res.data.url
-            console.log('提交的内容', this.data)
+            this.data.image = res.data.url;
+            console.log('提交的内容', this.data);
             request({
               url: '/admin-api/repair/tickets/create',
               method: 'POST',
@@ -97,11 +97,11 @@ export default {
               uni.showToast({
                 title: '创建工单成功',
                 icon: 'success'
-              })
+              });
               uni.navigateTo({
                 url: `/pages-order/orderDetail/orderDetail?id=${res.data.id}&isDetail=0`
               });
-            })
+            });
           });
         },
         fail: (err) => {
@@ -149,7 +149,7 @@ export default {
 
 .canvas {
   width: 100%;
-  height: 500rpx;
+  height: 600rpx;  /* 加宽画布高度以适配横屏 */
   border: 1px solid #ccc;
   border-radius: 10rpx;
   box-shadow: 0 4rpx 8rpx rgba(0, 0, 0, 0.1);
diff --git a/pages.json b/pages.json
index 0047a91..fae8af6 100644
--- a/pages.json
+++ b/pages.json
@@ -201,6 +201,12 @@
           "style": {
             "navigationBarTitleText": ""
           }
+        },
+        {
+          "path": "sign/sign",
+          "style": {
+            "navigationBarTitleText": ""
+          }
         }
       ]
     },