feat: 完成首页UI

pages.config.ts

@@ -3,7 +3,7 @@ import { defineUniPages } from '@uni-helper/vite-plugin-uni-pages'
 export default defineUniPages({
   globalStyle: {
     navigationStyle: 'default',
-    navigationBarTitleText: 'unibest',
+    navigationBarTitleText: '星星勤务',
     navigationBarBackgroundColor: '#f8f8f8',
     navigationBarTextStyle: 'black',
     backgroundColor: '#FFFFFF'
@@ -28,25 +28,25 @@ export default defineUniPages({
     list: [
       {
         iconPath: 'static/tabbar/home.png',
-        selectedIconPath: 'static/tabbar/homeHL.png',
+        selectedIconPath: 'static/tabbar/home_selected.png',
         pagePath: 'pages/home/home',
         text: '首页'
       },
       {
-        iconPath: 'static/tabbar/home.png',
-        selectedIconPath: 'static/tabbar/homeHL.png',
+        iconPath: 'static/tabbar/workbench.png',
+        selectedIconPath: 'static/tabbar/workbench_selected.png',
         pagePath: 'pages/workbench/workbench',
         text: '工作台'
       },
       {
-        iconPath: 'static/tabbar/home.png',
-        selectedIconPath: 'static/tabbar/homeHL.png',
+        iconPath: 'static/tabbar/notification.png',
+        selectedIconPath: 'static/tabbar/notification_selected.png',
         pagePath: 'pages/notification/notification',
         text: '消息'
       },
       {
-        iconPath: 'static/tabbar/example.png',
-        selectedIconPath: 'static/tabbar/exampleHL.png',
+        iconPath: 'static/tabbar/mine.png',
+        selectedIconPath: 'static/tabbar/mine_selected.png',
         pagePath: 'pages/mine/mine',
         text: '我的'
       }

src/components/TeamDilog/TeamPopup.vue

@@ -0,0 +1,88 @@
+<template>
+  <view>
+    <wd-popup v-model="show" position="left" @close="closePopup">
+      <view class="w-80 bg-[#f3f5fa] pos-relative h-full" v-if="systemInfo">
+        <view
+          :style="{ paddingTop: systemInfo.safeAreaInsets?.top + 'px' }"
+          class="h-12 pt-1 flex flex-items-center flex-justify-between mx-4 custom-color-black"
+        >
+          <view class="text-4 font-bold">我的团队</view>
+          <view class="rounded-50% bg-[#e2e5ea] flex-justify-center flex-items-center flex w-6 h-6">
+            <wd-icon name="refresh" size="14px"></wd-icon>
+          </view>
+        </view>
+        <scroll-view scroll-y="true" :style="{ height: systemInfo.safeArea?.height - 128 + 'px' }">
+          <view class="pb-10">
+            <view
+              class="flex flex-items-center bg-white shadow-sm p-2 mx-2 rounded-2 mt-2"
+              v-for="(item, index) in [1, 2, 3, 4, 5, 6, 7, 8, 9, 0, 11, 12, 13, 14, 15]"
+              :key="index"
+            >
+              <image
+                src="/static/images/icon_team_join.png"
+                mode="aspectFill"
+                class="w-5 h-5 mx-2"
+              ></image>
+              <view>
+                <view class="text-3.5">06066322的互联</view>
+                <image
+                  src="/static/images/icon_team.webp"
+                  mode="widthFix"
+                  class="w-10 mt-1"
+                ></image>
+              </view>
+              <image
+                src="/static/images/icon_setting.webp"
+                mode="aspectFill"
+                class="w-4 h-4 ml-a"
+              ></image>
+            </view>
+          </view>
+        </scroll-view>
+        <view class="pb-safe bottom-0 pos-absolute w-full color-[#515357] bg-[#f3f5fa]">
+          <wd-divider color="#e6e7ec"></wd-divider>
+          <view class="flex-items-center flex flex-justify-around px-5">
+            <view>创建团队</view>
+            <wd-divider color="#bdbfc4" vertical />
+            <view>加入团队</view>
+          </view>
+          <wd-divider color="#e6e7ec"></wd-divider>
+          <view class="text-center pb-4">快捷添加我的设备</view>
+        </view>
+      </view>
+    </wd-popup>
+  </view>
+</template>
+
+<script setup lang="ts">
+  import { useBasicStore } from '@/store'
+
+  const $basic = useBasicStore()
+
+  const systemInfo = ref(null)
+  const show = ref<boolean>(false)
+
+  onMounted(async () => {
+    systemInfo.value = await $basic.getSystemInfo()
+    showModal()
+  })
+
+  const closePopup = () => {
+    uni.showTabBar()
+  }
+
+  const showModal = () => {
+    uni.hideTabBar()
+    show.value = true
+  }
+
+  const hideModal = () => {
+    uni.showTabBar()
+    show.value = false
+  }
+
+  defineExpose({
+    showModal,
+    hideModal
+  })
+</script>

src/pages.json

@@ -1,7 +1,7 @@
 {
   "globalStyle": {
     "navigationStyle": "default",
-    "navigationBarTitleText": "unibest",
+    "navigationBarTitleText": "星星勤务",
     "navigationBarBackgroundColor": "#f8f8f8",
     "navigationBarTextStyle": "black",
     "backgroundColor": "#FFFFFF"
@@ -25,25 +25,25 @@
     "list": [
       {
         "iconPath": "static/tabbar/home.png",
-        "selectedIconPath": "static/tabbar/homeHL.png",
+        "selectedIconPath": "static/tabbar/home_selected.png",
         "pagePath": "pages/home/home",
         "text": "首页"
       },
       {
-        "iconPath": "static/tabbar/home.png",
-        "selectedIconPath": "static/tabbar/homeHL.png",
+        "iconPath": "static/tabbar/workbench.png",
+        "selectedIconPath": "static/tabbar/workbench_selected.png",
         "pagePath": "pages/workbench/workbench",
         "text": "工作台"
       },
       {
-        "iconPath": "static/tabbar/home.png",
-        "selectedIconPath": "static/tabbar/homeHL.png",
+        "iconPath": "static/tabbar/notification.png",
+        "selectedIconPath": "static/tabbar/notification_selected.png",
         "pagePath": "pages/notification/notification",
         "text": "消息"
       },
       {
-        "iconPath": "static/tabbar/example.png",
-        "selectedIconPath": "static/tabbar/exampleHL.png",
+        "iconPath": "static/tabbar/mine.png",
+        "selectedIconPath": "static/tabbar/mine_selected.png",
         "pagePath": "pages/mine/mine",
         "text": "我的"
       }

src/pages/home/HomeAddDevice.vue

@@ -0,0 +1,10 @@
+<template>
+  <view class="mx-4 px-2 py-3 bg-white rounded-2 shadow-sm">
+    <image src="/static/images/bg_no_device.webp" mode="widthFix" class="w-full pt-2"></image>
+    <view class="ml-15% mt-3 w-70% text-center custom-bg-blue color-white py-2 rounded-2 text-3.5">
+      添加设备
+    </view>
+  </view>
+</template>
+
+<script setup lang="ts"></script>

src/pages/home/HomeAddTeamManager.vue

@@ -0,0 +1,20 @@
+<template>
+  <view class="mx-4 flex-items-center flex flex-justify-between">
+    <view class="w-34 h-10 color-[#134347] bg-[#cef2f5] px-4 py-3 rounded-2 shadow-sm">
+      <view class="flex flex-items-center text-3.5">
+        <view class="font-bold">添加人员</view>
+        <wd-icon color="#134347" name="swap-right" class="ml-2" size="14px"></wd-icon>
+      </view>
+      <view class="mt-1 text-2.5">开启协同管理</view>
+    </view>
+    <view class="w-34 h-10 color-[#172a5b] bg-[#d4e0ff] px-4 py-3 rounded-2 shadow-sm">
+      <view class="flex flex-items-center text-3.5">
+        <view class="font-bold">添加设备</view>
+        <wd-icon color="#172a5b" name="swap-right" class="ml-2" size="14px"></wd-icon>
+      </view>
+      <view class="mt-1 text-2.5">开启智能物联</view>
+    </view>
+  </view>
+</template>
+
+<script setup lang="ts"></script>

src/pages/home/HomeAttendance.vue

@@ -0,0 +1,27 @@
+<template>
+  <view class="mx-4 px-2 py-3 bg-white rounded-2 shadow-sm">
+    <view class="flex-items-center flex">
+      <image src="/static/images/icon_one_key_door.png" class="w-4 h-4" mode="aspectFill"></image>
+      <view class="text-3.5 ml-2">考勤</view>
+      <wd-icon name="arrow-right" size="14px" class="ml-a" color="#bfbfbf"></wd-icon>
+    </view>
+    <view class="mt-3 flex-items-center flex">
+      <wd-circle class="ml-4" v-model="current" :clockwise="false" :size="65" :strokeWidth="15">
+        <view class="text-3.5">{{ current }}%</view>
+      </wd-circle>
+      <view class="ml-4 text-3">
+        <view class="text-3.5 font-600">今日出勤率：2/12</view>
+        <view class="flex flex-items-center mt-2">
+          <view>未打卡：</view>
+          <view class="color-[#ea8720]">10</view>
+          <view class="ml-3">迟到：</view>
+          <view class="color-red">0</view>
+        </view>
+      </view>
+    </view>
+  </view>
+</template>
+
+<script setup lang="ts">
+  const current = ref<number>(17)
+</script>

src/pages/home/HomeOpenDoor.vue

@@ -0,0 +1,43 @@
+<template>
+  <view class="mx-4 px-2 py-3 bg-white rounded-2 shadow-sm">
+    <view class="flex-items-center flex">
+      <image src="/static/images/icon_one_key_door.png" class="w-4 h-4" mode="aspectFill"></image>
+      <view class="text-3.5 ml-2">一键开门</view>
+      <wd-icon name="arrow-right" size="14px" class="ml-a" color="#bfbfbf"></wd-icon>
+    </view>
+    <view class="flex flex-wrap mt-1 flex-justify-between">
+      <view
+        class="pos-relative w-40 h-24.23 mt-3 rounded-2"
+        v-for="(item, index) in [1, 2, 3]"
+        :key="index"
+      >
+        <image
+          src="/static/images/bg_one_key_door.png"
+          class="pos-absolute w-40 h-24.2 rounded-2"
+          mode="aspectFill"
+        ></image>
+        <view
+          class="bg-[rgba(255,255,255,0.5)] mt-3 pos-absolute right-3 w-5 h-5 rounded-2 flex-justify-center flex flex-items-center"
+        >
+          <wd-icon name="play" size="22px" color="#515057"></wd-icon>
+        </view>
+        <view class="pos-relative ml-3 mt-3">
+          <view
+            class="rounded-50% w-10 h-10 flex flex-items-center flex-justify-center bg-[rgba(0,0,0,0.3)]"
+          >
+            <image
+              src="/static/images/icon_one_key_door_key.png"
+              class="w-3.5"
+              mode="widthFix"
+            ></image>
+          </view>
+          <view class="mt-3 color-white font-bold text-4 w-35 truncate">
+            {{ item }}
+          </view>
+        </view>
+      </view>
+    </view>
+  </view>
+</template>
+
+<script setup lang="ts"></script>

src/pages/home/HomeSetting.vue

@@ -0,0 +1,16 @@
+<template>
+  <view class="mx-4 px-2 py-3 bg-white rounded-2 shadow-sm text-2.5">
+    <view class="flex flex-items-center flex-justify-around">
+      <view class="text-center">
+        <image class="w-6 h-6" src="/static/images/icon_main_edit.webp" mode="aspectFill"></image>
+        <view class="mt-1">编辑首页</view>
+      </view>
+      <view class="text-center">
+        <image class="w-6 h-6" src="/static/images/icon_main_switch.webp" mode="aspectFill"></image>
+        <view class="mt-1">切换到简洁版</view>
+      </view>
+    </view>
+  </view>
+</template>
+
+<script setup lang="ts"></script>

src/pages/home/HomeTab.vue

@@ -31,6 +31,8 @@
 </template>
 
 <script setup lang="ts">
+  import { HomeTab, HomeTabItem } from '@/typings'
+
   defineOptions({
     options: {
       styleIsolation: 'shared'
@@ -46,8 +48,6 @@
     }
   })
 
-  const emits = defineEmits(['clickItem'])
-
   const clickMenu = () => {
     uni.navigateTo({
       url: '/pages/application-list/application-list'
@@ -55,7 +55,9 @@
   }
 
   const clickItem = (item: HomeTabItem) => {
-    emits('clickItem', item)
+    uni.navigateTo({
+      url: item.url
+    })
   }
 </script>
 

src/pages/home/HomeTeamManager.vue

@@ -0,0 +1,26 @@
+<template>
+  <view class="mx-4 flex-items-center flex flex-justify-between">
+    <view class="w-34 h-10 color-[#134347] bg-[#cef2f5] px-4 py-3 rounded-2 shadow-sm">
+      <view class="flex flex-items-end text-3">
+        <view class="text-5 font-bold">12</view>
+        <view>人</view>
+        <view class="text-2.5 font-600 rounded-1 py-1 px-1 bg-[rgba(255,255,255,0.5)] ml-a">
+          人员管理
+        </view>
+      </view>
+      <view class="mt-1 text-2.5">人员总数</view>
+    </view>
+    <view class="w-34 h-10 color-[#172a5b] bg-[#d4e0ff] px-4 py-3 rounded-2 shadow-sm">
+      <view class="flex flex-items-end text-3">
+        <view class="text-5 font-bold">1</view>
+        <view>台</view>
+        <view class="text-2.5 font-600 rounded-1 py-1 px-1 bg-[rgba(255,255,255,0.5)] ml-a">
+          设备管理
+        </view>
+      </view>
+      <view class="mt-1 text-2.5">设备总数</view>
+    </view>
+  </view>
+</template>
+
+<script setup lang="ts"></script>

src/pages/home/HomeTodo.vue

@@ -11,10 +11,10 @@
         :key="index"
       >
         <image src="/static/images/icon_audit.png" mode="aspectFill" class="w-4.5 h-4.5"></image>
-        <view class="ml-3 font-bold">{{ item.name }}</view>
+        <view class="ml-2 font-bold">{{ item.title }}</view>
         <view class="ml-2 w-1 h-1 bg-black rounded-50%"></view>
         <view class="ml-2">{{ item.content }}</view>
-        <view class="color-[#2954ee] bg-[#f5f4fa] px-2 px-1 ml-a rounded">去处理</view>
+        <view class="color-[#2954ee] bg-[#f5f4fa] px-2 py-1 ml-a rounded">去处理</view>
       </view>
     </view>
   </view>

src/pages/home/home.vue

@@ -15,9 +15,12 @@
   <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>19104656的互联</view>
-        <image class="w-2 h-2 ml-1.5" src="/static/images/icon_triangle.png"></image>
-        <wd-icon class="ml-a" name="add-circle1" size="22px"></wd-icon>
+        <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"
@@ -28,18 +31,28 @@
       </view>
       <scroll-view
         class="mt-2"
+        scroll-y="true"
         :style="{
           height: systemInfo.safeArea?.height - 104 + 'px'
         }"
       >
-        <HomeSwiper @colorChange="colorChange"></HomeSwiper>
-        <HomeBulletin class="my-2"></HomeBulletin>
-        <HomeTodo class="my-2"></HomeTodo>
-        <CustomTab :list="featuresList" @clickItem="clickItem"></CustomTab>
-        <button class="mt-12" @click="$user.logout()">退出登录</button>
+        <view class="py-3">
+          <HomeSwiper @colorChange="colorChange"></HomeSwiper>
+          <HomeBulletin class="my-2"></HomeBulletin>
+          <HomeTodo class="my-2"></HomeTodo>
+          <CustomTab :list="featuresList" @clickItem="clickItem"></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>
@@ -50,6 +63,13 @@
   import HomeSwiper from '@/pages/home/HomeSwiper.vue'
   import HomeBulletin from '@/pages/home/HomeBulletin.vue'
   import HomeTodo from '@/pages/home/HomeTodo.vue'
+  import HomeOpenDoor from '@/pages/home/HomeOpenDoor.vue'
+  import HomeAttendance from '@/pages/home/HomeAttendance.vue'
+  import HomeTeamManager from '@/pages/home/HomeTeamManager.vue'
+  import HomeSetting from '@/pages/home/HomeSetting.vue'
+  import HomeAddDevice from '@/pages/home/HomeAddDevice.vue'
+  import HomeAddTeamManager from '@/pages/home/HomeAddTeamManager.vue'
+  import TeamPopup from '@/components/TeamDilog/TeamPopup.vue'
 
   const $user = useUserStore()
   const $basic = useBasicStore()
@@ -58,6 +78,8 @@
 
   const color = ref<string>('#bfcbef')
 
+  const teamPopup = ref(null)
+
   const list = ref<Array<TabBarItem>>([
     {
       title: '首页',
@@ -304,6 +326,10 @@
     }
   })
 
+  const teamDialog = () => {
+    teamPopup.value.showModal()
+  }
+
   const colorChange = data => {
     color.value = data
   }

src/typings.ts

@@ -16,6 +16,7 @@ export type TabBarItem = {
 export type HomeTabItem = {
   icon: string
   name: string
+  url: string
   id: number
 }