assess-app/page_task/task_details/module/third_party.vue

<template>
	<view class="text-color-333" style="position: relative;left: -15rpx;">
		<view class="apply content p-30 sys-background-fff r-30" :style="{height}">
			<view class="size-26" v-for="(item,index) in tripartite">
				<view class="">
					<view class="row-c">
						<view class="dot"></view>
						<text class="sys-weight-600 m-l10">{{item.type===1?'个人':'企业'}}担保信息</text>
					</view>
					<!-- 个人担保信息 -->
					<view v-if="item.type===1" class="sys-from-background-color r-30 p-20 m-t30">
						<view class="row-c">
							<view class="m-r40">
								<text class="text-color-666">担保类型</text>
								<text class="m-l16">个人</text>
							</view>
							<view class="m-l40" v-if="verifyKey('name')">
								<text class="text-color-666">担保人姓名</text>
								<text class="m-l16">{{item.name}}</text>
							</view>
						</view>
						<view class="row-c m-t20" v-if="verifyKey('identity_one')">
							<EnImage @onShowImg="onPreviewImage" :list="[item.identity_one,item.identity_two]">
							</EnImage>
						</view>
					</view>
					<!-- 担保类型 -->
					<view v-else class="sys-from-background-color r-30 p-20 m-t30">
						<view class="">
							<text class="text-color-666">担保类型</text>
							<text class="m-l16">企业</text>
						</view>
						<view class="m-tb16" v-if="verifyKey('name')">
							<text class="text-color-666">企业名称</text>
							<text class="m-l16">{{item.name}}</text>
						</view>
						<view class="" v-if="verifyKey('id_number')">
							<text class="text-color-666">营业执照编号</text>
							<text class="m-l16">{{item.id_number}}</text>
						</view>
						<EnImage @onShowImg="onPreviewImage" v-if="verifyKey('identity_one')"
							:list="[item.identity_one]"></EnImage>
					</view>
				</view>
				<view class="m-t20 color-4A2600">
					<view class="apply-box p-20 r-20">
						<view class="message-box r-20 m-b20" v-for="(bank,bankIndex) in item.bank_data" :key="index">
							<text class="title-text sys-weight-600">银行信息({{bankIndex+1}})</text>
							<view class="row-c p-20">
								<image class="wh-60"
									src="https://wealfavor-1257406827.cos.ap-beijing.myqcloud.com/new-xcx/task/task-put.png"
									mode=""></image>
								<view class="m-l30">
									<text class="size-24 text-color-333">{{bank.bank_name}}</text>
									<view class="size-28 sys-weight-600 m-t10">{{bank.bank_num}}</view>
								</view>
							</view>
						</view>
					</view>
				</view>
			</view>
		</view>
	</view>
</template>

<script>
	import EnImage from "@/components/en-utils/en-image/en-image.vue";

	export default {
		components: {
			EnImage
		},
		props: {
			height: {
				type: String,
				default: '100%'
			},
			tripartite: {
				default: []
			},
			tripartiteKey: {
				default: []
			}
		},
		data() {
			return {}
		},
		methods: {
			onPreviewImage(url) {
				this.$emit('onShowImg', url)
			},
			verifyKey(key) {
				return this.tripartiteKey.indexOf(key) >= 0
			}
		},
	}
</script>

<style lang="scss" scoped>
	.apply {
		padding-top: 90rpx;
		background-image: url('/page_task/static/img/task-details/bg-three.png');
		background-repeat: no-repeat;
		background-size: 100% auto;
		overflow: hidden;

		.bg-box {
			width: 710rpx;
			height: 80rpx;
		}

		.dot {
			width: 12rpx;
			height: 12rpx;
			border-radius: 50%;
			background: #0FB160;
		}
	}

	.apply-box {
		background: linear-gradient(163deg, #EDC397 0%, #F3DBBC 100%);

		.capsule {
			display: inline-block;
			background: #FFE6C8;
			width: 185rpx;
			height: 42rpx;
			line-height: 42rpx;
			border-radius: 99rpx;
			text-align: center;
		}
	}

	.card {
		width: 160rpx;
		height: 90rpx;
		display: block;
	}

	.message-box {
		background: linear-gradient(180deg, #FFEEE4 0%, #FFFFFF 100%);
	}

	.message-box:last-child {
		margin-bottom: 0;
	}

	.title-text {
		display: inline-block;
		width: 172rpx;
		height: 45rpx;
		line-height: 45rpx;
		text-align: center;
		background: #FFE6C8;
		border-radius: 10rpx 0rpx 10rpx 0rpx;
	}
</style>