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

<template>
	<view>
		<view class="task-body m-20">
			<view class="row-c page-box-bg-fff m-b20 r-30 p-30 box-shadow-197" v-for="(item,index) in 30" :key="index">
				<image class="wh-80" :src="getLeftImg(leftImg)" mode=""></image>
				<view class="flex m-l20">
					<view class="row-justify-sb center flex">
						<text class="text-color-333 sys-weight-600">垫资还款</text>
						<view class="row-c">
							<text class="size-26 text-color-333">刘芳芳1</text>
							<image class="wh-30 m-l16" style="margin-top: 4rpx;" src="/static/img/task/task-phone.png"
								mode=""></image>
						</view>
					</view>
					<view
						class="p-tb14 p-lr30 m-tb20 r-100 row-justify-sb center size-24 text-color-12 sys-from-background-color"
						style="line-height: 40rpx;">
						<text class="size-28 text-color-E21 sys-weight-600">120万</text>
						<text>初审</text>
						<text>2024/12/24用款</text>
					</view>
					<view class="row-justify-sb center" style="line-height: 40rpx;">
						<text class="size-24 text-color-999 flex">2024.10.11 12:45</text>
						<image style="width: 65rpx;height: 32rpx;" :src="getIconStatus(iconStatus)" v-if="type == 1">
						</image>
						<button class="button-background en-button sys-weight-500 text-color-fff size-28 r-100" style="width: 220rpx;height: 70rpx;line-height: 70rpx;" type="default" hover-class="is-hover"
							v-if="type == 2">领取任务</button>
						<image style="width: 45rpx;height: 30rpx;" :src="getIconStatus(iconStatus)" v-if="type == 3">
						</image>
					</view>
				</view>
			</view>
			<view class="content-row sys-list-background-color"></view>
		</view>
	</view>
</template>

<script>
	import EnButton from "@/components/en-utils/en-button/en-button.vue";

	export default {
		components: {
			EnButton
		},
		props: {
			type: {
				type: Number,
				default: 1
			},
			iconStatus: {
				type: Number,
				default: 0
			},
			leftImgStatus: {
				type: Number,
				default: 0
			},
			opacity: {
				type: Number,
				default: 0
			},
			back: {
				type: Boolean,
				default: false
			},
		},
		data() {
			return {
				leftImg: ['task-house', 'task-business', 'task-repayment'],
				iconList: ['task-audit', 'task-do', 'task-stay']
			}
		},
		methods: {
			getIconStatus() {
				return `/static/img/task/${this.iconList[this.iconStatus]}.png`
			},
			getLeftImg() {
				return `/static/img/task/${this.leftImg[this.leftImgStatus]}.png`
			},
		}
	}
</script>

<style lang="scss" scoped>
	.en-button {
		border: none;
	}
	
	button::after {
		border: none;
	}
</style>