index.vue

<template>
  <view class="workbench">
    <CustomNavBar :title="t('app.menu.allToolsPage')" :is-tab="true">
      <!-- #ifdef MP-WEIXIN -->
 <!--     <template v-slot:left>
        <uv-icon name="grid" color="#fff" size="20px" @tap="goSetting"></uv-icon>
      </template> -->
      <!-- #endif -->
      <!-- #ifndef MP-WEIXIN -->
<!--      <template v-slot:right>
        <uv-icon name="grid" color="#fff" size="20px" @tap="goSetting"></uv-icon>
      </template> -->
      <!-- #endif -->
    </CustomNavBar>
    <view class="w-b-list">
      <view v-for="appItem in computedDisplayList" :key="appItem.sectionKey" class="m-block">
        <!-- <view class="m_b_title">{{ t(appItem.displayName) }}</view> -->
        <uv-text bold :text="t(appItem.displayName)" align="left" size="28rpx" color="#202328" :lines="1"></uv-text>
        <view class="m_b_list">
          <view class="menu-item" v-for="menuItem in appItem.items" :key="menuItem.itemKey"
            @tap="()=>handleLinkTo(menuItem)">
            <image :src="getImgSrc(menuItem)" mode="" style="width: 88rpx;height: 88rpx;"></image>
            <view>{{ t(menuItem.displayName) }}</view>
          </view>
        </view>
      </view>
    </view>
  </view>
</template>

<script setup>
  import {
    APP_MENU
  } from './data'
  import {
    getStageObj
  } from '@/utils'
  import {
    onShow,
    onLoad
  } from '@dcloudio/uni-app'
  import {
    computed,
    ref
  } from 'vue'
  import CustomNavBar from '@/components/CustomNav.nvue'
  import {
    t,
    updateTabBarText
  } from '@/plugins/index.js'
  onLoad(()=>{
    updateTabBarText()
  })

  const displayList = ref(APP_MENU)
  onShow(() => {
    const workbenchInfo = getStageObj('workbenchInfo')
    if (workbenchInfo) {
      displayList.value = workbenchInfo.displayList
    }
  })

  // 只展示显示的数据
  const computedDisplayList = computed(() => {
    return displayList.value.filter(item => item.items.length > 0)
  })

  const goSetting = () => {
    uni.navigateTo({
      url: '/pages/workbench/setting'
    })
  }

  const getImgSrc = (menuItem) => {
    return `/static/workbench/${menuItem.icon}.png`
  }

  // 跳转
  const handleLinkTo = (menuItem) => {
    console.log('menuItem', menuItem)
    if (menuItem.tab) {
      uni.switchTab({
        url: menuItem.tab
      })
      return false
    }

    // 子集itemKey
    const subKeys = [
      'customerPortrait',
      'stayDuration',
      'conversionAnalysis',
      'storeRanking',
       'storeHeatmap',
       'areaStatistics',
       'areaHeatmap',
      'inspectionRecords',
      'pendingTasks',
      'GroupStats',
      'StoreStats'
      ]
    if (subKeys.includes(menuItem.itemKey)) {
      const url = `/subPackages/accountGroup${menuItem.path.includes('/inspection')?'':'/pages'}${menuItem.path}${menuItem.path.includes('/inspection')?'':'/index'}`
      uni.navigateTo({url})
    } else {
      console.log('跳转111', menuItem.path);
      
      uni.navigateTo({
        url: `${menuItem.path}/index`,
      })
    }
  }
</script>

<style lang="scss" scoped>
  .w-b-list {
    padding: 20rpx;
  }

  .workbench {
    min-height: 100vh;
    background-color: #F2F3F6;

    .m-block {
      background-color: #FFFFFF;
      border-radius: 16rpx;
      margin-bottom: 20rpx;
      padding: 28rpx 24rpx 0;

      &:last-child {
        margin-bottom: 0;
      }

      .m_b_title {
        font-weight: bold;
        font-size: 28rpx;
        color: #202328;
      }

      .m_b_list {
        display: flex;
        flex-wrap: wrap;
        margin-top: 32rpx;

        .menu-item {
          width: 25%;
          text-align: center;
          font-size: 24rpx;
          color: #202328;
          margin-bottom: 32rpx;

          image {
            margin-bottom: 6rpx;
          }
          view{
            overflow: hidden;
            text-overflow: ellipsis;
            white-space: nowrap;
          }
        }
      }
    }
  }
</style>