signcontract.vue

<template>
	<view class="sign_content">
		<TopBar title="金融分期"/>
		<view :style="{'margin-top':'28rpx'}">
			<view class="apply_title">{{title}}</view>
			<view class="apply_desc">{{sub_title}}</view>
			<view v-for="(item,index) in list" :key="index">
				{{item.index}}
			</view>
		</view>
		<uni-collapse>
			<uni-collapse-item :title="third_title" :open="true">
				<view v-for="(item, index) in list" :key="index">
					<view class="sign_title">{{item.name}}</view>
					<view>
						<input type="text" v-model="list[index].value" value="" :name="item.key" class="sign_input">
					</view>
				</view>
			</uni-collapse-item>
		</uni-collapse>
		
		<view @click="checkAgree" class="checkAgree">
			<text class="sign_checkbox" :class="{act: is_agree}"></text>
			<text class="agree_title">我已阅读并同意</text>
			<text @click="previewContract" class="agreement">《产品分期采购合同》</text>
		</view>
		<!-- <text>《谛宝多多金融分期协议》</text> -->
		<!-- <view class="agreement">
			关于
			<text @click="previewContract">《产品分期采购合同》</text>
		</view> -->
		<view class="sign_btn_box">
			<text class="prev_step" @click="goBack">上一步</text>
			<text class="confirm_pay" @click="handleSubmit">缴纳定金
				<i class="arrow_icon"></i>
			</text>
		</view>
	</view>
</template>

<script>
	import uniCollapse from '@/components/uni-collapse/uni-collapse.vue';
	import uniCollapseItem from '@/components/uni-collapse-item/uni-collapse-item.vue';
	import TopBar from '@/components/TopBar/TopBar.vue';
	export default {
		data() {
			return {
				list: [],
				data: {},
				is_eidt: false,
				is_agree: false,
				title: '签署合同',
				sub_title: '请填写合同内详细信息',
				third_title: '企业信息'
			}
		},
		components: {
			uniCollapse,
			uniCollapseItem,
			TopBar
		},
		onLoad(option) {
			const {type} = option;
			if(type){
				this.title = '收货信息';
				this.sub_title = '请填写收货地址信息';
				this.third_title = '收货信息';
			}
			this.loadData();
		},
		methods:{
			// 默认获取合同签署字段
			loadData(){
				const install = uni.getStorageSync('installment');
				const {contract_no, equipment_id, property_id} = install;
				// 获取合同已填的信息
				uni.request({
					url: `/uni/api/signcontract/GetContract?contract_no=${contract_no}`,
					method: 'GET',
					dataType: 'json',
					success: (res) => {
						const {data} = res;
						if(data.code == 0){
							if(data.data){
								const { contract_content } = data.data;
								if(contract_content){
									this.data = JSON.parse(contract_content);
									this.is_eidt = true;
								}
							}else{
								// const temporary = uni.getStorageSync('temporary');
								// if (temporary) {
								// 	this.data = JSON.parse(temporary);
								// }
							}
							uni.request({
								url: `/uni/api/signcontract/GetContractField?equipment_id=${equipment_id}`,
								method: 'GET',
								dataType: 'json',
								success: (res) => {
									const {data} = res;
									if(data.code == 0){
										this.list = data.data || [];
										for(var i=0; i< this.list.length; i++){
											let key = this.list[i].key;
											this.list[i].value = this.data[key] || '';
										}
									}
								}
							})
						}
					}
				})
			},
			// 缴纳定金提交
			handleSubmit(){
				
				const data = this.getData();
				const checkData = this.checkData(data);
				console.log(checkData,'checkData');
				if(checkData > 0){
					uni.showToast({
						title: '请填写签署合同信息',
						duration: 2000,
						icon: 'none'
					});
					return;
				}
				if(!this.is_agree){
					uni.showToast({
					    title: '请阅读并同意采购分期合同',
					    duration: 2000,
							icon: 'none'
					});
					return;
				}
				// 临时存储合同信息
				// uni.setStorageSync('temporary', JSON.stringify(data));
				const install = uni.getStorageSync('installment');
				const {contract_no, equipment_id, property_id} = install;
				const url = this.is_eidt ? '/uni/api/signcontract/EditContract' : '/uni/api/signcontract/AddContract';
				uni.showLoading({
					title: '提交中...'
				})
				uni.request({
					url: url,
					method: this.is_eidt ? 'PUT' : 'POST',
					data: {
						contract_no: contract_no,
						equipment_id: equipment_id,
						property_id: property_id,
						contract_content: data
					},
					dataType: 'json',
					success: (res) => {
						const {data} = res;
						uni.hideLoading();
						if(data.code == 0){
							this.is_eidt = true;
							uni.navigateTo({
							  url: '/pages/checkstand/checkstand'
							});
						}else{
							uni.showToast({
								icon: 'none',
								title: '提交失败，请重试'
							})
						}
					}
				});
			},
			// 预览合同
			previewContract(){
				const data = this.getData();
				const install = uni.getStorageSync('installment');
				// 临时存储合同信息
				// uni.setStorageSync('temporary', JSON.stringify(data));
				const {contract_no, equipment_id, property_id} = install;
				uni.showLoading({
				  title: '获取合同中...',
				});
				uni.request({
					url: '/uni/api/signcontract/PreviewContract',
					method: 'POST',
					data: {
						contract_no: contract_no,
						equipment_id: equipment_id,
						property_id: property_id,
						contract_content: data
					},
					dataType: 'json',
					success: (res) => {
						const {data} = res;
						uni.hideLoading();
						if(data.code == 0){
							const url = data.data.viewUrl;
							// this.$jump(data.data.viewUrl);
							uni.navigateTo({
							  url: `/pages/web/web?contract_url=${url}`
							});
						}else{
							uni.showToast({
								icon: 'none',
								title: '获取失败'
							})
						}
					}
				});
			},
			checkAgree(){
				this.is_agree = !this.is_agree;
			},
			// 返回上一页
			goBack(){
				this.$backup();
			},
			// 获取签署合同提交信息
			getData(){
				const length = this.list.length;
				let data = {};
				for(var i = 0; i < length; i++){
					let key = this.list[i].key;
					data[key] = this.list[i].value;
				}
				return data;
			},
			// 判断合同字段是否都已填写
			checkData(data){
				if(data){
					let num = 0;
					for(let d in data){
						if(!data[d]){
							num++;
						}
					}
					return num;
				}
			}
		}
	}
</script>

<style lang="less" scoped>
	.sign_content {
		background: #fff;
		padding:  80rpx 36rpx 0;
		padding-bottom: 100rpx;
		.apply_title {
			font-size:32rpx;
			font-family:PingFangSC-Medium,PingFang SC;
			font-weight:500;
			line-height: 44rpx;
			color: #212121;
		}
		.apply_desc {
			font-size:24rpx;
			line-height: 34rpx;
			color: #979797;
			margin-top: 8rpx;
		}
		.sign_title {
			color: #464646;
			height:40rpx;
			font-size:28rpx;
			margin-top: 32rpx;
		}
		.sign_input {
			width:100%;
			height:72rpx;
			background:rgba(248,248,248,1);
			border-radius:16rpx;
			margin-top: 20rpx;
			line-height: 72rpx;
			padding: 0 20rpx;
			box-sizing: border-box;
			font-size: 28rpx;
			color: #212121;
		}
		.sign_flex {
			display: flex;
			justify-content: space-between;
			align-items: center;
			margin-top: 32rpx;
		}
		.sign_btn_box {
			margin: 126rpx 0 40rpx;
			display: flex;
			justify-content: space-between;
			color: #212121;
			font-size: 28rpx;
			line-height: 80rpx;
			text-align: center;
			.prev_step {
				width: 244rpx;
				background: #F5F5F5;
				border-radius: 16rpx;
				height: 80rpx;
			}
			.confirm_pay {
				width: 416rpx;
				height: 80rpx;
				background: #FFCD00;
				border-radius: 16rpx;
			}
			.arrow_icon {
				display: inline-block;
				background-image:url('data:image/png;base64,iVBORw0KGgoAAAANSUhEUgAAABgAAAAYBAMAAAASWSDLAAAAElBMVEUhISE5Mx08NR0/OB3ftAT/zQCuQjOCAAAAPklEQVQY02MIRQIMZHKCVZA4QYyuCE6IgAiSHkeoFEMokhTENKgUhBMioIqDg6wMxQBko1EsRXEOikMp8jYAjsJZhd56tsAAAAAASUVORK5CYII=');
				background-size: 100% 100%;
				background-repeat: no-repeat;
				width: 24rpx;
				height: 24rpx;
				position: relative;
				top: 1px;
			}
		}
		.agreement {
			font-size: 26rpx;
			// color: #979797;
			color: #718BCA;
			margin-top: 34rpx;
			text {
				color: #718BCA;
			}
		}
		.agree_title {
			font-size: 26rpx;
			color: #7C7C7C;
		}
		.checkAgree{
			margin-top: 26rpx;
		}
		.sign_checkbox {
			display: inline-block;
			width: 36rpx;
			height: 36rpx;
			background-image:url('data:image/png;base64,iVBORw0KGgoAAAANSUhEUgAAACQAAAAkCAAAAADEa8dEAAAA4ElEQVQ4y73UuwqDMBSA4b7/K/06RBwEBxGcI0jIJOggdvGYDrW2thFOhzZb4MvtXHIJinH5FZLBO+cHOUerKxMASEq3xpE3QF41TZUDxkeQ1JDZ6T6ZbAa1vKNrQWqX5+LFphTXI5ICMx5vOxoKOaAaM78/fDbUr8iTjp/hGVP8E60GGwuixaw7cmRLDC0ZbkdlfKMQLOUDScIURxOJbKgnP0ttTr+hjuoMVXQbamnOUEP7DVIdp7q4KgSqYOrSokqwqlR0RacrX1Uj6FpK15zKNg8hBOm7tu16+dP/FB83GSPcKcU7y9kAAAAASUVORK5CYII=');
			background-size: 100% 100%;
			background-repeat: no-repeat;
			vertical-align: middle;
			margin-right: 4rpx;
		}
		.sign_checkbox.act {
			background-image:url('data:image/png;base64,iVBORw0KGgoAAAANSUhEUgAAACQAAAAkCAMAAADW3miqAAACoFBMVEUhISEkIyArKR84Mx49Nh1cThhgURdiUxdqWRZwXhVzYBV+aROAahOihQ61kwu4lQu6lwq9mQrKpAjasAXwwQL3xgH9ywD/zQD/zQH/zQL/zgf/zgn/zwr/zxD/0BD/0BL/0BP/0RP/0RT/0RX/0h7/0x7/0x//0yP/1CT/1Cj/1Sf/1Sj/1Sr/1Sz/1jH/1zP/1zT/1zX/2Dn/2Dr/2T//2UD/2UL/2kH/2kT/2kX/20X/3E3/3E//3VL/3VT/3lT/3lf/3lj/31v/313/31//32H/4GH/4Gb/4Wb/4Wr/4Wz/4mn/4mv/4m3/43H/43L/43T/43X/5HP/5HT/5HX/5Hb/5Hf/5Hj/5Hn/5Hr/5Xn/5Xv/5X3/5oD/5oH/5oP/5oT/54P/54X/54b/54f/54n/6In/6Iv/6I7/6Y7/6Y//6ZL/6ZP/6ZT/6pf/6pj/6pn/65f/65n/65r/65v/657/65//7KD/7KP/7KT/7aP/7ab/7af/7aj/7an/7qr/7qv/7qz/7q3/763/767/76//77H/77P/8LT/8LX/8Lb/8Lf/8br/8bv/8b3/8r7/8sD/8sH/8sL/88L/88T/88X/88b/88n/9Mj/9Mn/9Mr/9Mv/9Mz/9M3/9c3/9c7/9dD/9dH/9tH/9tL/9tP/9tT/99b/99f/99j/99n/99r/99z/+Nv/+Nz/+N3/+N7/+N//+d7/+d//+eH/+eL/+eP/+eX/+uL/+uT/+uX/+ub/+uf/+uj/+un/+uv/++r/++v/++z/++3/++7/++//+/D//O7//O///PD//PH//PL//PP//PT//PX//fT//fX//fb//ff//fj//fn//fv//vb//vj//vn//vr//vv//vz//v3///z///3///7////If3C4AAACf0lEQVQ4y2O4TwRgQBe4BwR4FN27dfPyxfPnTp8+c+Hi5Zu372FRdO/m9bMn922ujg8Pj6/efujUhcu37qEpunfr+vljW1P0JcXBQNIgbcdxhDKIors3LxzdlSkvjgTks/acunbzHkLR7RvnD660EEcDlmuPXbhyF6bo7o3z+6doi2MA7RkHL1y5B1F07+b5/Yu1xLEAzeUHL4BsZAC6+cLBVabiWIHZ+uPXboMU3b58ZH2cOA6QtOXU5XtARTfPbZsli0uR3KK9F27dZ7h3/dCKYHGcIGzjicv3GG6d3zlLB1NSmFcETOsu2HvhNsONE2u6JTHUCDExcELCvm/z6TsMlw4sjsOmhoEbwkxecfgGw4VdM10hXAEWHjGEGlZRCNtjwf5rDGc2T3KAcNkYGLjE0NWIO03fdYHh9Lo+ewhXkBGiCkWNuOOUrVcZTq7ucYTy+cCqUNWIO0/ecgakyFccSRU7qhrxIJAioHXZEsiqUNVIFIOsAzq8RFUcWRWyGnG1KpDDgUFQYYMQ5GfmQFYjbtcACgJgYLamSOOKOpmMLlBgAqOlN88alyLb0kmgaAFFcE2COnY1Gukt4AgGJZWe/ABFbGqUIksngJMKKNHNbcn0UMBUo+iT27lkDyjRgZPv1JpUHxV0NWp+GU2zockXnBEmVqb5mUghK5EyD8monwbLCOAstWJSTUaUu5ESNOwllI29Y3Iap62DZSlI5lw1taUoKdTTxcJQT8/Qys0rIrW0fdZGROaEZPMN83vr8tNjI0L8/QOjEzNKmics3IKczaEFxso5fW01ZQWFhcXltR0T569GKzCgRc+2dUvnTJ3Q3z9x2rxlm3afQBQ9AO0gCIzNUhSlAAAAAElFTkSuQmCC');
		}
	}

</style>