217 lines
6.4 KiB
Vue
217 lines
6.4 KiB
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 :autoplay="autoPlay" 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+'?_t=' + Date.now();
|
||
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>
|