<template>
|
<div id="mobilePopupOur" v-loading.fullscreen.lock="fullscreenLoading">
|
<div class="m_p_heard">
|
<div class="m_p_h_break" @click="closeBigPopup">
|
<i class="el-icon-arrow-left icon"></i>
|
</div>
|
<div class="m_p_h_center">
|
<div>
|
<div v-if="mBigPopup.search" style="color: #fff">
|
查询结果{{ searchLabel ? "--" + searchLabel : "" }}
|
</div>
|
<el-dropdown trigger="click" @command="choiceIt" v-else>
|
<span class="el-dropdown-link">
|
{{ choiceValue }}<i class="el-icon-arrow-down el-icon--right"></i>
|
</span>
|
<el-dropdown-menu slot="dropdown">
|
<el-dropdown-item
|
v-for="(item, index) in choiceData"
|
:key="index"
|
:command="item"
|
>{{ item.name }}</el-dropdown-item
|
>
|
</el-dropdown-menu>
|
</el-dropdown>
|
</div>
|
</div>
|
</div>
|
<div class="m_p_center">
|
<div
|
class="m_p_c_tableIn"
|
style="padding-top: 10px"
|
v-if="tabTable.length <= 0"
|
>
|
<el-empty
|
v-show="onlyData.length == 0"
|
description="暂无数据"
|
></el-empty>
|
<mobilePopupOurOnce
|
v-for="(citem, cindex) in onlyData"
|
:key="citem.bgImg + ''"
|
:ends="onlyData.length - 1 == cindex"
|
:onceData="citem"
|
></mobilePopupOurOnce>
|
<div v-show="onlyData.length != 0">
|
<el-divider content-position="left">
|
<i class="el-icon-s-promotion"></i> 暂无更多
|
</el-divider>
|
</div>
|
</div>
|
<el-tabs v-model="activeName" @tab-click="handleClick" v-else>
|
<el-tab-pane
|
v-for="(item, index) in tabTable"
|
:key="index"
|
:label="item.title"
|
:name="item.key"
|
>
|
<div class="m_p_c_tableIn">
|
<el-empty
|
v-show="item.child.length == 0"
|
description="暂无数据"
|
></el-empty>
|
<mobilePopupOurOnce
|
v-for="(citem, cindex) in item.child"
|
:key="citem.icon + ''"
|
:ends="item.child.length - 1 == cindex"
|
:onceData="citem"
|
></mobilePopupOurOnce>
|
<div v-show="item.child.length != 0">
|
<el-divider content-position="left">
|
<i class="el-icon-s-promotion"></i> 暂无更多
|
</el-divider>
|
</div>
|
</div>
|
</el-tab-pane>
|
</el-tabs>
|
</div>
|
</div>
|
</template>
|
|
<script>
|
import { getList } from "@/api/mobile/orgnav/index";
|
import { getListarc, getChildNavList } from "@/api/mobile/public/arc";
|
import {
|
getListlivingFacilitiesr,
|
getListsupermarket,
|
} from "@/api/mobile/livingFacilities/index";
|
import { mapGetters } from "vuex";
|
export default {
|
computed: {
|
...mapGetters(["mBigPopup", "popupOurOpenData"]),
|
},
|
name: "mobilePopupOur",
|
data() {
|
return {
|
searchLabel: "",
|
choiceValue: "",
|
choiceKey: "",
|
choiceData: [],
|
tabTable: [],
|
fullscreenLoading: false,
|
activeName: "1",
|
choiceMain: "",
|
onlyData: [],
|
OURAPI_FORLIFE: {},
|
};
|
},
|
mounted() {
|
this.fullscreenLoading = true;
|
if (this.mBigPopup.search) {
|
this.searchLabel = this.mBigPopup.value;
|
// console.log("查询搜索结果", this.mBigPopup.value);
|
this.fullscreenLoading = false;
|
this.choiceMain = "搜索";
|
return;
|
}
|
this.choiceMain = this.popupOurOpenData.qurey;
|
this.choiceData = this.popupOurOpenData.main;
|
this.choiceValue = this.popupOurOpenData.main[0].name;
|
this.choiceKey = this.popupOurOpenData.main[0].type;
|
this.$store.commit("MSET_BIGPOPUPAFTER", false);
|
// console.log("请求对应街道接口", this.popupOurOpenData);
|
if (this.choiceMain == "校园建筑") {
|
//校园建筑：加入街道的选择
|
this.getDataCampus();
|
} else if (this.choiceMain == "机构单位") {
|
this.getInstitutional(this.choiceKey);
|
} else if (this.choiceMain == "生活设施") {
|
// 加入所有请求接口函数
|
this.OURAPI_FORLIFE = {
|
1: getListlivingFacilitiesr,
|
2: getListsupermarket,
|
3: getListlivingFacilitiesr,
|
4: getListlivingFacilitiesr,
|
5: getListlivingFacilitiesr,
|
6: getListlivingFacilitiesr,
|
7: getListlivingFacilitiesr,
|
8: getListlivingFacilitiesr,
|
9: getListlivingFacilitiesr,
|
10: getListlivingFacilitiesr,
|
};
|
this.getDatalivingFacilities();
|
} else if (this.choiceMain == "文化风景") {
|
console.log(this.choiceKey, " : ", this.choiceMain);
|
this.fullscreenLoading = false;
|
} else if (this.choiceMain == "出入口") {
|
console.log(this.choiceKey, " : ", this.choiceMain);
|
this.fullscreenLoading = false;
|
} else if (this.choiceMain == "停车场") {
|
console.log(this.choiceKey, " : ", this.choiceMain);
|
this.fullscreenLoading = false;
|
}
|
},
|
methods: {
|
handleClick(tab, event) {
|
this.fullscreenLoading = true;
|
if (this.choiceMain == "校园建筑") {
|
this.getListCampus(this.activeName, this.choiceKey);
|
} else if (this.choiceMain == "生活设施") {
|
this.getListlivingFacilities(this.activeName, this.choiceKey); //生活设施 用choiceKey定位请求函数
|
}
|
},
|
choiceIt(command) {
|
this.fullscreenLoading = true;
|
this.choiceValue = command.name;
|
this.choiceKey = command.type;
|
console.log("请求对应头部下拉菜单接口", command);
|
if (this.choiceMain == "校园建筑") {
|
this.getListCampus(this.activeName, this.choiceKey);
|
} else if (this.choiceMain == "机构单位") {
|
this.getInstitutional(this.choiceKey);
|
} else if (this.choiceMain == "生活设施") {
|
this.getListlivingFacilities(this.activeName, this.choiceKey); //生活设施 用choiceKey定位请求函数
|
}
|
},
|
closeBigPopup() {
|
this.$store.commit("MSET_BIGPOPUP", false);
|
},
|
//"生活设施"↓
|
getDatalivingFacilities(data) {
|
let that = this;
|
getListarc().then((res) => {
|
let title = [];
|
res.data.data.forEach((item) => {
|
title.push({
|
title: item.dictValue,
|
flag: false,
|
key: item.dictKey,
|
child: [],
|
});
|
});
|
this.tabTable = title;
|
|
this.getListlivingFacilities(this.activeName, this.choiceKey); //生活设施 用choiceKey定位请求函数
|
});
|
},
|
getListlivingFacilities(campus, type) {
|
let that = this;
|
this.OURAPI_FORLIFE[type]({ campus: campus }).then((res) => {
|
const data = res.data.data.records;
|
// console.log(data);
|
// return;
|
let outList = [];
|
data.forEach((item) => {
|
let icon = item.tpurl.split(",");
|
outList.push({
|
name: item.mechanismname,
|
lntLat: [item.jd, item.wd],
|
alt: item.gd,
|
heading: item.heading,
|
pitch: item.pitch,
|
roll: item.roll,
|
bgImg: item.tpurl,
|
icon: icon,
|
from: this.choiceMain,
|
QRImg: item.codeurl,
|
websiteUrl: item.websiteurl,
|
telePhone: item.telephone,
|
buts:
|
that.mBigPopup.name == "校园建筑" ||
|
that.mBigPopup.name == "文化风景"
|
? ["定位", "实景", "图集"]
|
: ["定位"],
|
});
|
});
|
that.fullscreenLoading = false;
|
that.tabTable[+campus - 1].child = outList;
|
});
|
},
|
//"生活设施"↑
|
|
//""机构单位""↓
|
getInstitutional(type) {
|
let that = this;
|
// console.log(type);
|
getList({ type: type }).then((res) => {
|
const data = res.data.data;
|
let outList = [];
|
data.records.forEach((item) => {
|
let icon = item.tpurl.split(",");
|
outList.push({
|
name: item.mechanismname,
|
lntLat: [item.jd, item.wd],
|
alt: item.gd,
|
heading: item.heading,
|
pitch: item.pitch,
|
roll: item.roll,
|
bgImg: item.tpurl,
|
icon: icon,
|
from: this.choiceMain,
|
QRImg: item.codeurl,
|
websiteUrl: item.websiteurl,
|
telePhone: item.telephone,
|
buts:
|
that.mBigPopup.name == "校园建筑" ||
|
that.mBigPopup.name == "文化风景"
|
? ["定位", "实景", "图集"]
|
: ["定位"],
|
});
|
});
|
that.fullscreenLoading = false;
|
that.onlyData = outList;
|
});
|
},
|
//""机构单位""↑
|
//"校园建筑"↓
|
getDataCampus() {
|
getListarc().then((res) => {
|
let title = [];
|
res.data.data.forEach((item) => {
|
title.push({
|
title: item.dictValue,
|
flag: false,
|
key: item.dictKey,
|
child: [],
|
});
|
});
|
this.tabTable = title;
|
this.getListCampus(this.activeName, this.choiceKey);
|
});
|
},
|
getListCampus(campus, type) {
|
let that = this;
|
getChildNavList({ campus: campus, type: type }).then((res) => {
|
const data = res.data.data;
|
let outList = [];
|
data.forEach((item) => {
|
let icon = item.tpurl.split(",");
|
outList.push({
|
id: item.id,
|
name: item.mechanismname,
|
icon: icon,
|
from: this.choiceMain,
|
buts:
|
this.mBigPopup.name == "校园建筑" ||
|
this.mBigPopup.name == "文化风景"
|
? ["定位", "实景", "图集"]
|
: ["定位"],
|
});
|
});
|
that.fullscreenLoading = false;
|
that.tabTable[+campus - 1].child = outList;
|
});
|
},
|
//"校园建筑"↑
|
},
|
};
|
</script>
|
|
<style lang="scss" scoped>
|
#mobilePopupOur {
|
position: fixed;
|
top: 0;
|
left: 0;
|
width: 100%;
|
height: 100%;
|
background-color: #fff;
|
z-index: 300;
|
.m_p_heard {
|
width: 100%;
|
height: 50px;
|
background-color: #a40000;
|
.m_p_h_break {
|
position: absolute;
|
left: 0;
|
top: 0;
|
width: 50px;
|
height: 50px;
|
display: flex;
|
align-items: center;
|
justify-content: center;
|
.icon {
|
font-size: 22px;
|
color: #fff;
|
}
|
}
|
.m_p_h_center {
|
width: 100%;
|
height: 50px;
|
display: flex;
|
align-items: center;
|
justify-content: center;
|
.el-dropdown-link {
|
color: #fff;
|
}
|
}
|
}
|
.m_p_center {
|
width: 100%;
|
height: calc(100% - 50px);
|
// border: 1px solid red
|
box-sizing: border-box;
|
.m_p_c_tableIn {
|
width: 100%;
|
height: 100%;
|
box-sizing: border-box;
|
overflow-x: hidden;
|
overflow-y: auto;
|
}
|
}
|
}
|
</style>
|
