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 m-lr30 text-color-12">
			<view class="sys-background-fff r-20 p-20 m-b20" v-for="(item,index) in tripartiteList" :key="index">
				<!-- 个人担保start -->
				<view class="" v-if="item.data.type == 1">
					<!-- 个人担保信息start -->
					<view class="sys-from-background-color p-20 r-20 size-26" v-if="!item.is_edit">
						<view class="">
							<view class="row-justify-sb center">
								<text class="size-28 sys-weight-600">担保人信息({{index+1}})</text>
								<view class="row-c sys-background-fff r-100 p-lr30 p-tb10">
									<image class="wh-30" src="/static/img/information/edit.png" mode="aspectFill"
										@click="onEditInfo(item)"></image>
									<view class="title-line m-lr20"></view>
									<image class="wh-30" src="/static/img/information/delete.png" mode="aspectFill"
										@click="onDeleteInfo(index)">
									</image>
								</view>
							</view>
							<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>张三</text>
							</view>
							<view class="p-t30">
								<view class="wh-text size-28 text-color-666 m-b20">证件照片</view>
								<EnImage :img="['/static/img/logo.png','/static/img/logo.png']"></EnImage>
							</view>
						</view>
						<view class="m-t30" v-for="(value,key) in item.data.bank_card" :key="key">
							<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>张三</text>
							</view>
							<view class="row-c">
								<view class="text-color-666"><text></text>所属银行：</view>
								<text>中国银行</text>
							</view>
							<view class="row-c p-t30">
								<view class="text-color-666"><text></text>交通银行：</view>
								<text>4576476465498790878</text>
							</view>
						</view>
					</view>
					<!-- 个人担保信息end -->

					<!-- 编辑个人担保start -->
					<view v-else>
						<view class="">
							<text class="size-30 sys-weight-600'">担保人信息({{index+1}})</text>
							<EnRadio :value="item.data.type" name="担保类型" :list="guaranteeList" @onSelect="onGuarantee">
							</EnRadio>
						</view>
						<view class="sys-bg-BFD2CC row-justify-sb sys-weight-500 center r-20 p-30 m-t30">
							<view class="row-c flex">
								<image class="wh-45 m-r20" src="/static/img/task/sf_icon.png" mode=""></image>
								<text class="size-26">身份证认证</text>
							</view>
							<button class="attestation-button button-background button-color size-26 r-30"
								type="default" hover-class="is-hover" @click="onAuthentication">去认证</button>
						</view>
						<WhInput name="姓名" disabled placeholder="待自动录入"></WhInput>
						<WhInput name="身份证号" disabled placeholder="待自动录入"></WhInput>
						<view class="m-t30" v-for="(value,key) in item.data.bank_card" :key="key">
							<view class="row-justify-sb center">
								<text class="size-30 sys-weight-600'">银行卡信息({{key+1}})</text>
								<image class="wh-30" src="/static/img/information/delete.png" mode="aspectFill"
									@click="onDeleteBank(index)">
								</image>
							</view>
							<WhInput name="账户姓名" placeholder="请输入批复金额"></WhInput>
							<WhInput name="银行卡" placeholder="请输入银行账户">
								<uni-icons type="camera" size="28" color="#999999"></uni-icons>
							</WhInput>
							<WhInput name="所属银行" disabled is_select></WhInput>
						</view>
						<view class="row-justify-sb">
							<button class="size-26 r-10 button-color still-button m-t30" hover-class="is-hover"
								@click="onAddBank">+ 添加还款信息</button>
							<view class="flex"></view>
						</view>
						<view class="row-justify-sb">
							<view class="flex"></view>
							<view class="row-c m-tb20">
								<button class="size-26 r-10 apply-button-delete m-r20" hover-class="is-hover"
									@click="onDeleteInfo(index)">删除</button>
								<button class="size-26 r-10 button-color apply-button-save" hover-class="is-hover"
									@click="onSaveInfo(item)">保存</button>
							</view>
						</view>
					</view>
					<!-- 编辑个人担保end -->
				</view>
				<!-- 个人担保end -->

				<!-- 公司担保start -->
				<view class="" v-if="item.data.type == 2">
					<!-- 企业信息start -->
					<view class="sys-from-background-color p-20 r-20 size-26" v-if="!item.is_edit">
						<view class="">
							<view class="row-justify-sb center">
								<text class="size-28 sys-weight-600'">企业担保信息({{index+1}})</text>
								<view class="row-c sys-background-fff r-100 p-lr30 p-tb10">
									<image class="wh-30" src="/static/img/information/edit.png" mode="aspectFill"
										@click="onEditInfo(item)"></image>
									<view class="title-line m-lr20"></view>
									<image class="wh-30" src="/static/img/information/delete.png" mode="aspectFill"
										@click="onDeleteInfo(index)">
									</image>
								</view>
							</view>
							<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>成都九吨科技</text>
							</view>
							<view class="row-c p-tb30">
								<view class="text-color-666"><text></text>营业执照编号：</view>
								<text>YX4857i345</text>
							</view>
							<view class="row-c">
								<view class="text-color-666"><text></text>证件照片：</view>
								<text>YX4857i345</text>
							</view>
						</view>
						<view class="m-t30" v-for="(value,key) in item.data.bank_card" :key="key">
							<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>张三</text>
							</view>
							<view class="row-c">
								<view class="text-color-666"><text></text>所属银行：</view>
								<text>中国银行</text>
							</view>
							<view class="row-c p-t30">
								<view class="text-color-666"><text></text>交通银行：</view>
								<text>4576476465498790878</text>
							</view>
						</view>
					</view>
					<!-- 企业信息end -->

					<!-- 编辑企业信息start -->
					<view v-else>
						<view class="">
							<text class="size-30 sys-weight-600'">企业担保信息({{index+1}})</text>
							<EnRadio :value="item.data.type" name="担保类型" :list="guaranteeList" @onSelect="onGuarantee">
							</EnRadio>
							<WhInput name="企业名称" placeholder="请输入企业名称"></WhInput>
							<WhInput name="营业执照" placeholder="请输入营业执照编号"></WhInput>
							<view class="p-tb30 bor-bottom-1">
								<view class="wh-text size-28">营业执照图片</view>
								<EnUpload></EnUpload>
							</view>
						</view>
						<view class="m-t30" v-for="(value,key) in item.data.bank_card" :key="key">
							<view class="row-justify-sb center">
								<text class="size-30 sys-weight-600'">银行卡信息({{key+1}})</text>
								<image class="wh-30" src="/static/img/information/delete.png" mode="aspectFill"
									@click="onDeleteBank(index)">
								</image>
							</view>
							<WhInput name="账户姓名" placeholder="请输入批复金额"></WhInput>
							<WhInput name="银行卡" placeholder="请输入银行账户">
								<uni-icons type="camera" size="28" color="#999999"></uni-icons>
							</WhInput>
							<WhInput name="所属银行" disabled is_select></WhInput>
						</view>
						<view class="row-justify-sb">
							<button class="size-26 r-10 button-color still-button m-t30" hover-class="is-hover"
								@click="onAddBank">+ 添加还款信息</button>
							<view class="flex"></view>
						</view>
						<view class="row-justify-sb">
							<view class="flex"></view>
							<view class="row-c m-tb20">
								<button class="size-26 r-10 apply-button-delete m-r20" hover-class="is-hover"
									@click="onDeleteInfo(index)">删除</button>
								<button class="size-26 r-10 button-color apply-button-save" hover-class="is-hover"
									@click="onSaveInfo(item)">保存</button>
							</view>
						</view>
					</view>
					<!-- 编辑企业信息end -->
				</view>
				<!-- 公司担保start -->
			</view>
			<button class="size-26 r-10 button-color apply-button m-t30" hover-class="is-hover"
				@click="onAddInfo">+添加第三方信息</button>
		</view>
		<EnButton is_both leftText="保存" rightText="提交" @onLeftSubmit="onLeftSubmit" @onSubmit="onSubmit">
		</EnButton>
	</view>
</template>

<script>
	import WhInput from "@/components/en-from/en-input/wh-input.vue"
	import EnUpload from "@/components/en-from/en-upload/en-upload.vue"
	import EnImage from "@/components/en-utils/en-image/en-image.vue"

	export default {
		components: {
			WhInput,
			EnUpload,
			EnImage
		},
		data() {
			return {
				title: '',
				scrollTop: 0,
				guaranteeList: [{
					text: '个人',
					value: 1
				}, {
					text: '企业',
					value: 2
				}],
				tripartiteList: [{
					is_edit: false,
					data: {
						type: 1,
						bank_card: [1]
					}
				}, {
					is_edit: true,
					data: {
						type: 1,
						bank_card: [1]
					}
				}, {
					is_edit: false,
					data: {
						type: 2,
						bank_card: [1]
					}
				}, {
					is_edit: true,
					data: {
						type: 2,
						bank_card: [1]
					}
				}]
			}
		},
		onPageScroll(res) {
			this.scrollTop = res.scrollTop / 120
		},
		onLoad(options) {
			this.title = options.title
		},
		methods: {
			//  身份认证
			onAuthentication(item) {
				uni.navigateTo({
					url: "/page_task/identity_upload/identity_upload"
				})
			},
			// 保存
			onLeftSubmit() {
				this.tripartiteList.map(item => {
					item.is_edit = true
				})
			},
			// 提交
			onSubmit() {},
			// 添加信息
			onAddInfo() {
				this.tripartiteList.push({
					is_edit: true,
					data: {
						type: 1
					}
				})
			},
			// 添加银行卡信息
			onAddBank() {

			},
			// 编辑单个信息
			onEditInfo(item) {
				item.is_edit = !item.is_edit
			},
			// 删除信息
			onDeleteInfo(index) {
				uni.showModal({
					title: '提示',
					content: '确定删除?',
					success: (res) => {
						if (res.confirm) {
							this.tripartiteList.splice(index, 1)
						}
					}
				})

			},
			// 删除银行卡
			onDeleteBank(index) {
				console.log(index);
			},
			// 保存单个信息
			onSaveInfo(item) {
				item.is_edit = !item.is_edit
			},
			onGuarantee(e) {
				console.log(e);
			}
		}
	}
</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;
	}
</style>