EveryLike/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>
        <u-link :href="'https://uniapp.dcloud.io/uni-app-x/component/'"
          :text="'https://uniapp.dcloud.io/uni-app-x/component/'" :inWhiteList="true"></u-link>
      </view>
      <uni-collapse>
        <uni-collapse-item ref="category" v-for="menuItem in menu" :key="menuItem.id" :title="menuItem.name"
          class="uni-panel">
          <template v-for="childMenuItem in menuItem.items" :key="childMenuItem.id">
            <view v-if="childMenuItem.items.length==0" class="uni-navigate-item pl" 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>
              <image :src="arrowRightIcon" class="uni-icon-size"></image>
            </view>
            <uni-collapse v-else style="width: 100%;border-top: 1px solid #f0f0f0;">
              <uni-collapse-item :title="childMenuItem.name" class="uni-panel" style="margin-bottom: 0;">
                <view class="uni-navigate-item pl" 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>
                  <image :src="arrowRightIcon" class="uni-icon-size"></image>
                </view>
              </uni-collapse-item>
            </uni-collapse>
          </template>
        </uni-collapse-item>
      </uni-collapse>
    </view>
  <!-- #ifdef APP -->
  </scroll-view>
  <!-- #endif -->
</template>

<script lang="uts">
  import { generateMenu, MenuItem } from './generateMenu.uts'
  const menu = generateMenu('pages/component')
  // #ifdef APP
  import checkUpdate from '@/uni_modules/uni-upgrade-center-app/utils/check-update'
  // #endif
  import { state } from '@/store/index.uts'
  export default {
    data() {
      return {
        menu: menu as MenuItem[],
        arrowRightIcon: '/static/icons/arrow-right.png' as string.ImageURIString,
        pageHiden: false
      }
    },
    computed: {
      hasLeftWin() : boolean {
        return !state.noMatchLeftWindow
      },
      leftWinActive() : string {
        return state.leftWinActive.slice(1)
      },
      isDarkMode() : boolean {
        return state.isDarkMode
      },
      netless() : boolean {
        return state.netless
      }
    },
    // #ifdef APP-HARMONY
    watch: {
      'netless': {
        immediate: true,
        handler(netless) {
          if (netless) {
            this.menu = this.menu.filter(item => {
              return !['unicloud'].includes(item.id)
            })
          }
        }
      }
    },
    // #endif
    methods: {
      goPage(url : string) {
        if (this.hasLeftWin) {
          uni.reLaunch({ url })
        } else {
          uni.navigateTo({ url })
        }
      }
    },
    // #ifdef WEB
    watch: {
      $route: {
        immediate: true,
        handler(newRoute) {
          if (newRoute.matched.length) {
            const activeCategoryIndex = this.menu.findIndex(menuItem => menuItem?.items.some(item => this.leftWinActive && this.leftWinActive === item?.path))
            if (activeCategoryIndex > -1) {
              this.$nextTick(() => {
                ((this.$refs.category as ComponentPublicInstance[])[activeCategoryIndex])?.$callMethod('openCollapse', true)
              })
            }
          }
        }
      }
    },
    // #endif
    onReady() {
      // #ifdef UNI-APP-X && APP
      uni.getPrivacySetting({
        success(res) {
          if (process.env.NODE_ENV !== 'development') {
            if (res.needAuthorization) {
              uni.onPrivacyAuthorizationChange((res) => {
                if (!res.needAuthorization) {
                  checkUpdate()
                }
              })
            } else {
              checkUpdate()
            }
          }
        }
      })
      // #endif
    },
    onShow() {
      this.pageHiden = false
    },
    onHide() {
      this.pageHiden = true
    },
    beforeUnmount() {
      uni.showTabBar()?.catch(_ => { })
    }
  }
</script>

<style>
  .pl {
    padding-left: 18px
  }

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

  /* #endif */
</style>