电子签名
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",
|
||||
"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路径重定向
|
||||
}
|
||||
}
|
||||
}
|
||||
}
|
||||
}
|
||||
}
|
||||
|
|
|
|||
10
pages.json
10
pages.json
|
|
@ -418,6 +418,16 @@
|
|||
"enablePullDownRefresh": false
|
||||
}
|
||||
}
|
||||
,{
|
||||
"path" : "pages/my/signature",
|
||||
"style" :
|
||||
{
|
||||
"navigationBarTitleText": "我的电子签名",
|
||||
"navigationStyle": "custom",
|
||||
"enablePullDownRefresh": false
|
||||
}
|
||||
|
||||
}
|
||||
],
|
||||
"globalStyle": {
|
||||
"navigationBarTextStyle": "black",
|
||||
|
|
|
|||
|
|
@ -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'
|
||||
|
|
|
|||
|
|
@ -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