对接签名提交，工资详情查询
This commit is contained in:
1147680382@qq.com
+202
-191
@@ -1,18 +1,9 @@
|
||||
<template>
|
||||
<view class="sing-box">
|
||||
<view class="canvas-box">
|
||||
<canvas
|
||||
:width="width * scale"
|
||||
:height="height * scale"
|
||||
:style="{ width: width, height: height }"
|
||||
:disable-scroll="true"
|
||||
canvas-id="cansignature"
|
||||
id="cansignature"
|
||||
@touchstart="handleTouchStart"
|
||||
@touchMove="handleTouchMove"
|
||||
@touchCancel="handleTouchEnd"
|
||||
@touchEnd="handleTouchEnd"
|
||||
></canvas>
|
||||
<canvas :width="width * scale" :height="height * scale" :style="{ width: width, height: height }"
|
||||
:disable-scroll="true" canvas-id="cansignature" id="cansignature" @touchstart="handleTouchStart"
|
||||
@touchMove="handleTouchMove" @touchCancel="handleTouchEnd" @touchEnd="handleTouchEnd"></canvas>
|
||||
</view>
|
||||
<view class="tips">请在空白区域内横向签字</view>
|
||||
<view class="button-box">
|
||||
@@ -23,194 +14,214 @@
|
||||
</template>
|
||||
|
||||
<script>
|
||||
import Signature from 'mini-smooth-signature';
|
||||
import baseUrl from '@/api/baseUrl.js';
|
||||
import { signatureOfMeetingMinutesApi } from '@/api/create.js';
|
||||
export default {
|
||||
data() {
|
||||
return {
|
||||
signature: '',
|
||||
width: '',
|
||||
height: '',
|
||||
scale: 1,
|
||||
imgurl: '',
|
||||
|
||||
};
|
||||
},
|
||||
onLoad(obj) {
|
||||
this.$setNavigationBar('手写签名');
|
||||
this.initSignature();
|
||||
dd.getSystemInfo({
|
||||
success: res => {
|
||||
// console.log(res)
|
||||
this.width = res.windowWidth;
|
||||
this.height = res.windowHeight;
|
||||
}
|
||||
});
|
||||
},
|
||||
methods: {
|
||||
// 点击清除
|
||||
onClickClear() {
|
||||
setTimeout(() => {
|
||||
this.initSignature();
|
||||
}, 10);
|
||||
},
|
||||
// 点击确认
|
||||
onClickAffirm() {
|
||||
uni.showLoading({ title: '提交中', mask: true });
|
||||
this.signature.getImagePath().then(res => {
|
||||
var pages = getCurrentPages();
|
||||
var previousPage = pages[pages.length - 2];
|
||||
uni.uploadFile({
|
||||
url: baseUrl + '/file/upload',
|
||||
fileName: 'file',
|
||||
header: {
|
||||
Authorization: JSON.parse(uni.getStorageSync('token'))
|
||||
},
|
||||
fileType: 'image', // 必填
|
||||
filePath: res,
|
||||
success: async res => {
|
||||
let data = JSON.parse(res.data);
|
||||
if (data.code == 200) {
|
||||
uni.hideLoading();
|
||||
// 把值给前一个页面中的data
|
||||
// previousPage.$vm.signatureAddress = data.data
|
||||
console.log(data, '地址');
|
||||
let obj = {
|
||||
id: '',
|
||||
meetingMinutesSign: ''
|
||||
};
|
||||
obj.id = this.meetingId;
|
||||
obj.meetingMinutesSign = data.data;
|
||||
let signRes = await signatureOfMeetingMinutesApi(obj);
|
||||
if (signRes.code == 200) {
|
||||
uni.showToast({
|
||||
title: '签字成功',
|
||||
duration: 2000
|
||||
});
|
||||
} else {
|
||||
uni.showToast({
|
||||
title: '服务器错误，有结果！'
|
||||
});
|
||||
}
|
||||
|
||||
uni.navigateBack();
|
||||
} else {
|
||||
uni.showToast({ title: data.msg, icon: 'error' });
|
||||
}
|
||||
},
|
||||
fail: err => {
|
||||
uni.showToast({ title: err, icon: 'error' });
|
||||
}
|
||||
});
|
||||
});
|
||||
},
|
||||
// 初始化
|
||||
initSignature() {
|
||||
const ctx = uni.createCanvasContext('cansignature');
|
||||
const _this = this;
|
||||
this.signature = new Signature(ctx, {
|
||||
width: _this.width,
|
||||
height: _this.height,
|
||||
import Signature from 'mini-smooth-signature';
|
||||
import baseUrl from '@/api/baseUrl.js';
|
||||
import {
|
||||
signatureOfMeetingMinutesApi,
|
||||
} from '@/api/create.js';
|
||||
export default {
|
||||
data() {
|
||||
return {
|
||||
signature: '',
|
||||
width: '',
|
||||
height: '',
|
||||
scale: 1,
|
||||
color: '#000000',
|
||||
bgColor: '#ffffff',
|
||||
getImagePath: () => {
|
||||
return new Promise(resolve => {
|
||||
ctx.toTempFilePath({
|
||||
success: res => resolve(res.filePath)
|
||||
});
|
||||
});
|
||||
},
|
||||
toDataURL: function(res) {
|
||||
return this;
|
||||
imgurl: '',
|
||||
id: ''
|
||||
};
|
||||
},
|
||||
onLoad(option) {
|
||||
this.id = option.id
|
||||
console.log(option.id);
|
||||
},
|
||||
onShow() {
|
||||
this.$setNavigationBar('手写签名');
|
||||
this.initSignature();
|
||||
dd.getSystemInfo({
|
||||
success: res => {
|
||||
// console.log(res)
|
||||
this.width = res.windowWidth;
|
||||
this.height = res.windowHeight;
|
||||
}
|
||||
});
|
||||
},
|
||||
// 绑定touchstart事件
|
||||
handleTouchStart(e) {
|
||||
const pos = e.touches[0];
|
||||
this.signature.onDrawStart(pos.x, pos.y);
|
||||
},
|
||||
// 绑定touchmove事件
|
||||
handleTouchMove(e) {
|
||||
const pos = e.touches[0];
|
||||
this.signature.onDrawMove(pos.x, pos.y);
|
||||
},
|
||||
// 绑定touchend/touchcancel事件
|
||||
handleTouchEnd() {
|
||||
this.signature.onDrawEnd();
|
||||
methods: {
|
||||
// 点击清除
|
||||
onClickClear() {
|
||||
setTimeout(() => {
|
||||
this.initSignature();
|
||||
}, 10);
|
||||
},
|
||||
// 点击确认
|
||||
onClickAffirm() {
|
||||
uni.showLoading({
|
||||
title: '提交中',
|
||||
mask: true
|
||||
});
|
||||
console.log(this.signature);
|
||||
this.signature.toDataURL().then(res => {
|
||||
console.log(res);
|
||||
uni.uploadFile({
|
||||
url: baseUrl + '/file',
|
||||
fileName: 'files',
|
||||
header: {
|
||||
Authorization: 'Bearer ' + uni.getStorageSync('token')
|
||||
},
|
||||
fileType: 'image', // 必填
|
||||
filePath: res,
|
||||
success: async res => {
|
||||
let data = JSON.parse(res.data);
|
||||
if (data.errmsg == "ok") {
|
||||
uni.hideLoading();
|
||||
console.log(data.result[0], [this.id], '地址');
|
||||
let obj = {
|
||||
ids: [this.id],
|
||||
signatureImg: data.result[0]
|
||||
};
|
||||
obj.id = this.meetingId;
|
||||
obj.meetingMinutesSign = data.data;
|
||||
let signRes = await signatureOfMeetingMinutesApi(obj);
|
||||
if (signRes.errmsg == "ok") {
|
||||
uni.showToast({
|
||||
title: '签字成功',
|
||||
duration: 2000
|
||||
});
|
||||
} else {
|
||||
uni.showToast({
|
||||
title: '服务器错误，有结果！'
|
||||
});
|
||||
}
|
||||
setTimeout(() => {
|
||||
uni.navigateBack();
|
||||
}, 1000)
|
||||
|
||||
} else {
|
||||
uni.showToast({
|
||||
title: data.msg,
|
||||
icon: 'error'
|
||||
});
|
||||
}
|
||||
},
|
||||
fail: err => {
|
||||
uni.showToast({
|
||||
title: err,
|
||||
icon: 'error'
|
||||
});
|
||||
}
|
||||
});
|
||||
});
|
||||
},
|
||||
// 初始化
|
||||
initSignature() {
|
||||
const ctx = uni.createCanvasContext('cansignature');
|
||||
const _this = this;
|
||||
this.signature = new Signature(ctx, {
|
||||
width: _this.width,
|
||||
height: _this.height,
|
||||
scale: 1,
|
||||
color: '#000000',
|
||||
bgColor: '#ffffff',
|
||||
toDataURL: function(res) {
|
||||
return new Promise(resolve => {
|
||||
ctx.toTempFilePath({
|
||||
success: res => resolve(res.filePath)
|
||||
});
|
||||
});
|
||||
}
|
||||
});
|
||||
|
||||
|
||||
},
|
||||
// 绑定touchstart事件
|
||||
handleTouchStart(e) {
|
||||
const pos = e.touches[0];
|
||||
this.signature.onDrawStart(pos.x, pos.y);
|
||||
},
|
||||
// 绑定touchmove事件
|
||||
handleTouchMove(e) {
|
||||
const pos = e.touches[0];
|
||||
this.signature.onDrawMove(pos.x, pos.y);
|
||||
},
|
||||
// 绑定touchend/touchcancel事件
|
||||
handleTouchEnd() {
|
||||
this.signature.onDrawEnd();
|
||||
}
|
||||
}
|
||||
}
|
||||
};
|
||||
};
|
||||
</script>
|
||||
|
||||
<style lang="scss" scoped>
|
||||
.sing-box {
|
||||
width: 100vw;
|
||||
height: 100vh;
|
||||
// border-bottom: 2rpx dashed rgba(94,110,254,0.20);
|
||||
padding: 0 0rpx 0 0;
|
||||
box-sizing: border-box;
|
||||
display: flex;
|
||||
overflow: hidden;
|
||||
.tips {
|
||||
position: fixed;
|
||||
right: 0;
|
||||
top: 0;
|
||||
z-index: 100000000000;
|
||||
// top: 200rpx;
|
||||
font-size: 26rpx;
|
||||
font-family: Source Han Sans CN, Source Han Sans CN-Regular;
|
||||
font-weight: 400;
|
||||
text-align: LEFT;
|
||||
color: #b9b9c2;
|
||||
line-height: 40rpx;
|
||||
transform: rotateZ(90deg) translateX(60%) translateY(-250%);
|
||||
}
|
||||
.label {
|
||||
width: 150rpx;
|
||||
color: #002567;
|
||||
font-size: 28rpx;
|
||||
line-height: 70rpx;
|
||||
font-weight: 500;
|
||||
}
|
||||
.canvas-box {
|
||||
position: relative;
|
||||
z-index: 0;
|
||||
width: 100%;
|
||||
height: 100%;
|
||||
}
|
||||
.button-box {
|
||||
position: fixed;
|
||||
left: 0;
|
||||
bottom: 0;
|
||||
z-index: 10000;
|
||||
.sing-box {
|
||||
width: 100vw;
|
||||
height: 100vh;
|
||||
// border-bottom: 2rpx dashed rgba(94,110,254,0.20);
|
||||
padding: 0 0rpx 0 0;
|
||||
box-sizing: border-box;
|
||||
display: flex;
|
||||
transform: rotate(90deg) translateX(-50%) translateY(80%);
|
||||
.clear-button {
|
||||
width: 142rpx;
|
||||
height: 80rpx;
|
||||
line-height: 80rpx;
|
||||
background: #ffffff;
|
||||
border: 2rpx solid #2976ff;
|
||||
color: #2976ff;
|
||||
font-size: 24rpx;
|
||||
border-radius: 10rpx;
|
||||
text-align: center;
|
||||
box-sizing: border-box;
|
||||
margin-right: 18rpx;
|
||||
overflow: hidden;
|
||||
|
||||
.tips {
|
||||
position: fixed;
|
||||
right: 0;
|
||||
top: 0;
|
||||
z-index: 100000000000;
|
||||
// top: 200rpx;
|
||||
font-size: 26rpx;
|
||||
font-family: Source Han Sans CN, Source Han Sans CN-Regular;
|
||||
font-weight: 400;
|
||||
text-align: LEFT;
|
||||
color: #b9b9c2;
|
||||
line-height: 40rpx;
|
||||
transform: rotateZ(90deg) translateX(60%) translateY(-250%);
|
||||
}
|
||||
.affirm-button {
|
||||
width: 142rpx;
|
||||
height: 80rpx;
|
||||
line-height: 80rpx;
|
||||
background: #2976ff;
|
||||
border-radius: 10rpx;
|
||||
text-align: center;
|
||||
color: #ffffff;
|
||||
font-size: 24rpx;
|
||||
|
||||
.label {
|
||||
width: 150rpx;
|
||||
color: #002567;
|
||||
font-size: 28rpx;
|
||||
line-height: 70rpx;
|
||||
font-weight: 500;
|
||||
}
|
||||
|
||||
.canvas-box {
|
||||
position: relative;
|
||||
z-index: 0;
|
||||
width: 100%;
|
||||
height: 100%;
|
||||
}
|
||||
|
||||
.button-box {
|
||||
position: fixed;
|
||||
left: 0;
|
||||
bottom: 0;
|
||||
z-index: 10000;
|
||||
display: flex;
|
||||
transform: rotate(90deg) translateX(-50%) translateY(80%);
|
||||
|
||||
.clear-button {
|
||||
width: 142rpx;
|
||||
height: 80rpx;
|
||||
line-height: 80rpx;
|
||||
background: #ffffff;
|
||||
border: 2rpx solid #2976ff;
|
||||
color: #2976ff;
|
||||
font-size: 24rpx;
|
||||
border-radius: 10rpx;
|
||||
text-align: center;
|
||||
box-sizing: border-box;
|
||||
margin-right: 18rpx;
|
||||
}
|
||||
|
||||
.affirm-button {
|
||||
width: 142rpx;
|
||||
height: 80rpx;
|
||||
line-height: 80rpx;
|
||||
background: #2976ff;
|
||||
border-radius: 10rpx;
|
||||
text-align: center;
|
||||
color: #ffffff;
|
||||
font-size: 24rpx;
|
||||
}
|
||||
}
|
||||
}
|
||||
}
|
||||
</style>
|
||||
</style>
|
||||
Reference in New Issue
Block a user