OmniCard/mpuniapp/pages/tabBar/component.uvue

<template>
  <!-- #ifdef APP -->
  <scroll-view style="flex: 1;" enable-back-to-top="true">
    <!-- #endif -->
    <view class="uni-container" :class="isDarkMode ? 'theme-dark' : 'theme-light'">
      <view v-if="!hasLeftWin" class="uni-header-logo">
        <image class="uni-header-image" src="/static/componentIndex.png"></image>
      </view>
      <view v-if="!hasLeftWin" class="uni-text-box">
        <text class="hello-text">uni-app x内置组件，文档详见：</text>
        <uni-link class="hello-text" href="https://doc.dcloud.net.cn/uni-app-x/component/"
        <!-- #ifndef MP -->
        target="_blank"
        <!-- #endif -->
        >
          https://doc.dcloud.net.cn/uni-app-x/component/
        </uni-link>
      </view>
      <uni-collapse>
        <uni-collapse-item ref="categoryRef" v-for="menuItem in menu" :key="menuItem.id" :title="menuItem.name"
          :open="menuItem.id == 'view-container'" class="uni-panel" title-wrap-class="component-collapse-title-wrap"
          title-class="component-collapse-title" content-wrap-class="component-collapse-content-wrap"
          arrow-class="component-collapse-arrow">
          <template v-for="childMenuItem in menuItem.items" :key="childMenuItem.id">
            <view v-if="childMenuItem.items.length==0" class="uni-navigate-item" hover-class="is--active"
              @click="goPage(`/${childMenuItem.path}`)">
              <text class="uni-navigate-text" :class="{
                  'left-win-active': leftWinActive === childMenuItem.path && hasLeftWin,
                }">{{ childMenuItem.style["navigationBarTitleText"] }}</text>
              <view class="right_arrow"></view>
            </view>
            <uni-collapse v-else style="width: 100%;border-top: 1px solid var(--border-color);">
              <uni-collapse-item :title="childMenuItem.name" class="uni-panel" style="margin-bottom: 0;"
                title-wrap-class="component-collapse-title-wrap component-collapse-sub-title-wrap" title-class="component-collapse-title"
                content-wrap-class="component-collapse-content-wrap" arrow-class="component-collapse-arrow">
                <view class="uni-navigate-item component-collapse-sub-navigate-item" hover-class="is--active"
                  v-for="grandChildMenuItem in childMenuItem.items" :key="grandChildMenuItem.path"
                  @click="goPage(`/${grandChildMenuItem.path}`)">
                  <text class="uni-navigate-text" :class="{
                      'left-win-active':
                        leftWinActive === grandChildMenuItem.path && hasLeftWin,
                    }">{{ grandChildMenuItem.style["navigationBarTitleText"] }}</text>
                  <view class="right_arrow"></view>
                </view>
              </uni-collapse-item>
            </uni-collapse>
          </template>
        </uni-collapse-item>
      </uni-collapse>
    </view>
    <!-- #ifdef APP -->
  </scroll-view>
  <!-- #endif -->
</template>

<script setup lang="uts">
  defineOptions({
    styleIsolation: 'app'
  })

  const activeIndex = inject<Ref<number>>('tabBarCurrentIndex', ref(0))

  const instance = getCurrentInstance()!.proxy!

  import { generateMenu, MenuItem } from './generateMenu.uts'
  const menuData = generateMenu('pages/component')
  // #ifdef APP
  import checkUpdate from '@/uni_modules/uni-upgrade-center-app/utils/check-update'
  // #endif
  import { state } from '@/store/index.uts'

  // Template refs
  const categoryRef = ref<ComponentPublicInstance[] | null>(null)

  const menu = ref(menuData as MenuItem[])
  const pageHiden = ref(false)

  const hasLeftWin = computed((): boolean => {
    return !state.noMatchLeftWindow
  })

  const leftWinActive = computed((): string => {
    return state.leftWinActive.slice(1)
  })

  const isDarkMode = computed((): boolean => {
    return state.isDarkMode
  })

  const netless = computed((): boolean => {
    return state.netless
  })

  function goPage(url : string) {
    if (hasLeftWin.value) {
      uni.reLaunch({ url })
    } else {
      uni.navigateTo({ url })
    }
  }

  // #ifdef APP-HARMONY
  watch(netless, (netlessValue) => {
    if (netlessValue) {
      menu.value = menu.value.filter(item => {
        return !['unicloud'].includes(item.id)
      })
    }
  }, { immediate: true })
  // #endif

  onReady(() => {
    // #ifdef APP
    if (process.env.NODE_ENV !== 'development') {
      uni.getPrivacySetting({
        success(res) {
          if (res.needAuthorization) {
            let cbId: number = 0
            cbId = uni.onPrivacyAuthorizationChange(() => {
              checkUpdate()
              uni.offPrivacyAuthorizationChange(cbId)
            })
          } else {
            checkUpdate()
          }
        }
      })
    }
    // #endif
  })

  onPageShow(() => {
    pageHiden.value = false
  })

  onHide(() => {
    pageHiden.value = true
  })

  onBeforeUnmount(() => {
    uni.showTabBar()?.catch(_ => { })
  })

  // #ifdef WEB
  watch(() => (instance as any).$route, (newRoute: any) => {
    if (newRoute && newRoute.matched.length) {
      const routePath = newRoute.path.slice(1)
      if (!routePath.startsWith('pages/component/')) {
        return
      }
      const activeCategoryIndex = menu.value.findIndex(menuItem => menuItem?.items.some(item => routePath === item?.path))
      if (activeCategoryIndex > -1) {
        nextTick(() => {
          const categoryRefs = categoryRef.value
          if (categoryRefs != null && categoryRefs[activeCategoryIndex] != null) {
            categoryRefs[activeCategoryIndex].$callMethod('openCollapse', true)
          }
        })
      }
    }
  }, { immediate: true })
  // #endif


  function openPreviewImageTest() {
    uni.previewImage({
      urls: ['/static/test-image/logo.jpg'],
      current: 0
    })
  }

  function closePreviewImageTest() {
    uni.closePreviewImage({})
  }

  defineExpose({
    openPreviewImageTest,
    closePreviewImageTest
  })

</script>

<style>
  /* web端适配暗黑主题 */
  /* #ifdef WEB */
  .uni-container.theme-dark {
    min-height: calc(100vh - var(--uni-safe-area-inset-top));
  }

  /* #endif */

  .right_arrow {
    width: 8px;
    height: 8px;
    margin-left: 12px;
    transform: rotate(-45deg);
    border-right-width: 1px;
    border-right-style: solid;
    border-right-color: var(--arrow-color, #999999);
    border-bottom-width: 1px;
    border-bottom-style: solid;
    border-bottom-color: var(--arrow-color, #999999);
  }

  .component-collapse-title-wrap {
    background-color: var(--list-background-color, #ffffff);
  }

  .component-collapse-sub-title-wrap {
    padding-left: 16px;
    padding-right: 20px;
  }

  .component-collapse-title {
    color: var(--text-color, #333333);
  }

  .component-collapse-content-wrap {
    background-color: var(--list-background-color, #ffffff);
  }

  .component-collapse-arrow {
    border-right-color: var(--arrow-color, #999999);
    border-bottom-color: var(--arrow-color, #999999);
  }

  .component-collapse-sub-navigate-item {
    padding-right: 20px;
  }
</style>