jonhon-mes-PDA/pages/home/home.vue

<template>
  <ifrm ref="ifrm">
    <view class="content">
      <!-- <view class="noticeBox" v-show="noticeText != ''">
                <uni-notice-bar :speed="80" scrollable show-get-more show-icon more-text="查看更多" :text="noticeText"
                    @getmore="getMore" />
            </view> -->
      <view class="contentCls">
        <!-- 分组遍历 -->
        <view
          class="menuGroup"
          v-for="(group, groupIndex) in menuList"
          :key="groupIndex"
        >
          <!-- 分组标题 -->
          <view class="groupTitle">{{ group.groupName }}</view>

          <!-- 分组内菜单 -->
          <view class="viewCls">
            <Grid class="gridCls">
              <GridItem
                v-for="(item, key) in group.items"
                :key="key"
                class="gridItem"
              >
                <ItemNav
                  width="60"
                  height="60"
                  :background="item.bgColor"
                  :border="`0px solid ` + item.bgColor"
                  @click="itemClick(item)"
                >
                  <image
                    style="width: 120rpx; height: 120rpx"
                    slot="image"
                    :src="item.src"
                  />
                  <text slot="text">{{ item.title }}</text>
                </ItemNav>
              </GridItem>
            </Grid>
          </view>
        </view>
      </view>
    </view>
  </ifrm>
</template>

<script>
import uniSegmentedControl from "@/components/uni-segmented-control/uni-segmented-control.vue";
import ifrm from "@/pages/index/ifrm";
import menu from "../index/menu.js";
import Grid from "~/grid.vue";
import GridItem from "~/grid-item.vue";
import ItemNav from "~/item-nav.vue";
export default {
  components: {
    uniSegmentedControl,
    ifrm,
    Grid,
    GridItem,
    ItemNav,
  },
  data() {
    return {
      menuList: [],
      limits: uni.getStorageSync("limits"),
      messList: [],
      time: null,
      noticeText: "",
    };
  },
  methods: {
    getMore() {
      uni.navigateTo({
        url: "./messList",
      });
    },
    onClickItem(e) {
      if (this.current != e.currentIndex) {
        this.current = e.currentIndex;
        this.theDay = [-1, 0, 1][this.current];
      }
    },
    beforeEdit(index) {
      this.curIndex = index;
    },
    itemClick(item) {
      // console.log(item);
      if (item.hadLimit === 0) {
        return;
      }
      uni.navigateTo({
        url: item.url,
      });
    },
    messClick() {
      uni.navigateTo({
        url: "./messList",
      });
    },
    getMessList() {
      this.noticeText = "";
      uni.setStorageSync("showLoading", false);
      this.$ajax.request({
        url: "pfMessage/query",
        method: "POST",
        data: {
          paging: {
            pageNumber: 1,
            pageSize: 999999,
          },
        },
        success: (data) => {
          this.messList = data.list;
          uni.setStorageSync("showLoading", true);
          const num = Math.ceil(
            Math.random() * (this.messList.length - 0 + 1) + 0 - 1
          );
          if (this.messList.length > 0) {
            this.noticeText = this.messList[num].content;
          } else {
            this.noticeText = "";
          }
        },
      });
    },
  },
  onNavigationBarButtonTap(btn) {
    this.$refs.ifrm.topMenuClick(btn);
  },
  onHide() {
    clearInterval(this.time);
  },
  onUnload() {
    clearInterval(this.time);
  },
  onShow() {
    console.log("onShow",uni.getStorageSync("userInfo"));
    uni.setNavigationBarTitle({
      title: "首页 - " + uni.getStorageSync("userInfo")["nick_name"],
    });
    // this.getMessList();
    // this.time = setInterval(() => {
    //   this.getMessList();
    // }, 5 * 1000);
    this.menuList = [];
    const mainMenus = menu.mainMenus();

    if (mainMenus) {
      const rule = menu.menus.rule;
      const menus = mainMenus.menuList

      // 启用分组逻辑
      menus.forEach((group, groupIndex) => {
        const hadLimit = rule[groupIndex];
        const groupMenus = {
          groupName: group.title,
          items: [],
        };

        group.children.forEach((obj) => {
          if (hadLimit === 0) {
            obj.bgColor = "#E5E5E5";
            obj.src = "../../static/images/menus/" + obj.key + "_f.png";
          } else {
            obj.src = "../../static/images/menus/" + obj.key + ".png";
          }
          obj.hadLimit = hadLimit;

          // if (this.limits.includes(obj.limit)) {
            groupMenus.items.push(obj);
          // }
        });
        // 只添加有子菜单的分组
        if (groupMenus.items.length > 0) {
          this.menuList.push(groupMenus);
        }
      });
    }
  },
};
</script>
<style lang="less" scoped>
.noticeBox {
  position: fixed;
  top: 0;
  left: 0;
  right: 0;
  z-index: 99;
}

.uni-badge-left-margin {
  margin-left: 20rpx;
}

.lineView {
  height: 1rpx;
  border-top: 1rpx solid #dddddd;
  margin: 55rpx 40rpx 20rpx 40rpx;
}

.contentCls {
  padding: 10rpx;
}

// 分组容器
.menuGroup {
  margin-bottom: 30rpx;
  background: #ffffff;
  border-radius: 10rpx;
  //   padding: 20rpx;
}

// 分组标题
.groupTitle {
  font-size: 32rpx;
  font-weight: 600;
  color: #333333;
  padding: 10rpx 0;
  padding-left: 15rpx;
  position: relative;

  &::after {
    content: "";
    position: absolute;
    left: 0;
    top: 50%;
    transform: translateY(-50%);
    width: 6rpx;
    height: 32rpx;
    background-color: #00b7ee;
    border-radius: 3rpx;
  }
}

.viewCls {
  font-size: 40rpx;

  .gridCls {
    width: 100%;
    display: flex;
    justify-content: flex-start;
    flex-wrap: wrap;

    .gridItem {
      width: 33.33%;
      display: flex;
      justify-content: center;
    }
  }

  font-weight: 600;
}

text {
  color: #666666;
  font-size: 30rpx;
}
</style>