You can not select more than 25 topics
Topics must start with a letter or number, can include dashes ('-') and can be up to 35 characters long.
405 lines
8.4 KiB
405 lines
8.4 KiB
3 years ago
|
<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>
|
||
|
|
</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;
|
||
|
|
},
|
||
|
|
|
||
|
|
async loadResi(info) {
|
||
|
|
const url = "/epmetuser/icresiuser/resi-brief/" + info.id;
|
||
|
|
// const url = "http://yapi.elinkservice.cn/mock/245/heart/icpartyunit/distribution"
|
||
|
|
|
||
|
|
let params = {};
|
||
|
|
|
||
|
|
const { data, code, msg } = await requestPost(url, params);
|
||
|
|
|
||
|
|
if (code === 0) {
|
||
|
|
data.icUserName = data.icUserName ? data.icUserName : "--";
|
||
|
|
data.gridName = data.gridName ? data.gridName : "--";
|
||
|
|
data.villageName = data.villageName ? data.villageName : "--";
|
||
|
|
data.mobile = data.mobile ? data.mobile : "--";
|
||
|
|
data.idCard = data.idCard ? data.idCard : "--";
|
||
|
|
data.birthday = data.birthday ? data.birthday : "--";
|
||
|
|
data.contacts = data.contacts ? data.contacts : "--";
|
||
|
|
data.contactsMobile = data.contactsMobile
|
||
|
|
? data.contactsMobile
|
||
|
|
: "--";
|
||
|
|
|
||
|
|
data.isBdhjShow = data.isBdhj
|
||
|
|
? data.isBdhj === "0"
|
||
|
|
? "否"
|
||
|
|
: "是"
|
||
|
|
: "--";
|
||
|
|
data.genderShow = data.gender
|
||
|
|
? data.gender === "0"
|
||
|
|
? "女"
|
||
|
|
: "男"
|
||
|
|
: "--";
|
||
|
|
if (data.rhzk === "rhyz") {
|
||
|
|
data.rhzkShow = "人户一致";
|
||
|
|
} else if (data.rhzk === "rzhbz") {
|
||
|
|
data.rhzkShow = "人在户不在";
|
||
|
|
} else if (data.rhzk === "hzrbz") {
|
||
|
|
data.rhzkShow = "户在人不在";
|
||
|
|
} else {
|
||
|
|
data.rhzkShow = "--";
|
||
|
|
}
|
||
|
|
|
||
|
|
let categoriesArray = [];
|
||
|
|
|
||
|
|
for (let key in data.volunteerCategories) {
|
||
|
|
categoriesArray.push(data.volunteerCategories[key]);
|
||
|
|
}
|
||
|
|
|
||
|
|
if (categoriesArray.length > 0) {
|
||
|
|
data.categories = categoriesArray.join(",");
|
||
|
|
} else {
|
||
|
|
data.categories = "--";
|
||
|
|
}
|
||
|
|
this.info = JSON.parse(JSON.stringify(data));
|
||
|
|
} else {
|
||
|
|
this.$message.error(msg);
|
||
|
|
}
|
||
|
|
},
|
||
|
|
},
|
||
|
|
};
|
||
|
|
</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>
|