完成移动端基本功能

zhuguifei

2025-05-13 14681dfe7052cb76eefcc0c17d0a0d708e1ac9dd

 eims-ui-mobile/src/pages/home/index.vue

@@ -17,13 +17,13 @@
    <view class="bg-white h-[80rpx] px-2 flex items-center justify-between">
      <view class="flex items-center" @click="handleUserInfo">
        <wd-icon name="user" size="40rpx" class="icon-color-base"></wd-icon>
        <text class="ml-1 text-color-base">张三</text>
        <text class="ml-1 text-color-base">{{ realName }}</text>
      </view>

      <view class="flex items-center">
        <wd-icon name="notification" size="40rpx" class="icon-color-base mr-3"></wd-icon>
        <wd-icon name="tips" size="40rpx" class="icon-color-base mr-3"></wd-icon>
        <wd-icon name="app" size="40rpx" class="icon-color-base"></wd-icon>
        <wd-icon name="notification" size="40rpx" class="icon-color-base mr-3" @click="handleInfo"></wd-icon>
        <wd-icon name="tips" size="40rpx" class="icon-color-base mr-3" @click="handleInfo"></wd-icon>
        <wd-icon name="app" size="40rpx" class="icon-color-base" @click="handleInfo"></wd-icon>
      </view>
    </view>

@@ -65,20 +65,20 @@
        </view>
      </wd-card>
    </view>

    <view class="bg-white mt-2">
      <wd-card type="rectangle">
        <template #title>
          <view class="flex items-center menu-title-box">
            <view class="menu-indicator"></view>
            <view class="ml-1 text-xs">设备管理</view>
            <view class="ml-1 text-xs">快捷操作</view>
          </view>
        </template>
        <wd-grid :column="4">
          <wd-grid-item
            use-slot
            class="flex justify-center items-center"
            v-for="(item, index) in equMenu"
            v-for="(item, index) in commonMenu"
            :key="item.id"
            @click.stop="goItemPage(item.path)"
          >
            <image class="slot-img text-center" :src="item.icon" />
@@ -87,13 +87,12 @@
        </wd-grid>
      </wd-card>
    </view>

    <view class="bg-white mt-2">
      <wd-card type="rectangle">
        <template #title>
          <view class="flex items-center menu-title-box">
            <view class="menu-indicator"></view>
            <view class="ml-1 text-xs">设备点检</view>
            <view class="ml-1 text-xs">设备管理</view>
          </view>
        </template>
        <wd-grid :column="4">
@@ -110,15 +109,41 @@
        </wd-grid>
      </wd-card>
    </view>
    <view class="bg-white mt-2">
      <wd-card type="rectangle">
        <template #title>
          <view class="flex items-center menu-title-box">
            <view class="menu-indicator"></view>
            <view class="ml-1 text-xs">台账相关</view>
          </view>
        </template>
        <wd-grid :column="4">
          <wd-grid-item
            use-slot
            class="flex justify-center items-center"
            v-for="(item, index) in equMenu"
            @click.stop="goItemPage(item.path)"
          >
            <image class="slot-img text-center" :src="item.icon" />
            <text>{{ item.name }}</text>
          </wd-grid-item>
        </wd-grid>
      </wd-card>
    </view>


  </view>
</template>

<script lang="ts" setup>
import { getAllMenusApi } from '@/service/menu'

import { useUserStore } from '@/store'
import { tabbarStore } from '@/components/fg-tabbar/tabbar'
defineOptions({
  name: 'Home',
})

const userStore = useUserStore()

// 获取屏幕边界到安全区域距离
const { safeAreaInsets } = uni.getSystemInfoSync()
@@ -126,6 +151,12 @@
const getAllMenus = async () => {
  const menuList = await getAllMenusApi()
  console.error(menuList)
}
function handleInfo() {
  uni.showToast({
    title: '功能开发中',
    icon: 'none',
  })
}

const goItemPage = (path: string) => {
@@ -139,17 +170,27 @@
  // getAllMenus()
})


const commonMenu = reactive([
  {
    id: 1,
    name: '故障报修',
    icon: '/static/ico/ico20.png',
    path: 'pages/repair/repair-add',
  }
])

const equMenu = reactive([
  {
    id: 1,
    name: '设备管理',
    icon: '/static/menu/menu1.png',
    name: '设备列表',
    icon: '/static/ico/ico15.png',
    path: 'pages/equ/equ-list',
  },
  {
    id: 2,
    name: '工具管理',
    icon: '/static/menu/menu1.png',
    name: '工具列表',
    icon: '/static/ico/ico16.png',
    path: 'pages/fixture/fixture-list',
  },
])
@@ -164,32 +205,41 @@
  {
    id: 1,
    name: '点检汇总',
    icon: '/static/menu/menu4.png',
    icon: '/static/ico/ico17.png',
    path: 'pages/inspect/insp-st',
  },
  {
    id: 2,
    name: '保养汇总',
    icon: '/static/menu/menu3.png',
    icon: '/static/ico/ico11.png',
    path: 'pages/maint/maint-st',
  },
  {
    id: 3,
    name: '设备报修',
    icon: '/static/menu/menu1.png',
    name: '报修列表',
    icon: '/static/ico/ico18.png',
    path: 'pages/repair/req-list',
  },
  {
    id: 4,
    name: '设备维修',
    icon: '/static/menu/menu2.png',
    name: '维修列表',
    icon: '/static/ico/ico19.png',
    path: 'pages/repair/res-list',
  },
])

function handleUserInfo() {
  getAllMenus()
  goToMy()
}

function goToMy() {
  tabbarStore.setCurIdx(4)
  uni.switchTab({
    url: '/pages/my/index',
  })
}

const realName = computed(() => userStore?.userInfo?.realName)
</script>

<style lang="scss" scoped>
@@ -229,7 +279,7 @@
  height: 72rpx;
  margin-left: 4rpx;
}
:deep(.wd-grid-item__content){
:deep(.wd-grid-item__content) {
  align-items: center;
}
</style>