< template> < view class = "signBox column-me" > < ! -- 这个是自定义的title- 可根据自己封装的title的作为调整 -- > < status- bar title= "电子签名" : bgColor= "null" > < / status- bar> < view class = "topHint" > 请绘制清晰可辨的签名并保存< / view> < canvas class = "canvas flex1" : canvas- id= "cid" : id= "cid" @touchstart= "touchstart" @touchmove= "touchmove" @touchend= "touchend" : disable- scroll= "true" > < / canvas> < view class = "btn margin-top10 margin-bottom10" > < view class = "cancelBtn" @click= "reWrite" > 重写< / view> < view class = "saveBtn margin-left30" @click= "save" > 保存< / view> < / view> < / view>
< / template> < script> export default { components : { } , data ( ) { return { line : [ ] , radius : 0 , taskId : '' , dom : null , cid : 'canvas' , Strokes : [ ] , showCanvasDialog : false , canvasImg : '' , } } , onLoad ( e ) { this . taskId = e. taskId} , computed : { } , mounted : function ( ) { let that = this this . initCanvas ( ) } , methods : { initCanvas ( ) { let that = this this . $nextTick ( function ( ) { this . dom = uni. createCanvasContext ( this . cid, this ) ; var query = wx. createSelectorQuery ( ) ; query. select ( '#canvas' ) . boundingClientRect ( ) ; query. exec ( function ( res ) { let widths = res[ 0 ] . widthlet heights = res[ 0 ] . heightthat. dom. rect ( 0 , 0 , widths, heights) that. dom. setFillStyle ( '#FFFFFF' ) that. dom. fill ( ) that. dom. draw ( ) } ) } ) ; } , touchstart ( e ) { this . Strokes. push ( { imageData : null , style : { color : '#000000' , lineWidth : '3' , } , points : [ { x : e. touches[ 0 ] . x, y : e. touches[ 0 ] . y, type : e. type, } ] } ) this . drawLine ( this . Strokes[ this . Strokes. length - 1 ] , e. type) ; } , touchmove ( e ) { this . Strokes[ this . Strokes. length - 1 ] . points. push ( { x : e. touches[ 0 ] . x, y : e. touches[ 0 ] . y, type : e. type, } ) this . drawLine ( this . Strokes[ this . Strokes. length - 1 ] , e. type) ; } , touchend ( e ) { if ( this . Strokes[ this . Strokes. length - 1 ] . points. length < 2 ) { this . Strokes. pop ( ) ; } } , drawLine ( StrokesItem, type ) { if ( StrokesItem. points. length > 1 ) { this . dom. setLineCap ( 'round' ) this . dom. setStrokeStyle ( StrokesItem. style. color) ; this . dom. setLineWidth ( StrokesItem. style. lineWidth) ; this . dom. moveTo ( StrokesItem. points[ StrokesItem. points. length - 2 ] . x, StrokesItem. points[ StrokesItem. points. length - 2 ] . y) ; this . dom. lineTo ( StrokesItem. points[ StrokesItem. points. length - 1 ] . x, StrokesItem. points[ StrokesItem. points. length - 1 ] . y) ; this . dom. stroke ( ) ; this . dom. draw ( true ) ; } } , reWrite ( ) { this . Strokes = [ ] ; this . dom. draw ( ) ; this . initCanvas ( ) } , save ( ) { let that = this uni. canvasToTempFilePath ( { canvasId : 'canvas' , fileType : 'png' , quality : 1 , success : function ( res ) { let imgs = [ res. tempFilePath] that. $. upload_img ( imgs, 0 , res => { let imgUrl = res. data let mediaUrl = that. $. get_data ( 'mediaUrl' ) if ( that. $. isEmpty ( mediaUrl) ) { mediaUrl = '' } that. $. ajax ( "POST" , "/customer/user/checkTask" , { taskId : that. taskId, status : 1 , signImage : imgUrl, userVideo : mediaUrl, } , ( res ) => { if ( res. code === 1000 ) { that. $. ti_shi ( res. message) setTimeout ( ( ) => { uni. $emit ( 'signOk' ) that. $. back ( ) } , 1000 ) } else { that. $. ti_shi ( res. message) } } ) ; } ) } , fail ( e ) { console. log ( e) } } ) } } }
< / script> < style scoped lang= "less" > . signBox { position : relative; overflow : hidden; background- color: #F6F6F6 ; height : 100vh; width : 100vw; . canvas { width : 100 % ; background : #FFFFFF ; } . topHint { width : 100 % ; height : 60rpx; line- height: 60rpx; font- size: 28rpx; color : #6D7984; text- align: center; background : ; } . btn { width : 100 % ; height : 132rpx; display : flex; align- items: center; justify- content: center; . saveBtn { width : 300rpx; height : 88rpx; line- height: 88rpx; background : #215AA0; border- radius: 20rpx; text- align: center; font- size: 32rpx; color : #FFFFFF ; } . cancelBtn { width : 298rpx; height : 86rpx; line- height: 86rpx; background : #FFFFFF ; border- radius: 20rpx; text- align: center; font- size: 32rpx; color : #202233 ; border : 1px solid #BBC4CC ; } } }
< / style>