From 14681dfe7052cb76eefcc0c17d0a0d708e1ac9dd Mon Sep 17 00:00:00 2001
From: zhuguifei <zhuguifei@zhuguifeideiMac.local>
Date: 星期二, 13 五月 2025 16:31:14 +0800
Subject: [PATCH] 完成移动端基本功能
---
eims-ui-mobile/src/pages/home/index.vue | 276 ++++++++++++++++++++++++++++++++++++++++++++++++++-----
1 files changed, 251 insertions(+), 25 deletions(-)
diff --git a/eims-ui-mobile/src/pages/home/index.vue b/eims-ui-mobile/src/pages/home/index.vue
index 2c10cbb..b04275b 100644
--- a/eims-ui-mobile/src/pages/home/index.vue
+++ b/eims-ui-mobile/src/pages/home/index.vue
@@ -3,57 +3,283 @@
{
layout: 'tabbar',
style: {
- navigationStyle: 'custom',
navigationBarTitleText: '棣栭〉',
},
}
</route>
<template>
<view
- class="bg-white overflow-hidden pt-2 px-4"
- :style="{ marginTop: safeAreaInsets?.top + 'px' }"
+ class="bg-base overflow-hidden"
+ :style="{
+ marginTop: safeAreaInsets?.top + 'px',
+ }"
>
- <view class="mt-12">
- <image src="/static/logo.svg" alt="" class="w-28 h-28 block mx-auto" />
- </view>
- <view class="text-center text-4xl main-title-color mt-4">unibest</view>
- <view class="text-center text-2xl mt-2 mb-8">鏈�濂界敤鐨� uniapp 寮�鍙戞ā鏉�</view>
+ <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">{{ realName }}</text>
+ </view>
- <view class="text-justify max-w-100 m-auto text-4 indent mb-2">{{ description }}</view>
- <view class="text-center mt-8">
- 褰撳墠骞冲彴鏄細
- <text class="text-green-500">{{ PLATFORM.platform }}</text>
+ <view class="flex items-center">
+ <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>
- <view class="text-center mt-4">
- 妯℃澘鍒嗘敮鏄細
- <text class="text-green-500">tabbar</text>
+
+ <view class="bg-white py-2 px-2">
+ <wd-img class="w-full h-[260rpx]" src="/static/images/pic4.jpeg" />
</view>
+ <view class="bg-noti flex flex-row">
+ <wd-notice-bar
+ text="杩欐槸涓�鏉℃秷鎭彁绀轰俊鎭紝杩欐槸涓�鏉℃秷鎭彁绀轰俊鎭紝杩欐槸涓�鏉℃秷鎭彁绀轰俊鎭�"
+ prefix="clock"
+ type="info"
+ :scrollable="false"
+ custom-class="flex-1 overflow-hidden"
+ />
+ <wd-button type="text" class="w-[120rpx]">鏌ョ湅</wd-button>
+ </view>
+
+ <view class="bg-white">
+ <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>
+ <view class="flex flex-row justify-around">
+ <view class="flex flex-col justify-center">
+ <text class="text-lg text-center">0</text>
+ <text class="text-color-gray">璁惧鎬绘暟</text>
+ </view>
+ <view class="flex flex-col justify-center">
+ <text class="text-lg text-center">0</text>
+ <text class="text-color-gray">鏁呴殰璁惧鏁�</text>
+ </view>
+ <view class="flex flex-col justify-center">
+ <text class="text-lg text-center">0</text>
+ <text class="text-color-gray">鏈慨澶嶆晠闅�</text>
+ </view>
+ </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"
+ v-for="(item, index) in commonMenu"
+ :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 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 { TestEnum } from '@/typings'
-import PLATFORM from '@/utils/platform'
-
+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()
-const author = ref('鑿查附')
-const description = ref(
- 'unibest 鏄竴涓泦鎴愪簡澶氱宸ュ叿鍜屾妧鏈殑 uniapp 寮�鍙戞ā鏉匡紝鐢� uniapp + Vue3 + Ts + Vite4 + UnoCss + UniUI + VSCode 鏋勫缓锛屾ā鏉垮叿鏈変唬鐮佹彁绀恒�佽嚜鍔ㄦ牸寮忓寲銆佺粺涓�閰嶇疆銆佷唬鐮佺墖娈电瓑鍔熻兘锛屽苟鍐呯疆浜嗚澶氬父鐢ㄧ殑鍩烘湰缁勪欢鍜屽熀鏈姛鑳斤紝璁╀綘缂栧啓 uniapp 鎷ユ湁 best 浣撻獙銆�',
-)
-// 娴嬭瘯 uni API 鑷姩寮曞叆
+
+const getAllMenus = async () => {
+ 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(() => {
- console.log(author)
- console.log(TestEnum.A)
+ // 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/ico/ico15.png',
+ path: 'pages/equ/equ-list',
+ },
+ {
+ id: 2,
+ 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() {
+ goToMy()
+}
+
+function goToMy() {
+ tabbarStore.setCurIdx(4)
+ uni.switchTab({
+ url: '/pages/my/index',
+ })
+}
+
+const realName = computed(() => userStore?.userInfo?.realName)
</script>
<style lang="scss" scoped>
.main-title-color {
color: $uni-color-primary;
}
+
+.bg-noti {
+ background: #f4f9ff;
+}
+
+:deep(.wd-card) {
+ margin-bottom: 0;
+}
+
+:deep(.wd-card__footer) {
+ padding: 0 !important;
+}
+
+:deep(.wd-card__footer)::after {
+ height: 0 !important;
+}
+
+.menu-title-box {
+ height: 30rpx;
+}
+
+.menu-indicator {
+ width: 6rpx;
+ height: 24rpx;
+ border-radius: 10rpx;
+ background-color: $uni-color-primary;
+}
+
+.slot-img {
+ width: 72rpx;
+ height: 72rpx;
+ margin-left: 4rpx;
+}
+:deep(.wd-grid-item__content) {
+ align-items: center;
+}
</style>
--
Gitblit v1.9.3