|
|
@@ -0,0 +1,233 @@
|
|
|
+
|
|
|
+<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">{{ userName }}</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">
|
|
|
+ <!-- 统计卡片 -->
|
|
|
+ <uni-card title="数据概览" :is-shadow="false" :is-full="false">
|
|
|
+ <view class="grid grid-cols-3 gap-3">
|
|
|
+ <view class="bg-surface rounded-xl p-4 text-center" @click="goToProjectList">
|
|
|
+ <text class="stat-number text-primary block">{{ projectStore.totalCount }}</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-warning block">{{ taskStore.pendingCount }}</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-success block">{{ taskStore.todayCount }}</text>
|
|
|
+ <text class="text-desc mt-1 block">进行中</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="goToProjectList">
|
|
|
+ <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-folder-add-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 opacity-50">
|
|
|
+ <view class="w-14 h-14 bg-surface rounded-2xl flex items-center justify-center mb-2">
|
|
|
+ <text class="uni-icons uniui-personadd-filled text-gray-400 text-2xl"></text>
|
|
|
+ </view>
|
|
|
+ <text class="text-xs text-gray-400 font-medium">客户管理</text>
|
|
|
+ </view>
|
|
|
+ <view class="flex flex-col items-center opacity-50">
|
|
|
+ <view class="w-14 h-14 bg-surface rounded-2xl flex items-center justify-center mb-2">
|
|
|
+ <text class="uni-icons uniui-file-text-filled text-gray-400 text-2xl"></text>
|
|
|
+ </view>
|
|
|
+ <text class="text-xs text-gray-400 font-medium">合同管理</text>
|
|
|
+ </view>
|
|
|
+ </view>
|
|
|
+ </uni-card>
|
|
|
+
|
|
|
+ <!-- 任务提醒入口 -->
|
|
|
+ <button
|
|
|
+ class="w-full py-3 bg-primary-light text-primary rounded-xl text-sm font-medium flex items-center justify-center"
|
|
|
+ @click="goToTaskReminder"
|
|
|
+ >
|
|
|
+ <text class="uni-icons uniui-notification-filled mr-2"></text>
|
|
|
+ 任务提醒 ({{ taskStore.pendingCount }})
|
|
|
+ </button>
|
|
|
+
|
|
|
+ <!-- 最新任务 -->
|
|
|
+ <uni-card
|
|
|
+ title="最新任务"
|
|
|
+ extra="查看全部"
|
|
|
+ :is-shadow="false"
|
|
|
+ @click-extra="goToTaskList"
|
|
|
+ >
|
|
|
+ <view v-if="taskStore.tasks.length === 0" class="py-6 text-center">
|
|
|
+ <text class="text-desc">暂无任务</text>
|
|
|
+ </view>
|
|
|
+ <uni-list v-else :border="false">
|
|
|
+ <uni-list-item
|
|
|
+ v-for="task in taskStore.tasks.slice(0, 3)"
|
|
|
+ :key="task.id"
|
|
|
+ :title="task.projectName"
|
|
|
+ :note="task.address || task.scheduleDate"
|
|
|
+ show-arrow
|
|
|
+ @click="goToTaskDetail(task.id)"
|
|
|
+ >
|
|
|
+ <template #header>
|
|
|
+ <view class="icon-box mr-3">
|
|
|
+ <text class="uni-icons uniui-flag"></text>
|
|
|
+ </view>
|
|
|
+ </template>
|
|
|
+ <template #footer>
|
|
|
+ <StatusTag :status="task.status" />
|
|
|
+ </template>
|
|
|
+ </uni-list-item>
|
|
|
+ </uni-list>
|
|
|
+ </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 class="w-2 h-2 rounded-full mt-1 mr-2 flex-shrink-0" :class="index === 0 ? 'bg-danger' : 'bg-gray-300'"></view>
|
|
|
+ </template>
|
|
|
+ </uni-list-item>
|
|
|
+ </uni-list>
|
|
|
+ </uni-card>
|
|
|
+
|
|
|
+ <!-- 行业知识 -->
|
|
|
+ <uni-card
|
|
|
+ title="行业知识"
|
|
|
+ extra="更多"
|
|
|
+ :is-shadow="false"
|
|
|
+ @click-extra="goToKnowledgeList"
|
|
|
+ >
|
|
|
+ <uni-list :border="false">
|
|
|
+ <uni-list-item
|
|
|
+ v-for="(item, index) in knowledgeList"
|
|
|
+ :key="index"
|
|
|
+ :title="item.title"
|
|
|
+ :note="item.summary"
|
|
|
+ show-arrow
|
|
|
+ @click="goToKnowledgeDetail"
|
|
|
+ >
|
|
|
+ <template #header>
|
|
|
+ <view class="w-10 h-10 bg-primary-light rounded-xl flex items-center justify-center mr-3 flex-shrink-0">
|
|
|
+ <text class="uni-icons uniui-chart text-primary text-lg"></text>
|
|
|
+ </view>
|
|
|
+ </template>
|
|
|
+ </uni-list-item>
|
|
|
+ </uni-list>
|
|
|
+ </uni-card>
|
|
|
+ </view>
|
|
|
+ </view>
|
|
|
+</template>
|
|
|
+
|
|
|
+<script setup lang="ts">
|
|
|
+import { ref, onMounted } from 'vue'
|
|
|
+import { useAuthStore } from '@/stores/auth'
|
|
|
+import { useProjectStore } from '@/stores/project'
|
|
|
+import { useTaskStore } from '@/stores/task'
|
|
|
+import TopBar from '@/components/common/TopBar.vue'
|
|
|
+import StatusTag from '@/components/common/StatusTag.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'
|
|
|
+
|
|
|
+const authStore = useAuthStore()
|
|
|
+const projectStore = useProjectStore()
|
|
|
+const taskStore = useTaskStore()
|
|
|
+
|
|
|
+const userName = ref(authStore.user?.name || '张销售')
|
|
|
+
|
|
|
+const notices = [
|
|
|
+ { title: '关于2024年第一季度销售激励方案的通知', date: '2024-01-15' },
|
|
|
+ { title: '春节期间服务安排调整公告', date: '2024-01-10' },
|
|
|
+]
|
|
|
+
|
|
|
+const knowledgeList = [
|
|
|
+ { title: '2024年清洁行业市场分析报告', summary: '全面解读清洁行业发展趋势、市场规模及竞争格局...' },
|
|
|
+ { title: '客户开发技巧与话术指南', summary: '提升销售业绩的实战技巧，有效沟通方法汇总...' },
|
|
|
+]
|
|
|
+
|
|
|
+function goToProjectList() {
|
|
|
+ uni.navigateTo({ url: '/subPackages/pages-common/projectList' })
|
|
|
+}
|
|
|
+
|
|
|
+function goToTaskList() {
|
|
|
+ uni.switchTab({ url: '/pages/task/task' })
|
|
|
+}
|
|
|
+
|
|
|
+function goToTaskDetail(taskId: string) {
|
|
|
+ taskStore.setCurrentTask(taskId)
|
|
|
+ uni.navigateTo({ url: '/subPackages/pages-common/taskDetail' })
|
|
|
+}
|
|
|
+
|
|
|
+function goToTaskReminder() {
|
|
|
+ uni.navigateTo({ url: '/subPackages/pages-sales/taskReminder' })
|
|
|
+}
|
|
|
+
|
|
|
+function goToNotification() {
|
|
|
+ uni.navigateTo({ url: '/subPackages/pages-sales/notification' })
|
|
|
+}
|
|
|
+
|
|
|
+function goToNoticeList() {
|
|
|
+ uni.navigateTo({ url: '/subPackages/pages-common/noticeList' })
|
|
|
+}
|
|
|
+
|
|
|
+function goToNoticeDetail() {
|
|
|
+ uni.navigateTo({ url: '/subPackages/pages-common/noticeDetail' })
|
|
|
+}
|
|
|
+
|
|
|
+function goToKnowledgeList() {
|
|
|
+ uni.navigateTo({ url: '/subPackages/pages-common/knowledgeList' })
|
|
|
+}
|
|
|
+
|
|
|
+function goToKnowledgeDetail() {
|
|
|
+ uni.navigateTo({ url: '/subPackages/pages-common/knowledgeDetail' })
|
|
|
+}
|
|
|
+
|
|
|
+onMounted(() => {
|
|
|
+ projectStore.fetchProjects()
|
|
|
+ taskStore.fetchTasks()
|
|
|
+})
|
|
|
+</script>
|
|
|
+
|
|
|
+<style scoped>
|
|
|
+.stat-number {
|
|
|
+ font-size: 24px;
|
|
|
+ font-weight: 700;
|
|
|
+}
|
|
|
+</style>
|
xuyunhui