From 81f54040c2cb65537c6c6e1db8358a39a57dea0d Mon Sep 17 00:00:00 2001
From: mayisheng <admin>
Date: Mon, 15 Aug 2022 16:14:01 +0800
Subject: [PATCH] 1
---
src/components/mobilePopupOurAfter/index.vue | 708 +++++++++++++++++++++++++++++-----------------------------
1 files changed, 357 insertions(+), 351 deletions(-)
diff --git a/src/components/mobilePopupOurAfter/index.vue b/src/components/mobilePopupOurAfter/index.vue
index d34c76b..94744ff 100644
--- a/src/components/mobilePopupOurAfter/index.vue
+++ b/src/components/mobilePopupOurAfter/index.vue
@@ -1,381 +1,387 @@
<template>
- <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>
+ <!-- 信息窗口导航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',
+ 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 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>
</template>
<script>
-import { mapGetters } from "vuex";
-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,
- // getListtransference,
- getListLifeOnce, // 所有的
-} from "@/api/mobile/livingFacilities/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"; //活动
+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: 'mobilePopupOurAfter',
+ computed: {
+ ...mapGetters(['mBigPopupAfter'])
+ },
+ 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()
},
- {
- name: "校区建筑",
- opendata: "openData2",
- icon: "el-icon-s-management",
+ // 获取活动数据
+ 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
+ })
},
- {
- // seeName: "生活服务设施",
- name: "生活设施",
- opendata: "openData3",
- icon: "el-icon-s-flag",
+ 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)
},
- ],
- 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: "" });
+ closeBigPopupAfter () {
+ this.$store.commit('MSET_BIGPOPUPAFTER', false)
+ }
}
- },
- methods: {
- //活动点击事件
- 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,
- };
- 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 {
- 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;
- @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);
+ font-size: 18px;
+ position: fixed;
+ top: 37.5%;
+ // left: 13.5%;
+ left: -1000px;
+ width: 75%;
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;
+ 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 rgba(105, 215, 255, 0.658);
- 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;
- // &:hover {
- // background-image: linear-gradient(#09b7fc, #28bbf0a4);
- // }
- }
- .m_p_a_center_once_notblue {
- background-color: #fff !important;
- }
+ 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;
+ }
+ }
}
- }
}
.ismBigPopupAfter {
- left: 13.5%;
+ left: 13.5%;
}
.m_p_a_c_o_down {
- font-size: 14px;
+ font-size: 14px;
}
</style>
--
Gitblit v1.9.3