Просмотр исходного кода

feat: ConstructionHome use TopBar with CapsuleSafeArea for notification bell

xuyunhui 1 неделя назад
Родитель
Сommit
4a57952
1 измененных файлов с 215 добавлено и 0 удалено
  1. 215 0
      src/components/home/ConstructionHome.vue

+ 215 - 0
src/components/home/ConstructionHome.vue

@@ -0,0 +1,215 @@
+<template>
+  <view class="app-container">
+    <TopBar title="">
+      <template #left>
+        <view class="flex items-center">
+          <view class="w-12 h-12 bg-primary-light rounded-2xl flex items-center justify-center mr-3">
+            <text class="uni-icons uniui-person-filled text-primary text-xl"></text>
+          </view>
+          <view>
+            <text class="text-gray-500 text-xs block">工程一班</text>
+            <text class="text-gray-800 text-lg font-bold">张师傅</text>
+          </view>
+        </view>
+      </template>
+      <template #right>
+        <button class="w-10 h-10 bg-surface rounded-full flex items-center justify-center relative" @click="goToNotification">
+          <text class="uni-icons uniui-notification-filled text-gray-500 text-lg"></text>
+        </button>
+      </template>
+    </TopBar>
+
+    <!-- 主内容区域 -->
+    <view class="px-4 py-4 gap-y-4 pb-24">
+      <!-- 统计卡片 -->
+      <uni-card title="工作统计" :is-shadow="false">
+        <view class="grid grid-cols-3 gap-3">
+          <view class="bg-surface rounded-xl p-4 text-center" @click="goToHistoryTask">
+            <text class="stat-number text-success block">{{ completedCount }}</text>
+            <text class="text-desc mt-1 block">已完成</text>
+          </view>
+          <view class="bg-surface rounded-xl p-4 text-center" @click="goToTaskList">
+            <text class="stat-number text-primary block">{{ currentTaskCount }}</text>
+            <text class="text-desc mt-1 block">进行中</text>
+          </view>
+          <view class="bg-surface rounded-xl p-4 text-center" @click="goToTomorrowTask">
+            <text class="stat-number text-warning block">{{ tomorrowCount }}</text>
+            <text class="text-desc mt-1 block">明日任务</text>
+          </view>
+        </view>
+      </uni-card>
+
+      <!-- 每日任务入口 -->
+      <uni-card :is-shadow="false" @click="goToDailyTask">
+        <view class="flex items-center justify-between cursor-pointer">
+          <view class="flex items-center">
+            <view class="icon-box mr-4">
+              <text class="uni-icons uniui-gear-filled"></text>
+            </view>
+            <view>
+              <text class="text-base font-bold text-gray-800 block">每日任务</text>
+              <text class="text-sm text-gray-400 mt-1 block">今日检查待完成</text>
+            </view>
+          </view>
+          <view class="flex items-center">
+            <view class="w-2 h-2 bg-danger rounded-full mr-2"></view>
+            <text class="uni-icons uniui-arrowright text-gray-400 text-lg"></text>
+          </view>
+        </view>
+      </uni-card>
+
+      <!-- 快捷功能 -->
+      <uni-card title="快捷功能" :is-shadow="false">
+        <view class="grid grid-cols-3 gap-4">
+          <view class="flex flex-col items-center" @click="goToTaskList">
+            <view class="w-14 h-14 bg-primary-light rounded-2xl flex items-center justify-center mb-2 transition-transform">
+              <text class="uni-icons uniui-flag-filled text-primary text-2xl"></text>
+            </view>
+            <text class="text-xs text-gray-500 font-medium">我的任务</text>
+          </view>
+          <view class="flex flex-col items-center" @click="goToDailyTask">
+            <view class="w-14 h-14 bg-primary-light rounded-2xl flex items-center justify-center mb-2 transition-transform">
+              <text class="uni-icons uniui-gear-filled text-primary text-2xl"></text>
+            </view>
+            <text class="text-xs text-gray-500 font-medium">车辆检查</text>
+          </view>
+          <view class="flex flex-col items-center" @click="goToHelpCenter">
+            <view class="w-14 h-14 bg-primary-light rounded-2xl flex items-center justify-center mb-2 transition-transform">
+              <text class="uni-icons uniui-help-filled text-primary text-2xl"></text>
+            </view>
+            <text class="text-xs text-gray-500 font-medium">帮助中心</text>
+          </view>
+        </view>
+      </uni-card>
+
+      <!-- 当前任务预览 -->
+      <uni-card
+        title="当前任务"
+        extra="查看全部"
+        :is-shadow="false"
+        @click-extra="goToTaskList"
+      >
+        <view v-if="currentTasks.length === 0" class="py-6 text-center">
+          <text class="text-desc">暂无进行中的任务</text>
+        </view>
+        <view v-else class="gap-y-3">
+          <view
+            v-for="task in currentTasks"
+            :key="task.id"
+            class="card p-3 cursor-pointer"
+            @click="goToTaskDetail(task.id)"
+          >
+            <view class="flex justify-between items-start mb-2">
+              <text class="text-sm font-semibold text-gray-800">{{ task.projectName }}</text>
+              <StatusTag :status="task.status" />
+            </view>
+            <view class="flex items-center text-xs text-gray-500 mb-1">
+              <text class="uni-icons uniui-tools text-gray-400 mr-1"></text>
+              <text>{{ task.serviceType || '施工服务' }}</text>
+            </view>
+            <view class="flex items-center text-xs text-gray-500">
+              <text class="uni-icons uniui-clock-filled text-gray-400 mr-1"></text>
+              <text>{{ task.scheduleDate }} {{ task.scheduleTime }}</text>
+            </view>
+          </view>
+        </view>
+      </uni-card>
+
+      <!-- 通知公告 -->
+      <uni-card
+        title="通知公告"
+        extra="查看全部"
+        :is-shadow="false"
+        @click-extra="goToNoticeList"
+      >
+        <uni-list :border="false">
+          <uni-list-item
+            v-for="(notice, index) in notices"
+            :key="index"
+            :title="notice.title"
+            :note="notice.date"
+            show-arrow
+            @click="goToNoticeDetail"
+          >
+            <template #header>
+              <view v-if="notice.important" class="px-2 py-1 bg-danger-light text-danger rounded-lg font-medium mr-2 flex-shrink-0" style="font-size: 10px">
+                重要
+              </view>
+            </template>
+          </uni-list-item>
+        </uni-list>
+      </uni-card>
+    </view>
+  </view>
+</template>
+
+<script setup lang="ts">
+import { ref, computed, onMounted } from 'vue'
+import { useTaskStore } from '@/stores/task'
+import TopBar from '@/components/common/TopBar.vue'
+import UniCard from '@/components/uni-card/uni-card.vue'
+import UniList from '@/components/uni-list/uni-list.vue'
+import UniListItem from '@/components/uni-list/uni-list-item.vue'
+
+import StatusTag from '@/components/common/StatusTag.vue'
+
+const taskStore = useTaskStore()
+
+const completedCount = computed(() => taskStore.tasks.filter(t => t.status === 'completed').length)
+const currentTaskCount = computed(() => taskStore.tasks.filter(t => ['scheduled', 'departed', 'arrived', 'constructing'].includes(t.status)).length)
+const currentTasks = computed(() => taskStore.tasks.filter(t => ['scheduled', 'departed', 'arrived', 'constructing'].includes(t.status)).slice(0, 2))
+const tomorrowCount = ref(2)
+
+const notices = [
+  { title: '关于规范施工现场安全管理的通知', date: '2026-04-20', important: true },
+  { title: '下周安全培训会议安排', date: '2026-04-18', important: false },
+]
+
+function goToTaskList() {
+  uni.switchTab({ url: '/pages/task/task' })
+}
+
+function goToDailyTask() {
+  uni.navigateTo({ url: '/subPackages/pages-construction/dailyTask' })
+}
+
+function goToHistoryTask() {
+  uni.navigateTo({ url: '/subPackages/pages-construction/historyTask' })
+}
+
+function goToTomorrowTask() {
+  uni.navigateTo({ url: '/subPackages/pages-construction/tomorrowTask' })
+}
+
+function goToHelpCenter() {
+  uni.navigateTo({ url: '/subPackages/pages-common/helpCenter' })
+}
+
+function goToNotification() {
+  uni.navigateTo({ url: '/subPackages/pages-construction/notification' })
+}
+
+function goToTaskDetail(taskId: string) {
+  taskStore.setCurrentTask(taskId)
+  uni.navigateTo({ url: '/subPackages/pages-construction/taskDetail' })
+}
+
+function goToNoticeList() {
+  uni.navigateTo({ url: '/subPackages/pages-construction/noticeList' })
+}
+
+function goToNoticeDetail() {
+  uni.navigateTo({ url: '/subPackages/pages-construction/noticeDetail' })
+}
+
+onMounted(() => {
+  taskStore.fetchTasks()
+})
+</script>
+
+<style scoped>
+.stat-number {
+  font-size: 24px;
+  font-weight: 700;
+}
+</style>