1

mayisheng

2022-08-15 81f54040c2cb65537c6c6e1db8358a39a57dea0d

 src/components/mobilePopupOurAfter/index.vue

@@ -1,195 +1,387 @@
<template>
  <div id="mobilePopupOurAfter">
    <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"
          v-for="(item, index) in choiceDataUp"
          @click="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>
    <!-- 信息窗口导航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>
      <div class="m_p_a_center_group">
        <div
          class="m_p_a_center_once"
          v-for="(item, index) in choiceDataDown"
          @click="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_center">
            <div class="m_p_a_center_group">
                <div
                    :class="[
            'm_p_a_center_once',
            item.name ? '' : 'm_p_a_center_once_notblue',
          ]"
                    v-for="(item, index) in choiceDataUp"
                    @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.seeName || item.name }}</div>
                </div>
            </div>
            <div class="m_p_a_center_group">
                <div
                    :class="[
            'm_p_a_center_once',
            item.name ? '' : 'm_p_a_center_once_notblue',
          ]"
                    v-for="(item, index) in choiceDataDown"
                    @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.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>
      </div>
    </div>
  </div>
</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",
  data() {
    return {
      choiceValue: "",
      choiceDataUp: [
        {
          name: "机构单位",
          icon: "el-icon-s-cooperation",
          opendata: "openData1",
        },
        {
          name: "校园建筑",
          opendata: "openData2",
          icon: "el-icon-s-management",
        },
        {
          name: "生活设施",
          opendata: "openData3",
          icon: "el-icon-s-flag",
        },
      ],
      choiceDataDown: [
        {
          name: "文化风景",
          opendata: "openData4",
          icon: "el-icon-s-opportunity",
        },
        {
          name: "出入口",
          opendata: "openData5",
          icon: "el-icon-s-promotion",
        },
        {
          name: "停车场",
          opendata: "openData6",
          icon: "el-icon-s-flag",
        },
      ],
      openData1: [
        { name: "党群机构", type: 1, method: getList },
        { name: "职能部处", type: 2, method: getList },
        { name: "直属及附属单位", type: 3, method: getList },
        { name: "教学与科研机构", type: 4, method: getList },
        { name: "其他机构", type: 5, method: getList },
      ],
      openData2: [
        { name: "行政办公", type: 1, method: getChildNavList },
        { name: "教学科研", type: 2, 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:getListlivingFacilitiesr},
        { name: "打字复印", type: 7, method: getListduplicate },
        { name: "AED", type: 8, method: getListaed },
        { name: "银行网点", type: 9, method: getListnetwork },
        { name: "通信营业厅", type: 10, method: getListsignal },
      ],
      openData4: [
        { name: "文化风景", type: 1, method: getListlivingFacilitiesr },
      ],
      openData5: [
        { name: "出入口", type: 1, method: getListlivingFacilitiesr },
      ],
      openData6: [{ name: "停车场", type: 1, method: getListparking }],
    };
  },
  mounted() {},
  methods: {
    openBigPopup(val) {
      let d = {
        main: this[val.opendata],
        qurey: val.name,
      };
      this.$store.commit("MSET_POPUPOUROPENDATA", d);
      this.$store.commit("MSET_BIGPOPUP", val);
    name: 'mobilePopupOurAfter',
    computed: {
        ...mapGetters(['mBigPopupAfter'])
    },
    closeBigPopupAfter() {
      this.$store.commit("MSET_BIGPOPUPAFTER", false);
    data () {
        return {
            choiceValue: '',
            choiceDataUp: [
                {
                    // seeName: "校区内机构导览",
                    name: '机构单位',
                    icon: 'el-icon-s-cooperation',
                    opendata: 'openData1'
                },
                {
                    name: '校区建筑',
                    opendata: 'openData2',
                    icon: 'el-icon-s-management'
                },
                {
                    // seeName: "生活服务设施",
                    name: '生活设施',
                    opendata: 'openData3',
                    icon: 'el-icon-s-flag'
                }
            ],
            choiceDataDown: [
                {
                    name: '出入口',
                    opendata: 'openData5',
                    icon: 'el-icon-s-promotion'
                },
                {
                    name: '停车场',
                    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 },
                { name: '职能部处', type: 2, method: getList },
                { name: '直属及附属单位', type: 3, method: getList },
                { name: '教学与科研机构', type: 4, method: getList },
                { name: '其他机构', type: 5, method: getList }
            ],
            openData2: [
                { name: '行政办公', type: 1, method: getChildNavList },
                { name: '教学科研', type: 2, 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: 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: 5, method: getChildNavList },
                { name: '活动', type: 1, method: getActivity }
            ],
            openData6: [{ name: '停车场', type: 11, method: getListLifeOnce }],
            openData5: [{ name: '出入口', type: 12, method: getListLifeOnce }],
            useHD: true
        }
    },
  },
};
    mounted () {
        this.getActivitys()
        if (this.useHD) {
            this.choiceDataDown.pop()
            this.choiceDataDown.push({ name: '' })
        }
    },
    methods: {
        // 活动点击事件
        openHDPopup (val) {
            console.log(val)
            // 开启底部弹窗  关闭本弹窗
            const d = {
                state: true,
                value: val
            }
            this.$store.commit('set_showActivity', d)
            this.closeBigPopupAfter()
        },
        // 获取活动数据
        getActivitys () {
            const that = this
            getActivity().then((res) => {
                const data = res.data.data.records
                const datas = [...data]
                const num = datas.length
                // 划分出每组3个的二维数组
                const many = parseInt(num / 3) // 整数组
                const over = parseInt(num % 3) // 余数组
                // 赋值整数组
                const integers = []
                let i = 0
                for (let index = 0; index < many; index++) {
                    const 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)
                }
                // 赋值余数组
                const integersOvers = []
                for (let overI = 0; overI < over; overI++) {
                    integersOvers.push({
                        name: datas[i].hdname,
                        opendata: datas[i],
                        icon: 'el-icon-s-opportunity'
                    })
                    i++
                }
                const 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
            }
            this.$store.commit('MSET_POPUPOUROPENDATA', d)
            this.$store.commit('MSET_BIGPOPUP', val)
        },
        closeBigPopupAfter () {
            this.$store.commit('MSET_BIGPOPUPAFTER', false)
        }
    }
}
</script>

<style lang="scss" scoped>
.flexCenter {
  display: flex;
  align-items: center;
  justify-content: center;
    display: flex;
    align-items: center;
    justify-content: center;
}
#mobilePopupOurAfter {
  position: fixed;
  top: 37.5%;
  left: 13.5%;
  width: 75%;
  height: 25%;
  background-color: #fff;
  z-index: 300;
  .m_p_a_heard {
    width: 100%;
    height: 35px;
    box-sizing: border-box;
    padding: 5px 15px;
    @extend .flexCenter;
    justify-content: space-between;
    background-color: #a40000;
    div {
      width: 35px;
      height: 35px;
      @extend .flexCenter;
    }
    .icon {
      font-size: 24px;
      color: #fff;
    }
  }
  .m_p_a_center {
    width: 100%;
    height: calc(100% - 35px);
    @extend .flexCenter;
    flex-direction: column;
    .m_p_a_center_group {
      width: 100%;
      height: 40%;
      @extend .flexCenter;
      .m_p_a_center_once {
        width: 30%;
        height: 100%;
        background-color: #a40000;
.mobilePopupOurAfter {
    font-size: 18px;
    position: fixed;
    top: 37.5%;
    // left: 13.5%;
    left: -1000px;
    width: 75%;
    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;
        border: 2px solid rgb(255, 255, 255);
        @extend .flexCenter;
        justify-content: space-between;
        background-color: #29baf1;
        div {
            width: 35px;
            height: 35px;
            @extend .flexCenter;
        }
        .icon {
            font-size: 24px;
            color: #fff;
        }
    }
    .m_p_a_hdheard {
        margin: 5px 0;
    }
    .m_p_a_center {
        width: 100%;
        // height: calc(100% - 35px);
        height: auto;
        @extend .flexCenter;
        flex-direction: column;
      }
        padding: 10px 0;
        .m_p_a_center_group {
            width: 100%;
            height: auto;
            @extend .flexCenter;
            .m_p_a_center_once {
                width: 30%;
                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>