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

<template>
	<view class="p-t20">
		<view class="task-body m-lr20  animate__animated animate__fadeIn" v-if="taskList.length>0">
			<view class="row-c page-box-bg-fff m-b20 r-30 box-shadow-197" v-for="(item,index) in taskList" :key="index"
				@click="onTaskDetails(item)">
				<view class="main_string" :style="{background:lineColor[item.product_id%3]}"></view>
				<view class="row-c flex p-30">
					<image class="wh-80" :src="item.product_icon" mode=""></image>
					<view class="flex m-l20">
						<view class="row-justify-sb center flex">
							<text class="text-color-333 sys-weight-600">{{item.product_name}}</text>
							<view class="row-c line-40" @click.stop="makingCall(item.phone)">
								<text class="size-26 text-color-333">{{item.name}}</text>
								<image class="wh-30 m-l16"
									src="https://wealfavor-1257406827.cos.ap-beijing.myqcloud.com/new-xcx/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">{{item.quota}}万</text>
							<text>{{item.stage_name}}</text>
							<text>{{item.use_date}}用款</text>
						</view>
						<view class="row-justify-sb center" style="line-height: 40rpx;">
							<text class="size-24 text-color-999 flex">{{item.created_date}}</text>
							<image class="animate__animated animate__jello" style="width: 65rpx;height: 32rpx;"
								:src="'/static/img/task/day-stast-'+item.status+'.png'" v-if="type === 5">
							</image>
							<image class="animate__animated animate__jello" style="width: 65rpx;height: 32rpx;"
								:src="'/static/img/task/task-status-'+item.status+'.png'" v-if="type === 1">
							</image>
							<button class="button-background en_button sys-weight-500 text-color-fff size-28 r-100"
								style="width: 200rpx;height: 70rpx;line-height: 70rpx;" type="default"
								hover-class="is-hover" v-else-if="type === 2"
								@click.stop="takeTask(index)">领取任务</button>
							<button class="button-background en_button sys-weight-500 text-color-fff size-28 r-100"
								style="width: 200rpx;height: 70rpx;line-height: 70rpx;" type="default"
								hover-class="is-hover" v-else-if="type === 4">去处理</button>
							<view class="row-c" v-else-if="type === 3">
								<button
									class="button-backgroun en_buttond left_button sys-weight-500 button_color-008FD6 size-26 r-100 m-r20"
									type="default" hover-class="is-hover">核算</button>
								<button
									class="button-background en_button left_button right_button sys-weight-500 button_color-008FD6 size-26 r-100"
									type="default" hover-class="is-hover">客户分类</button>
							</view>
						</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 EnButton from "@/components/en-utils/en-button/en-button.vue";
	import {
		takeTask
	} from "@/api/task";
	import tools from "@/service/tools";
	import EnBlank from "@/components/en-utils/en-blank/en-blank.vue";

	export default {
		components: {
			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: ['#EF8F27', '#DE5847', '#0FB160'],
				isAjax: false
			}
		},
		methods: {
			makingCall(phone) {
				tools.makingCall(phone)
			},
			takeTask(index) {
				if (this.isAjax) {
					return;
				}
				this.isAjax = true;
				takeTask({
					'id': this.taskList[index].id
				}).then((res) => {
					this.isAjax = false
					if (res.code === 1) {
						tools.success(res.msg)
						// this.taskList.splice(index, 1)
						this.$emit('takeTask', index)
					} else {
						tools.error(res.msg)
					}
				})
			},
			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;
	}

	.main_string {
		width: 6rpx;
		height: 60rpx;
		border-radius: 100rpx;
		background: red;
	}

	button::after {
		border: none;
	}
</style>