13 changed files with 404 additions and 92 deletions
-
7common/js/utils.js
-
14config/api.js
-
4config/request.js
-
9pages.json
-
1pages/carEntry/operaAppointment/comp/step1.vue
-
233pages/carEntry/signature/signature.vue
-
75pages/indexEntry/enroll/enroll.vue
-
2pages/indexEntry/enroll/registInfo/registInfo.vue
-
97pages/indexEntry/signIn/signAndOut/signAndOut.vue
-
5pages/mineEntry/myAppointment/myAppointment.vue
-
19pages/tabbar/index/index.vue
-
7pages/tabbar/learnCar/comp/subject2.vue
-
21pages/tabbar/learnCar/comp/topInfo.vue
@ -0,0 +1,233 @@ |
|||
<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' |
|||
var x = 20; |
|||
var y = 20; |
|||
export default { |
|||
data() { |
|||
return { |
|||
//绘图图像 |
|||
ctx: '', |
|||
//路径点集合 |
|||
points: [], |
|||
//签名图片 |
|||
SignatureImg: '', |
|||
hasSign: false, |
|||
realName: '', |
|||
checked: false, |
|||
}; |
|||
}, |
|||
|
|||
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: 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('这是临时路径？') |
|||
console.log(res.tempFilePath) |
|||
console.log(that.SignatureImg) |
|||
// //用来解决安卓真机获取到的是canvas图片的临时路径，转成base64格式 |
|||
// pathToBase64(res.tempFilePath).then(re => { |
|||
// that.SignatureImg = re; |
|||
// that.$emit('getCanvasImg', that.SignatureImg); |
|||
// }) |
|||
} |
|||
}, |
|||
|
|||
}); |
|||
} |
|||
} |
|||
}; |
|||
</script> |
|||
<style lang="scss" scoped> |
|||
.signature-box { |
|||
padding: 0 32rpx; |
|||
display: flex; |
|||
flex-direction: column; |
|||
width: 100%; |
|||
// height: 98%; |
|||
height: calc(100vh - 150rpx); |
|||
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> |
|||
|
|||
Write
Preview
Loading…
Cancel
Save
Reference in new issue