assess-app/page_task/tripartite_info/tripartite_info.vue

<template>
	<view class="total-page page-env-160 page-box task-bg">
		<Nav :title="title" is_fixed :genre="4" :opacity="scrollTop"></Nav>
		<view id="apply-info" class="m-t20 text-color-12">
			<view class="sys-background-fff m-lr30 r-20 p-20 m-b20" v-for="(tripartite,index) in  tripartiteList"
				:key="index">
				<!-- 个人担保start -->
				<view class="" v-if="editIndex!==index">
					<!-- 个人担保信息start -->
					<view class="sys-from-background-color p-20 r-20 size-26">
						<view class="">
							<view class="row-justify-sb center">
								<text
									class="size-28 sys-weight-600">担保{{tripartite.type*1===1?'人':'企业'}}信息({{index+1}})</text>
								<view class="row-c sys-background-fff r-100 p-lr30 p-tb10">
									<image class="wh-30" src="/page_task/static/img/information/edit.png"
										mode="aspectFill" @click="onEditInfo(index)"></image>
									<view class="title-line m-lr20"></view>
									<image class="wh-30" src="/page_task/static/img/information/delete.png"
										mode="aspectFill" @click="delTripartite(index)">
									</image>
								</view>
							</view>
							<view v-if="tripartite.type*1===1">
								<view class="row-c p-tb30">
									<view class="text-color-666"><text></text>担保类型：</view>
									<text>个人</text>
								</view>
								<view class="row-c">
									<view class="text-color-666"><text></text>担保人姓名：</view>
									<text>{{tripartite.name}}</text>
								</view>
								<view class="row-c">
									<view class="text-color-666"><text></text>身份证号码：</view>
									<text>{{tripartite.id_number}}</text>
								</view>
								<view class="p-t30">
									<view class="wh-text size-28 text-color-666 m-b20">证件照片</view>
									<EnImage :img="[tripartite.identity_one,tripartite.identity_two]"></EnImage>
								</view>
							</view>
							<view v-else>
								<view class="row-c p-tb30">
									<view class="text-color-666"><text></text>担保类型：</view>
									<text>企业</text>
								</view>
								<view class="row-c">
									<view class="text-color-666"><text></text>企业名称：</view>
									<text>{{tripartite.name}}</text>
								</view>
								<view class="row-c">
									<view class="text-color-666"><text></text>营业执照编号：</view>
									<text>{{tripartite.id_number}}</text>
								</view>
								<view class="p-t30">
									<view class="wh-text size-28 text-color-666 m-b20">证件照片</view>
									<EnImage :img="[tripartite.identity_one]"></EnImage>
								</view>
							</view>

						</view>
					</view>
					<view class="m-t30" v-for="(bankItem,bIndex) in tripartite.bank_data" :key="bIndex">
						<text class="size-28 sys-weight-600">银行信息({{key+1}})</text>
						<view class="row-c p-tb30">
							<view class="text-color-666"><text></text>账户姓名：</view>
							<text>{{bankItem.name}}</text>
						</view>
						<view class="row-c">
							<view class="text-color-666"><text></text>所属银行：</view>
							<text>{{bankItem.bank_name}}</text>
						</view>
						<view class="row-c p-t30">
							<view class="text-color-666"><text></text>银行卡号：</view>
							<text>{{bankItem.bank_num}}</text>
						</view>
					</view>
				</view>
				<view v-else>

					<en-radio label="担保类型" v-model="tripartite.type" @updateData="farming(index)"
						:list="appliesData"></en-radio>
					<view v-if="tripartite.type*1===1">
						<add-identity v-if="verifyKey('id_number')" :user-name.sync="tripartite.name"
							:id-number.sync="tripartite.id_number" :identity-one.sync="tripartite.identity_one"
							:identity-two.sync="tripartite.identity_two"></add-identity>
						<en-input label="姓名" v-if="verifyKey('name')" v-model="tripartite.name" type="text"
							placeholder="等待自动录入"></en-input>
						<en-input label="身份证号" v-if="verifyKey('id_number')" v-model="tripartite.id_number"
							type="idcard" placeholder="等待自动录入"></en-input>
					</view>
					<view v-else>
						<en-input label="企业名称" v-if="verifyKey('name')" v-model="tripartite.name" type="text"
							placeholder="请输入企业名称"></en-input>
						<!-- 		<en-input label="营业执照编号" v-if="verifyKey('id_number')" v-model="tripartite.id_number"
							type="text" placeholder="请输入营业执照编号"></en-input> -->
						<view class="row-justify-sb center p-tb30 bor-bottom-1 size-28">
							<view class="wh-text">营业执照编号</view>
							<input class="wh-input sys-size-28 text-color-12 m-l40 flex"
								placeholder-class="sys-size-28 text-color-999 sys-weight-400" placeholder="请输入营业执照编号"
								v-model="tripartite.id_number"></input>
						</view>
						<add-license v-if="verifyKey('identity_one')" v-model="tripartite.identity_one"
							:user-name.sync="tripartite.name" :id-number.sync="tripartite.id_number"></add-license>
					</view>
					<view class="m-t30" v-for="(bankItem,bIndex) in tripartite.bank_data">
						<view class="row-justify-sb center">
							<text class="size-30 sys-weight-600'">银行卡信息({{bIndex+1}})</text>
							<image class="wh-30" src="/page_task/static/img/information/delete.png" mode="aspectFill"
								@click="delBank(index,bIndex)">
							</image>
						</view>
						<en-input label="账户姓名" v-model="bankItem.name" type="text" placeholder="请输开户人姓名"></en-input>
						<add-bank :bank-name.sync="bankItem.bank_name" :bank-num.sync="bankItem.bank_num"></add-bank>
					</view>
					<view class="row-justify-sb">
						<button class="size-26 r-10 button-color still-button m-t30" hover-class="is-hover"
							@click="addBank(index)">+ 添加还款信息</button>
						<view class="flex"></view>
					</view>

				</view>
			</view>
			<view class="m-lr10">
				<en-blank message="暂无第三方信息~~" v-if="tripartiteList.length<=0"></en-blank>
			</view>
			<button class="size-26 r-10 button-color apply-button m-t30 m-lr30" hover-class="is-hover"
				@click="addItem">+添加第三方信息</button>
		</view>
		<EnButton leftText="保存" @onSubmit="onSubmit">
		</EnButton>
	</view>
</template>

<script>
	import WhInput from "@/components/en-from/en-input/en-input.vue"
	import EnUpload from "@/components/en-from/en-upload/en-upload.vue"
	import EnImage from "@/components/en-utils/en-image/en-image.vue"
	import AddIdentity from "@/page_task/identity_upload/add-identity.vue";
	import EnInput from "@/components/en-from/en-input/en-input.vue";
	import AddLicense from "@/page_task/apply/components/add-license.vue";
	import EnBlank from "@/components/en-utils/en-blank/en-blank.vue";
	import AddBank from "@/page_task/apply/components/add-bank.vue";
	import tools from "@/service/tools";

	export default {
		components: {
			AddBank,
			EnBlank,
			AddLicense,
			EnInput,
			AddIdentity,
			WhInput,
			EnUpload,
			EnImage
		},
		data() {
			return {
				title: '',
				scrollTop: 0,
				editIndex: 0,
				appliesData: [{
					'value': 1,
					'text': '个人'
				}, {
					'value': 2,
					'text': '企业'
				}],
				tripartiteList: [],
				tripartiteItem: {
					"type": "1",
					"name": "",
					"id_number": "",
					"identity_one": "",
					"identity_two": "",
					"bank_data": [],
				}
			}
		},
		onPageScroll(res) {
			this.scrollTop = res.scrollTop / 120
		},
		onLoad(options) {
			this.title = options.title
			let tripartiteList = uni.getStorageSync('tripartiteData')
			let tripartiteKey = uni.getStorageSync('tripartiteKey')
			this.tripartiteList = tripartiteList
			this.showKeys = tripartiteKey
		},
		methods: {
			addItem() {
				this.tripartiteList.push(this.tripartiteItem)
			},
			delTripartite(itemKey) {
				uni.showModal({
					title: '是否删除当前第三方信息',
					content: '确定删除?',
					success: (res) => {
						if (res.confirm) {
							this.tripartiteList.splice(itemKey, 1)
						}
					}
				})

			},
			farming(key) {
				if (this.tripartiteList[key].type * 1 === 1) {
					this.tripartiteList[key].q_identity_one = this.tripartiteList[key].identity_one
					this.tripartiteList[key].q_name = this.tripartiteList[key].name
					this.tripartiteList[key].q_id_number = this.tripartiteList[key].id_number
					this.tripartiteList[key].name = ''
					this.tripartiteList[key].identity_one = ''
					this.tripartiteList[key].id_number = ''
					if (this.tripartiteList[key].u_identity_one) {
						this.tripartiteList[key].identity_one = this.tripartiteList[key].u_identity_one
					}
					if (this.tripartiteList[key].u_name) {
						this.tripartiteList[key].name = this.tripartiteList[key].u_name
					}
					if (this.tripartiteList[key].u_id_number) {
						this.tripartiteList[key].id_number = this.tripartiteList[key].u_id_number
					}
				} else {
					this.tripartiteList[key].u_identity_one = this.tripartiteList[key].identity_one
					this.tripartiteList[key].u_name = this.tripartiteList[key].name
					this.tripartiteList[key].u_id_number = this.tripartiteList[key].id_number
					this.tripartiteList[key].name = ''
					this.tripartiteList[key].identity_one = ''
					this.tripartiteList[key].id_number = ''
					if (this.tripartiteList[key].q_identity_one) {
						this.tripartiteList[key].identity_one = this.tripartiteList[key].q_identity_one
					}
					if (this.tripartiteList[key].q_name) {
						this.tripartiteList[key].name = this.tripartiteList[key].q_name
					}
					if (this.tripartiteList[key].q_id_number) {
						this.tripartiteList[key].id_number = this.tripartiteList[key].q_id_number
					}
				}
			},
			delBank(applyKey, itemKey) {

				uni.showModal({
					title: '是否删除当前还款信息',
					content: '确定删除?',
					success: (res) => {
						if (res.confirm) {
							this.tripartiteList[applyKey].bank_data.splice(itemKey, 1)
						}
					}
				})
			},
			addBank(applyKey) {
				if (!this.tripartiteList[applyKey].bank_data) {
					this.tripartiteList[applyKey].bank_data = [];
				}
				this.tripartiteList[applyKey].bank_data.push({
					'name': '',
					'bank_name': '',
					'bank_num': ''
				})
			},
			verifyKey(field) {
				return this.showKeys.indexOf(field) >= 0
			},

			// 保存
			onLeftSubmit() {
				this.tripartiteList.map(item => {
					item.is_edit = true
				})
			},
			// 提交
			onSubmit() {
				uni.$emit('putTripartiteInfo', this.tripartiteList)
				setTimeout(() => {
					tools.leftClick()
				}, 50)
			},


			// 编辑单个信息
			onEditInfo(index) {
				this.editIndex = index
			},

		}
	}
</script>

<style lang="scss" scoped>
	.attestation-button {
		width: 156rpx;
		height: 54rpx;
		line-height: 54rpx;
		background: #FFFFFF;
		border: 1rpx solid #0FB160;
	}

	.still-button {
		width: 260rpx;
		background: #FFFFFF;
		border-radius: 10rpx;
		border: 1rpx solid #0FB160;
	}

	.apply-button {
		height: 80rpx;
		line-height: 80rpx;
		background: #FFFFFF;
		border: 2rpx solid #0FB160;
		margin-bottom: 100rpx;
	}

	.apply-button-save {
		width: 140rpx;
		background: #FFFFFF;
		border: 2rpx solid #0FB160;
	}

	.apply-button-delete {
		color: #E83F37;
		width: 140rpx;
		background: #FFFFFF;
		border: 2rpx solid #E83F37;
	}

	.wh-input {
		width: 100%;
		text-align: right;
		direction: rtl;
	}
</style>