mdapp/pages/trade/recordTrade1.vue

<template>
	<view class="page">
		<view class="form">
			<u-form :model="form" ref="uForm">
				<u-form-item label-width="210" label="合同编号" prop="contract_no">
					<u-input placeholder="请输入合同编号" v-model="form.contract_no" type="text"></u-input>
				</u-form-item>
				<u-form-item label-width="210" label="签约时间" prop="sign_time" @click.native="opensignTimePopoup">
					<view class="scoped-input-floor" @click.native="opensignTimePopoup"></view>
					<u-input placeholder="请选择签约时间" v-model="form.sign_time" disabled type="text"></u-input>
				</u-form-item>
				<u-form-item label-width="210" label="贷款额度" prop="loan_amount">
					<u-input placeholder="请输入贷款额度" v-model="form.loan_amount" type="text"></u-input>
					<template v-slot:right>
						万
					</template>
				</u-form-item>
				<u-form-item label-width="210" label="贷款银行" prop="loan_bank">
					<u-input placeholder="请选择贷款银行" v-model="form.loan_bank" disabled @click="loanBankOpen" type="text"></u-input>
				</u-form-item>
				<u-form-item label-width="210" label="贷款经理及电话" prop="loan_manager">
					<u-input placeholder="请输入贷款经理和电话" v-model="form.loan_manager" type="text"></u-input>
				</u-form-item>
				<u-form-item label-width="210" label="中介费(卖方)" prop="brokerage_fee1">
					<u-input placeholder="请输入中介费(卖方)" v-model="form.brokerage_fee1" type="text"></u-input>
					<template v-slot:right>
						元
					</template>
				</u-form-item>
				<u-form-item label-width="210" label="中介费(买方)" prop="brokerage_fee2">
					<u-input placeholder="请输入中介费(买方)" v-model="form.brokerage_fee2" type="text"></u-input>
					<template v-slot:right>
						元
					</template>
				</u-form-item>
				<u-form-item label-width="210" label="贷款服务费" prop="loan_fee">
					<u-input placeholder="请输入贷款服务费" v-model="form.loan_fee" type="text"></u-input>
					<template v-slot:right>
						元
					</template>
				</u-form-item>
				<u-form-item label-width="210" label="代办费及其它" prop="agency_fee">
					<u-input placeholder="请输入代办费及其它" v-model="form.agency_fee" type="text"></u-input>
					<template v-slot:right>
						元
					</template>
				</u-form-item>
			</u-form>
			
			
			<view class="scoped-more-img">
				<view class="smi-title">上传合同及附件</view>
				<view class="si-op" v-for="(url, index) in contractImgList" :key="index">
					<u-image :src="url" class="img" mode="aspectFill" height="150rpx" @click="previewImageHandle(url, contractImgList)" ></u-image>
					<u-image src="/static/icon_g_close.png" class="i" height="40rpx" @click="contractDelImg(index)"></u-image>
				</view>
				<view class="si-op" @click="contractAddImg">
					<u-image src="/static/icon_upload_img.png" mode="heightFix" height="150rpx" class="img"></u-image>
				</view>
			</view>

			<view class="scoped-more-img">
				<view class="smi-title">产证图片</view>
				<view class="si-op" v-for="(url, index) in realEstateList" :key="index">
					<u-image :src="url" class="img" mode="aspectFill" height="150rpx" @click="previewImageHandle(url, realEstateList)" ></u-image>
					<u-image src="/static/icon_g_close.png" class="i" height="40rpx" @click="realEstateDelImg(index)"></u-image>
				</view>
				<view class="si-op" @click="realEstateAddImg">
					<u-image src="/static/icon_upload_img.png" mode="heightFix" height="150rpx" class="img"></u-image>
				</view>
			</view>

			<view class="scoped-more-img">
				<view class="smi-title">买方身份证</view>
				<view class="si-op" v-for="(url, index) in buyIdCardList" :key="index">
					<u-image :src="url" class="img" mode="aspectFill" height="150rpx" @click="previewImageHandle(url, buyIdCardList)" ></u-image>
					<u-image src="/static/icon_g_close.png" class="i" height="40rpx" @click="buyIdCardDelImg(index)"></u-image>
				</view>
				<view class="si-op" @click="buyIdCardAddImg">
					<u-image src="/static/icon_upload_img.png" mode="heightFix" height="150rpx" class="img"></u-image>
				</view>
			</view>

			<view class="scoped-more-img">
				<view class="smi-title">卖方身份证</view>
				<view class="si-op" v-for="(url, index) in sellIdCardList" :key="index">
					<u-image :src="url" class="img" mode="aspectFill" height="150rpx" @click="previewImageHandle(url, sellIdCardList)" ></u-image>
					<u-image src="/static/icon_g_close.png" class="i" height="40rpx" @click="sellIdCardDelImg(index)"></u-image>
				</view>
				<view class="si-op" @click="sellIdCardAddImg">
					<u-image src="/static/icon_upload_img.png" mode="heightFix" height="150rpx" class="img"></u-image>
				</view>
			</view>

			<view class="scoped-more-img">
				<view class="smi-title">定金凭证和房产证收据</view>
				<view class="si-op" v-for="(url, index) in frontMoneyList" :key="index">
					<u-image :src="url" class="img" mode="aspectFill" height="150rpx" @click="previewImageHandle(url, frontMoneyList)" ></u-image>
					<u-image src="/static/icon_g_close.png" class="i" height="40rpx" @click="frontMoneyDelImg(index)"></u-image>
				</view>
				<view class="si-op" @click="frontMoneyAddImg">
					<u-image src="/static/icon_upload_img.png" mode="heightFix" height="150rpx" class="img"></u-image>
				</view>
			</view>


			<u-gap height="60"></u-gap>
			<u-button type="primary" @click="submitHandle">下一步</u-button>
		</view>
		
		<!-- utoast -->
		<u-toast ref="uToast" />
		
		<u-select v-model="isLoanBankShow" :list="loanBankList" label-name="dict_label" value-name="option1" @confirm="loanBankClose"></u-select>
		
		<u-calendar v-model="signTimeShow" mode="date" @change="signTimeChange"></u-calendar>
	</view>
</template>
<script>
	import { arrToObj } from '@/utils'
	export default {
		data() {
			return {
				frontMoneyList: [],
				realEstateList: [],
				buyIdCardList: [],
				sellIdCardList: [],
				contractImgList: [],
				signTimeShow: false,
				isLoanBankShow: false,
				loanBankList: [],
				form: {
					contract_no: '',
					sign_time: '',
					loan_amount: '',
					loan_bank: '',
					loan_manager: '',
					brokerage_fee1: '',
					brokerage_fee2: '',
					loan_fee: '',
					agency_fee: '',
				},
				trade_id: null,
			};
		},
		onLoad(data) {
			this.trade_id = data.id
			this.getData()
		},
		onShow() {
			// if (this.trade_id) {
			// 	this.getData()
			// }
		},
		created() {
			const dictObj = uni.getStorageSync('MD_dict') || {}
			const lbArr = dictObj.loan_bank || []
			let loanBankList = []
			lbArr.forEach(item => {
				loanBankList.push(item)
			})
			this.loanBankList = [...loanBankList]
		},
		// 必须要在onReady生命周期，因为onLoad生命周期组件可能尚未创建完毕
		onReady() {
			// this.$refs.uForm.setRules(this.rules);
		},
		methods: {
			loanBankOpen () {
				this.isLoanBankShow = true
			},
			loanBankClose (arr) {
				this.isLoanBankShow = false
				if (arr) {
					this.form.loan_bank = arr[0].label
					this.form.loan_manager = arr[0].value
				}
			},
			getData () {
				uni.api.cust.apitradestepinfo({trade_id:this.trade_id}).then(res =>{
					this.form = {
						contract_no: res.contract_no,
						sign_time: res.sign_time,
						loan_amount: res.loan_amount,
						loan_bank: res.loan_bank,
						loan_manager: res.loan_manager,
						brokerage_fee1: res.brokerage_fee1,
						brokerage_fee2: res.brokerage_fee2,
						loan_fee: res.loan_fee,
						agency_fee: res.agency_fee,
					}
					this.frontMoneyList = res.front_money && res.front_money.length > 0 ? res.front_money.split(',') : []
					this.realEstateList = res.real_estate && res.real_estate.length > 0 ? res.real_estate.split(',') : []
					this.contractImgList = res.contract && res.contract.length > 0 ? res.contract.split(',') : []
					this.buyIdCardList = res.buy_id_card && res.buy_id_card.length > 0 ? res.buy_id_card.split(',') : []
					this.sellIdCardList = res.sell_id_card && res.sell_id_card.length > 0 ? res.sell_id_card.split(',') : []
				})
			},
			opensignTimePopoup () {
				this.signTimeShow = true
			},
			signTimeChange (e) {
				this.form.sign_time = e.result || ''
			},









			contractAddImg () {
				this.uploadComImg((arr) => {
					let imgArr = [...this.contractImgList, ...arr]
					this.contractImgList = JSON.parse(JSON.stringify(imgArr))
				}, 9)
			},
			contractDelImg (index) {
				let imgArr = [...this.contractImgList]
				imgArr.splice(index, 1)
				this.contractImgList = JSON.parse(JSON.stringify(imgArr))
			},
			buyIdCardAddImg () {
				const oldList = JSON.parse(JSON.stringify(this.buyIdCardList))
				this.uploadComImg((arr) => {
					let buyIdCard = [...oldList, ...arr]
					this.buyIdCardList = JSON.parse(JSON.stringify(buyIdCard))
				}, 9)
			},
			buyIdCardDelImg (index) {
				let buyIdCard = [...this.buyIdCardList]
				buyIdCard.splice(index, 1)
				this.buyIdCardList = JSON.parse(JSON.stringify(buyIdCard))
			},
			sellIdCardAddImg () {
				const oldList = JSON.parse(JSON.stringify(this.sellIdCardList))
				this.uploadComImg((arr) => {
					let sellIdCard = [...oldList, ...arr]
					this.sellIdCardList = JSON.parse(JSON.stringify(sellIdCard))
				}, 9)
			},
			sellIdCardDelImg (index) {
				let sellIdCard = [...this.sellIdCardList]
				sellIdCard.splice(index, 1)
				this.sellIdCardList = JSON.parse(JSON.stringify(sellIdCard))
			},
			realEstateAddImg () {
				this.uploadComImg((arr) => {
					let imgArr = [...this.realEstateList, ...arr]
					this.realEstateList = JSON.parse(JSON.stringify(imgArr))
				}, 9)
			},
			realEstateDelImg (index) {
				let imgArr = [...this.realEstateList]
				imgArr.splice(index, 1)
				this.realEstateList = JSON.parse(JSON.stringify(imgArr))
			},
			frontMoneyAddImg () {
				this.uploadComImg((arr) => {
					let imgArr = [...this.frontMoneyList, ...arr]
					this.frontMoneyList = JSON.parse(JSON.stringify(imgArr))
				}, 9)
			},
			frontMoneyDelImg (index) {
				let imgArr = [...this.frontMoneyList]
				imgArr.splice(index, 1)
				this.frontMoneyList = JSON.parse(JSON.stringify(imgArr))
			},
			uploadComImg (bc, count, moreStr) {
				const that = this
				uni.chooseImage({
					count: count ? count : 1, // 默认9
					sizeType: ['compressed'],  // original
					sourceType: ['album', 'camera'],
					success: function (res) {
						const tempFilePaths = res.tempFilePaths
						if (tempFilePaths.length > 0) {
							let imgBcArr = []
							tempFilePaths.forEach((p, i) => {
								that.diyUploadFile(p, moreStr).then(url => {
									imgBcArr.push(url)
									if (bc && imgBcArr.length === tempFilePaths.length) {
										bc(imgBcArr)
									}
								})
							})
						}
					}
				})
			},
			diyUploadFile (filePath, moreStr) {
				return new Promise((resolve, reject) => {
					let token = uni.getStorageSync('MD_token')
					let url = uni.baseUrl + 'api/upload/cloud'
					// if (moreStr === 'noSign') url = uni.baseUrl + 'api/upload/cloud'
					uni.uploadFile({
						url,
						filePath,
						name: 'upload',
						formData: {
							'token': token
						},
						success (res){
							const cData = JSON.parse(res.data)
							let curImg = cData.data.url || ''
							resolve(curImg)
						}
					})
				})
			},
			previewImageHandle (current, urls) {
				uni.previewImage({
					current,
					urls
				})
			},








			submitHandle() {
				const that = this


				let apiStr = 'apitradecontractedit'
				let params = {
					contract_no: that.form.contract_no || '',
					sign_time: that.form.sign_time || '',
					loan_amount: that.form.loan_amount || '',
					loan_bank: that.form.loan_bank || '',
					loan_manager: that.form.loan_manager || '',
					brokerage_fee1: that.form.brokerage_fee1 || '',
					brokerage_fee2: that.form.brokerage_fee2 || '',
					loan_fee: that.form.loan_fee || '',
					agency_fee: that.form.agency_fee || '',
					trade_id: that.trade_id
				}
				params.front_money = that.frontMoneyList.join(',')
				params.real_estate = that.realEstateList.join(',')
				params.contract = that.contractImgList.join(',')
				params.buy_id_card = that.buyIdCardList.join(',')
				params.sell_id_card = that.sellIdCardList.join(',')
				// if (that.isEdit) {
				// 	apiStr = 'apitraderecordedit'
				// 	params.id = that.form.id
				// }
				uni.api.cust[apiStr](params).then(res => {
					uni.$msgConfirm('修改成功，是否前往跟踪合同？', () => {
						// uni.navigateBack()
						uni.navigateTo({
							url: `/pages/trade/recordTrade2?id=${that.trade_id}`
						})
					}, () => {
						// that.contractImgList = []
						// that.realEstateList = []
						// that.contractImgList = []
						// that.form = {
						// 	sign_time: '',
						// 	loan_amount: '',
						// 	loan_bank: '',
						// 	brokerage_fee1: '',
						// 	brokerage_fee2: '',
						// }
					})
				})



				// this.$refs.uForm.validate(valid => {
				// 	if (valid) {
				// 		// 验证成功
						
				// 	} else {
				// 		console.log('验证失败');
				// 	}
				// });
			},
		}
	};
</script>
<style lang="scss">
	.page {
		padding: 20rpx;
		background-color: #ffffff;
	}

	.form {
		border-radius: 10rpx;
		padding: 0 40rpx;
	}

	.popup-body {
		.tips-title {
			font-size: $u-p;
			margin-bottom: 20rpx;
		}

		.tips-content {
			font-size: $u-p2;
			color: $u-tips-color;
			margin-bottom: 60rpx;
		}
	}

	.id_card {
		color: #606266;
		width: 100%;
		height: 350rpx;
		display: flex;
		flex-direction: column;
		align-items: center;
		justify-content: center;
		background-color: #f4f5f6;
		font-size: $u-p2;
	}

	.footer {
		position: absolute;
		text-align: center;
		bottom: 40rpx;
		font-size: $u-p2;

		.agreement {
			color: $u-type-error;
		}
	}

	.slot-content {
		font-size: 28rpx;
		color: $u-content-color;
		padding: 20rpx;
	}
	
	

	




.scoped-input-floor {
	position: absolute;
	left: 0;
	top: 0;
	width: 100%;
	height: 100%;
	background: transparent;
	z-index: 9;
}







.scoped-more-img {
	padding-top: 30rpx;
	.smi-title {
		font-size: 28rpx;
		padding-bottom: 20rpx;
		color: #303133;
	}
	.si-op {
		display: inline-block;
		vertical-align: middle;
		width: 150rpx;
		height: 150rpx;
		margin-right: 30rpx;
		margin-bottom: 30rpx;
		position: relative;
		border: 1PX solid #f2f2f2;
		box-sizing: border-box;
		.img {
			width: 150rpx;
			height: 150rpx;
		}
		.i {
			position: absolute;
			top: -20rpx;
			right: -20rpx;
			width: 40rpx;
			height: 40rpx;
			z-index: 9;
		}
	}
}	
</style>