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

<template>
	<view class="text-color-333" style="position: relative;left: -15rpx;">
		<view class="content p-30 sys-background-fff r-30 size-26 apply" :style="{height}">
			<view class="">
				<view class="row-c">
					<view class="dot"></view>
					<text class="sys-weight-600 m-l10">基本信息</text>
				</view>
				<view class="sys-from-background-color r-30 p-20 m-t30 row apply-message">
					<view class="row apply-item" v-if="applyFor.out_total>0">
						<text class="text-color-666">批复额度</text>
						<text class="m-l16 flex">{{applyFor.out_total}}万元</text>
					</view>
					<view class="row apply-item" v-if="applyFor.returned_total>0">
						<text class="text-color-666">回款额度</text>
						<text class="m-l16 flex">{{applyFor.returned_total}}万元</text>
					</view>
					<view class="row apply-item" v-if="verifyKey('is_farming')">
						<text class="text-color-666">是否涉农</text>
						<text class="m-l16 flex">{{applyFor.is_farming===1?'是':'否'}}</text>
					</view>
					<view class="row apply-item" v-if="verifyKey('loan_form')">
						<text class="text-color-666">贷款类型</text>
						<text class="m-l16 flex">{{applyFor.loan_form_name}}</text>
					</view>
					<view class="row apply-item" v-if="verifyKey('loan_industry')">
						<text class="text-color-666">投向行业</text>
						<text class="m-l16 flex">{{applyFor.loan_industry_name}}</text>
					</view>
					<view class="row apply-item" v-if="verifyKey('loan_type')">
						<text class="text-color-666">贷款类别</text>
						<text class="m-l16 flex">{{applyFor.loan_type_name}}</text>
					</view>
					<view class="row apply-item" v-if="verifyKey('pay_status')">
						<text class="text-color-666">支付状态</text>
						<text class="m-l16">{{applyFor.pay_status===1?'已缴纳':'未缴纳'}}</text>
					</view>
					<view class="row apply-item" v-if="verifyKey('enterprise_type')">
						<text class="text-color-666">企业类型</text>
						<text class="m-l16 flex">{{applyFor.enterprise_type_name}}</text>
					</view>
				</view>
			</view>
			<!-- 抵押申请 -->
			<view class="m-t30 color-4A2600" v-for="(applyItem,applyKey) in applyFor.apply_data">
				<view class="row-c">
					<view class="dot"></view>
					<text class="sys-weight-600 m-l10 text-color-333">抵押申请</text>
				</view>
				<view class="apply-box p-20 r-20 m-t30">
					<view class="">
						<text>申请类型：</text>
						<text class="sys-weight-600">{{(applyItem.apply_type*1===1?'抵押':'买卖')}}</text>
					</view>
					<view class="sys-background-fff row-justify-sb center r-20 p-30 p-lr40 m-tb20"
						v-if="applyItem.apply_type*1===2">
						<view class="column-c color-653400" v-if="verifyKey('transaction')">
							<text class="sys-weight-600">{{applyItem.transaction}}</text>
							<text class="size-24">成交价</text>
						</view>
						<view class="column-c color-653400" v-if="verifyKey('pricing')">
							<text class="sys-weight-600">{{applyItem.pricing}}</text>
							<text class="size-24">定金</text>
						</view>
						<view class="column-c color-653400" v-if="verifyKey('supervise')">
							<text class="sys-weight-600">{{applyItem.supervise}}</text>
							<text class="size-24">资金监管</text>
						</view>
						<view class="column-c color-653400" v-if="verifyKey('reply_type')">
							<text class="sys-weight-600">{{applyItem.reply_type===1?'商业':'组合'}}</text>
							<text class="size-24">批复类型</text>
						</view>
						<view class="column-c color-653400" v-if="verifyKey('intermediary')">
							<text class="sys-weight-600">{{applyItem.intermediary?applyItem.intermediary:'无'}}</text>
							<text class="size-24">成交中介</text>
						</view>
					</view>
					<view class="m-b10">
						<text>绑定资产：</text>
						<text class="capsule sys-weight-600">{{applyItem.propertyName}}</text>
					</view>
					<view class="message-box r-20 p-20 m-t20"
						v-for="(repayment,repaymentKey) in applyItem.repayment_data" :key="repaymentKey">
						<view class="">
							<text
								class="sys-weight-600">{{(applyItem.apply_type*1===1?'还款信息':'监管银行卡信息')+'('+(repaymentKey+1)+')'}}</text>
							<text class="m-l20" v-if="applyItem.apply_type*1===1">还款金额 {{repayment.money}}万元</text>
						</view>
						<view class="row-c m-t16">
							<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">{{repayment.bank_name}}</text>
								<view class="size-28 sys-weight-600 m-t10">{{repayment.bank_num}}</view>
							</view>
						</view>
					</view>
					<view class="message-box r-20 p-20 m-t20" v-for="(loan,loanKey) in applyItem.loan_data">
						<view class="">
							<text class="sys-weight-600">{{'放款银行卡信息('+(loanKey+1)+')'}}</text>
							<text class="m-l20">批复金额 {{loan.money}}万</text>
						</view>
						<view class="row-c m-t16">
							<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">{{loan.bank_name}}</text>
								<view class="size-28 sys-weight-600 m-t10">{{loan.bank_num}}</view>
							</view>
						</view>
					</view>
				</view>
			</view>
		</view>
	</view>
</template>

<script>
	export default {
		props: {
			height: {
				type: String,
				default: '100%'
			},
			applyFor: {
				default: {}
			},
			appliesKey: {
				default: []
			}
		},
		data() {
			return {
				list: [{
					num: '89万',
					name: '成交价'
				}, {
					num: '30万',
					name: '定金'
				}, {
					num: '29万',
					name: '资金监管'
				}, {
					num: '商业',
					name: '批复类型'
				}]
			}
		},
		methods: {
			verifyKey(key) {
				return this.appliesKey.indexOf(key) >= 0
			}
		},
	}
</script>

<style lang="scss" scoped>
	.apply {
		padding-top: 90rpx;
		background-image: url('/page_task/static/img/task-details/bg-two.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;
		}
	}

	.apply-message {
		flex-wrap: wrap;
		gap: 10px;

		.apply-item {
			flex: 0 0 calc(50% - 5px);
		}
	}

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