yicangzongtai_app_240321/pages/task/components/task-list-item.vue

<template>
	<custom-waterfalls-flow :style="{width: widthNum+'rpx'}" img-suffix="?x-oss-process=style/app-w350"
		:class="['my-waterfalls' , showTaskStatus ? 'show-task-status' : '']" ref="waterfallsFlowRef" :value="dataList"
		imageKey="image" @wapperClick="onWapperClick">
		<template v-slot:default="item">
			<template v-if="taskTag && showTaskStatus">
				<tag class="task-status" :bgColor="taskTag.bgColor" :color="taskTag.color" :tag-name="taskTag.name"
					borderRadius="0 20rpx 0 20rpx" />
			</template>
			<view class="task-item-info">
				<!-- ?x-oss-process=style/app-w350 -->
				<view class="task-item-name zw-two-row">{{item.title || item.taskTitle}}</view>
				<view class="task-item-tag" v-if="item.classifyDictName">
					<text class="tag-item">{{item.classifyDictName}}</text>
				</view>
				<view class="task-integral">
					<image class="task-integral-icon" src="../static/integral-icon.png" mode="aspectFit" />
					<text class="task-integral-num">{{item.rewardPoints}}积分</text>
				</view>
			</view>
		</template>
	</custom-waterfalls-flow>
</template>

<script>
	import tag from "./tag.vue"
	export default {
		components: {
			tag
		},
		props: {
			widthNum: {
				type: Number,
				default: 690
			},
			dataList: {
				type: Array,
				default: () => [],
				required: true
			},
			taskTag: {
				type: Object,
				default: () => null,
			},
			// 任务空间： false - 任务大厅进入详情； true - 我的任务列表进入
			privateTask: {
				type: Boolean,
				default: false
			},
			// 任务详情
			// taskObj: {
			// 	type: Object,
			// 	default: () => {},
			// 	required: true
			// },
			// 是否显示任务状态
			showTaskStatus: {
				type: Boolean,
				default: false
			},
		},
		data() {
			return {

				// this.$refs.waterfallsFlowRef.refresh();
			}
		},
		methods: {
			refresh() {
				try {
					this.$refs.waterfallsFlowRef.refresh();
				} catch (e) {
					//TODO handle the exception
				}
			},
			// onWapperClick(e){
			// 	console.log('onWapperClick = ' , e)
			// },
			onWapperClick(info) {
				let path = "/pages/task/task-details";
				if (this.privateTask) {
					const childTask = info;
					if (info.taskType === 0) {
						// 单任务
						if (info.checkStatus === 0) {
							// 未提交 - 任务详情
							path = `${path}?receiveTaskId=${info.receiveTaskId}`
						} else {
							// 已提交 - 审核详情
							path = `/pages/task/task-audit?receiveTaskId=${info.receiveTaskId}`
						}
					} else {
						// 多任务 - 任务详情
						path = `${path}?receiveTaskId=${info.receiveTaskId}`
					}
				} else {
					// 任务大厅,直接进入任务详情
					path = `${path}?taskId=${info.taskId}`
				}
				this.$u.route(path)
			}
		},
		watch: {
			dataList: {
				handler(newL, oldL) {
					if (!newL || newL.length === 0) {
						this.refresh()
					}
				},
				deep: true,
				immediate: true
			}
		}
	}
</script>

<style lang="scss" scoped>
	.my-waterfalls {
		// width: 690rpx;
		// background-color: hotpink;
		display: flex;
		justify-content: space-between;
		align-items: flex-start;

		/deep/ .waterfalls-flow-column {
			width: calc(50% - 10rpx) !important;
			margin: 0 !important;

			&:last-child {
				// background-color: greenyellow;
				// margin-left: 20rpx !important;
			}

			.column-value {
				margin-bottom: 30rpx !important;
				border-radius: 20rpx !important;
			}
		}
	}

	.show-task-status {
		/deep/ .waterfalls-flow-column {
			.column-value {
				position: relative;

				.task-status {
					position: absolute;
					right: 0;
					top: 0;
				}
			}
		}
	}



	.task-item-info {
		width: 100%;
		// background-color: red;
		padding: 12rpx 25rpx 28rpx;

		.task-item-name {
			font-size: 26rpx;
			font-family: PingFang SC, PingFang SC-Bold;
			font-weight: 700;
			color: #1a1a1a;
			line-height: 38rpx;
		}

		.task-item-tag {
			padding: 5rpx 0;

			.tag-item {
				display: inline-block;
				padding: 8rpx 15rpx;
				background-color: #d4f5fd;
				color: #3db9d3;
				border-radius: 20rpx 0 20rpx 0;
				font-size: 22rpx;
				line-height: 1;
			}
		}

		.task-integral {
			padding-top: 20rpx;
			display: flex;
			flex-direction: row;
			align-items: center;

			.task-integral-icon {
				width: 27rpx;
				height: 30rpx;
				line-height: 0;
			}

			.task-integral-num {
				padding-left: 10rpx;
				font-size: 24rpx;
				color: #808080;
			}
		}

	}
</style>