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
-
77pages/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