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

<route lang="json5" type="home">
{
  style: {
    navigationStyle: 'custom',
    navigationBarTitleText: '首页',
    disableScroll: true
  }
}
</route>
<template>
  <view
    :style="{ background: `linear-gradient(to bottom, ${color}, #f3f5fa)` }"
    class="h-50 pos-absolute w-full z-0 top-0"
  ></view>
  <view v-if="systemInfo" :style="{ marginTop: systemInfo.safeAreaInsets?.top + 'px' }">
    <view v-if="$user.loginStatus">
      <view class="pos-relative h-12 pt-1 flex flex-items-center mx-4 custom-color-black">
        <view @click="teamDialog" class="flex flex-items-center">
          <view>19104656的互联</view>
          <image class="w-2 h-2 ml-1.5" src="/static/images/icon_triangle.png"></image>
        </view>
        <image class="w-5 h-5 ml-a" src="/static/images/icon_setting.webp"></image>
        <wd-icon class="ml-5" name="add-circle1" size="22px"></wd-icon>
      </view>
      <view
        class="pos-relative h-8 mt-3 flex flex-items-center text-3.5 bg-[#fdefdf] mx-4 px-2 rounded-2 color-[#ea8720] shadow-sm"
      >
        <view>系统通知未开启，报警消息无法通知</view>
        <view class="bg-white px-1 text-3 py-0.5 ml-a rounded-1 mr-3">去开启</view>
        <wd-icon name="close" size="14px" color="#ea8720" class="pr-2 py-1"></wd-icon>
      </view>
      <scroll-view
        class="mt-2"
        :scroll-y="true"
        :style="{
          height: systemInfo.safeArea?.height - 104 + 'px'
        }"
      >
        <view class="py-3">
          <HomeSwiper @colorChange="colorChange"></HomeSwiper>
          <HomeBulletin class="my-2"></HomeBulletin>
          <HomeTodo class="my-2"></HomeTodo>
          <CustomTab :list="featuresList"></CustomTab>
          <HomeOpenDoor class="my-2"></HomeOpenDoor>
          <HomeAttendance class="my-2"></HomeAttendance>
          <HomeTeamManager class="my-2"></HomeTeamManager>
          <HomeAddDevice class="my-2"></HomeAddDevice>
          <HomeAddTeamManager class="my-2"></HomeAddTeamManager>
          <HomeSetting class="my-2"></HomeSetting>
          <button class="mt-10" @click="$user.logout()">退出登录</button>
        </view>
      </scroll-view>
    </view>
  </view>
  <TeamPopup ref="teamPopup"></TeamPopup>
</template>

<script lang="ts" setup>
  import CustomTab from '@/pages/home/compoents/HomeTab.vue'
  import { useBasicStore, useUserStore } from '@/store'
  import { Result } from '@/constants/result'
  import { HomeTab } from '@/typings'
  import HomeSwiper from '@/pages/home/compoents/HomeSwiper.vue'
  import HomeBulletin from '@/pages/home/compoents/HomeBulletin.vue'
  import HomeTodo from '@/pages/home/compoents/HomeTodo.vue'
  import HomeOpenDoor from '@/pages/home/compoents/HomeOpenDoor.vue'
  import HomeAttendance from '@/pages/home/compoents/HomeAttendance.vue'
  import HomeTeamManager from '@/pages/home/compoents/HomeTeamManager.vue'
  import HomeSetting from '@/pages/home/compoents/HomeSetting.vue'
  import HomeAddDevice from '@/pages/home/compoents/HomeAddDevice.vue'
  import HomeAddTeamManager from '@/pages/home/compoents/HomeAddTeamManager.vue'
  import TeamPopup from '@/components/TeamPopup/TeamPopup.vue'
  import GetSystemInfoResult = UniNamespace.GetSystemInfoResult

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

  const systemInfo = ref<GetSystemInfoResult>(null)

  const color = ref<string>('#bfcbef')

  const teamPopup = ref(null)

  const featuresList = ref<Array<HomeTab>>([
    {
      name: '视频',
      list: [
        {
          id: 221,
          icon: 'https://file.hikmall.com/prod/image/e75144eac8984ee198ef533c2f9d3558.png',
          name: '视频中心'
        },
        {
          id: 396,
          icon: 'https://file.hikmall.com/prod/image/cf46656ec73b404891e2b46b57ff5fc2.png',
          name: '智能巡检'
        },
        {
          id: 6405,
          icon: 'https://file.hikmall.com/prod/image/0526d084da4a49579f832dd4588dcb16.png',
          name: '录像智搜'
        },
        {
          id: 403,
          icon: 'https://file.hikmall.com/prod/image/7ea5f88d404442eeb958fbe0904777d1.png',
          name: '智能分析'
        },
        {
          id: 354,
          icon: 'https://file.hikmall.com/prod/image/2887bb1c453244a2a872ec98c0360478.png',
          name: '人员抓拍'
        },
        {
          id: 357,
          icon: 'https://file.hikmall.com/prod/image/e6860e8e5cc64369accadae5347fb0c1.png',
          name: '车辆管理'
        }
      ]
    },
    {
      name: '人员通行',
      list: [
        {
          id: 230,
          icon: 'https://file.hikmall.com/prod/image/d1d07b3125f841848c3c3eb94509b2ae.png',
          name: '门禁管理',
          url: '/pages/personnel-passage/traffic-correlation'
        },
        {
          id: 106,
          icon: 'https://file.hikmall.com/prod/image/635392a7f5e04e75bb657b6cc6e2abc8.png',
          name: '门禁授权',
          url: '/pages/personnel-passage/access-authority/access-authority'
        },
        {
          id: 302,
          icon: 'https://file.hikmall.com/prod/image/885eb6ac104e4a76941e67eb738142ec.png',
          name: '一键开门',
          url: '/pages/personnel-passage/one-click-open-door/one-click-open-door'
        },
        {
          id: 400,
          icon: 'https://file.hikmall.com/prod/image/701d5a7031fa4b4290838c4562f99a0b.png',
          name: '密码开门',
          url: '/pages/personnel-passage/password-open-door/password-open-door'
        },
        {
          id: 299,
          icon: 'https://file.hikmall.com/prod/image/771a717eb8d74f5bba71db68c9605a0f.png',
          name: '通行记录',
          url: '/pages/personnel-passage/traffic-record/traffic-record'
        },
        {
          id: 387,
          icon: 'https://file.hikmall.com/prod/image/9752516f054342d3ac310a0fdb32b654.png',
          name: '访客管理',
          url: '/pages/personnel-passage/visitor-manage/visitor-manage-tab'
        },
        {
          id: 399,
          icon: 'https://file.hikmall.com/prod/image/4dbe971d6fac465cb4fed956defd678c.png',
          name: '我的访客',
          url: '/pages/personnel-passage/visitor-manage/visitor-manage-tab'
        },
        {
          id: 388,
          icon: 'https://file.hikmall.com/prod/image/624a69276df1480088661e20cbc0e189.png',
          name: '访客邀约',
          url: '/pages/personnel-passage/visitor-invitation/visitor-invitation'
        }
      ]
    },
    {
      name: '考勤',
      list: [
        {
          id: 382,
          icon: 'https://file.hikmall.com/prod/image/9e2b6e95c2904540a9a3dc675d25cc13.png',
          name: '考勤设置',
          url: '/pages/attendance/attendance'
        },
        {
          id: 383,
          icon: 'https://file.hikmall.com/prod/image/6cea7ba6b3b34464998bb501a609f3a9.png',
          name: '考勤统计'
        },
        {
          id: 381,
          icon: 'https://file.hikmall.com/prod/image/60c64c6c80a9429fa8d084506cd2f021.png',
          name: '我的考勤'
        },
        {
          id: 384,
          icon: 'https://file.hikmall.com/prod/image/116e1ea563474601ac075ac5bb312963.png',
          name: '手机打卡'
        },
        {
          id: -249155,
          icon: 'https://file.hikmall.com/prod/image/3e56cfb5cfae4bd285d6f55e51e1ce23.png',
          name: '请假'
        },
        {
          id: -249156,
          icon: 'https://file.hikmall.com/prod/image/7d2d7c5e1e7241eba1bc7848116a75cb.png',
          name: '补卡'
        },
        {
          id: -249157,
          icon: 'https://file.hikmall.com/prod/image/e007c441df1c4ab19ca6bb31ccad24e8.png',
          name: '出差'
        },
        {
          id: -249158,
          icon: 'https://file.hikmall.com/prod/image/90faf8728c6846da9d09f3db0739558d.png',
          name: '外出'
        }
      ]
    },
    {
      name: '审批',
      list: [
        {
          id: 386,
          icon: 'https://file.hikmall.com/prod/image/c5a56acf8efe47d78fc0107552c98bf8.png',
          url: '/pages/approval/approval?index=0',
          name: '发起审批'
        },
        {
          id: 385,
          icon: 'https://file.hikmall.com/prod/image/6b946ba258234cdc8d447631b07939c3.png',
          url: '/pages/approval/approval?index=1',
          name: '审批记录'
        }
      ]
    },
    {
      name: '可视对讲',
      list: [
        {
          id: 391,
          icon: 'https://file.hikmall.com/prod/image/4373b28a83a84c828b0150794ac2e402.png',
          name: '对讲设备'
        },
        {
          id: 390,
          icon: 'https://file.hikmall.com/prod/image/8efa2ddbc0e94a75b761b0d23097e1d1.png',
          name: '呼叫关系'
        },
        {
          id: 389,
          icon: 'https://file.hikmall.com/prod/image/fa2073388a54462ba7badb9904b58396.png',
          name: '呼叫提醒'
        }
      ]
    },
    {
      name: '信息发布',
      list: [
        {
          id: 374,
          icon: 'https://file.hikmall.com/prod/image/e5fa04e5ccdc498dbc4d912074f38e35.png',
          name: '广播'
        },
        {
          id: 309,
          icon: 'https://file.hikmall.com/prod/image/0706b7ff1e044928872839c61be74d54.png',
          name: '公告',
          url: '/pages/info-publish/notice-manage'
        },
        {
          id: 6093,
          icon: 'https://file.hikmall.com/prod/image/8ed90fc35e3840e782d73676efcc9a30.png',
          name: '信息发布',
          url: '/pages/info-publish/info-publish'
        }
      ]
    },
    {
      name: '基础应用',
      list: [
        {
          id: 90,
          icon: 'https://file.hikmall.com/prod/image/d43b79c5f41543fca44cd21ba84d9c02.png',
          name: '人员管理'
        },
        {
          id: 310,
          icon: 'https://file.hikmall.com/prod/image/597b0cb3ddf849788b6c5e7727001690.png',
          name: '团队二维码'
        },
        {
          id: 293,
          icon: 'https://file.hikmall.com/prod/image/6ecf9e7c946945a5a1efd07c5e8db320.png',
          name: '设备管理'
        }
      ]
    }
  ])

  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 teamDialog = () => {
    teamPopup.value.showModal()
  }

  const colorChange = data => {
    color.value = data
  }
</script>