dd_pc/src/views/common/rewardTaskDetailsPopup.vue

<template>
	<div>
		<!-- 悬赏任务详情弹窗 -->
		<el-drawer :visible.sync="Delay_to_open" :with-header="false" :size="'500px'" :before-close="handleClose" :custom-class="'drawer_details'">
			<div class="details_title">{{ title }}</div>
			<div class="details_content" v-if="workDetailData" v-loading="loading">
				<el-row>
					<el-col :span="24">
						<div class="flex-box flex-v-ce">
							<userImage
								style="margin-right: 15px;"
								width="50px"
								height="50px"
								:user_name="workDetailData.owner_name"
								:img_url="workDetailData.owner_img_url"
							></userImage>
							<div>
								<div style="line-height: 25px;">
									我悬赏的{{ $getTypsName(workDetailData.pt_id) }}任务
									<span v-if="workDetailData.point_config.base_point > 0" class="red">+{{ workDetailData.point_config.base_point }}</span>
									<span v-else class="green">{{ workDetailData.point_config.base_point }}</span>
									{{ $getTypsName(workDetailData.pt_id) }}
								</div>
								<div style="color: #909399; line-height: 25px;">
									<b>{{ workDetailData.receiver_name }}</b>
									{{ workDetailData.status_mark }}
								</div>
							</div>
						</div>
					</el-col>
				</el-row>
				<ul>
					<li class="flex-box">
						<div class="label">任务内容</div>
						<div class="content_text">{{ workDetailData.task_name }}</div>
					</li>
					<li class="flex-box" v-if="workDetailData.status == 2 && workDetailData.receiver_id != 0">
						<div class="label">领取人</div>
						<div class="content_text">{{ workDetailData.receiver_name }}</div>
					</li>
					<li class="flex-box" v-if="workDetailData.status == 3 && workDetailData.receiver_id != 0">
						<div class="label">完成人</div>
						<div class="content_text">{{ workDetailData.receiver_name }}</div>
					</li>
					<li class="flex-box" v-if="workDetailData.task_remark">
						<div class="label">任务备注</div>
						<div class="content_text">{{ workDetailData.task_remark }}</div>
					</li>
					<li class="flex-box" v-if="workDetailData.task_file_list && workDetailData.task_file_list.length > 0">
						<div class="label"></div>
						<div class="content_text">
							<el-image
								v-for="(item, index) in workDetailData.task_file_list"
								:key="index"
								style="width: 100px; height: 100px;margin-right:8px"
								:src="item"
								:preview-src-list="workDetailData.task_file_list"
							></el-image>
						</div>
					</li>
					<li class="flex-box">
						<div class="label">任务类型</div>
						<div class="content_text">{{ workDetailData.type_mark }}</div>
					</li>
					<li class="flex-box" v-if="workDetailData.point_config">
						<div class="label">任务积分</div>
						<div class="content_text">{{ workDetailData.point_config.base_point }}{{ $getTypsName(workDetailData.pt_id) }}</div>
					</li>
					<li class="flex-box">
						<div class="label">审批人</div>
						<div class="content_text">{{ workDetailData.reviewer_name }}</div>
					</li>
					<li class="flex-box" v-if="workDetailData.owner_name">
						<div class="label">发布人</div>
						<div class="content_text">{{ workDetailData.owner_name }}</div>
					</li>
					<li class="flex-box" v-if="workDetailData.create_time">
						<div class="label">发布时间</div>
						<div class="content_text">{{ workDetailData.create_time }}</div>
					</li>
					<li class="flex-box">
						<div class="label">截止时间</div>
						<div class="content_text">{{ workDetailData.end_time }}</div>
					</li>
					<li class="flex-box" v-if="workDetailData.point_config.timeout_deduction_point">
						<div class="label">逾期扣分</div>
						<div class="content_text">{{ workDetailData.point_config.timeout_deduction_point }}/天</div>
					</li>
					<li class="flex-box" v-if="workDetailData.point_config.ahead_award_point">
						<div class="label">提前奖分</div>
						<div class="content_text">{{ workDetailData.point_config.ahead_award_point }}/天</div>
					</li>
					<li class="flex-box" v-if="workDetailData.department_info">
						<div class="label">可见范围</div>
						<div class="content_text" v-if="workDetailData.department_info.length > 0">
							<span v-for="(item, index) in workDetailData.department_info" :key="index">
								{{ item.name }}
								<span v-if="workDetailData.department_info.length - 1 > index">,</span>
							</span>
						</div>
						<div class="content_text" v-else>全公司</div>
					</li>
					<li class="flex-box" v-if="workDetailData.complete_task && workDetailData.complete_task.remark">
						<div class="label">完成备注</div>
						<div class="content_text">{{ workDetailData.complete_task.remark }}</div>
					</li>
					<li class="flex-box" v-if="workDetailData.complete_task && workDetailData.complete_task.files && workDetailData.complete_task.files.length > 0">
						<div class="label"></div>
						<div class="content_text">
							<el-image
								v-for="(item, index) in workDetailData.complete_task.files"
								:key="index"
								style="width: 100px; height: 100px;margin-right:8px"
								:src="item"
								:preview-src-list="workDetailData.complete_task.files"
							></el-image>
						</div>
					</li>
				</ul>
				<div v-show="workDetailData.point_config && workDetailData.point_config.item_info">
					<p class="row_title">规则依据</p>
					<el-row :gutter="10" v-if="workDetailData.point_config.rule_info">
						<el-col :span="4">规则分类</el-col>
						<el-col :span="19">{{ workDetailData.point_config.rule_info.name }}</el-col>
					</el-row>
					<el-row v-if="workDetailData.point_config.item_info">
						<el-col :span="4">积分规则</el-col>
						<el-col :span="19">{{ workDetailData.point_config.item_info.remark }}</el-col>
					</el-row>
					<el-row v-if="workDetailData.point_config.item_info">
						<el-col :span="4">积分</el-col>
						<el-col :span="19" v-show="workDetailData.point_config.item_info.min_point == workDetailData.point_config.item_info.max_point">
							{{ workDetailData.point_config.item_info.min_point }} {{ $getTypsName(workDetailData.pt_id) }}
						</el-col>
						<el-col :span="19" v-show="workDetailData.point_config.item_info.min_point != workDetailData.point_config.item_info.max_point">
							{{ workDetailData.point_config.item_info.min_point }} ~ {{ workDetailData.point_config.item_info.max_point }} {{ $getTypsName(workDetailData.pt_id) }}
						</el-col>
					</el-row>
				</div>
			</div>
		</el-drawer>
	</div>
</template>

<script>
export default {
	name: 'repeatTaskDetailsPopup',
	props: {
		title: {
			type: String,
			default: ''
		},
		visible: {
			type: Boolean,
			default: false
		},
		id: {
			type: Number,
			default: 0
		}
	},
	data() {
		return {
			Delay_to_open: false, //打开抽屉

			loading: false,
			workDetailData: {
				point_config: { base_point: '' }
			}
		};
	},
	components: {},
	watch: {},
	mounted() {
		this.getData();
		this.Delay_to_open = this.visible; //更换打开抽屉时机，避免打开两次
	},
	methods: {
		// 关闭弹窗
		handleClose() {
			this.$emit('update:visible', false);
		},
		// 获取数据
		getData() {
			let self = this;
			self.loading = true;
			let data = { task_id: this.id };
			self.$axios('get', '/api/integral/task', data)
				.then(res => {
					if (res.data.code == 1) {
						self.workDetailData = res.data.data;
					}
				})
				.finally(() => {
					self.loading = false;
				});
		}
	}
};
</script>
<style lang="scss" scoped="scoped">
.details_content {
	& .d_userMessage {
		margin-left: 10px;
	}
	& .d_userMessage div:nth-child(1) {
		font-size: 16px;
		margin-bottom: 8px;
	}
	& .d_userMessage div:nth-child(2) {
		font-size: 12px;
		color: #909399;
	}
	& .d_progress {
		padding: 12px 0;
		border-bottom: 1px solid #f1f1f1;
		margin-bottom: 10px;
	}
	& ul {
		padding: 12px 0;
		border-bottom: 1px solid #f1f1f1;
		& li {
			padding: 6px 0;
		}
		& .label {
			width: 80px;
			text-align: left;
			color: #909399;
		}
		& .content_text {
			flex: 1;
		}
	}
}
.details_content {
	padding: 20px;
	height: calc(100vh - 60px);
	overflow: auto;
	.row_title {
		position: relative;
		margin: 0 0 20px 0;
		padding-top: 12px;
		font-size: 16px;
		color: #303133;
		line-height: 22px;
	}
	.row_title:before {
		position: absolute;
		top: 0;
		content: ' ';
		width: 100%;
		border-top: 1px #f8f8f8 solid;
	}
	.el-row {
		margin-bottom: 10px;
		font-size: 14px;
		.el-col-4 {
			color: #606266;
		}
	}
}
.details_title {
	font-size: 18px;
	padding: 20px;
	border-bottom: 1px #efefef solid;
}
</style>