完成移动端基本功能

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,74 +65,85 @@
        </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>
        </template>
        <wd-grid :column="4">
          <wd-grid-item use-slot class="flex justify-center items-center">
            <image class="slot-img text-center" src="/static/menu/menu2.png" />
            <text>12</text>
          </wd-grid-item>
          <wd-grid-item use-slot class="flex justify-center items-center">
            <image class="slot-img text-center" src="/static/menu/menu2.png" />
            <text>12</text>
          </wd-grid-item>
          <wd-grid-item use-slot class="flex justify-center items-center">
            <image class="slot-img text-center" src="/static/menu/menu2.png" />
            <text>12</text>
          </wd-grid-item>
          <wd-grid-item use-slot is-dot class="flex justify-center items-center">
            <image class="slot-img text-center" src="/static/menu/menu2.png" />
            <text>12</text>
          </wd-grid-item>
          <wd-grid-item use-slot class="flex justify-center items-center">
            <image class="slot-img text-center" src="/static/menu/menu2.png" />
            <text>12</text>
          </wd-grid-item>
          <wd-grid-item use-slot class="flex justify-center items-center">
            <image class="slot-img text-center" src="/static/menu/menu2.png" />
            <text>12</text>
          </wd-grid-item>
        </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">
          <wd-grid-item
            use-slot
            class="flex justify-center items-center"
            v-for="(item, index) in menuList"
            v-for="(item, index) in commonMenu"
            :key="item.id"
            @click.stop="goItemPage(item.path)"
          >
            <image class="slot-img text-center" :src="item.url" />
            <image class="slot-img text-center" :src="item.icon" />
            <text>{{ item.name }}</text>
          </wd-grid-item>
        </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 inspectMenu"
            :key="item.id"
            @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 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()
@@ -141,29 +152,94 @@
  const menuList = await getAllMenusApi()
  console.error(menuList)
}
function handleInfo() {
  uni.showToast({
    title: '功能开发中',
    icon: 'none',
  })
}

const goItemPage = (path: string) => {
  const url = `/${path}`
  uni.navigateTo({
    url,
  })
}

onLoad(() => {
  // getAllMenus()
})

const menuList = reactive([

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

const equMenu = reactive([
  {
    id: 1,
    name: '设备列表',
    icon: '/static/ico/ico15.png',
    path: 'pages/equ/equ-list',
  },
  {
    id: 2,
    name: '测试',
    url: '/static/menu/menu1.png',
    name: '工具列表',
    icon: '/static/ico/ico16.png',
    path: 'pages/fixture/fixture-list',
  },
])

const inspectMenu = reactive([
  /*  {
    id: 0,
    name: '设备点检',
    icon: '/static/menu/menu0.png',
    path: 'pages/inspect/insp-add',
  }, */
  {
    id: 1,
    name: '点检汇总',
    icon: '/static/ico/ico17.png',
    path: 'pages/inspect/insp-st',
  },
  {
    id: 2,
    name: '保养汇总',
    icon: '/static/ico/ico11.png',
    path: 'pages/maint/maint-st',
  },
  {
    id: 3,
    name: '报修列表',
    icon: '/static/ico/ico18.png',
    path: 'pages/repair/req-list',
  },
  {
    id: 4,
    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>
@@ -201,6 +277,9 @@
.slot-img {
  width: 72rpx;
  height: 72rpx;
  border-radius: 8rpx;
  margin-left: 4rpx;
}
:deep(.wd-grid-item__content) {
  align-items: center;
}
</style>