YNUtdPlatform/pages/realName/workbench/electronicContract/contractVideo.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">
		<view style="margin: 20rpx;font-weight: bold;">
			合同视频
		</view>
		<video :src="videoSrc" :controls="false"  style="width: 100%;height: 600rpx;" v-if="!showPopup"></video>
		
		<view style="margin: 20rpx;font-weight: bold;color: red;">
			确认视频无误，进行下一步签订
		</view>
	</view>
	<view class="bottom-box">
		<view class="btn1" @click="chooseVideo">重新录制</view>
		<view class="btn2" @click="contractPdf">下一步</view>
	</view>
	
 
	<!-- 弹窗 -->
	<u-popup :show="showPopup" mode="center" @close="closePopup">
		<view style="width:650rpx;height: 100%;position: relative;background-color: #fff;">
				<view class="popup-header">
					<view style="width: 10%;height: 80rpx;"></view>
					<view style="width: 80%;height: 80rpx;line-height: 80rpx;font-weight: bold;text-align:center;font-size: 32rpx;">电子合同</view>
					<u-icon style="width: 10%;" name="close" color="#000" size="24" @click="closePopup"></u-icon>
				</view>
			<scroll-view class="popup-content" scroll-y="true">
				<view>电子劳动合同是指用人单位与劳动者按照《中华人民共和国劳动合同法》《中华人民共和国民法典》《中华人民共和国电子签名法》等法律法规规定，经协商一致，以可视为书面形式的数据电文为载体，使用可靠的电子签名订立的劳动合同。
                依法订立的电子劳动合同具有法律效力，用人单位与劳动者应当按照电子劳动合同的约定，全面履行各自的义务。
                电子劳动合同信息保护与安全的具体要求如下：</view>
                <view>电子劳动合同信息的管理、调取和应用要符合《中华人民共和国网络安全法》《互联网信息服务管理办法》等法律法规，不得侵害信息主体合法权益。</view>
			    <view>电子劳动合同订立平台及其所依赖的服务环境，要按照《信息安全等级保护管理办法》第三级的相关要求实施网络安全等级保护，确保平台稳定运行，提供连续服务，防止所收集或使用的身份信息、合同内容信息、日志信息泄漏、篡改、丢失。</view>
                <view>电子劳动合同订立平台要建立健全电子劳动合同信息保护制度，不得非法收集、使用、加工、传输、提供、公开电子劳动合同信息。</view>
                <view>未经信息主体同意或者法律法规授权，电子劳动合同订立平台不得向他人非法提供电子劳动合同查阅、调取等服务。</view>
                <view>以上就是电子劳动合同信息保护与安全的一些要求，可以看出，大多是从平台的网络安全防护、不得泄露信息等角度，由此可见数据安全的重要性，在电子合同数据安全上，平台也是多举措保障，采用防篡改技、可信时间戳、区块链存证等技术来保障数据的不被篡改及签名安全。</view>
                 <view>注：可按上班满5天，允许补卡一天的原则进行调整。</view>
			</scroll-view>
			<view class="popup-submit-box">
				<u-button type="primary" shape="square" :disabled="timeNum>0" class="submit-edit-2" @click="confirm">确认<text v-if="timeNum>0">({{timeNum}})</text></u-button>
			</view>
		</view>
	</u-popup>
	
	
	
  </view>
</template>

<script>
import config from '@/config';
export default {
  data() {
    return {
		 timme:null,
		 timeNum:15,
		 videoSrc:"",
		 videoUrl:"",
		 autoPlay:false,
		 showPopup:false,
    }
  },
  onLoad() {
    console.log('?? ~ mounted ~ mounted-index:')  
	this.chooseVideo()
	// this.Time();//定时器
	// this.showPopup=true;
  },
  onShow() {
  },
  methods: { 
	// 定时器
	Time() {
		this.timme = setInterval(() => {
			if(this.timeNum>0){
				this.timeNum=this.timeNum-1
			}else{
				clearInterval(this.timme);
			}
		}, 1000);
	},
	chooseVideo(){
		uni.chooseVideo({
			count: 1,
			sourceType: ['camera'],
			maxDuration: 30,
			mediaType: ['video'],
			compressed: false,
			success: res => {
				console.log('chooseVideo',res)
				this.videoSrc = res.tempFilePath;
				this.videoUrl = res.tempFilePath;
				
			},
			fail: (err) => {
				uni.showToast({
					title: '视频录制失败！',
					duration: 2000
				});
			}
		})
	},
	contractPdf(){
		if(this.videoUrl==""){
			uni.showToast({
				icon: "none",
				title: '请先录制合同视频！',
				duration: 1000
			});
		}else{
			uni.navigateTo({
				url: `/pages/realName/workbench/electronicContract/contractPdf?videoUrl=${this.videoUrl}`
			})
		}
		
	},
	confirm(){
		this.showPopup=false
		this.chooseVideo()
	},
	closePopup(){
			this.showPopup=false
	},
    // 返回
    leftClick() {
      console.log('返回')
      uni.navigateBack({
      	delta: 1 // 返回
      });
    }
  },
  destroyed() {
  	clearInterval(this.timme);
  }

}
</script>

<style lang="scss">
.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: 40%;
			height: 80rpx;
			display: flex;
			align-items: center;justify-content: center;
			color: #FFF;
			background: #00337A;
			border-radius: 10rpx;
		}
		.btn2{
			width: 40%;
			height: 80rpx;
			display: flex;
			align-items: center;justify-content: center;
			color: #FFF;
			background: #00337A;
			border-radius: 10rpx;
		}
	}
	.popup-header{
		width: 100%;
		height: 80rpx;
		margin: 0 auto;
		display: flex;
		justify-content: space-between;
		align-items: center;
		background-color: #fff;
	}
	.popup-content{
		width: 94%;
		margin: 0 auto;
		height: 70vh;
		background-color: #fff;
	}
	.popup-submit-box {
		width: 100%;
		height: 100rpx;
		display: flex;
		padding-bottom: 20rpx;
		justify-content: space-between;
		align-items: center;
		background-color: #FFF;
		.submit-edit-1{
			width:45%;
			margin: 0 auto;
			height: 65rpx;
			font-size: 26rpx;
			background: #F5F5F5;
		}
		.submit-edit-2{
			width: 45%;
			margin: 0 auto;
			height: 65rpx;
			font-size: 26rpx;
			background: #0052D9;
		}
	}
}
</style>