<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) => {
|
const 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");
|
const 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) => {
|
console.log(res)
|
const data = res.data.data
|
const outList = []
|
if (
|
this.mBigPopup.name == '校区建筑' ||
|
this.mBigPopup.name == '文化风景'
|
) {
|
// 校区建筑使用该id获取具体信息
|
data.forEach((item) => {
|
const 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) => {
|
const icon = item.tpurl.split(',')
|
const 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, // 全景
|
x: item.x
|
}
|
outList.push(useData)
|
})
|
} else {
|
// 正常获取全部数据
|
data.records.forEach((item) => {
|
const icon = item.tpurl.split(',')
|
const 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, // 全景
|
x: item.x
|
}
|
outList.push(useData)
|
})
|
}
|
that.fullscreenLoading = false
|
if (this.choiceMain == '机构单位' || this.choiceMain == '活动') {
|
that.onlyData = outList
|
return
|
}
|
that.tabTable[+campus - 1].child = outList
|
})
|
},
|
// 搜索请求
|
getListSearchMethod (name) {
|
const val = {
|
mechanismName: name
|
}
|
const that = this
|
getListSearch(val).then((res) => {
|
if (res.data.code != 200) {
|
return
|
}
|
const data = res.data.data
|
// 正常获取全部数据
|
const outList = []
|
data.forEach((item) => {
|
const icon = item.tpurl.split(',')
|
const 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, // 全景
|
x: item.x
|
}
|
outList.push(useData)
|
})
|
that.fullscreenLoading = false
|
that.onlyData = outList
|
})
|
},
|
notLine () {
|
console.log('等待关闭')
|
setTimeout(() => {
|
this.fullscreenLoading = false
|
console.log('关闭dolog')
|
}, 5000)
|
}
|
}
|
}
|
</script>
|
