From 81773ab04fd259e893c2d7f08dbdc9be772d01c4 Mon Sep 17 00:00:00 2001
From: liuyg <376836862@qq.com>
Date: Tue, 21 Dec 2021 17:18:45 +0800
Subject: [PATCH] +,请求数据，弹框显示，优化代码长度
---
src/components/mobilePopupOur/index.vue | 290 +++++++++++++++-------------------------------------------
1 files changed, 75 insertions(+), 215 deletions(-)
diff --git a/src/components/mobilePopupOur/index.vue b/src/components/mobilePopupOur/index.vue
index b848294..0c89a11 100644
--- a/src/components/mobilePopupOur/index.vue
+++ b/src/components/mobilePopupOur/index.vue
@@ -78,12 +78,7 @@
</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 { getListarc } from "@/api/mobile/public/arc"; //头部下标签页数据
import { mapGetters } from "vuex";
export default {
computed: {
@@ -95,89 +90,61 @@
searchLabel: "",
choiceValue: "",
choiceKey: "",
+ choiceMethod: "",
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.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.$store.commit("MSET_BIGPOPUPAFTER", false);
+ this.choiceMethod = this.popupOurOpenData.main[0].method;
+
+ 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;
- }
+ this.getDataHeardDown();
},
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定位请求函数
- }
+ this.getOutList(this.activeName, this.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定位请求函数
- }
+ this.choiceMethod = command.method; //更改请求
+ // console.log("请求对应头部下拉菜单接口", command);
+ this.getOutList(this.activeName, this.choiceKey);
},
closeBigPopup() {
this.$store.commit("MSET_BIGPOPUP", false);
},
- //"生活设施"↓
- getDatalivingFacilities(data) {
- let that = this;
+ getDataHeardDown() {
+ if (this.choiceMain == "机构单位") {
+ //不请求头部标签页数据
+ this.getOutList(this.activeName, this.choiceKey);
+ return;
+ }
+ //获取头下部标签页
getListarc().then((res) => {
let title = [];
res.data.data.forEach((item) => {
@@ -189,173 +156,66 @@
});
});
this.tabTable = title;
-
- this.getListlivingFacilities(this.activeName, this.choiceKey); //生活设施 用choiceKey定位请求函数
+ this.getOutList(this.activeName, this.choiceKey);
});
},
- getListlivingFacilities(campus, type) {
+ //请求
+ getOutList(campus, type) {
let that = this;
- this.OURAPI_FORLIFE[type]({ campus: campus }).then((res) => {
- const data = res.data.data.records;
- // console.log(data);
- // return;
+ this.choiceMethod({ campus: campus, type: type }).then((res) => {
+ const data = res.data.data;
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 == "文化风景"
- ? ["定位", "实景", "图集"]
- : ["定位"],
+ if (this.choiceMain == "校园建筑") {
+ // 校园建筑使用该id获取具体信息
+ 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 == "文化风景"
+ ? ["定位", "实景", "图集"]
+ : ["定位"],
+ });
});
- });
+ } else {
+ //正常获取全部数据
+ 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,
+ address: item.address,
+ introduce: item.introduce,
+ buts:
+ that.mBigPopup.name == "校园建筑" ||
+ that.mBigPopup.name == "文化风景"
+ ? ["定位", "实景", "图集"]
+ : ["定位"],
+ });
+ });
+ }
that.fullscreenLoading = false;
+ if (this.choiceMain == "机构单位") {
+ that.onlyData = outList;
+ return;
+ }
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>
\ No newline at end of file
+</script>
\ No newline at end of file
--
Gitblit v1.9.3