修改签名

pages.json

@@ -74,6 +74,12 @@
 						"navigationBarTitleText": "详情"
 					}
 				},
+				{
+					"path": "notarization/sign",
+					"style": {
+						"navigationBarTitleText": "签字"
+					}
+				},
 				{
 					"path": "notice/index",
 					"style": {

pagesHome/notarization/detail.vue

@@ -8,11 +8,13 @@
 						<view class="one_2">
 							<u--form :model="form" ref="uForm" :rules="{}" labelWidth="500" label-position="top">
 								<u-form-item v-for="(item, index) in info.material" :key="index"
-									:label="index+1+'.'+item.label" :prop="index">
-									<u-upload v-if="item.type=='0'" :fileList="form[index]" @afterRead="afterRead"
-										@delete="deletePic" :name="index" multiple :maxCount="10" width="250"
-										height="150"></u-upload>
-									<input v-else-if="item.type=='1'" class="input" v-model="form[index]"
+									:label="index+1+'.'+item.label" :prop="'text'+index.toString()">
+									<u-upload v-if="item.type=='0'" :fileList="form['text'+index]"
+										@afterRead="afterRead($event,'text'+index.toString())"
+										@delete="deletePic($event,'text'+index.toString())" :name="index" multiple
+										:maxCount="10" width="250" height="150">
+										</u-upload>
+									<input v-else-if="item.type=='1'" class="input" v-model="form['text'+index]"
 										:placeholder="text+item.label" />
 								</u-form-item>
 							</u--form>
@@ -69,13 +71,18 @@
 	import { onLoad } from "@dcloudio/uni-app";
 	// 请求接口
 	const $api = getCurrentInstance()?.appContext.config.globalProperties.$api;
+	const $config = getCurrentInstance()?.appContext.config.globalProperties.$config;
+	const $apifile = getCurrentInstance()?.appContext.config.globalProperties.$apifile;
 	const id = ref('');
 	// 用户信息
 	const user = ref({});
+	// 公证详情
 	const info = ref({});
+	// 材料表单
 	const form = ref({});
+	// 申请表单
 	const data = ref({
-		user: user.value._id,
+		user: user.value?._id,
 		business: id.value
 	});
 	const text = ref('请输入');
@@ -132,12 +139,38 @@
 		return res?.label || '暂无';
 	};
 	// 删除图片
-	const deletePic = (event) => {
-		console.log(event);
+	const deletePic = (event, value) => {
+		let arr = form.value[value].filter((i, index) => index != event.index);
+		form.value[value] = arr
 	};
 	// 新增图片
-	const afterRead = async (event) => {
-		console.log(event);
+	const afterRead = async (event, value) => {
+		console.log(event, value);
+		let serverFile = $config.serverFile;
+		const arr = await $apifile(`/files/notarization/applet/upload`, 'file', event.file[0].url,
+			'file');
+		if (arr.errcode === 0) {
+			form.value[value].push({
+				data: {
+					id: arr.data.name,
+					name: arr.data.name,
+					uri: arr.data.uri,
+					url: serverFile + arr.data.uri
+				},
+				name: that.name
+			})
+		} else {
+			uni.showToast({
+				title: arr.errmsg,
+				icon: 'none'
+			});
+		}
+	};
+	// 确认
+	const formSubmit = () => {
+		uni.navigateTo({
+			url: `/pagesHome/notarization/sign?id=${info.value._id}`
+		})
 	};
 </script>
 <style lang="scss" scoped>

pagesHome/notarization/sign.vue

@@ -0,0 +1,213 @@
+<template>
+	<view class="container">
+		<view class="sigh-btns">
+			<button size="mini" class="btn" @tap="handleCancel">取消</button>
+			<button size="mini" class="btn" @tap="handleReset">重写</button>
+			<button size="mini" class="btn" @tap="handleConfirm">确认</button>
+		</view>
+		<view class="sign-box">
+			<canvas class="mycanvas" :style="{width:width +'px',height:height +'px'}" canvas-id="mycanvas"
+				@touchstart="touchstart" @touchmove="touchmove" @touchend="touchend"></canvas>
+			<canvas canvas-id="camCacnvs" :style="{width:height +'px',height:width +'px'}" class="canvsborder"></canvas>
+		</view>
+	</view>
+</template>
+<script>
+	var x = 20;
+	var y = 20;
+	var tempPoint = []; //用来存放当前画纸上的轨迹点
+	var id = 0;
+	var type = '';
+	let that;
+	let canvasw;
+	let canvash;
+	export default {
+		data() {
+			return {
+				ctx: '', //绘图图像
+				points: [], //路径点集合,
+				width: 0,
+				height: 0
+			};
+		},
+		mounted() {},
+
+		onLoad(option) {
+			that = this;
+			console.log(option);
+			id = option.id;
+			type = option.type;
+			this.ctx = uni.createCanvasContext('mycanvas', this); //创建绘图对象
+			//设置画笔样式
+			this.ctx.lineWidth = 4;
+			this.ctx.lineCap = 'round';
+			this.ctx.lineJoin = 'round';
+
+			uni.getSystemInfo({
+				success: function(res) {
+					console.log(res);
+					that.width = res.windowWidth * 0.8;
+					that.height = res.windowHeight * 0.85;
+				}
+			});
+		},
+
+		methods: {
+			//触摸开始，获取到起点
+			touchstart: function(e) {
+				let startX = e.changedTouches[0].x;
+				let startY = e.changedTouches[0].y;
+				let startPoint = {
+					X: startX,
+					Y: startY
+				};
+
+				/* **************************************************
+				    #由于uni对canvas的实现有所不同，这里需要把起点存起来
+				 * **************************************************/
+				this.points.push(startPoint);
+
+				//每次触摸开始，开启新的路径
+				this.ctx.beginPath();
+			},
+
+			//触摸移动，获取到路径点
+			touchmove: function(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(); //绘制路径
+				}
+				tempPoint.push(movePoint);
+			},
+
+			// 触摸结束，将未绘制的点清空防止对后续路径产生干扰
+			touchend: function() {
+				this.points = [];
+			},
+
+			/* ***********************************************	
+			#   绘制笔迹
+			#   1.为保证笔迹实时显示，必须在移动的同时绘制笔迹
+			#   2.为保证笔迹连续，每次从路径集合中区两个点作为起点（moveTo）和终点(lineTo)
+			#   3.将上一次的终点作为下一次绘制的起点（即清除第一个点）
+			************************************************ */
+			draw: function() {
+				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);
+			},
+
+			handleCancel() {
+				uni.navigateBack({
+					delta: 1
+				});
+			},
+
+			//清空画布
+			handleReset: function() {
+				console.log('handleReset');
+				that.ctx.clearRect(0, 0, that.width, that.height);
+				that.ctx.draw(true);
+				tempPoint = [];
+			},
+
+			//将签名笔迹上传到服务器，并将返回来的地址存到本地
+			handleConfirm: function() {
+				if (tempPoint.length == 0) {
+					uni.showToast({
+						title: '请先签名',
+						icon: 'none',
+						duration: 2000
+					});
+					return;
+				}
+				uni.canvasToTempFilePath({
+					canvasId: 'mycanvas',
+					success: function(res) {
+						let tempPath = res.tempFilePath;
+
+						const ctx = uni.createCanvasContext('camCacnvs', that);
+						ctx.translate(0, that.width);
+						ctx.rotate((-90 * Math.PI) / 180);
+						ctx.drawImage(tempPath, 0, 0, that.width, that.height);
+						ctx.draw();
+						setTimeout(() => {
+							//保存签名图片到本地
+							uni.canvasToTempFilePath({
+									canvasId: 'camCacnvs',
+									success: function(res) {
+										//这是签名图片文件的本地临时地址
+										let path = res.tempFilePath;
+										console.log(path);
+									},
+									fail: err => {
+										console.log('fail', err);
+									}
+								},
+								this
+							);
+						}, 200);
+					}
+				});
+			}
+		}
+	};
+</script>
+
+<style lang="scss" scoped>
+	.container {
+		display: flex;
+		flex-direction: row;
+	}
+
+	.sign-box {
+		width: 80%;
+		height: 90%;
+		margin: auto;
+		display: flex;
+		flex-direction: column;
+		text-align: center;
+	}
+
+	.sign-view {
+		height: 100%;
+	}
+
+	.sigh-btns {
+		height: 100%;
+		margin: auto;
+		display: flex;
+		flex-direction: column;
+		justify-content: space-around;
+	}
+
+	.btn {
+		margin: auto;
+		padding: 8rpx;
+		transform: rotate(90deg);
+		border: grey 1rpx solid;
+	}
+
+	.mycanvas {
+		margin: auto 0rpx;
+		background-color: #ececec;
+	}
+
+	.canvsborder {
+		border: 1rpx solid #333;
+		position: fixed;
+		top: 0;
+		left: 10000rpx;
+	}
+</style>