电子签名
This commit is contained in:
parent
a1c2b81c71
commit
72b0884570
|
|
@ -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>
|
||||||
|
|
@ -2,8 +2,8 @@
|
||||||
"name" : "曲阳金隅EHS",
|
"name" : "曲阳金隅EHS",
|
||||||
"appid" : "__UNI__B00D419",
|
"appid" : "__UNI__B00D419",
|
||||||
"description" : "曲阳金隅EHS",
|
"description" : "曲阳金隅EHS",
|
||||||
"versionName" : "1.01.27",
|
"versionName" : "1.01.28",
|
||||||
"versionCode" : 101027,
|
"versionCode" : 101028,
|
||||||
"transformPx" : false,
|
"transformPx" : false,
|
||||||
/* 5+App特有相关 */
|
/* 5+App特有相关 */
|
||||||
"app-plus" : {
|
"app-plus" : {
|
||||||
|
|
@ -122,6 +122,20 @@
|
||||||
"mode" : "history",
|
"mode" : "history",
|
||||||
"base" : "/h5/"
|
"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路径重定向
|
||||||
|
}
|
||||||
|
}
|
||||||
|
}
|
||||||
|
}
|
||||||
}
|
}
|
||||||
}
|
}
|
||||||
|
|
|
||||||
12
pages.json
12
pages.json
|
|
@ -418,7 +418,17 @@
|
||||||
"enablePullDownRefresh": false
|
"enablePullDownRefresh": false
|
||||||
}
|
}
|
||||||
}
|
}
|
||||||
],
|
,{
|
||||||
|
"path" : "pages/my/signature",
|
||||||
|
"style" :
|
||||||
|
{
|
||||||
|
"navigationBarTitleText": "我的电子签名",
|
||||||
|
"navigationStyle": "custom",
|
||||||
|
"enablePullDownRefresh": false
|
||||||
|
}
|
||||||
|
|
||||||
|
}
|
||||||
|
],
|
||||||
"globalStyle": {
|
"globalStyle": {
|
||||||
"navigationBarTextStyle": "black",
|
"navigationBarTextStyle": "black",
|
||||||
"navigationBarTitleText": "曲阳金隅EHS",
|
"navigationBarTitleText": "曲阳金隅EHS",
|
||||||
|
|
|
||||||
|
|
@ -58,6 +58,12 @@
|
||||||
<text class="title-text">我的人员库</text>
|
<text class="title-text">我的人员库</text>
|
||||||
<uni-icons size="13" color="#b9b9b9" class="right-icon" type="right"></uni-icons>
|
<uni-icons size="13" color="#b9b9b9" class="right-icon" type="right"></uni-icons>
|
||||||
</view>
|
</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')">
|
<view class="enter-item" @click="goInto('password')">
|
||||||
<image style="width: 34rpx;height: 30rpx;" class="left-icon" src="../../static/my/wodeziliao.png"
|
<image style="width: 34rpx;height: 30rpx;" class="left-icon" src="../../static/my/wodeziliao.png"
|
||||||
mode=""></image>
|
mode=""></image>
|
||||||
|
|
@ -125,6 +131,11 @@
|
||||||
url: '/pages/workSpace/rpj/remployee'
|
url: '/pages/workSpace/rpj/remployee'
|
||||||
})
|
})
|
||||||
}
|
}
|
||||||
|
else if (type == "signature") {
|
||||||
|
uni.navigateTo({
|
||||||
|
url: '/pages/my/signature'
|
||||||
|
})
|
||||||
|
}
|
||||||
else if (type == "password") {
|
else if (type == "password") {
|
||||||
uni.navigateTo({
|
uni.navigateTo({
|
||||||
url: '/pages/my/passwordChange'
|
url: '/pages/my/passwordChange'
|
||||||
|
|
|
||||||
|
|
@ -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>
|
||||||
Loading…
Reference in New Issue