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.
299 lines
8.0 KiB
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>
|