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

<template>
	<view class="p-t20">
		<view class="task-body m-lr20  animate__animated animate__slideInLeft" v-if="taskList.length>0">
			<view class="item-box align-items-flex-start page-box-bg-fff m-b20 r-30 box-shadow-197 p-20 box-border-box"
				v-for="(item,index) in taskList" :key="index" @click="onTaskDetails(item)">
				<view class="main_string" :style="{background:lineColor[item.id%3]}"></view>
				<view class="m-r20 item-img-box flex-shrink0">
					<image :src="item.img" class="item-img r-40" mode="aspectFill"></image>
					<view class="proportion-box box-border-box" :style="{background:lineColor[item.id%3]}">
						{{item.proportion}}%
					</view>
				</view>
				<view class="flex-1 flex-direction">
					<view class="center row-justify-sb flex-1 mb-16">
						<view class="text-overflow-ellipsis-one size-30 max-w-80">
							{{item.name}}
						</view>
						<view class="" @click.stop="heartBut(item,true)" v-if="!item.live">
							<uni-icons type="heart" size="16" color="#99A1AF"></uni-icons>
						</view>
						<view class="animate__animated animate__zoomIn" @click.stop="heartBut(item,false)" v-else>
							<uni-icons type="heart-filled" size="16" color="#FB2C36"></uni-icons>
						</view>
					</view>
					<view class="center flex-1 mb-18">
						<uni-icons type="star-filled" size="16" color="#ff6b35"></uni-icons>
						<view class="size-28 mr-8">
							{{item.percentage}}
						</view>
						<view class="mr-8 fc-6A7383 sys-size-24 point">•</view>
						<view class="fc-6A7383 flex-1 sys-size-24 text-overflow-ellipsis-one max-w-60">
							{{item.description}}
						</view>
					</view>
					<view class="center mb-18">
						<view class="sys-size-24 mr-8 sys-weight-600 fc-00A63D">
							${{item.amount}}M
						</view>
						<view class="mr-8 fc-6A7383 sys-size-24 point">•</view>
						<view class="mr-8 sys-size-24 fc-155DFB">
							{{item.trend}}
						</view>
						<view class="mr-8 fc-6A7383 sys-size-24 point">•</view>
						<view class="sys-size-24 fc-6A7383">
							{{item.risk}}
						</view>
					</view>
					<view class="center row-justify-sb">
						<view class="size-22 fc-99A1AF">
							#{{item.time}}
						</view>
					</view>
				</view>
			</view>
			<view class="placeholder sys-list-background-color" v-if="is_bottom && taskList.length"></view>
		</view>
		<en-blank v-else></en-blank>
	</view>
</template>

<script>
	import tools from "@/service/tools";
	import EnBlank from "@/components/en-utils/en-blank/en-blank.vue";

	export default {
		components: {
			EnBlank
		},
		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: ['#EF8F27', '#DE5847', '#0FB160'],
				isAjax: false
			}
		},
		methods: {
			heartBut(item, type) {
				this.$emit('heartBut', {
					id: item.id,
					type: type
				})
			},
			goLoan(id) {
				uni.navigateTo({
					url: '/pages/loan/module/perfect_rate?id=' + id
				});
			},
			makingCall(phone) {
				tools.makingCall(phone)
			},
			getIconStatus() {
				return `https://wealfavor-1257406827.cos.ap-beijing.myqcloud.com/new-xcx/task/${this.iconList[this.iconStatus]}.png`
			},
			getLeftImg() {
				return `https://wealfavor-1257406827.cos.ap-beijing.myqcloud.com/new-xcx/task/${this.leftImg[this.leftImgStatus]}.png`
			},
			onTaskDetails(item) {
				if (item.business_id) {
					uni.navigateTo({
						url: '/page_task/task_details/task_details?taskId=' + item.business_id
					})
				} else {
					uni.navigateTo({
						url: '/page_task/task_details/task_details?taskId=' + item.id
					})
				}
			}
		}
	}
</script>

<style lang="scss" scoped>
	.en_button {
		border: none;
	}

	.task-body {
		height: 100%;
	}

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

	.right_button {
		width: 160rpx;
	}

	.placeholder {
		height: 40rpx;
	}

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

	.main_string {
		width: 6rpx;
		height: 60%;
		border-radius: 100rpx;
		position: absolute;
		top: calc(50% - 30%);
		left: 0;
	}

	button::after {
		border: none;
	}

	.item-img {
		width: 160rpx;
		height: 160rpx;
	}

	.item-img-box {
		width: 160rpx;
		height: 160rpx;
		position: relative;
	}

	.proportion-box {
		position: absolute;
		bottom: 10rpx;
		right: 10rpx;
		padding: 4rpx 12rpx;
		color: #fff;
		border-radius: 10rpx;
		font-size: 20rpx;
	}

	.max-w-80 {
		max-width: 398rpx;
	}

	.max-w-60 {
		max-width: 60%;
	}

	.point {}
</style>