component.uvue

<template>
  <!-- #ifdef APP -->
  <scroll-view style="flex: 1; background-color: #f8f8f8" enable-back-to-top="true">
  <!-- #endif -->
    <view class="uni-container">
      <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内置组件，展示样式仅供参考，文档详见：</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="item">
          <view v-for="page in menuItem.pages" :key="page!.path" class="uni-navigate-item" hover-class="is--active"
            @click="goPage(`/${page.path}`)">
            <text class="uni-navigate-text" :class="{'left-win-active': leftWinActive === page.path && hasLeftWin}">{{
                page.style["navigationBarTitleText"]
              }}</text>
            <image :src="arrowRightIcon" class="uni-icon-size"></image>
          </view>
          <uni-collapse style="width: 100%" v-for="childMenu in menuItem.children" :key="childMenu!.id">
            <uni-collapse-item :title="childMenu.name" class="item" style="margin-bottom: 0">
              <view class="uni-navigate-item" hover-class="is--active" v-for="childPage in childMenu.pages"
                :key="childPage!.path" @click="goPage(`/${childPage.path}`)">
                <text class="uni-navigate-text" :class="{'left-win-active': leftWinActive === childPage.path && hasLeftWin}">{{
                    childPage.style["navigationBarTitleText"]
                  }}</text>
                <image :src="arrowRightIcon" class="uni-icon-size"></image>
              </view>
            </uni-collapse-item>
          </uni-collapse>
        </uni-collapse-item>
      </uni-collapse>

      <!-- #ifdef UNI-APP-X && APP -->
      <uni-upgrade-center-app ref="upgradePopup" @show="upgradePopupShow" @close="upgradePopupClose" />
      <!-- #endif -->
    </view>
  <!-- #ifdef APP -->
  </scroll-view>
  <!-- #endif -->
</template>

<script lang="uts">
  import { generateMenu } from './generateMenu.uts'
  import { MenuItem } from './generateMenu.uts'
  const menu = generateMenu('pages/component')
  // #ifdef UNI-APP-X && 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 | null)[],
        arrowRightIcon: '/static/icons/arrow-right.png' as string.ImageURIString,
        pageHiden: false
      }
    },
    computed: {
      hasLeftWin(){
        return !state.noMatchLeftWindow
      },
      leftWinActive(){
        return state.leftWinActive.slice(1)
      }
    },
    methods: {
      goPage(url : string) {
        uni.navigateTo({ url })
      },
      // #ifdef UNI-APP-X && APP
      upgradePopupShow() {
        console.log('upgradePopup show');
        if (!this.pageHiden) {
          uni.hideTabBar()?.catch(_ => { })
        }
      }
      , upgradePopupClose() {
        console.log('upgradePopup close');
        uni.showTabBar()?.catch(_ => { })
      }
      // #endif
    },
    // #ifdef WEB
    watch:{
    	$route: {
    		immediate: true,
    		handler(newRoute) {
    			if (newRoute.matched.length) {
            const activeCategoryIndex = this.menu.findIndex(menuItem => menuItem?.pages.some(page => this.leftWinActive && this.leftWinActive === page?.path))
            if (activeCategoryIndex > -1) {
              this.$nextTick(() => {
                ((this.$refs.category as ComponentPublicInstance[])[activeCategoryIndex])?.$callMethod('openCollapse', true)
              })
            }
    			}
    		}
    	}
    },
    // #endif
    onReady() {
      // #ifdef UNI-APP-X && APP
      checkUpdate(this.$refs['upgradePopup'] as UniUpgradeCenterAppComponentPublicInstance)
      // #endif
    },
    onShow() {
      this.pageHiden = false
    },
    onHide() {
      this.pageHiden = true
    },
    beforeUnmount() {
      uni.showTabBar()?.catch(_ => { })
    }
  }
</script>

<style>
  .item {
    margin-bottom: 12px;
  }
</style>