fude/pages/index/userSignPage.vue

<template>
	<!-- 用户签字 -->
	<view class="sign">
		<!-- v-show="!signFlag" -->
		<view style="position: relative;background-color: #fff;z-index:9;padding-bottom:120rpx;">
			<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)=>{
							if(p.checked==true){
								return `${p.name}☑`
							}else{
								return `${p.name}☐`
							}
							
						}).join(' ')}`
						
						// <input type="checkbox" checked="${m.checked}" :id="${m.name+n}">
						let result = `${item.result.map((m,n)=>{
							if(m.checked){
								return `${m.name}☑`
							}else{
								return `${m.name}☐`
							}
							
						}).join(' ')}`
						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;word-break:break-all;font-size:16px;">${index+1}</td>
							<td style="text-align:center;word-break:break-all;font-size:16px;">${item.title}</td>
							<td style="text-align:center;word-break:break-all;font-size:16px;">
								${intro}
							</td>
							<td style="text-align:center;word-break:break-all;font-size:16px;">
								${result}
							</td>
							
						</tr>`
					}).join(' ')}`
					let html = `
					<table id="example" cellspacing="0" width="100%" border="1" style="overflow:wrap;">
						<tr>
						    <td style="text-align:center;font-size:16px;" colspan="4">“中科福德”热泵产品安装施工质量控制、验收报告(实事求是填写)</td>
						</tr>
						  <tr>
							  <td style="text-align:center;word-break:break-all;width:10%;font-size:16px;">序号</td>
							  <td style="text-align:center;word-break:break-all;width:20%;font-size:16px;">验收项</td>
							  <td style="text-align:center;word-break:break-all;width:50%;font-size:16px;">验收内容(审核人员勾选)</td>
							  <td style="text-align:center;word-break:break-all;width:20%;font-size:16px;">审核评估结果</td>
						  </tr>
					    ${temp}
					   <tr>
					       <td style="text-align:center;font-size:16px;" rowspan="5">${this.list.length+1}</td>
					       <td style="text-align:center;word-break:break-all;font-size:16px;">调试人员签字</td>
					       <td style="text-align:center;word-break:break-all;font-size:16px;">安装或者供货单位签字</td>
					       <td style="text-align:center;word-break:break-all;font-size:16px;" >审核验收人员签字</td>
					   </tr>
						<tr>
							<td style="text-align:center;word-break:break-all;" name="1"><img src="${this.details.agent_sign}" style="width:50px;height:90px;"/></td>
							<td style="text-align:center;height:100px;word-break:break-all;font-size:16px;" name="2">${this.details.auditor_name}</td>
							<td style="text-align:center;word-break:break-all;" name="3"><img  src="${img3}" style="width:50px;height:90px;"/></td>
						</tr>
						<tr>
							<td style="text-align:center;word-break:break-all;font-size:16px;">日期</td>
						    <td style="text-align:center;word-break:break-all;font-size:16px;">日期</td>
						    <td style="text-align:center;word-break:break-all;font-size:16px;">日期</td>
						</tr>
						<tr>
							<td style="text-align:center;height:50px;word-break:break-all;font-size:16px;" name="date1">${this.details.agent_sign_time_text}</td>
						    <td style="text-align:center;height:50px;word-break:break-all;font-size:16px;"  name="date2">${this.details.auditor_sign_time_text}</td>
						    <td style="text-align:center;height:50px;word-break:break-all;font-size:16px;"  name="date3">${this.time3}</td>
						</tr>
					   
					</table>
					`
					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,user_sign:this.url3}).then(res=>{
							console.log(res,"55555")
							this.pdfUrl = res.data.acceptance_file;
							uni.setStorageSync('user_pdf',this.pdfUrl)
							this.isUserSign = 1
						})
					}
			},
			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.details=uni.getStorageSync("acceptance_content");
			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;
		position:fixed;
		bottom:0;
		width:100%;
	}
	.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>