liveShop/pages/contract/contract.vue

<template>
	<view class="center">
		<view class="title">智播商城合同</view>
		<scroll-view scroll-y="true" class="img-box">
			<image class="img" v-for="item in imgList" :src="item" mode="widthFix"></image> 
			<!-- <text>
			根据《中华人民共和国合同法》、《中华人民共和国广告法》等有关规定，甲乙双方按照平等自愿、诚实信用的原则，就甲方聘用乙方从事兼职劳务服务合作事宜订立本协议。
			第一条劳务工作内容
			1、甲方因与第三方网络平台服务合作提供劳务服务需要,特聘用乙方完成相关兼职劳务工作。
			2、乙方应按照甲方的要求及第三方网络平台业务要求规定的标准完成工作。
			第二条合同效力
			1、本合同有效期限为____年____月____日至____年____月____日。期限届满，双方应另行签署新的协议；若双方未签署新的协议，而以实际行动继续合作的，视为双方同意合同期限顺延，直至按照本合同约定终止或解除时为止。
			2、本合同在发生下列情形时自然终止：
			（1）乙方主动退出在第三方网络平台的服务的；
			（2）第三方网络平台终止或变更业务模式而不需要履行本合同的；
			（3）甲方在授权的网站上发布合同终止或变更信息的；
			（4）其他原因导致本合同不再继续履行的。
			第三条甲方的权利和义务
			1、甲方负责制定乙方劳务工作的具体安排，并制定工
			作验收标准。若甲方安排的具体工作要求有变更的，应提前5个工作日通知乙方。
			2、甲方在每个月的月底应对第三方网络平台当月的工作成果进行验收。
			3、甲方应按约定及时支付费用。
			第四条乙方的权利和义务
			1、在保证完成甲方安排工作任务情况下，乙方可以自行安排工作休息时间。但在劳务工作时段内，乙方应保持与甲方联络沟通。
			2、乙方应按时尽责地完成甲方要求的工作内容，并达到规定的质量标准，不得有侵犯他人版权、其他权利或其他违法、违规的情况。
			3、合同期内，乙方应在甲、第三方网络平台方许可范围内使用第三方网络平台方商业信息；合同期内以及合同终止后，乙方均有义务对双方合作的有关协议及合作过程中知悉的甲方、第三方网络平台相关信息予以保密，未经书面许可，乙方不得以任何方式向其它方泄漏、给予或转让该等保密信息。否则，因此导致甲方或第三方网络平台损失，由乙方负责赔偿。
			4、除本合同事项外，乙方不能以甲方以及第三方网络平台的名义开展任何与完成约定的工作任务无关的业务或活动。未经甲方书面同意，乙方不得引导或为甲方平台现有用户及甲方员工进入其他第三方竞争平台提供任何信息或便利，包括但不限于提供联络上的协助、进行说服工作。
			5、本合同项下，乙方在第三方网络平台兼职所产生的表演内容，甲方有权进行现场直播、录音录像、通过信息网络向公众传播，因此形成的音视频作品版权为甲方单独享有。甲方为宣传推广或行使前述版权需要，有权无偿使用乙方肖像、形象、姓名、声音，乙方不得就此主张任何权利。
			第五条兼职劳务报酬的支付
			1、乙方每月的劳务报酬为元/月。甲方将在每月15日前以人民币形式向乙方支付上月的劳务报酬。
			2、乙方提供的账户信息如下：
			3、甲方劳务报酬发放以乙方以上提供的银行帐户为准,因乙方提供的银行帐户不实造成一切损失由乙方自行承担。如乙方帐号变更或发生不可用等情况时，应至少提前三个工作日书面通知甲方，否则，由此造成的一切损失由乙方自行负责。
			4、甲方不承担乙方任何劳保福利待遇，也不负责乙方的任何医疗保险费用。
			第六条违约责任
			1、若甲方未按时支付劳务报酬，应按同期银行逾期贷款利率支付违约金。
			2、双方应按本合同约定履行，如有违反，守约方有权要求对方及时改正；造成对方损失的，守约方有权要求违约方赔偿。
			3、因不可抗力造成损失的，彼此不负赔偿责任，但发生不可抗力一方应及时将有关情况通知另一方，并尽最大努力进行补救。
			本合同所称不可抗力是指不能预见、不能克服并不能避免且对一方当事人造成重大影响的客观事件，包括但不限于自然灾害如洪水、地震、火灾和风暴等以及社会事件如战争、动乱、政府行为、黑客事件、大范围电信事故等。
			第七条合同的终止
			1、发生以下情形时，本合同终止：
			（1）合同期限届满或任何一方提前30日书面通知对方要求终止合同的；
			（2）一方违反合同约定，且违约方在非违约方书面通知后15日内仍未予改正的，非违约方可以书面通知的形式终止本合同；
			（3）乙方如未能达到甲方的要求，甲方在该月月底验收时将给予警告；此后如仍发生类似情况的，甲方可提前终止本合同。
			2、本合同的提前终止不影响已经产生的权利义务关系。
			3、甲方已经得到本合同约定的第三方网络平台方合法授权，本合同签订后，原乙方与第三方网络平台签署的劳务兼职协议终止。
			第八条其他
			1、因履行本合同发生的纠纷，双方应友好协商解决，协商不成的，提请高新区人民法院诉讼解决。
			2、甲方有权根据业务需要修改本合同条款。
			
			甲方：智播商城
			乙方：
			</text> -->
			
		</scroll-view>
		<uni-popup ref="popup" type="center">
			<view class="popup-box flex">
				<view class="img"><image src="https://zhibo.liuniu946.com/img/contractTc.png" mode="aspectFill"></image></view>
				<view class="txt">
					<canvas class="canvas" canvas-id="mycanvas" @touchstart.stop="touchstart" @touchmove.stop="touchmove" @touchend.stop="touchend">
						<text class="txt-font" v-if="showtext">请在此处书写签名</text>
					</canvas>
					
					<view class="btn flex">
						<view class="button" @click.stop="clear"><text>重写</text></view>
						<view class="button" @click.stop="submit"><text>确认</text></view>
					</view>
				</view>
				<view class="close" @click="close">
					<image src="https://zhibo.liuniu946.com/img/close.png" mode=""></image>
				</view>
			</view>
		</uni-popup>
		<view class="buttom">
			<view class="btn"   @click="contact">
				<text class="font">确认签署</text>
			</view>
		</view>
	</view>
	
</template>

<script>
	import { getSign, setSign, uploadSign } from '@/api/contract.js';
	// import uniPopup from '@/components/uni-popup/uni-popup.vue';
	export default {
		// components: {
		// 	uniPopup
		// },
		//xiougai
		data() {
			return {
				type: '',
				imgList: [],
				showtext: true,
				ctx: '',//绘画图像
				points: [], //路径点集合
				signature: ''
			}
		},
		onLoad(option) {
			console.log("------",option);
			this.type = option.type;
			this.loadData()
		},
		methods: {
			async loadData(){
				//获取合同类容
				getSign({},this.type).then(({data})=>{
					console.log('获取合同内容',data)
					this.imgList = data.pictures
				});
			},
			contact(){
				uni.navigateTo({
					url: '/pages/contract/qm?type=' +this.type
				})
				// this.$refs.popup.open();
				this.ctx = uni.createCanvasContext("mycanvas",this);
				
				//设置画笔样式
				this.ctx.lineWidth = 4;
				this.ctx.lineCap = "round"
				this.ctx.lineJoin = "round"
			},
			
		}
	}
</script>

<style lang="scss">
page{
	height: 100%;
	background-color: #fff;
}
.img-box{
	width: 100%;
	display: flex;
	flex-direction: column;
	position: relative;
	.img{
		width: 100%;
		height: 1035rpx;
	}
}
.title {
	margin-top: 34rpx;
	margin-bottom: 33rpx;
	width: 100%;
	height: 35rpx;
	font-size: 38rpx;
	font-family: SimSun;
	font-weight: 400;
	color: #333333;
	line-height: 1;
	text-align: center;
}

.buttom{
	padding: 133rpx 0 28rpx 0;
	.btn {
		width: 100%;
		margin:  auto;
		width: 674rpx;
		height: 88rpx;
		background: #FF3939;
		border-radius: 44rpx;
		color: #FFE1E1;
		line-height: 88rpx;
		text-align: center;
		.font {
			font-size: 36rpx;
			font-family: PingFang SC;
			font-weight: 500;
			color: #FFFFFF;
		}
	}
}
</style>