epmet-work-pc/src/views/dataBoard/cpts/map/popup.vue

<template>
	<div class="m-pop" ref="pop" @mousewheel="handleWheel" v-show="!hidden">
		<div class="info">
			<div v-if="type === '1'">
				<div class="u-info-title">居民信息</div>
				<div class="item">
					姓名：
					<span>{{ info.user_name || "--" }}</span>
				</div>
				<div class="item">
					所属网格：
					<span>{{ info.grid || "--" }}</span>
				</div>
				<div class="item">
					所属小区：
					<span>{{ info.house || "--" }}</span>
				</div>

				<div class="item">
					手机号：
					<span>{{ info.telephone || "--" }}</span>
				</div>
				<div class="item">
					性别：
					<span>{{ info.genderShow || "--" }}</span>
				</div>
				<div class="item">
					身份证号：
					<span>{{ info.idcard || "--" }}</span>
				</div>

				<div class="item">
					工作单位：
					<span>{{ info.workunit || "--" }}</span>
				</div>
				<div class="item">
					人户状况：
					<span>{{ info.household || "--" }}</span>
				</div>
				<div class="item">
					人员类别：
					<span>{{ info.classtype || "--" }}</span>
				</div>

				<div @click="handleClickBtn('watch-resi')" class="more-btn">
					更多
				</div>

				<div class="operate">
					<div
						@click="handleClickBtn('create-demand')"
						v-if="info.agencyId == $store.state.user.agencyId"
						class="btn z-blue"
					>
						发布需求
					</div>

					<div
						v-if="
							info.agencyId == $store.state.user.agencyId &&
							type === 'volunteer'
						"
						@click="handleClickBtn('create-service')"
						class="btn z-yellow"
					>
						发起服务
					</div>
				</div>
			</div>

			<div v-if="type === '2'">
				<div class="u-info-title">小区信息</div>
				<div class="item">
					所属组织：
					<span>{{ info.community || "--" }}</span>
				</div>
				<div class="item">
					所属网格：
					<span>{{ info.grid || "--" }}</span>
				</div>
				<div class="item">
					小区名称：
					<span>{{ info.village_name || "--" }}</span>
				</div>
				<div class="item">
					关联物业：
					<span>{{ info.property || "--" }}</span>
				</div>
				<div class="item">
					实有楼栋：
					<span>{{ info.building || "--" }}</span>
				</div>
			</div>

			<div v-if="type === '3'">
				<div class="u-info-title">楼栋信息</div>
				<div class="item">
					所属小区：
					<span>{{ info.village_name || "--" }}</span>
				</div>
				<div class="item">
					楼栋名称：
					<span>{{ info.village_name || "--" }}</span>
				</div>
				<div class="item">
					楼栋类型：
					<span>{{ info.building_type || "--" }}</span>
				</div>
				<div class="item">
					单元数：
					<span>{{ info.unit_count || "--" }}</span>
				</div>
				<div class="item">
					层数：
					<span>{{ info.levels_count || "--" }}</span>
				</div>
				<div class="item">
					总户数：
					<span>{{ info.households || "--" }}</span>
				</div>
				<div class="item">
					人口数：
					<span>{{ info.resident_count || "--" }}</span>
				</div>
				<div class="item">
					楼长姓名：
					<span>{{ info.hm_name || "--" }}</span>
				</div>
				<div class="item">
					楼长电话：
					<span>{{ info.hm_phone || "--" }}</span>
				</div>
			</div>

			<div v-if="type === '4'">
				<div class="u-info-title">房屋信息</div>
				<div class="item">
					房屋名称：
					<span>{{ info.title || "--" }}</span>
				</div>
				<div class="item">
					房屋类型：
					<span>{{ info.house_type || "--" }}</span>
				</div>
				<div class="item">
					房屋用途：
					<span>{{ info.house_usage || "--" }}</span>
				</div>
				<div class="item">
					房屋状态：
					<span>{{ info.house_state || "--" }}</span>
				</div>
				<div class="item">
					房主姓名：
					<span>{{ info.holder_name || "--" }}</span>
				</div>
				<div class="item">
					联系方式：
					<span>{{ info.holder_phone || "--" }}</span>
				</div>
				<div class="item">
					房主身份证：
					<span>{{ info.holder_idcard || "--" }}</span>
				</div>

				<div @click="handleClickBtn('watch-house')" class="more-btn">
					更多
				</div>
			</div>
		</div>
	</div>
</template>

<script>
import { requestPost, requestGet } from "@/js/dai/request";

export default {
	name: "popup",

	props: {
		item: {
			type: Object,
			default: () => ({}),
		},
	},

	data() {
		return {
			hidden: true,
			type: "",
			srcItem: {},
			info: {},
			list: [],
		};
	},

	computed: {},
	watch: {},

	mounted() {},

	methods: {
		handleWheel(e) {
			if (this.$refs.pop.clientHeight >= 321) {
				e.stopPropagation();
			}
		},

		handleClickBtn(type) {
			this.$emit("operate", type, {
				type: this.type,
				id: this.srcItem.id,
				...this.info,
			});
		},

		handleClickListItem(item) {
			console.log("handleClickListItem", item);
			this.$emit("clickListItem", item);
		},

		async show(item) {
			console.log("-----------------show:", item);
			const { type, latitude, longitude } = item;
			if (!type) {
				return false;
			}
			if (!latitude || !longitude) {
				this.$message.warning("请先完善坐标位置");
				return false;
			}

			this.type = item.type;
			this.srcItem = item;
			this.info = item;
			this.hidden = false;
			return true;
		},
	},
};
</script>

<style lang="scss" scoped>
@import "@/assets/scss/c/config.scss";
@import "@/assets/scss/c/function.scss";
@import "@/assets/scss/modules/visual/c/common.scss";

.m-pop {
	@include scrollBar2;
	width: 450px;
	color: #fff;
	font-size: 14px;
	line-height: 20px;
	max-height: 500px;
	overflow-y: auto;

	.info {
		padding: 10px;
		.u-info-title {
			margin-bottom: 10px;
			font-size: 24px;
			font-weight: bold;
			color: #69efff;
			line-height: 40px;
		}

		.item-pics {
			display: flex;
			margin: 20px 0;
			img {
				display: block;
				width: 32%;
				height: 90px;
				margin-right: 9px;
				object-fit: cover;
			}
		}
	}
	.item {
		@include toe;
		font-size: 18px;
		font-family: PingFang SC;
		font-weight: 400;
		color: #ffffff;
		line-height: 34px;
	}

	.list {
		.item {
			display: flex;
			align-items: center;
			margin-bottom: 5px;
			padding: 5px;
			border-bottom: 1px dashed #124584;
			&:last-child {
				border-bottom: none;
			}
			.item-cnt {
				@include toe;
				width: 90%;
			}
			.i-arrow {
				margin-left: auto;
			}
		}
	}

	.operate {
		display: flex;
		justify-content: center;
	}

	.more-btn {
		position: absolute;
		right: 20px;
		top: 30px;
		width: 60px;
		height: 24px;
		background: rgba(221, 141, 2, 0.57);
		border: 1px solid #dd8d02;
		border-radius: 2px;
		font-size: 16px;
		font-family: PingFang SC;
		font-weight: 400;
		color: #ffffff;
		line-height: 24px;
		text-align: center;
		cursor: pointer;
	}

	.btn {
		margin-top: 20px;
		margin-right: 20px;
		width: 110px;
		line-height: 30px;
		border: 1px solid #eee;
		text-align: center;
		font-size: 18px;
		border-radius: 2px;
		cursor: pointer;
		&.z-blue {
			background: #09a5ff;
			border-color: #09a5ff;
		}
		&.z-yellow {
			background: #fe6b53;
			border-color: #fe6b53;
		}
	}
}
</style>