From 72b0884570f0a2649f9f54678e4573aee7134975 Mon Sep 17 00:00:00 2001
From: shijing <sj_mzw@163.com>
Date: Wed, 22 Mar 2023 16:41:50 +0800
Subject: [PATCH] =?UTF-8?q?=E7=94=B5=E5=AD=90=E7=AD=BE=E5=90=8D?=
MIME-Version: 1.0
Content-Type: text/plain; charset=UTF-8
Content-Transfer-Encoding: 8bit

---
 components/canvas.vue  | 293 +++++++++++++++++++++++++++++++++++++++++
 manifest.json          |  20 ++-
 pages.json             |  12 +-
 pages/my/my.vue        |  11 ++
 pages/my/signature.vue | 176 +++++++++++++++++++++++++
 5 files changed, 508 insertions(+), 4 deletions(-)
 create mode 100644 components/canvas.vue
 create mode 100644 pages/my/signature.vue

diff --git a/components/canvas.vue b/components/canvas.vue
new file mode 100644
index 0000000..c6b7b9b
--- /dev/null
+++ b/components/canvas.vue
@@ -0,0 +1,293 @@
+<template>
+	<view class="uni-list list-pd">
+		<view v-if="visibleSync" class="cat-signature" :class="{ visible: show }" @touchmove.stop.prevent="moveHandle">
+			<!-- <view class="mask" @tap="close" /> -->
+			<view class="content">
+				<canvas class="firstCanvas" :canvas-id="canvasId" name="autograph" @touchmove="move"
+					@touchstart="start($event)" @touchend="end" @touchcancel="cancel" @longtap="tap"
+					disable-scroll="true" @error="error" />
+				<view class="btns">
+					<view class="btn btn_cancel" @tap="close">取消</view>
+					<view class="btn btn_clear" @tap="clear">清除</view>
+					<view class="btn btn_save" @tap="save">保存</view>
+				</view>
+			</view>
+		</view>
+	</view>
+</template>
+ 
+<script>
+	var content = null;
+	var touchs = [];
+	var canvasw = 0;
+	var canvash = 0;
+	//获取系统信息
+	uni.getSystemInfo({
+		success: function(res) {
+			canvasw = res.windowWidth;
+			canvash = (canvasw * 9) / 16;
+		}
+	});
+	export default {
+		name: 'cat-signature',
+		props: {
+			visible: {
+				type: Boolean,
+				default: false
+			},
+			canvasId: {
+				type: String,
+				default: 'firstCanvas'
+			}
+		},
+		data() {
+			return {
+				show: false,
+				visibleSync: false,
+				signImage: '',
+				hasDh: false
+			};
+		},
+		watch: {
+			visible(val) {
+				this.visibleSync = val;
+				this.show = val;
+				this.getInfo();
+			}
+		},
+ 
+		created(options) {
+			this.visibleSync = this.visible;
+			this.getInfo();
+			setTimeout(() => {
+				this.show = this.visible;
+			}, 100);
+		},
+		methods: {
+			getInfo() {
+				//获得Canvas的上下文
+				content = uni.createCanvasContext(this.canvasId, this);
+				//设置线的颜色
+				content.setStrokeStyle('#000');
+				//设置线的宽度
+				content.setLineWidth(5);
+				//设置线两端端点样式更加圆润
+				content.setLineCap('round');
+				//设置两条线连接处更加圆润
+				content.setLineJoin('round');
+			},
+			//
+			close() {
+				this.show = false;
+				this.hasDh = false;
+				this.$emit('close');
+			},
+			moveHandle() {},
+			// 画布的触摸移动开始手势响应
+			start(e) {
+				let point = {
+					x: e.touches[0].x,
+					y: e.touches[0].y
+				};
+				touchs.push(point);
+				this.hasDh = true;
+			},
+			// 画布的触摸移动手势响应
+			move: function(e) {
+				let point = {
+					x: e.touches[0].x,
+					y: e.touches[0].y
+				};
+				touchs.push(point);
+				if (touchs.length >= 2) {
+					this.draw(touchs);
+				}
+			},
+ 
+			// 画布的触摸移动结束手势响应
+			end: function(e) {
+				//清空轨迹数组
+				for (let i = 0; i < touchs.length; i++) {
+					touchs.pop();
+				}
+			},
+ 
+			// 画布的触摸取消响应
+			cancel: function(e) {
+				// console.log("触摸取消" + e)
+			},
+ 
+			// 画布的长按手势响应
+			tap: function(e) {
+				// console.log("长按手势" + e)
+			},
+ 
+			error: function(e) {
+				// console.log("画布触摸错误" + e)
+			},
+ 
+			//绘制
+			draw: function(touchs) {
+				let point1 = touchs[0];
+				let point2 = touchs[1];
+				// console.log(JSON.stringify(touchs))
+				content.moveTo(point1.x, point1.y);
+				content.lineTo(point2.x, point2.y);
+				content.stroke();
+				content.draw(true);
+				touchs.shift();
+			},
+			//清除操作
+			clear: function() {
+				//清除画布
+				content.clearRect(0, 0, canvasw, canvash);
+				content.draw(true);
+				// this.close()
+				this.hasDh = false;
+				this.$emit('clear');
+			},
+			save() {
+				var that = this;
+				if (!this.hasDh) {
+					uni.showToast({
+						title: '请先签字',
+						icon: 'none'
+					});
+					return;
+				}
+				uni.showLoading({
+					title: '生成中...',
+					mask: true
+				});
+				setTimeout(() => {
+					uni.canvasToTempFilePath({
+							canvasId: this.canvasId,
+							success: function(res) {
+								that.signImage = res.tempFilePath;
+								uni.hideLoading();
+								// that.$emit('save', res.tempFilePath);
+								uni.saveImageToPhotosAlbum({
+									filePath: res.tempFilePath,
+									success: function(resImg) {
+										debugger;
+										// console.log("resImg:"+resImg)
+										that.$emit('save', res.tempFilePath,resImg);
+									}
+								})
+								that.hasDh = false;
+								that.show = false;
+							},
+							fail: function(err) {
+								console.log(err);
+								uni.hideLoading();
+							}
+						},
+						this
+					);
+				}, 100);
+			}
+		}
+	};
+</script>
+ 
+<style lang="scss">
+	.cat-signature.visible {
+		visibility: visible;
+	}
+ 
+	.cat-signature {
+		display: block;
+		// position: fixed;
+		// top: 0;
+		// left: 0;
+		// right: 0;
+		// bottom: 0;
+		overflow: hidden;
+		z-index: 11;
+		// height: 100vh;
+		visibility: hidden;
+ 
+		.mask {
+			display: block;
+			opacity: 0;
+			position: absolute;
+			top: 0;
+			left: 0;
+			width: 100%;
+			height: 100%;
+			background: rgba(0, 0, 0, 0.4);
+			transition: opacity 0.3s;
+		}
+ 
+		.content {
+			display: block;
+			position: absolute;
+			top: 0;
+			left: 0;
+			bottom: 0;
+			right: 0;
+			margin: auto;
+			width: 94%;
+			height: 500upx;
+			background: #fff;
+			border-radius: 8upx;
+			box-shadow: 0px 0px 2px #333;
+ 
+			// canvas
+			.firstCanvas {
+				background-color: #fff;
+				width: 100%;
+				height: 400upx;
+				border-radius: 8upx;
+			}
+ 
+			// canvas
+ 
+			.btns {
+				padding: 0 15px;
+				height: 80upx;
+				overflow: hidden;
+				position: absolute;
+				bottom: 10upx;
+				left: 0;
+				right: 0;
+				margin: auto;
+				display: flex;
+				justify-content: space-between;
+ 
+				.btn {
+					width: 30%;
+					text-align: center;
+					font-size: 28upx;
+					height: 80upx;
+					line-height: 80upx;
+					// background-color: #999;
+					color: #007aff;
+					border-radius: 10upx;
+				}
+				.btn_cancel{
+					color: #ffa500;
+					border: 1upx solid #ffa500;
+				}
+				.btn_clear{
+					border: 1upx solid #007aff;
+				}
+				.btn_save{
+					color:#ffffff;
+					background:  #007aff;
+					border: 1upx solid #007aff;
+				}
+			}
+		}
+	}
+ 
+	.visible .mask {
+		display: block;
+		opacity: 1;
+	}
+ 
+	.uni-list:after {
+		// 全局样式里面有一个，所以我们用白色把他隐藏起来
+		background-color: #ffffff;
+	}
+</style>
\ No newline at end of file
diff --git a/manifest.json b/manifest.json
index f959987..264bde8 100644
--- a/manifest.json
+++ b/manifest.json
@@ -2,8 +2,8 @@
     "name" : "曲阳金隅EHS",
     "appid" : "__UNI__B00D419",
     "description" : "曲阳金隅EHS",
-    "versionName" : "1.01.27",
-    "versionCode" : 101027,
+    "versionName" : "1.01.28",
+    "versionCode" : 101028,
     "transformPx" : false,
     /* 5+App特有相关 */
     "app-plus" : {
@@ -122,6 +122,20 @@
             "mode" : "history",
             "base" : "/h5/"
         },
-        "title" : "曲阳金隅EHS"
+        "title" : "曲阳金隅EHS",
+        "devServer" : {
+            "port" : 8080,
+            "disableHostCheck" : true,
+            "proxy" : {
+                "/api" : {
+                    "target" : "http://222.222.144.147:6013/api/",
+                    "changeOrigin" : true,
+                    "secure" : true,
+                    "pathRewrite" : {
+                        "^/api" : "/api" // 设置/api路径重定向
+                    }
+                }
+            }
+        }
     }
 }
diff --git a/pages.json b/pages.json
index 22e2c89..a0c7368 100644
--- a/pages.json
+++ b/pages.json
@@ -418,7 +418,17 @@
 				"enablePullDownRefresh": false
 			}
 		}
-	],
+	    ,{
+            "path" : "pages/my/signature",
+            "style" :                                                                                    
+            {
+                "navigationBarTitleText": "我的电子签名",
+				"navigationStyle": "custom",
+                "enablePullDownRefresh": false
+            }
+            
+        }
+    ],
 	"globalStyle": {
 		"navigationBarTextStyle": "black",
 		"navigationBarTitleText": "曲阳金隅EHS",
diff --git a/pages/my/my.vue b/pages/my/my.vue
index f3aa578..a5a27b7 100644
--- a/pages/my/my.vue
+++ b/pages/my/my.vue
@@ -58,6 +58,12 @@
 				<text class="title-text">我的人员库</text>
 				<uni-icons size="13" color="#b9b9b9" class="right-icon" type="right"></uni-icons>
 			</view>
+			<view class="enter-item" @click="goInto('signature')" >
+				<image style="width: 34rpx;height: 30rpx;" class="left-icon" src="../../static/my/wodeziliao.png"
+					mode=""></image>
+				<text class="title-text">我的电子签名</text>
+				<uni-icons size="13" color="#b9b9b9" class="right-icon" type="right"></uni-icons>
+			</view>
 			<view class="enter-item" @click="goInto('password')">
 				<image style="width: 34rpx;height: 30rpx;" class="left-icon" src="../../static/my/wodeziliao.png"
 					mode=""></image>
@@ -125,6 +131,11 @@
 						url: '/pages/workSpace/rpj/remployee'
 					})
 				}
+				else if (type == "signature") {
+					uni.navigateTo({
+						url: '/pages/my/signature'
+					})
+				}
 				else if (type == "password") {
 					uni.navigateTo({
 						url: '/pages/my/passwordChange'
diff --git a/pages/my/signature.vue b/pages/my/signature.vue
new file mode 100644
index 0000000..406b5af
--- /dev/null
+++ b/pages/my/signature.vue
@@ -0,0 +1,176 @@
+<template>
+	<view>
+		<uni-nav-bar @clickLeft="goBack()" class="nav-bar" height="110rpx" leftWidth="400rpx" leftText="我的电子签名"
+			leftIcon="left" border backgroundColor="#2cade8" color="#fff" fixed statusBar shadow></uni-nav-bar>
+		<view>
+			 <view class="imgs">
+				 <image class="img" :src="img1" mode="widthFix" style="margin: 0px 24px;"></image>
+			 </view>
+			 <view style="display: flex;justify-content: space-around;">
+				 <button type="primary" @tap="doss" style="width: 40%;">生成签名</button>
+				 <button type="primary" @tap="checks" style="width: 40%;">选择签名</button>
+			 </view>
+			
+			<catSignature canvasId="canvas1" @close="close" @save="save" :visible="isShow" ref="eleSignature"/>
+		</view>
+	</view>
+</template>
+
+<script>
+	import catSignature from '@/components/canvas.vue';
+	export default {
+		components: {
+				catSignature
+		},
+		data() {
+			return {
+				userInfo:{},
+				isShow: false,
+				img1:"",
+				header:'',
+				tempFilePath:''
+			}
+		},
+		mounted() {
+			this.header = {Authorization: "Bearer " + this.vuex_token};
+			this.getUserInfo();
+			console.log(this.vuex_user)
+		},
+		methods: {
+			getUserInfo() {
+				let that = this;
+				that.$u.api.hrmUserInfo().then(res => {
+					that.userInfo = res;
+					that.img1 = this.vuex_host+res.signature;
+				})
+			},
+			doss() {
+				this.isShow = true;
+				// debugger;
+				console.log(this.vuex_apifile)
+			},
+			close() {
+				this.isShow = false;
+			},
+			checks(){
+				let that = this;
+				uni.chooseImage({
+					count:1,
+					sizeType: ['original', 'compressed'], //可以指定是原图还是压缩图，默认二者都有
+					sourceType: ['album'], //从相册选择
+					success: function(res) {
+						// debugger;
+						that.signImage = res.tempFilePath;
+						console.log(res);
+						that.img1 = res.tempFilePaths[0];
+						that.imgUp(res.tempFilePaths[0]);
+					}
+				});
+			},
+			imgUp(tempFilePaths){
+				// debugger;	
+				let that = this;
+				uni.uploadFile({
+					url: this.vuex_apifile,
+					filePath: tempFilePaths,
+					name: 'file',
+					header: this.header,
+					success: resImg => {
+						let data = this.toJson && this.$u.test.jsonString(resImg.data) ? JSON.parse(resImg.data) : resImg.data;
+						let pData = JSON.parse(data)
+						let sform = {
+							"signature": pData.path,
+							"id_number":that.userInfo.id_number,
+							"photo": that.userInfo.photo,
+						}
+						that.img1 = this.vuex_host+pData.path;
+						console.log(sform.signature)
+						alert(sform.signature)
+						that.$u.api.hrmUpdateInfo(sform).then(res=>{
+							debugger;
+							console.log('签名更新成功')
+						})
+					},
+					fail: e => {
+						debugger;	
+					},
+					complete: resImg => {
+						debugger;	
+					}
+				});
+			},
+			save(val,data) {
+				let that = this;
+				that.img1 = that.$refs.eleSignature.signImage;
+				that.isShow = false;
+				uni.uploadFile({
+					url: this.vuex_apifile,
+					filePath: data.file,
+					name: 'file',
+					header: this.header,
+					success: resImg => {
+						let data = this.toJson && this.$u.test.jsonString(resImg.data) ? JSON.parse(resImg.data) : resImg.data;
+						let pData = JSON.parse(data)
+						// console.log("返回数据："+data)
+						// console.log("返回数据："+pData)
+						// debugger;
+						console.log("签名地址："+pData.path)
+						
+						let sform = {
+							"signature": pData.path,
+							"id_number":that.userInfo.id_number,
+							"photo": that.userInfo.photo,
+						}
+						sform.signature = pData.path;
+						
+						that.$u.api.hrmUpdateInfo(sform).then(res=>{
+							debugger;
+							console.log('签名更新成功')
+						})
+					},
+					fail: resImg => {
+						debugger;
+						console.log(resImg)
+					},
+					complete: resImg => {
+						debugger;
+						console.log(resImg)
+					}
+				});
+			},
+			base64toFile(urlString, fileName) {
+			  const dataArr = urlString.split(",");
+			  const byteString = atob(dataArr[1]);
+			  const options = {
+			    type: "image/png",
+			    endings: "native"
+			  };
+			  const u8Arr = new Uint8Array(byteString.length);
+			  for (let i = 0; i < byteString.length; i++) {
+			    u8Arr[i] = byteString.charCodeAt(i);
+			  }
+			  return new File([u8Arr], fileName + ".png", options);//返回文件流
+			},
+			dataURLtoFile(dataURI, type) {
+			  let binary = atob(dataURI.split(",")[1]);
+			  let array = [];
+			  for (let i = 0; i < binary.length; i++) {
+				array.push(binary.charCodeAt(i));
+			  }
+			  return new Blob([new Uint8Array(array)], { type: type });
+			},
+			goBack() {
+				uni.navigateBack({
+					delta: 1
+				})
+			},
+		}
+	}
+</script>
+
+<style>
+>>>.uni-navbar__header,
+	>>>.uni-status-bar {
+		background-image: linear-gradient(90deg, #164cc3 0%, #2c6fd9 100%), linear-gradient(#e60012, #e60012) !important;
+	}
+</style>