starwork-uniapp/src/pages/home/home.vue

<route lang="json5" type="home">
{
  style: {
    navigationStyle: 'custom',
    navigationBarTitleText: '首页'
  }
}
</route>
<template>
  <view class="custom-bg-default">
    <TopNavigation :title="appName"></TopNavigation>
    <TopNavigation mini :title="appName"></TopNavigation>
    <button class="mt-12" @click="toLogin">去登录</button>
    <CustomTab class="mt-10" :list="featuresList" :index="2" @clickItem="clickItem"></CustomTab>
    <view class="pt-10">
      <CustomTabBar :list="list" :default-index="1" @change="change"></CustomTabBar>
    </view>
  </view>
</template>

<script lang="ts" setup>
  import { useUserStore } from '@/store'
  import CustomTab from '@/pages/home/CustomTab.vue'

  const $user = useUserStore()

  const appName = import.meta.env.VITE_APP_TITLE

  const list = ref<Array<TabBarItem>>([
    {
      title: '首页',
      isDot: true,
      icon: 'home'
    },
    {
      title: '我的',
      value: 0,
      icon: '/static/tabbar/home.png'
    },
    {
      title: '最大值',
      value: 200,
      icon: '/static/tabbar/home.png'
    },
    {
      title: '客服',
      value: 3,
      icon: '/static/tabbar/home.png'
    }
  ])

  const featuresList = ref<Array<HomeTab>>([
    {
      title: '视频',
      list: [
        {
          id: 0,
          title: '视频中心',
          icon: '/static/logo.png'
        },
        {
          id: 1,
          title: '视频中心',
          icon: '/static/logo.png'
        },
        {
          id: 2,
          title: '视频中心',
          icon: '/static/logo.png'
        },
        {
          id: 3,
          title: '视频中心',
          icon: '/static/logo.png'
        },
        {
          id: 4,
          title: '视频中心',
          icon: '/static/logo.png'
        }
      ]
    },
    {
      title: '音频',
      list: [
        {
          id: 0,
          title: '音频中心',
          icon: '/static/logo.png'
        },
        {
          id: 1,
          title: '音频中心',
          icon: '/static/logo.png'
        },
        {
          id: 2,
          title: '音频中心',
          icon: '/static/logo.png'
        }
      ]
    },
    {
      title: '图文',
      list: [
        {
          id: 0,
          title: '图文中心',
          icon: '/static/logo.png'
        },
        {
          id: 1,
          title: '图文中心',
          icon: '/static/logo.png'
        },
        {
          id: 2,
          title: '图文中心',
          icon: '/static/logo.png'
        }
      ]
    },
    {
      title: '直播',
      list: [
        {
          id: 0,
          title: '直播中心',
          icon: '/static/logo.png'
        },
        {
          id: 1,
          title: '直播中心',
          icon: '/static/logo.png'
        },
        {
          id: 2,
          title: '直播中心',
          icon: '/static/logo.png'
        }
      ]
    },
    {
      title: '其他',
      list: [
        {
          id: 0,
          title: '其他中心',
          icon: '/static/logo.png'
        },
        {
          id: 1,
          title: '其他中心',
          icon: '/static/logo.png'
        },
        {
          id: 2,
          title: '其他中心',
          icon: '/static/logo.png'
        }
      ]
    },
    {
      title: '其他',
      list: [
        {
          id: 0,
          title: '其他中心',
          icon: '/static/logo.png'
        },
        {
          id: 1,
          title: '其他中心',
          icon: '/static/logo.png'
        },
        {
          id: 2,
          title: '其他中心',
          icon: '/static/logo.png'
        }
      ]
    },
    {
      title: '其他',
      list: [
        {
          id: 0,
          title: '其他中心',
          icon: '/static/logo.png'
        },
        {
          id: 1,
          title: '其他中心',
          icon: '/static/logo.png'
        },
        {
          id: 2,
          title: '其他中心',
          icon: '/static/logo.png'
        }
      ]
    },
    {
      title: '其他',
      list: [
        {
          id: 0,
          title: '其他中心',
          icon: '/static/logo.png'
        },
        {
          id: 1,
          title: '其他中心',
          icon: '/static/logo.png'
        },
        {
          id: 2,
          title: '其他中心',
          icon: '/static/logo.png'
        }
      ]
    }
  ])

  // 测试 uni API 自动引入
  onLoad(() => {
    $user.setUserInfo({ nickname: '1', avatar: '1', token: '1' })

    console.log($user.userInfo.nickname)
  })

  const change = data => {
    console.log(data.value)
    if (data.value === 3) {
      list.value[data.value].value = 0
    }
  }

  const toLogin = () => {
    uni.navigateTo({
      url: '/pages/login/login'
    })
  }

  const clickItem = item => {
    console.log(item)
  }
</script>

<style lang="scss">
  page {
    background: #f3f5fa;
  }
</style>