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.
fude/pages/index/userSignPage.vue

299 lines
8.0 KiB

1 year ago
<template>
<!-- 用户签字 -->
<view class="sign">
<!-- v-show="!signFlag" -->
<view style="position: relative;background-color: #fff;z-index:9;">
<navbar title="签字验收" :isCenter="true" :back="true"></navbar>
<u-parse :content="html"></u-parse>
<button class="submit" @click="gosign" v-if="isUserSign==0" :disabled="disabledBtn">
签署
</button>
<view class="submit" @click="getReport" v-if="isUserSign==1">
查看报告
</view>
</view>
<view class="signContainer" :style="{zIndex:signFlag?999:-1,right:signFlag?0:'-9999rpx'}">
<view style="width:100%;height: calc(100vh - 100rpx);">
<l-signature disableScroll
backgroundColor="#fff"
ref="signatureRef"
:penColor="penColor"
:penSize="penSize"
:landscape="false"
:openSmooth="openSmooth" ></l-signature>
</view>
<view class="btnGroup">
<button @click="toolHandle('clear')">清空</button>
<button @click="toolHandle('undo')">撤消</button>
<button @click="toolHandle('save')">保存</button>
<button @click="signFlag=false">返回</button>
<!-- <button @click="toolHandle('openSmooth')">压感{{openSmooth?'':''}}</button> -->
</view>
</view>
</view>
</template>
<script>
import navbar from '@/components/navbar.vue';
import {getAcceptance,setSing,userSign} from '@/common/api.js'
import {getToken,getUserInfo} from '@/common/auth.js'
export default {
components:{navbar},
data() {
return {
html:``,
list: [
],
id:null,
//签名
penColor:'#000000',
penSize:2,
openSmooth:true,
url:'',
signFlag:false,
url3:null,
time1:'',
time2:'',
time3:'',
pdfUrl:'',
userInfo:{},
//用户签字
params:{},
isUserSign:0,//是否用户本人签字
disabledBtn:false,
details:{}
}
},
methods:{
//签名
toolHandle(type) {
if(type == 'openSmooth') {
this.openSmooth = !this.openSmooth
return
}
if (type == 'save') {
this.$refs.signatureRef.canvasToTempFilePath({
success: (res) => {
// 是否为空画板 无签名
console.log(res.isEmpty)
// 生成图片的临时路径
// H5 生成的是base64
let url = res.tempFilePath;
uni.uploadFile({
url: this.baseUrl+'/api/common/upload', // 仅为示例,非真实的接口地址
filePath: url,
name: 'file',
formData: {
user: 'test',
token:getToken()
},
success: (res) => {
console.log(res,"uuu")
let urlInfo = JSON.parse(res.data)
let url = urlInfo.data.fullurl;
this.toolHandle('clear')
this.signFlag = false;
this.url3=url
this.time3 = this.newDate()
this.setHtml(null,null,this.url3)
},
fail: (res) => {
console.log(res,"rrr")
}
});
}
})
return
}
if (this.$refs.signatureRef)
this.$refs.signatureRef[type]()
},
getReport(){
uni.navigateTo({
url:'/pages/webview/webview?url='+this.pdfUrl
})
},
gosign(){
uni.pageScrollTo({
selector: ".cart-box",
scrollTop: 0
})
this.signFlag=true;
this.toolHandle('clear')
},
getAcceptance(){
getAcceptance({id:this.id,custom: { auth: true }}).then(res=>{
this.list = res.data;
// this.setHtml()
})
},
setHtml(img1,img2,img3){
console.log(img1,img2,img3)
let temp=`
${this.list.map((item,index)=>{
// let intro = `${item.intro.map((p,i)=>{
// return `<div style="width:100%">
// <label :for="${p.name+i}">${p.name}</label>
// <input type="checkbox" :checked="${p.checked}" :id="${p.name+i}">
// </div>`
// })}`
// let result = `${item.result.map((m,n)=>{
// return `<div style="width:100%">
// <label :for="${m.name+n}">换热介质无腐蚀性,达标</label>
// <input type="checkbox" :checked="${m.checked}" :id="${m.name+n}">
// </div>`
// })}`
// let info;
// if(index==0){
// info = `<td style="text-align:center;" rowspan="${this.list.length}">
// 1、验收内容由审核人员勾选;2、照片由施工单位、供货单位提供,同时照片自动显示上传时间和地点;3、验收结果由验收审核人员填写
// </td>`
// }else{
// info=``
// }
// return `
// <tr>
// <td style="text-align:center;">${index+1}</td>
// <td style="text-align:center">${item.title}</td>
// <td style="text-align:center;display: flex;flex-wrap: wrap;width:100%">
// ${intro}
// </td>
// <td style="text-align:center">
// ${result}
// </td>
// </tr>`
}).join('')}`
let html = `
<text class="td" style="style="position:absolute;bottom:100px;right:0px"">${this.details.auditor_name}</text>
<img class="td" style="position:absolute;bottom:232px;left:50px" src="${img1}" alt="14" height="50" width="100"/>
<img class="td" style="position:absolute;bottom:232px;right:0px" src="${img3}" alt="14" height="50" width="100"/>
<text class="td" style="style="position:absolute;bottom:100px;right:0px"">${this.time3}</text>
`
this.html = this.html+html;
uni.pageScrollTo({
selector: ".cart-box",
scrollTop: 10000
})
if(img3){
this.disabledBtn = true
userSign({id:this.id,content:this.html,username:this.params.name,mobile:this.params.mobile,user_address:this.params.user_address}).then(res=>{
console.log(res,"55555")
this.details = res.data;
this.pdfUrl = res.data.acceptance_file;
uni.setStorageSync('user_pdf',this.pdfUrl)
uni.setStorageSync('auditor_name',this.details.auditor_name)
this.isUserSign = 1
})
// if(this.userInfo.user_type==2){//代理商
// setSing({id:this.id,content:this.html}).then(res=>{
// console.log(res,"55555")
// this.pdfUrl = res.data.acceptance_file;
// uni.navigateBack({
// delta:1,//返回层数,2则上上页
// })
// })
// }
// if(this.userInfo.user_type==1||this.isUser){//用户
// }
}
},
newDate() {
var date = new Date()
var y = date.getFullYear()
var m = date.getMonth() + 1
m = m < 10 ? '0' + m : m
var d = date.getDate()
d = d < 10 ? '0' + d : d
var h = date.getHours()
h = h < 10 ? '0' + h : h
var minute = date.getMinutes()
minute = minute < 10 ? '0' + minute : minute
var s = date.getSeconds()
s = s < 10 ? '0' + s : s
return y + '-' + m + '-' + d + ' ' + h + ':' + minute + ':' + s
},
},
onLoad(option){
console.log(option)
this.id = option.id;
this.userInfo = getUserInfo();
this.isUserSign = option.isUserSign
this.params = option
this.html=uni.getStorageSync("acceptance_content");
this.$set(this.details,'auditor_name',uni.getStorageSync('auditor_name'))
console.log(this.details)
if(option.isUserSign==1){//已签且是本人
// userSign({id:this.id,content:this.html,username:option.name,mobile:option.mobile}).then(res=>{
// this.pdfUrl = res.data.acceptance_file
// })
this.getAcceptance()
}else{
this.getAcceptance()
}
},
onShow() {
this.pdfUrl = uni.getStorageSync('user_pdf')
},
/**
* 用户点击右上角分享
*/
onShareAppMessage: function () {
}
}
</script>
<style lang="scss" scoped>
.submit{
height: 98rpx;
background: #8EC31F;
line-height: 98rpx;
border-radius: 10rpx;
font-size: 30rpx;
font-family: Alibaba PuHuiTi;
font-weight: 400;
color: #FFFFFF;
text-align: center;
margin-top:40rpx;
}
.sign{
position:relative;
overflow: hidden;
.signContainer{
position: absolute;
bottom:0;
right:-9999rpx;
z-index:999;
width:100%;
height:100%;
background-color: #ffffff;
}
}
.btnGroup{
display: flex;
background-color: #ffffff;
height: 100rpx;
}
</style>