Merge branch 'master' of http://192.168.0.105:10010/r/school-web

shuishen

2022-03-18 bf58722dfd03ea1513f3acc7331d4d4403fca76e

 src/components/mobilePopupOurAfter/index.vue

@@ -1,30 +1,67 @@
<template>
  <div id="mobilePopupOurAfter">
  <div
    class="mobilePopupOurAfter"
    :class="{ ismBigPopupAfter: mBigPopupAfter }"
  >
    <!-- v-if="mBigPopupAfter" -->
    <div class="m_p_a_heard">
      <div><i class="el-icon-menu icon"></i></div>
      校区列表
      <div @click="closeBigPopupAfter"><i class="el-icon-close icon"></i></div>
    </div>
    <div class="m_p_a_center">
      <div class="m_p_a_center_group">
        <div
          class="m_p_a_center_once"
          :class="[
            'm_p_a_center_once',
            item.name ? '' : 'm_p_a_center_once_notblue',
          ]"
          v-for="(item, index) in choiceDataUp"
          @click="openBigPopup(item)"
          @click="item.name ? openBigPopup(item) : ''"
          :key="index"
        >
          <div class="m_p_a_c_o_up"><i :class="[item.icon]"></i></div>
          <div class="m_p_a_c_o_down">{{ item.name }}</div>
          <div class="m_p_a_c_o_down">{{ item.seeName || item.name }}</div>
        </div>
      </div>
      <div class="m_p_a_center_group">
        <div
          class="m_p_a_center_once"
          :class="[
            'm_p_a_center_once',
            item.name ? '' : 'm_p_a_center_once_notblue',
          ]"
          v-for="(item, index) in choiceDataDown"
          @click="openBigPopup(item)"
          @click="item.name ? openBigPopup(item) : ''"
          :key="index"
        >
          <div class="m_p_a_c_o_up"><i :class="[item.icon]"></i></div>
          <div class="m_p_a_c_o_down">{{ item.name }}</div>
          <div class="m_p_a_c_o_down">{{ item.seeName || item.name }}</div>
        </div>
      </div>
      <div
        class="m_p_a_heard m_p_a_hdheard"
        style="justify-content: center"
        v-show="avtivityData.length > 0 && useHD"
      >
        活动列表
      </div>
      <div
        class="m_p_a_center_group"
        v-for="(act, index) in avtivityData"
        :key="index"
        v-show="avtivityData.length > 0 && useHD"
      >
        <div
          :class="[
            'm_p_a_center_once',
            item.name ? '' : 'm_p_a_center_once_notblue',
          ]"
          v-for="(item, index) in act"
          @click="item.name ? openHDPopup(item) : ''"
          :key="index"
        >
          <div class="m_p_a_c_o_up"><i :class="[item.icon]"></i></div>
          <div class="m_p_a_c_o_down">{{ item.seeName || item.name }}</div>
        </div>
      </div>
    </div>
@@ -32,48 +69,53 @@
</template>

<script>
import { getList } from "@/api/mobile/orgnav/index"; //机构单位
import { getChildNavList } from "@/api/mobile/public/arc"; //校园建筑
import { mapGetters } from "vuex";
import { getList } from "@/api/mobile/orgnav/index"; // 机构单位
import { getChildNavList } from "@/api/mobile/public/arc"; // 校区建筑
import {
  getListlivingFacilitiesr,
  getListsupermarket,
  getListmedical,
  getListmail,
  getListbathroom,
  getListduplicate,
  getListnetwork,
  getListaed,
  getListsignal,
} from "@/api/mobile/livingFacilities/index"; //生活设施
import { getListparking } from "@/api/mobile/stop/index"; //停车场
  // getListlivingFacilitiesr,
  // getListsupermarket,
  // getListmedical,
  // getListmail,
  // getListbathroom,
  // getListduplicate,
  // getListnetwork,
  // getListaed,
  // getListsignal,
  // getListtransference,
  getListLifeOnce, // 所有的
} from "@/api/mobile/livingFacilities/index"; // 生活设施
// import { getListdoor } from "@/api/mobile/outIn/index"; //出入口
// import { getListparking } from "@/api/mobile/stop/index"; //停车场
import { getActivity } from "@/api/mobile/hd/hd"; //活动
export default {
  name: "mobilePopupOurAfter",
  computed: {
    ...mapGetters(["mBigPopupAfter"]),
  },
  data() {
    return {
      choiceValue: "",
      choiceDataUp: [
        {
          // seeName: "校区内机构导览",
          name: "机构单位",
          icon: "el-icon-s-cooperation",
          opendata: "openData1",
        },
        {
          name: "校园建筑",
          name: "校区建筑",
          opendata: "openData2",
          icon: "el-icon-s-management",
        },
        {
          // seeName: "生活服务设施",
          name: "生活设施",
          opendata: "openData3",
          icon: "el-icon-s-flag",
        },
      ],
      choiceDataDown: [
        {
          name: "文化风景",
          opendata: "openData4",
          icon: "el-icon-s-opportunity",
        },
        {
          name: "出入口",
          opendata: "openData5",
@@ -84,6 +126,23 @@
          opendata: "openData6",
          icon: "el-icon-s-flag",
        },
        {
          // name: "文化风景",
          name: "活动",
          opendata: "openData4",
          icon: "el-icon-s-opportunity",
        },
      ],
      avtivityData: [
        // [
        //   {
        //     name: "活动",
        //     opendata: "openData4",
        //     icon: "el-icon-s-opportunity",
        //   },
        //   {},
        //   {},
        // ],
      ],
      openData1: [
        { name: "党群机构", type: 1, method: getList },
@@ -95,37 +154,118 @@
      openData2: [
        { name: "行政办公", type: 1, method: getChildNavList },
        { name: "教学科研", type: 2, method: getChildNavList },
        { name: "校内场馆", type: 3, method: getChildNavList },
        { name: "校区场馆", type: 3, method: getChildNavList },
        { name: "宿舍公寓", type: 4, method: getChildNavList },
        { name: "文化风景", type: 5, method: getChildNavList },
        { name: "家属住宅", type: 6, method: getChildNavList },
        { name: "其他楼宇", type: 7, method: getChildNavList },
      ],
      // openData3: [
      //   { name: "食堂餐厅", type: 1, method: getListlivingFacilitiesr },
      //   { name: "购物超市", type: 2, method: getListsupermarket },
      //   { name: "校区内医疗", type: 3, method: getListmedical },
      //   { name: "邮寄快递", type: 4, method: getListmail },
      //   { name: "校区浴室", type: 5, method: getListbathroom },
      //   { name: "圈存机", type: 6, method: getListtransference },
      //   { name: "打字复印", type: 7, method: getListduplicate },
      //   { name: "AED", type: 8, method: getListaed },
      //   { name: "银行网点", type: 9, method: getListnetwork },
      //   { name: "通信营业厅", type: 10, method: getListsignal },
      // ],
      // openData6: [{ name: "停车场", type: 1, method: getListparking }],
      // openData5: [{ name: "出入口", type: 1, method: getListdoor }],
      openData3: [
        { name: "食堂餐厅", type: 1, method: getListlivingFacilitiesr },
        { name: "购物超市", type: 2, method: getListsupermarket },
        { name: "校内医疗", type: 3, method: getListmedical },
        { name: "邮寄快递", type: 4, method: getListmail },
        { name: "学生浴室", type: 5, method: getListbathroom },
        // { name: "圈存机", type: 6 ,method:getListlivingFacilitiesr},
        { name: "打字复印", type: 7, method: getListduplicate },
        { name: "AED", type: 8, method: getListaed },
        { name: "银行网点", type: 9, method: getListnetwork },
        { name: "通信营业厅", type: 10, method: getListsignal },
        { name: "食堂餐厅", type: 1, method: getListLifeOnce },
        { name: "购物超市", type: 2, method: getListLifeOnce },
        { name: "校区医疗", type: 3, method: getListLifeOnce },
        { name: "邮寄快递", type: 4, method: getListLifeOnce },
        { name: "校区浴室", type: 5, method: getListLifeOnce },
        // { name: "圈存机", type: 6, method: getListLifeOnce },
        { name: "打字复印", type: 7, method: getListLifeOnce },
        { name: "银行网点", type: 8, method: getListLifeOnce },
        { name: "AED", type: 9, method: getListLifeOnce },
        { name: "通信营业厅", type: 10, method: getListLifeOnce },
        { name: "停车场", type: 11, method: getListLifeOnce },
        { name: "出入口", type: 12, method: getListLifeOnce },
      ],
      openData4: [
        { name: "文化风景", type: 1, method: getListlivingFacilitiesr },
        { name: "文化风景", type: 5, method: getChildNavList },
        { name: "活动", type: 1, method: getActivity },
      ],
      openData5: [
        { name: "出入口", type: 1, method: getListlivingFacilitiesr },
      ],
      openData6: [{ name: "停车场", type: 1, method: getListparking }],
      openData6: [{ name: "停车场", type: 11, method: getListLifeOnce }],
      openData5: [{ name: "出入口", type: 12, method: getListLifeOnce }],
      useHD: false,
    };
  },
  mounted() {},
  mounted() {
    this.getActivitys();
    if (this.useHD) {
      this.choiceDataDown[3] = { name: "" };
    }
  },
  methods: {
    openBigPopup(val) {
    //活动点击事件
    openHDPopup(val) {
      console.log(val);
      //开启底部弹窗  关闭本弹窗
      let d = {
        state: true,
        value: val,
      };
      this.$store.commit("set_showActivity", d);
      this.closeBigPopupAfter();
    },
    //获取活动数据
    getActivitys() {
      let that = this;
      getActivity().then((res) => {
        const data = res.data.data.records;
        let datas = [...data];
        let num = datas.length;
        //划分出每组3个的二维数组
        let many = parseInt(num / 3); //整数组
        let over = parseInt(num % 3); //余数组
        //赋值整数组
        let integers = [];
        let i = 0;
        for (let index = 0; index < many; index++) {
          let integersins = [];
          for (let indexs = 0; indexs < 3; indexs++) {
            integersins.push({
              name: datas[i].hdname,
              opendata: datas[i],
              icon: "el-icon-s-opportunity",
            });
            i++;
          }
          integers.push(integersins);
        }
        //赋值余数组
        let integersOvers = [];
        for (let overI = 0; overI < over; overI++) {
          integersOvers.push({
            name: datas[i].hdname,
            opendata: datas[i],
            icon: "el-icon-s-opportunity",
          });
          i++;
        }
        let lastOver = 3 - over;
        for (let overM = 0; overM < lastOver; overM++) {
          integersOvers.push({ data: "not" });
        }
        integers.push(integersOvers);
        that.avtivityData = integers;
      });
    },
    openBigPopup(val) {
      if (val.name == "活动" && !this.useHD) {
        this.openHDPopup(this.avtivityData[0][0]);
        //隐藏右侧栏
        this.$store.commit("SET_SeeAndNotSee", false);
        return;
      }
      const d = {
        main: this[val.opendata],
        qurey: val.name,
      };
@@ -145,22 +285,46 @@
  align-items: center;
  justify-content: center;
}
#mobilePopupOurAfter {
.mobilePopupOurAfter {
  font-size: 18px;
  position: fixed;
  top: 37.5%;
  left: 13.5%;
  // left: 13.5%;
  left: -1000px;
  width: 75%;
  height: 25%;
  height: auto;
  min-height: 155px;
  background-color: #fff;
  box-shadow: 0px 0px 5px #29baf1;
  transition: all 0.5s;
  // background-image: linear-gradient(
  //     // 135deg,
  //     #28bbf06c 30px,
  //     #28bbf06c 30px,
  //     // #28bbf06c 50%,
  //     // transparent 50%
  //     #28bbf06c 100%,
  //     transparent 100%
  //   ),
  //   linear-gradient(
  //     // -45deg,
  //     transparent 30px,
  //     #28bbf06c 30px,
  //     // #28bbf06c 50.1%,
  //     // transparent 50%
  //     #28bbf06c 100%,
  //     transparent 100%
  //   );
  z-index: 300;
  .m_p_a_heard {
    width: 100%;
    height: 35px;
    box-sizing: border-box;
    padding: 5px 15px;
    color: #fff;
    @extend .flexCenter;
    justify-content: space-between;
    background-color: #a40000;
    background-color: #29baf1;
    div {
      width: 35px;
      height: 35px;
@@ -171,25 +335,45 @@
      color: #fff;
    }
  }
  .m_p_a_hdheard {
    margin: 5px 0;
  }
  .m_p_a_center {
    width: 100%;
    height: calc(100% - 35px);
    // height: calc(100% - 35px);
    height: auto;
    @extend .flexCenter;
    flex-direction: column;
    padding: 10px 0;
    .m_p_a_center_group {
      width: 100%;
      height: 40%;
      height: auto;
      @extend .flexCenter;
      .m_p_a_center_once {
        width: 30%;
        height: 100%;
        background-color: #a40000;
        height: 50px;
        // background-image: linear-gradient(#29baf1, #28bbf06c);
        // background-color: #a40000;
        background-color: #29baf1;
        color: #fff;
        // border: 2px solid rgba(105, 215, 255, 0.658);
        border: 2px solid rgb(255, 255, 255);
        @extend .flexCenter;
        flex-direction: column;
        // &:hover {
        // background-image: linear-gradient(#09b7fc, #28bbf0a4);
        // }
      }
      .m_p_a_center_once_notblue {
        background-color: #fff !important;
      }
    }
  }
}
</style>
.ismBigPopupAfter {
  left: 13.5%;
}
.m_p_a_c_o_down {
  font-size: 14px;
}
</style>