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">
					<img
						class="img"
						src="@/assets/images/shuju/renfang/jm-logo.png"
						alt
					/>
					<span>居民信息</span>
				</div>

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

				<div class="item">
					<span class="field">姓名：</span>
					<span>{{ info.user_name || "--" }}</span>
				</div>
				<div class="item">
					<span class="field">所属网格：</span>
					<span>{{ info.grid || "--" }}</span>
				</div>
				<div class="item">
					<span class="field">所属小区：</span>
					<span>{{ info.house || "--" }}</span>
				</div>

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

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

				<div class="operate" v-if="false">
					<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">
					<img
						class="img"
						src="@/assets/images/shuju/renfang/house-logo.png"
						alt
					/>
					<span>小区信息</span>
				</div>

				<div class="item">
					<span class="field">所属组织：</span>
					<span>{{ info.community || "--" }}</span>
				</div>
				<div class="item">
					<span class="field">所属网格：</span>
					<span>{{ info.grid || "--" }}</span>
				</div>
				<div class="item">
					<span class="field">小区名称：</span>
					<span>{{ info.village_name || "--" }}</span>
				</div>
				<div class="item">
					<span class="field">关联物业：</span>
					<span>{{ info.property || "--" }}</span>
				</div>
				<div class="item">
					<span class="field">实有楼栋：</span>
					<span>{{ info.building || "--" }}</span>
				</div>
			</div>

			<div v-if="type === '3'">
				<div class="u-info-title">
					<img
						class="img"
						src="@/assets/images/shuju/renfang/house-logo.png"
						alt
					/>
					<span>楼栋信息</span>
				</div>

				<div class="item">
					<span class="field">所属小区：</span>
					<span>{{ info.village_name || "--" }}</span>
				</div>
				<div class="item">
					<span class="field">楼栋名称：</span>
					<span>{{ info.village_name || "--" }}</span>
				</div>
				<div class="item">
					<span class="field">楼栋类型：</span>
					<span>{{ info.building_type || "--" }}</span>
				</div>
				<div class="item">
					<span class="field">单元数：</span>
					<span>{{ info.unit_count || "--" }}</span>
				</div>
				<div class="item">
					<span class="field">层数：</span>
					<span>{{ info.levels_count || "--" }}</span>
				</div>
				<div class="item">
					<span class="field">总户数：</span>
					<span>{{ info.households || "--" }}</span>
				</div>
				<div class="item">
					<span class="field">人口数：</span>
					<span>{{ info.resident_count || "--" }}</span>
				</div>
				<div class="item">
					<span class="field">楼长姓名：</span>
					<span>{{ info.hm_name || "--" }}</span>
				</div>
				<div class="item">
					<span class="field">楼长电话：</span>
					<span>{{ info.hm_phone || "--" }}</span>
				</div>
				<div class="item">
					<span class="field">详细地址：</span>
					<span>{{ info.location || "--" }}</span>
				</div>
			</div>

			<div v-if="type === '4'">
				<div class="u-info-title">
					<img
						class="img"
						src="@/assets/images/shuju/renfang/house-logo.png"
						alt
					/>
					<span>房屋信息</span>
				</div>

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

				<div class="item">
					<span class="field">房屋名称：</span>
					<span>{{ info.title || "--" }}</span>
				</div>
				<div class="item">
					<span class="field">房屋类型：</span>
					<span>{{ info.house_type || "--" }}</span>
				</div>
				<div class="item">
					<span class="field">房屋用途：</span>
					<span>{{ info.house_usage || "--" }}</span>
				</div>
				<div class="item">
					<span class="field">房屋状态：</span>
					<span>{{ info.house_state || "--" }}</span>
				</div>
				<div class="item">
					<span class="field">房主姓名：</span>
					<span>{{ info.holder_name || "--" }}</span>
				</div>
				<div class="item">
					<span class="field">联系方式：</span>
					<span>{{ info.holder_phone || "--" }}</span>
				</div>
				<div class="item">
					<span class="field">房主身份证：</span>
					<span>{{ info.holder_idcard || "--" }}</span>
				</div>
				<div class="item">
					<span class="field">备注：</span>
					<span>{{ info.remark || "--" }}</span>
				</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;
	box-sizing: border-box;
	padding: 10px 0;
	width: 350px;
	color: #fff;
	font-size: 14px;
	line-height: 20px;
	max-height: 500px;
	overflow-y: auto;

	.info {
		padding: 10px;
		.u-info-title {
			margin-bottom: 10px;
			line-height: 20px;
			font-size: 14px;
			font-family: PingFangSC-Medium, PingFang SC;
			font-weight: 500;
			color: #ffffff;

			img {
				position: relative;
				top: 2px;
				margin-right: 6px;
				width: 16px;
				vertical-align: top;
			}
		}

		.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: 14px;
		font-family: PingFang SC;
		font-weight: 400;
		color: rgba(#ffffff, 0.85);
		line-height: 28px;
		.field {
			display: inline-block;
			margin-right: 5px;
			min-width: 90px;
			text-align: right;
			color: rgba(#ffffff, 0.65);
		}
	}

	.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: 28px;
		width: 80px;
		height: 24px;
		font-family: PingFangSC-Regular, PingFang SC;
		font-weight: 400;
		color: #1a95ff;
		line-height: 20px;
		font-size: 14px;
		text-align: right;
		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>