assess-app/common/task/loan-item.vue

<template>
	<view class="flex-1 flex-direction">
		<swiper class="swiper-box flex-direction animate__animated animate__fadeIn flex-1" circular>
			<swiper-item v-for="(item,index) in taskList" :key="index"
				class="flex-direction p-30 box-border-box flex-1">
				<view class="item-box flex-direction flex-1 page-box-bg-fff r-30 box-shadow-197">
					<view class="item-top box-border-box" :style="{background:lineColor[item.id%2]}">
						<view class="center row-justify-sb mb-24">
							<view class="center">
								<uni-icons type="home-filled" size="30" class="mr-10"></uni-icons>
								<view class="fc-155DFB sys-size-24 sys-weight-600 title-box">
									Commercial Real Estate
								</view>
							</view>
							<view class="heart-box" @click.stop="heartBut(item,true)" v-if="!item.live">
								<uni-icons type="heart" size="18" color="#99A1AF"></uni-icons>
							</view>
							<view class="heart-box animate__animated animate__zoomIn" @click.stop="heartBut(item,false)"
								v-else>
								<uni-icons type="heart-filled" size="18" color="#FB2C36"></uni-icons>
							</view>
						</view>
						<view class="mb-16 sys-size-32">
							{{item.name}}
						</view>
						<view class="center">
							<uni-icons v-for="item in item.percentage" class="mr-8" type="star-filled" size="18"
								color="#FFB900"></uni-icons>
							<view class="size-28 fc-4B5666">
								{{item.percentage}} Quality
							</view>
						</view>
					</view>
					<view class="item-bot box-border-box">
						<view class="center mb-14">
							<uni-icons type="home" size="18" color="#99A1AF" class="mr-10"></uni-icons>
							<view class="size-28 fc-99A1AF">
								Borrower
							</view>
						</view>
						<view class="sys-size-32 mb-12">
							{{item.description}}
						</view>
						<view class="size-22 fc-99A1AF mb-40">
							#{{item.time}}
						</view>
						<view class="amount-box box-border-box sys-radius-20 center">
							<view class="mr-20 amount-icon">
								<uni-icons type="wallet" size="18" color="#F54900"></uni-icons>
							</view>
							<view class="flex-direction">
								<view class="fc-343C47 size-24">
									Principal Amount
								</view>
								<view class="size-48">
									${{item.amount}}M
								</view>
							</view>
						</view>
						<view class="center flex-wrap mb-32">
							<view class="mb-16 mr-20 bgc-F9FAFB r-40 b-F3F4F6-1 p-24 box-border-box w-49">
								<view class="icon-box mb-16 bgc-fff">
									<uni-icons type="arrow-up" size="18" color="#0F41AF"></uni-icons>
								</view>
								<view class="fc-6A7383 size-24 mb-16">
									Interest Rate
								</view>
								<view class="size-36">
									{{item.trend}}
								</view>
							</view>
							<view class="mb-16 flex-1 bgc-F0FDF4 r-40 b-B9F8CF-1 p-24 box-border-box">
								<view class="icon-box mb-16 bgc-DBFCE7">
									<uni-icons type="locked" size="18" color="#00A63D"></uni-icons>
								</view>
								<view class="fc-6A7383 size-24 mb-16">
									LTV Ratio
								</view>
								<view class="size-36">
									{{item.risk}}
								</view>
							</view>
							<view class="mr-20 bgc-F9FAFB r-40 b-F3F4F6-1 p-24 box-border-box w-49">
								<view class="icon-box mb-16 bgc-fff">
									<uni-icons type="calendar" size="18" color="#9810FA"></uni-icons>
								</view>
								<view class="fc-6A7383 size-24 mb-16">
									Maturity
								</view>
								<view class="size-36">
									Dec 31, 2027
								</view>
							</view>
							<view class="bgc-F9FAFB flex-1 r-40 b-F3F4F6-1 p-24 box-border-box">
								<view class="icon-box mb-16 bgc-fff">
									<uni-icons type="close" size="18" color="#4E38F5"></uni-icons>
								</view>
								<view class="fc-6A7383 size-24 mb-16">
									Collateral
								</view>
								<view class="size-36">
									$13.5M
								</view>
							</view>
						</view>
					</view>
				</view>
			</swiper-item>
		</swiper>
		<!-- 		<view class="task-body animate__animated animate__fadeIn flex-1" v-if="taskList.length>0">

		</view>
		<en-blank v-else></en-blank> -->
	</view>
</template>

<script>
	import EnButton from "@/components/en-utils/en-button/en-button.vue";
	import tools from "@/service/tools";
	import EnBlank from "@/components/en-utils/en-blank/en-blank.vue";
	import ClientType from "@/pages/loan/components/clientType.vue";

	export default {
		components: {
			ClientType,
			EnBlank,
			EnButton
		},
		props: {
			type: {
				type: Number,
				default: 1
			},
			taskList: {
				type: Array,
				default: () => []
			},
			iconStatus: {
				type: Number,
				default: 1
			},
			leftImgStatus: {
				type: Number,
				default: 0
			},
			opacity: {
				type: Number,
				default: 0
			},
			back: {
				type: Boolean,
				default: false
			},
			is_bottom: {
				type: Boolean,
				default: false
			},

		},
		data() {
			return {
				leftImg: ['task-house', 'task-business', 'task-repayment'],
				iconList: ['task-audit', 'task-do', 'task-stay'],
				lineColor: ['#EEFDF4', '#EFF4FF'],
				isAjax: false,
				item: {}
			}
		},
		methods: {
			moveHandle() {
				return false
			},
			onCalculate(item, type) {
				this.$emit('onCalculate', {
					'item': item,
					'type': type
				})
			},
			makCall(phone) {
				tools.makingCall(phone)
			}
		}
	}
</script>

<style lang="scss" scoped>
	.icon-box {
		width: 64rpx;
		height: 64rpx;
		line-height: 64rpx;
		text-align: center;
		border-radius: 50%;
	}

	.w-49 {
		width: 49%;
	}

	.amount-icon {
		width: 96rpx;
		height: 96rpx;
		background: #fff;
		line-height: 96rpx;
		text-align: center;
		border-radius: 40rpx;
		box-shadow: 0 2rpx 12rpx 0 rgba(0, 0, 0, 0.2);
	}

	.amount-box {
		width: 100%;
		padding: 32rpx;
		margin-bottom: 32rpx;
		border: .1rpx solid #FFEED5;
		background-image: linear-gradient(45deg, #FFF7ED 4%, #FDF3F7);
	}

	.en_button {
		border: none;
	}

	.task-body {
		height: 100%;
	}

	.left_button {
		height: 56rpx;
		color: #008FD6;
		line-height: 56rpx;
		background: #FFFFFF;
		border: 1rpx solid #008FD6;
		border-radius: 100rpx;
	}

	.right_button {}

	.placeholder {
		height: 40rpx;
	}

	.item-box {
		// display: block;
		position: relative;
		box-shadow: 5rpx 5rpx 5px 0 rgba(0, 0, 0, 0.2);
		overflow: auto;
	}

	.loan-item {
		position: relative;
	}

	.accomplish-text {
		font-size: 24rpx;
		color: #00994D;
		background-color: #e7f7ef;
		padding: 6rpx 30rpx;
		line-height: 30rpx;
		border-radius: 0 30rpx 0 30rpx;
		position: absolute;
		right: 0;
		top: 0;
	}

	.unfinished {
		color: #F64646;
		background-color: #feeded;
	}

	button::after {
		border: none;
	}

	.item-top {
		width: 100%;
		padding: 48rpx 48rpx 32rpx;
		border-radius: 30rpx 30rpx 0 0;
	}

	.item-bot {
		width: 100%;
		height: 100%;
		padding: 48rpx 48rpx 32rpx;
		border-radius: 0 0 30rpx 30rpx;
		overflow: auto;
		// max-height: ;
	}

	.title-box {
		padding: 4rpx 24rpx;
		border-radius: 20rpx;
		background: #DBEAFE;
	}

	.heart-box {
		width: 80rpx;
		height: 80rpx;
		background: #fff;
		border-radius: 50%;
		line-height: 80rpx;
		text-align: center;
	}
</style>