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.
195 lines
3.9 KiB
195 lines
3.9 KiB
<template>
|
|
<view class="page">
|
|
<navbar title="电子合同"
|
|
leftClick
|
|
@leftClick="$utils.navigateBack"/>
|
|
|
|
<view style="padding: 25rpx;">
|
|
<canvas-drag ref="canvasRef"
|
|
id="canvas-drag"
|
|
:graph="graph"
|
|
:width="width"
|
|
:height="height"
|
|
bgColor="#fff"
|
|
enableUndo="true"></canvas-drag>
|
|
|
|
<!-- <canvas
|
|
canvas-id="mycanvas"
|
|
class="mycanvas"
|
|
v-if="!imagePath"
|
|
:style="{height : height + 'rpx', width : width + 'rpx'}"
|
|
disable-scroll="true"></canvas> -->
|
|
|
|
<image :src="imagePath"
|
|
v-if="imagePath"
|
|
style="width: 700rpx;"
|
|
mode="widthFix"></image>
|
|
</view>
|
|
|
|
<view class="uni-color-btn"
|
|
@click.stop="onChangeBgImage">
|
|
导入合同
|
|
</view>
|
|
|
|
<view class="uni-color-btn"
|
|
@click.stop="toSignature">
|
|
签名
|
|
</view>
|
|
|
|
<view class="uni-color-btn"
|
|
@click.stop="onExportJSON">
|
|
保存合同
|
|
</view>
|
|
|
|
</view>
|
|
</template>
|
|
|
|
<script>
|
|
import canvasDrag from "@/components/canvas-drag/index";
|
|
import setData from "@/components/canvas-drag/setData.js";
|
|
export default {
|
|
components: {
|
|
canvasDrag
|
|
},
|
|
mixins : [setData],
|
|
data() {
|
|
return {
|
|
id : 0,
|
|
detail : {},
|
|
height: 750,
|
|
width: 700,
|
|
ctx : null,
|
|
imagePath : 0,
|
|
}
|
|
},
|
|
onLoad({id}) {
|
|
this.id = id
|
|
this.getDetail()
|
|
},
|
|
onShow() {
|
|
this.initCanvas()
|
|
this.syntheticSignature()
|
|
},
|
|
methods: {
|
|
// 获取合同内容
|
|
getDetail(){
|
|
let data = {
|
|
contractId: this.id
|
|
}
|
|
if (uni.getStorageSync('token')) {
|
|
// data.token = uni.getStorageSync('token')
|
|
}
|
|
this.$api('queryContracById', data, res => {
|
|
if (res.code == 200) {
|
|
this.detail = res.result
|
|
}
|
|
})
|
|
},
|
|
|
|
initCanvas() {
|
|
this.ctx = uni.createCanvasContext("mycanvas")
|
|
},
|
|
|
|
// 去签名
|
|
toSignature(){
|
|
uni.navigateTo({
|
|
url: `/pages_order/contract/electronicSignature?id=${this.id}&signature=1`
|
|
})
|
|
},
|
|
|
|
// 导出合同
|
|
onExportJSON() {
|
|
uni.showLoading({
|
|
title: '保存中...'
|
|
})
|
|
this.$refs.canvasRef.exportFun().then(image => {
|
|
console.log(image);
|
|
uni.hideLoading()
|
|
// this.imagePath = image
|
|
uni.previewImage({
|
|
urls: [image],
|
|
current: 0,
|
|
})
|
|
}).catch(e => {
|
|
uni.hideLoading()
|
|
console.error(e);
|
|
});
|
|
},
|
|
|
|
/**
|
|
* 导入合同
|
|
*/
|
|
onChangeBgImage() {
|
|
let self = this
|
|
wx.chooseImage({
|
|
success: res => {
|
|
uni.getImageInfo({
|
|
src: res.tempFilePaths[0],
|
|
success: image => {
|
|
|
|
let allwh = image.height + image.width
|
|
let imgw = (image.width / allwh).toFixed(2)
|
|
let imgh = (image.height / allwh).toFixed(2)
|
|
|
|
self.height = imgh * Math.ceil(this.width / imgw)
|
|
|
|
// this.width = image.width
|
|
// this.height = image.height
|
|
|
|
self.$nextTick(() => {
|
|
this.$refs.canvasRef.changeBgImage(image.path)
|
|
// this.ctx.drawImage(image.path, 0, 0, this.ctx.width, this.ctx.height)
|
|
// this.ctx.stroke();
|
|
// this.ctx.draw(false, () => {
|
|
// wx.canvasToTempFilePath({
|
|
// canvasId: 'mycanvas',
|
|
// success: res => {
|
|
// // this.imagePath = res.tempFilePath
|
|
// uni.previewImage({
|
|
// urls: [res.tempFilePath],
|
|
// current: 0,
|
|
// })
|
|
// },
|
|
// fail: e => {
|
|
// }
|
|
// }, this);
|
|
// });
|
|
|
|
})
|
|
}
|
|
})
|
|
}
|
|
});
|
|
},
|
|
|
|
// 合成签名
|
|
syntheticSignature(){
|
|
let url = uni.getStorageSync('electronicSignature')
|
|
if(!url) return
|
|
uni.removeStorageSync('electronicSignature')
|
|
this.setData({
|
|
graph: {
|
|
w: 100,
|
|
h: 50,
|
|
x : 0,
|
|
y : 0,
|
|
type: 'image',
|
|
url,
|
|
permitSelected : true,
|
|
}
|
|
});
|
|
// this.$nextTick(() => {
|
|
// this.onExportJSON()
|
|
// })
|
|
},
|
|
}
|
|
}
|
|
</script>
|
|
|
|
<style scoped lang="scss">
|
|
.page{
|
|
.mycanvas{
|
|
background-color: #fff;
|
|
}
|
|
}
|
|
</style>
|