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.
406 lines
8.7 KiB
406 lines
8.7 KiB
<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>
|
|
|