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

<route lang="json5" type="home">
{
  style: {
    navigationStyle: 'custom',
    navigationBarTitleText: '首页'
  }
}
</route>
<template>
  <view v-if="systemInfo" :style="{ marginTop: systemInfo.safeAreaInsets?.top + 'px' }">
    <view v-if="$user.loginStatus">
      <view class="h-12 pt-1 flex flex-items-center flex-justify-between mx-4">
        <view>
          <view>19104656的互联</view>
        </view>
      </view>
      <CustomTab class="mt-10" :list="featuresList" @clickItem="clickItem"></CustomTab>
      <button class="mt-12" @click="logout">退出登录</button>
    </view>
  </view>
</template>

<script lang="ts" setup>
  import CustomTab from '@/pages/home/CustomTab.vue'
  import { useBasicStore, useUserStore } from '@/store'
  import { Result } from '@/constants/result'
  import { HomeTab, TabBarItem } from '@/typings'

  const $user = useUserStore()
  const $basic = useBasicStore()

  const systemInfo = ref(null)

  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'
        }
      ]
    }
  ])

  onMounted(async () => {
    systemInfo.value = await $basic.getSystemInfo()
    const tokenStorage: string = uni.getStorageSync('token')
    if (tokenStorage) {
      const result: Result = await $user.getUserInfo()
      if (result.code === Result.Success.code) {
        console.log('获取用户信息成功')
      } else {
        await uni.showToast({
          title: result.message,
          icon: 'none'
        })
      }
    } else {
      uni.navigateTo({
        url: '/pages/login/login'
      })
    }
  })

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

  const logout = async () => {
    await $user.logout()
    uni.navigateTo({
      url: '/pages/login/login'
    })
  }
</script>