+,请求数据，弹框显示，优化代码长度

liuyg

2021-12-21 81773ab04fd259e893c2d7f08dbdc9be772d01c4

 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>
</script>