You can not select more than 25 topics Topics must start with a letter or number, can include dashes ('-') and can be up to 35 characters long.
 
 
 

253 lines
6.0 KiB

<template>
<view class="pageBg">
<view class="signature-box">
<view class="topTps">需要您签名确认学时</view>
<!-- 签名 -->
<view class="signature">
<canvas ref="mycanvas" class="mycanvas" canvas-id="mycanvas" @touchstart="touchstart" @touchmove="touchmove"
@touchend="touchend"></canvas>
</view>
<view class="footBox">
<view class="checkCon">
<u-checkbox-group>
<!-- <u-checkbox v-model="checked">本人 {{realName}} 承诺以上签名真实有效</u-checkbox> -->
<u-checkbox :checked="checked" :label="`本人【 ${realName} 】承诺以上签名真实有效`" :labelSize="12" @change="checkedchange" ></u-checkbox>
</u-checkbox-group>
</view>
<view class="footBtn">
<view class="btn border" @click="clear">重签</view>
<view class="btn" @click="finish">提交</view>
</view>
</view>
</view>
</view>
</template>
<script>
// import { pathToBase64 } from '@/common/js/jssdk_image_tools.js'
import { uploadImgApi } from '@/config/utils.js'
import { addSign } from '@/config/api.js'
var x = 20;
var y = 20;
export default {
data() {
return {
//绘图图像
ctx: '',
//路径点集合
points: [],
//签名图片
SignatureImg: '',
hasSign: false,
realName: '',
checked: false,
subject: 1,
};
},
onLoad(options) {
this.subject = options.subject
},
mounted() {
this.createCanvas();
this.realName = this.vuex_userInfo.name
console.log(this.vuex_userInfo.name)
},
methods: {
checkedchange(val) {
this.checked = val
},
//关闭并清空画布
close() {
this.$emit('closeCanvas');
this.clear();
},
//创建并显示画布
createCanvas() {
this.ctx = uni.createCanvasContext('mycanvas', this); //创建绘图对象
this.ctx.setFillStyle('#000000')
this.ctx.fillStyle = '#000000'
//设置画笔样式
this.ctx.lineWidth = 6;
this.ctx.lineCap = 'round';
this.ctx.lineJoin = 'round';
},
//触摸开始,获取到起点
touchstart(e) {
let startX = e.changedTouches[0].x;
let startY = e.changedTouches[0].y;
let startPoint = {
X: startX,
Y: startY
};
this.points.push(startPoint);
//每次触摸开始,开启新的路径
this.ctx.beginPath();
},
//触摸移动,获取到路径点
touchmove(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(); //绘制路径
}
},
// 触摸结束,将未绘制的点清空防止对后续路径产生干扰
touchend() {
this.points = [];
},
//绘制笔迹
draw() {
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);
this.hasSign = true
},
//清空画布
clear() {
this.hasSign = false
let that = this;
this.createCanvas();
uni.getSystemInfo({
success: function(res) {
let canvasw = res.windowWidth;
let canvash = res.windowHeight;
that.ctx.clearRect(0, 0, canvasw, canvash);
that.ctx.draw(true);
}
});
},
//完成绘画并保存到本地
finish() {
if(!this.checked) {
return this.$u.toast('请勾选承诺')
}
if (!this.hasSign) {
uni.showToast({
title: '签名为空不能保存',
icon: 'none',
duration: 2000
})
return
}
let that = this;
uni.canvasToTempFilePath({
canvasId: 'mycanvas',
destWidth:160,
success: async function (res) {
console.log('图片上传结果')
console.log(res)
if(!res || !res.tempFilePath) {
console.log('没来这里?')
that.SignatureImg = res.tempFilePath;
console.log(that.SignatureImg)
// that.$emit('closeCanvas', that.SignatureImg);
}else{
that.$emit('closeCanvas', res.tempFilePath);
console.log('这是临时路径?')
const imgLink = await uploadImgApi(res.tempFilePath, 'signatureImg', 'sign')
console.log(imgLink)
that.periodConfirmFn(imgLink)
// //用来解决安卓真机获取到的是canvas图片的临时路径,转成base64格式
// pathToBase64(res.tempFilePath).then(re => {
// that.SignatureImg = re;
// that.$emit('getCanvasImg', that.SignatureImg);
// })
}
},
});
},
async periodConfirmFn(signUrl) {
const obj = {
signUrl,
}
const {data: res} = await addSign(obj)
if(res) {
this.$u.toast('签名成功啦')
setTimeout(()=>{
uni.switchTab({
url: '/pages/tabbar/statistics/index'
})
},1000)
}
}
}
};
</script>
<style lang="scss" scoped>
.signature-box {
padding: 0 32rpx;
display: flex;
flex-direction: column;
width: 100%;
// height: 98%;
height: calc(100vh - 50rpx);
background: #fff;
.topTps {
width: 100%;
border-radius: 8rpx;
background-color: #f1f1f1;
height: 110rpx;
line-height: 110rpx;
text-align: center;
font-size: 34rpx;
color: #333;
}
.footBox {
.checkCon {
width: 100%;
height: 100rpx;
display: flex;
align-items: center;
}
.footBtn {
display: flex;
justify-content: space-between;
.btn {
width: 49%;
font-size: 32rpx;
line-height: 90rpx;
height: 90rpx;
color: #fff;
border-radius: 14rpx;
background: linear-gradient(180deg, #3593FB 0%, #53D3E5 100%);;
text-align: center;
&.border {
border: 1rpx solid #218dff ;
color: #218dff;
background: #fff;
}
}
}
}
//签名模块
.signature {
flex: 1;
// height: 0;
// width: 0;
//canvas
.mycanvas {
width:100%;
height:100%;
background-color: #fff;
border-radius: 10px 10px 0 0;
}
}
}
</style>