<template>
|
<!-- 信息窗口主体mobilePopupOur -->
|
<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.name + cindex"
|
: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.icons"
|
:ends="item.child.length - 1 == cindex"
|
:onceData="citem"
|
></mobilePopupOurOnce>
|
<!-- {{ citem.icon }} -->
|
<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 { getListarc } from "@/api/mobile/public/arc" //头部下标签页数据
|
import { mapGetters } from "vuex"
|
//搜索
|
import { getListSearch } from "@/api/mobile/search/index"
|
export default {
|
computed: {
|
...mapGetters(["mBigPopup", "popupOurOpenData"]),
|
},
|
name: "mobilePopupOur",
|
data () {
|
return {
|
searchLabel: "",
|
choiceValue: "",
|
choiceKey: "",
|
choiceMethod: "",
|
choiceData: [],
|
tabTable: [],
|
fullscreenLoading: false,
|
activeName: "1",
|
choiceMain: "",
|
onlyData: [],
|
}
|
},
|
mounted () {
|
this.fullscreenLoading = true
|
if (this.mBigPopup.search) {
|
//搜索事件
|
this.searchLabel = this.mBigPopup.value
|
// console.log("查询搜索结果", this.mBigPopup.value);
|
this.fullscreenLoading = false
|
this.choiceMain = "搜索"
|
this.getListSearchMethod(this.mBigPopup.value)
|
return
|
}
|
this.choiceMain = this.popupOurOpenData.qurey // 进入的主题：列：机构单位，社区建筑
|
this.choiceData = this.popupOurOpenData.main //带入数据 包括name、type、method
|
|
this.choiceValue = this.popupOurOpenData.main[0].name
|
this.choiceKey = this.popupOurOpenData.main[0].type
|
this.choiceMethod = this.popupOurOpenData.main[0].method
|
|
this.$store.commit("MSET_BIGPOPUPAFTER", false) //关闭前一个弹窗
|
// console.log("请求对应街道接口", this.popupOurOpenData);
|
this.getDataHeardDown()
|
},
|
watch: {
|
fullscreenLoading () {
|
if (this.fullscreenLoading) {
|
this.notLine()
|
}
|
},
|
},
|
methods: {
|
handleClick (tab, event) {
|
//头下部标签
|
this.fullscreenLoading = true
|
this.getOutList(this.activeName, this.choiceKey)
|
},
|
choiceIt (command) {
|
//头部下拉菜单
|
this.fullscreenLoading = true
|
this.choiceValue = command.name
|
this.choiceKey = command.type
|
this.choiceMethod = command.method //更改请求
|
// console.log("请求对应头部下拉菜单接口", command);
|
this.getOutList(this.activeName, this.choiceKey)
|
},
|
closeBigPopup () {
|
this.$store.commit("MSET_BIGPOPUP", false)
|
},
|
getDataHeardDown () {
|
if (this.choiceMain == "活动") {
|
//不请求头部标签页数据
|
this.getOutList(this.choiceKey)
|
return
|
}
|
if (this.choiceMain == "机构单位") {
|
this.getOutList("", this.choiceKey)
|
return
|
}
|
//获取头下部标签页
|
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.getOutList(this.activeName, this.choiceKey)
|
})
|
},
|
//请求
|
getOutList (campus, type) {
|
// console.log(this.choiceMain, campus, type, "see");
|
let that = this
|
let d
|
if (this.choiceMain == "机构单位") {
|
// 不传标签页
|
d = {
|
type: type,
|
}
|
} else if (
|
this.choiceMain == "生活设施" ||
|
this.choiceMain == "出入口" ||
|
this.choiceMain == "停车场"
|
) {
|
// 改变传入属性
|
d = {
|
campus: campus,
|
lifetype: type,
|
}
|
} else {
|
d = {
|
campus: campus,
|
type: type,
|
}
|
}
|
this.choiceMethod(d).then((res) => {
|
const data = res.data.data
|
let outList = []
|
if (
|
this.mBigPopup.name == "社区建筑" ||
|
this.mBigPopup.name == "文化风景"
|
) {
|
// 社区建筑使用该id获取具体信息
|
data.forEach((item) => {
|
let icon = item.tpurl ? item.tpurl.split(",") : item.id
|
outList.push({
|
id: item.id,
|
name: item.mechanismname,
|
icon: icon,
|
icons: icon + item.mechanismname, //图片响应改变
|
from: this.choiceMain,
|
video: item.videourl,
|
buts:
|
this.mBigPopup.name == "社区建筑" ||
|
this.mBigPopup.name == "文化风景"
|
? ["定位", "实景", "图集"]
|
: ["定位"],
|
})
|
})
|
} else if (this.mBigPopup.name == "活动") {
|
// 社区建筑使用该id获取具体信息
|
data.records.forEach((item) => {
|
let icon = item.tpurl.split(",")
|
let useData = {
|
name: item.hdname,
|
// lntLat: [item.jd, item.wd],
|
// alt: item.gd,
|
// heading: item.heading,
|
// pitch: item.pitch,
|
// roll: item.roll,
|
bgImg: item.tpurl,
|
icon: icon,
|
icons: icon + item.hdname, //图片响应改变
|
from: this.choiceMain,
|
// QRImg: item.codeurl,
|
websiteUrl: item.websiteurl,
|
telePhone: item.telephone,
|
// address: item.address,
|
introduce: item.context,
|
video: item.videourl,
|
buts:
|
that.mBigPopup.name == "社区建筑" ||
|
that.mBigPopup.name == "文化风景"
|
? ["定位", "实景", "图集"]
|
: ["定位"],
|
//活动添加的字段
|
addressname: item.addressname.split(";"),
|
address: item.address.split(";"),
|
lxname: item.lxname.split(";"),
|
lx: item.lx.split(";"),
|
lntLat: [
|
item.address.split(";")[0].split(",")[0],
|
item.address.split(";")[0].split(",")[1],
|
],
|
panoramaurl: item.panoramaurl, //全景
|
}
|
outList.push(useData)
|
})
|
} else {
|
//正常获取全部数据
|
data.records.forEach((item) => {
|
let icon = item.tpurl.split(",")
|
let useData = {
|
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,
|
icons: icon + item.mechanismname, //图片响应改变
|
from: this.choiceMain,
|
QRImg: item.codeurl,
|
websiteUrl: item.websiteurl,
|
telePhone: item.telephone,
|
address: item.address,
|
introduce: item.introduce,
|
video: item.videourl,
|
buts:
|
that.mBigPopup.name == "社区建筑" ||
|
that.mBigPopup.name == "文化风景"
|
? ["定位", "实景", "图集"]
|
: ["定位"],
|
panoramaurl: item.panoramaurl, //全景
|
}
|
outList.push(useData)
|
})
|
}
|
that.fullscreenLoading = false
|
if (this.choiceMain == "机构单位" || this.choiceMain == "活动") {
|
that.onlyData = outList
|
return
|
}
|
that.tabTable[+campus - 1].child = outList
|
})
|
},
|
//搜索请求
|
getListSearchMethod (name) {
|
let val = {
|
mechanismName: name,
|
},
|
that = this
|
getListSearch(val).then((res) => {
|
if (res.data.code != 200) {
|
return
|
}
|
const data = res.data.data
|
//正常获取全部数据
|
let outList = []
|
data.forEach((item) => {
|
let icon = item.tpurl.split(",")
|
let useData = {
|
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,
|
icons: icon + item.mechanismname, //图片响应改变
|
from: this.choiceMain,
|
QRImg: item.codeurl,
|
websiteUrl: item.websiteurl,
|
telePhone: item.telephone,
|
address: item.address,
|
introduce: item.introduce,
|
video: item.videourl,
|
buts:
|
that.mBigPopup.name == "社区建筑" ||
|
that.mBigPopup.name == "文化风景"
|
? ["定位", "实景", "图集"]
|
: ["定位"],
|
panoramaurl: item.panoramaurl, //全景
|
}
|
outList.push(useData)
|
})
|
that.fullscreenLoading = false
|
that.onlyData = outList
|
})
|
},
|
notLine () {
|
console.log("等待关闭")
|
setTimeout(() => {
|
this.fullscreenLoading = false
|
console.log("关闭dolog")
|
}, 5000)
|
},
|
},
|
};
|
</script>
|
