liveShop/pages/contract/Qrcontract.vue

<template>
	<view class="center">
		
		<scroll-view scroll-y="true" class="img-box">
			<image class="img" v-for="item in imgList" :src="item" mode="widthFix"></image>
			<image class="qm" :src="name" mode="aspectFit"></image>
			<text>

			</text>
			
		</scroll-view>
		
		<view class="buttom" @click="submit">
			<view class="btn">
				<text class="font">确认提交</text>
			</view>
		</view>
		<uni-popup ref="popup" type="center" @click="close">
					<view class="popup_row">
						<view class="title">
							<view class="title-left">
								请输入您的手机号，开通{{ shop }}!
							</view>
							<view class="cancel" @click="cancel">
								<!-- <image src="../../static/img/cancel1.png" mode=""></image> -->
							</view>
						</view>
						<view class="inpBox">
							<input type="text" value="" placeholder="请输入您的手机号" v-model="to_phone"/>
						</view>	
						<view class="inpedit">
							可在方框中修改您的手机号
						</view>
						<view class="inpBox">
							<input type="text" value="" placeholder="请输入您的身份证号" v-model="Idcard"/>
						</view>	
						<view class="inpedit">
							可在方框中修改您的身份证号
						</view>
						<view class="comfirm">
							<view class="comfirm1" @click="comfirm1()">
								确认
							</view>			
						</view>
					</view>
				</uni-popup>
	</view>
	
</template>

<script>
	import { mapState, mapMutations } from 'vuex';
	import { apply } from '@/api/apply.js';
	import uniPopup from '@/components/uni-popup/uni-popup.vue';
	import {
		upload1
	} from '@/api/apply.js';
	import { getSign, setSign, uploadSign } from '@/api/contract.js';
	import { xgxx } from '@/api/team.js'
	export default {
		data() {
			return {
				type:"",
				shoptype: '',
				to_phone: '',
				imgList:[],
				name: uni.getStorageSync('mycanvas'),
				id:'',
				url:'',
				shop:'',
				Idcard: ''
			}
		},
		onLoad(option) {
			this.type = option.type;
			if(option.type == 2){
				this.shoptype = 4;
				this.shop = '播主网店'
			}else if(option.type == 1){
				this.shoptype = 2;
				this.shop = '创业网店'
			}else{
				this.shoptype = option.type;
				this.shop = '创业播主网店'
			}
			
			this.loadData()
		},
		computed: {
			...mapState(['userInfo']),
		},
		methods: {
			//  获取数据
			async loadData(){
				if (this.userInfo.phone != '') {
					this.to_phone = this.userInfo.phone;
				};
				if (this.userInfo.company == 1){
					this.to_phone = this.userInfo.company_info.company_phone;
				}
				if (this.userInfo.card_id != '') {
					this.Idcard = this.userInfo.card_id;
				};
				let url = uni.getStorageSync('mycanvas')
				//获取合同类容
				console.log(this.userInfo)
				if(this.userInfo.phone != ''){
					this.to_phone = this.userInfo.phone
				};
				if(this.userInfo.card_id != ''){
					this.Idcard = this.userInfo.card_id
				};
				getSign({},this.type).then(({data})=>{
					console.log('获取合同内容',data)
					this.imgList = data.pictures
					this.id = data.id
					this.type = data.type
					upload1({
						filename: url
					}).then(data => {
						console.log('---data---',data)
						this.url = data[0].url
						uploadSign({
							sign: this.url
						},this.id).then(({ data }) =>{
							console.log('123',data)
						})
						// this.imgY = uni.getStorageSync('mycanvas');
					})
					
				});
				
			},
			
			submit(){
				const obj = this;
				console.log(obj.userInfo)
				if ('store_info' in this.userInfo){
					if (this.shoptype == 3 && this.userInfo.store_info.type < 3){
						this.$refs.popup.open();
					}else if(this.shoptype == 2 && this.userInfo.store_info.type < 2) {
						this.$refs.popup.open();
					}else if(this.shoptype == 4 && this.userInfo.store_info.type < 4) {
						this.$refs.popup.open();
					}
					else {
						uni.navigateTo({
							url: '/pages/contract/success'
						})
					}
				}else {
					this.$refs.popup.open();
				}
					
			},
			comfirm1:function () {
			let obj = this
				if ( obj.to_phone.toString().trim() == '' ){
					obj.$api.msg('请填写正确的手机号码');
					// uni.showModal({
					// 	title:'输入框为空',
					// 	// content:JSON.stringify(obj)
					// })
				} else {
						console.log('obj.to_phone1111',obj.to_phone)
						const reg = /^(\+?0?86-?)?1[\d]\d{9}$/;
							if (!reg.test(obj.to_phone)) {
							obj.$api.msg('请填写正确的手机号码');
							return;
						}
						let reg1 =
							/^(^[1-9]\d{7}((0\d)|(1[0-2]))(([0|1|2]\d)|3[0-1])\d{3}$)|(^[1-9]\d{5}[1-9]\d{3}((0\d)|(1[0-2]))(([0|1|2]\d)|3[0-1])((\d{4})|\d{3}[Xx])$)$/
						if (!reg1.test(obj.Idcard)) {
							obj.$api.msg('请填写正确的身份证信息');
							return;
						}
					xgxx({
						card_id: obj.Idcard,
					}).then(e =>{
						console.log(e)
					}).catch(e => {
						console.log(e)
					})
					let data = {}
					if (obj.userInfo.company == 1){
						data  = {
							name: obj.userInfo.company_info.company_name,
							introduction: obj.userInfo.company_info.jobs,
							image: obj.userInfo.avatar,
							phone: obj.to_phone || '',
							card_id: obj.Idcard,
							type: obj.shoptype
						}
					}else {
						data = {
							name: obj.userInfo.nickname + "的网店",
							introduction: obj.userInfo.nickname + "的网店",
							image: obj.userInfo.avatar,
							phone: obj.to_phone || '',
							card_id: obj.Idcard,
							type: obj.shoptype
						}
					}
					apply(data)
					.then(({ data }) =>{
						this.$refs.popup.close();
							console.log(data)
							uni.navigateTo({
								url: '/pages/contract/success'
							})
						})
						.catch((err) => {
							this.$refs.popup.close();
						})
				}
			}
		}
	}
</script>

<style lang="scss">
page{
	height: 100%;
	background-color: #fff;
}
.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;
}
.certificates{
	// padding: 24rpx;
	width: 100%;
	height: 100vh;
	

}
.img-box{
	width: 100%;
	display: flex;
	flex-direction: column;
	position: relative;
	.img{
		width: 100%;
		// height: 1035rpx;
		z-index: 99;
	}
}
		.tki-qrcode-canvas {
			width: 750rpx;
			// height: 1350rpx;
			margin: 0 auto;
			z-index: 99;
		}
		.imgbox{
			height: 1350rpx;
			width:750rpx;
		}
.text {
	width: 90%;
	margin: 0 auto;
	height: calc(100% - 44px);
	font-size: 26rpx;
	font-family: SimSun;
	font-weight: 400;
	color: #333333;
	line-height: 40rpx;
}
.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;
		}
	}
}
.qm {
	// width: 750rpx;
	// height: 300rpx;
	// position: absolute;
	// bottom: 0rpx;
	// left: 0rpx;
	// // z-index: 999;
	// background-color: pink;
	width: 310rpx;
	height: 128rpx;
	position: absolute;
	bottom: 200rpx;
	left: 239rpx;
	z-index: 99;
}
.popup_row{
		// margin-top: 108rpx;
		position: relative;
		border-radius: 25rpx;
		width: 100%;
		padding: 24rpx;
		background-color: #f8f8f8;
		z-index: 999;
		.title{
			border-bottom: 2rpx solid #F2F2F2;
			color: #E63931;
			font-size: 32rpx;
			padding-left: 4rpx;
			padding-bottom: 16rpx;
			display: flex;
			justify-content: space-between;
			// align-items: center;
			.cancel{
				margin-left: 52rpx;
				width: 36rpx;
				height: 36rpx;
				image{
					width: 36rpx;
					height: 36rpx;
				}
			}
		}
		.inpBox{
			margin-top: 52rpx;
			border: 2px solid #f2f2f2;
			padding: 12rpx 24rpx;
			color: #FF9797;
			border-radius: 8rpx;
			.input-placeholder {
				// height: 70rpx;
				font-size: 32rpx;
				color: #FF9797;
			}
		}
		.inpedit{
			margin-top: 24rpx;
			margin-left: 14rpx;
			font-size: 28rpx;
			color: #FF9797;
		}
		.comfirm{
			display: flex;
			justify-content: flex-end;
			margin-top: 54rpx;
			.comfirm1{
				padding: 12rpx 24rpx;
				border-radius: 12rpx;
				color: #FFFFFF;
				background-color: #E63931;
			}
		}
	}
</style>