template.uvue

<template>
  <!-- #ifdef APP -->
  <scroll-view style="flex: 1;" 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/templateIndex.png"></image>
      </view>
      <view v-if="!hasLeftWin" class="uni-text-box">
        <text class="hello-text">以下是部分模板示例，更多模板见插件市场：</text>
        <u-link href="https://ext.dcloud.net.cn" :text="'https://ext.dcloud.net.cn'" :inWhiteList="true"></u-link>
      </view>
      <view class="uni-panel" v-for="(item, index) in list" :key="item.id">
        <view class="uni-panel-h" @click="triggerCollapse(index, item)">
          <text class="uni-panel-text"
            :class="item.enable == false || item.open == true ? 'text-disabled' : '',item.url == leftWinActive && item.pages.length == 0 ? 'left-win-active' : ''">{{ item.name }}</text>
          <image :src="
              item.pages.length > 0
                ? item.open
                  ? arrowUpIcon
                  : arrowDownIcon
                : arrowRightIcon
            " class="uni-icon-size">
          </image>
        </view>
        <view v-if="item.open">
          <view style="padding-left: 18px;" class="uni-navigate-item"
            :hover-class="page.enable == false ? '' : 'is--active'" v-for="(page, key) in item.pages" :key="key"
            @click="goDetailPage(page)">
            <text class="uni-navigate-text"
              :class="{'left-win-active': leftWinActive === page.url  && hasLeftWin,'text-disabled' : page.enable == false}">{{ page.name }}</text>
            <image :src="arrowRightIcon" class="uni-icon-size"></image>
          </view>
        </view>
      </view>
    </view>
  <!-- #ifdef APP -->
  </scroll-view>
  <!-- #endif -->
</template>

<script lang="uts">
  type Page = {
    name : string
    enable ?: boolean
    url : string
  }

  type ListItem = {
    id : string
    name : string
    open : boolean
    pages : Page[]
    url ?: string
    enable ?: boolean
  }
  import { state } from '@/store/index.uts'
  export default {
    data() {
      return {
        list: [
          {
            id: 'slider-100',
            url: 'slider-100',
            name: 'slider-100',
            open: false,
            pages: [] as Page[],
          },
          {
            id: 'long-list',
            url: 'long-list',
            name: '左右滑动长列表',
            open: false,
            enable: true,
            pages: [
              {
                name: 'Android顶部搜索框随时下移长列表',
                url: 'long-list'
              },
              // #ifdef WEB
              {
                name: '顶部banner长列表（嵌套滚动）',
                url: 'long-list2'
              },
              // #endif
              // #ifdef APP-IOS || APP-ANDROID
              {
                name: '顶部banner长列表（嵌套滚动）',
                url: 'long-list-nested'
              },
              // #endif
            ] as Page[],
          },
          {
            id: 'list-news',
            url: 'list-news',
            name: '列表到详情（吸顶）',
            open: false,
            pages: [] as Page[],
          },
          {
            id: 'swiper-list',
            url: 'swiper-list',
            name: 'swiper-list',
            open: false,
            pages: [
              {
                name: '下划线样式',
                url: 'swiper-list'
              },
              {
                name: '字体放大样式',
                url: 'swiper-list2'
              },
            ] as Page[],
          },
          {
            id: 'custom-long-list',
            url: 'custom-long-list',
            name: '自定义虚拟长列表uni-recycle-view',
            open: false,
            pages: [] as Page[],
          },
          {
            id: 'scroll-fold-nav',
            url: 'scroll-fold-nav',
            name: '随滚动折叠的导航栏',
            open: false,
            pages: [] as Page[],
          },
          // #ifdef APP
          {
            id: 'custom-refresher',
            url: 'custom-refresher',
            name: '自定义下拉刷新',
            open: false,
            pages: [] as Page[],
          },
          {
            id: 'pull-zoom-image',
            url: 'pull-zoom-image',
            name: '下拉缩放顶部封面图',
            open: false,
            pages: [] as Page[],
          },
          {
            id: 'scroll-sticky',
            url: 'scroll-sticky',
            name: 'scroll-view自定义滚动吸顶',
            open: false,
            pages: [] as Page[],
          },
          // #endif
          {
            id: 'swiper-vertical-video',
            url: 'swiper-vertical-video',
            name: '竖滑视频',
            open: false,
            pages: [] as Page[],
          },
          {
            id: 'half-screen',
            url: 'half-screen',
            name: '半屏弹窗',
            open: false,
            pages: [] as Page[],
          },
          {
            id: 'drop-card',
            url: 'drop-card',
            name: '划走式卡片',
            open: false,
            pages: [] as Page[],
          },
          {
            id: 'navbar-lite',
            url: 'navbar-lite',
            name: '自定义导航栏',
            open: false,
            pages: [] as Page[],
          },
          {
            id: 'custom-tab-bar',
            url: 'custom-tab-bar',
            name: '自定义TabBar',
            open: false,
            enable: true,
            pages: [] as Page[],
          },
          // #ifdef APP
          {
            id: 'calendar',
            url: 'calendar',
            name: '日历',
            open: false,
            pages: [] as Page[],
          },
          // #endif
          // #ifdef APP || WEB
          {
            id: 'schema',
            url: 'schema',
            name: '打开外部链接',
            open: false,
            pages: [] as Page[],
          },
          // #endif
          // #ifdef WEB
          {
            id: 'browser-element',
            url: 'browser-element',
            name: '如何使用浏览器 element',
            open: false,
            pages: [] as Page[],
          },
          // #endif
          // #ifdef MP
          {
            id: 'vant',
            url: 'vant',
            name: '微信自定义组件示例',
            open: false,
            pages: [] as Page[],
          },
          // #endif
        ] as ListItem[],
        arrowUpIcon: '/static/icons/arrow-up.png',
        arrowDownIcon: '/static/icons/arrow-down.png',
        arrowRightIcon: '/static/icons/arrow-right.png',
      }
    },
    computed: {
      hasLeftWin() : boolean {
        return !state.noMatchLeftWindow
      },
      leftWinActive() : string {
        return state.leftWinActive.split('/')[3]
      }
    },
    methods: {
      triggerCollapse(index : number, item : ListItem) {
        if (item.pages.length == 0) {
          const page : Page = {
            name: item.name,
            enable: item.enable,
            url: item.url!,
          }
          this.goDetailPage(page)
          return
        }
        for (var i = 0; i < this.list.length; ++i) {
          if (index == i) {
            this.list[i].open = !this.list[i].open
          } else {
            this.list[i].open = false
          }
        }
      },
      goDetailPage(e : Page) {
        if (e.enable == false) {
          uni.showToast({
            icon: 'none',
            title: '暂不支持',
          })
          return
        }
        const url =
          e.url.indexOf('platform') > -1
            ? e.url
            : `/pages/template/${e.url}/${e.url}`
        if (this.hasLeftWin) {
          uni.reLaunch({ url })
        } else {
          uni.navigateTo({ url })
        }
      },
    },
    // #ifdef WEB
    watch: {
      $route: {
        immediate: true,
        handler(newRoute) {
          if (newRoute.matched.length) {
            let path = newRoute.path.split('/')[3]
            for (const item of this.list) {
              if (Array.isArray(item.pages)) {
                for (const page of item.pages) {
                  if (page.url && page.url === path) {
                    item.open = true
                  }
                }
              }
            }
          }
        }
      }
    },
    // #endif
  }
</script>