YNUtdPlatform/pages/realName/workbench/electronicContractSign/contractPdf.vue

<template>
  <view class="page">
    <u-navbar class="u-navbar" title="电子合同签署详情" placeholder @leftClick="leftClick" leftIconColor="#fff"  bgColor="#00337A"  :titleStyle="{ color: '#FFF', fontSize: '32rpx' }"/>
	<view class="file-box">
	    <PdfView :path="webUrl" v-if="!showPopup" style="width: 100%;height: 90%!important;"/>
	</view>
	<view class="bottom-box">
		<view class="btn1" @click="leftClick">返回</view>
		<view class="btn1" @click="checkVideo">查看视频</view>
		<view class="btn1" @click="handleSign">签署</view>
	</view>
	
	<u-popup :show="showPopup" mode="center" @close="closePopup">
		<view style="width:600rpx;height: auto;position: relative;background-color: #fff;">
			<view style="width: 100%;height: 80rpx;margin: 0 auto;display: flex;justify-content: space-between;align-items: center;background-color: #fff;"> 
				<view style="width: 50%;height: 80rpx;line-height: 80rpx;font-weight: bold;margin-left: 40rpx;">签署合同</view>
				<u-icon style="width: 10%;" name="close" color="#000" size="20" @click="closePopup"></u-icon>
			</view>
			<view style="width: 100%;height: 40vh;background-color: #fff;">
				<view style="width: 96%;margin: 20rpx auto;padding:10rpx 0;">
					<view style="font-weight: bold;margin-left: 20rpx;">法人签名/印章</view>
					<view style="margin-left: 40rpx;margin-top: 20rpx;">
						<image :src="signPath" style="width: 200rpx;height: 200rpx;" alt="">
					</view>
				</view>
				<view style="width: 96%;margin: 20rpx auto;padding:10rpx 0;">
					<view style="font-weight: bold;margin-left: 20rpx;">电子公章</view>
					<view style="margin-left: 40rpx;margin-top: 20rpx;">
						<image :src="sealPath" style="width: 200rpx;height: 200rpx;" alt="">
					</view>
				</view>
			</view>
			<view style="width: 96%;margin: 20rpx auto;display: flex;justify-content: space-between;">
				<view style="width:40%;height:80rpx;line-height: 80rpx;text-align: center;background: #00337A;color: #FFF;border-radius: 10rpx;" @click="closePopup">取消</view>
				<view style="width:40%;height:80rpx;line-height: 80rpx;text-align: center;background: #00337A;color: #FFF;border-radius: 10rpx;" @click="confirmSign">确认</view>
			</view>
		</view>
	</u-popup>
	
	
	
	
  </view>
</template>

<script>
import PdfView from '../../components/PdfView.vue'
import config from '@/config'
export default {
  components: { PdfView },
  data() {
    return {
		videoUrl:"",
		webUrl:``,
		showPopup:false,
		contractData:{},
		signData:{},
		sealPath:"",
		signPath:"",
    }
  },
  onLoad(option) {
	this.videoUrl=option.videoUrl||"";
	this.webUrl=option.pdfUrl||"";
	this.contractData=JSON.parse(option.contractData)||{};
	 console.log(this.webUrl)
	 console.log(this.videoUrl)
	 console.log(this.contractData)
	 
	 this.getSubcontractor()
  },
  onShow() {
  },
  methods: {
	//获取分包信息
	getSubcontractor(){
		let param={
			id:uni.getStorageSync('realNameUser').subId,
			proId:-1
		}
		uni.request({
		  url: config.realAppUrl + '/offLine/getSubcontractor',
		  method: 'post',
		  data: param,
		  header: {
			'Content-Type': 'application/x-www-form-urlencoded',
			Authorization: uni.getStorageSync('realNameToken')
		  },
		  success: res => {
			res = res.data;
			if(res.code==200){
				console.log(res)
				if(res.data.length>0){
					this.signData = res.data[0]
					this.sealPath = config.realFileUrl+res.data[0].sealPath;
					this.signPath = config.realFileUrl+res.data[0].signPath;
					// this.sealPath = config.realFileUrl+`ynRealName/face/2024/01/19/b0f9278cadbe4bdda05833b1300ad93520240117165256.jpg`;
					// this.signPath = config.realFileUrl+`ynRealName/face/2024/01/19/b0f9278cadbe4bdda05833b1300ad93520240117165256.jpg`;
				    console.log(this.sealPath)
				    console.log(this.signPath)
				}
			}
		  },
		  fail: err => {
			console.log(err)
		  }
		})
	},
    //签署
	handleSign(){
		this.showPopup=true
	},
	closePopup(){
		this.showPopup=false
	},
	confirmSign(){
		// console.log(this.contractData)
		if(this.contractData.isSign==0){
			let param={
				isSign:1,
				legalSeal:this.signData.signPath,
				companySeal:this.signData.sealPath,
				subPdfUrl:this.contractData.personPdfUrl,
				partBIdCard:this.contractData.partBIdCard,
				id:this.contractData.id,
			}
			console.log(param)
			this.showPopup=false;
			uni.request({
				url: config.realAppUrl+'/contract/updateSign',
				method: 'post',
				data: param,
				header: {
					'Content-Type': 'application/x-www-form-urlencoded',
					Authorization: uni.getStorageSync('realNameToken')	
				},
				success: res => {
				console.log(res)
					res = res.data;
					if(res.code==200){
						
						 uni.showToast({
							title: res.data,
							icon: 'none'
						})
						this.getText()
						uni.navigateBack({
							delta: 1 // 返回
						});
					}else{
						uni.showToast({
							title: res.msg,
							icon: 'none'
						})
					}
				},
				fail: err => {
					console.log(err)
				}
			})
		}
	},
	//短信
	getText(){ 
			let pathUrl = config.realFileUrl+this.contractData.personPdfUrl
			let arr = pathUrl.split(".pdf")
			let path = arr[0]+"_sign.pdf"
			let shortText = "【作业管控智慧平台】" + this.contractData.partB + "，你的电子合同已签署成功，地址为：" + path;
			console.log(shortText)
			let param = {
				ddtkey:"bonus",
				secretkey:"KtyBns@Admin2023!",
				mobile:this.contractData.partBPhone,
				content:shortText
			}
			console.log(param)
			uni.request({
			  url: "http://api.ktsms.cn/sms_token",
			  method: 'post',
			  data: param,
			  header: {
				'Content-Type': 'application/x-www-form-urlencoded', 
			  },
			  success: res => {
				console.log(res)
				 if(res.data.split(",")[0]=="ok"){
					 uni.$u.toast('发送成功！');
				 }
			  },
			  fail: err => {
				console.log(err)
			  }
			})
	},
	//查看视频
	checkVideo(){
		uni.navigateTo({
			url: `/pages/realName/workbench/electronicContractSign/contractVideo?videoUrl=${this.videoUrl}`
		})
	},
    // 返回
    leftClick() {
      console.log('返回')
      uni.navigateBack({
      	delta: 1 // 返回
      });
    }
  },

}
</script>

<style lang="scss">
	/deep/.u-popup .u-transition{
		background-color: rgba(0, 0, 0, 0.8);
	}
.page {
	width: 100vw;
	height: 100vh;
	background-color: #EFEFEF;
	box-sizing: border-box;
	position: relative;
	.file-box{
		width: 100%;
		height: 80vh;
		// overflow-y: auto;
		 
	}
	.bottom-box{
		width: 90%;
		margin: 0 auto;
		height: 120rpx;
		display: flex;
		justify-content: space-between;
		align-items: center;
		.btn1{
			width: 30%;
			height: 80rpx;
			display: flex;
			align-items: center;justify-content: center;
			color: #FFF;
			background: #00337A;
			border-radius: 10rpx;
		}
		.btn2{
			width: 30%;
			height: 80rpx;
			display: flex;
			align-items: center;justify-content: center;
			color: #FFF;
			background: #00337A;
			border-radius: 10rpx;
		}
	}
}
</style>