aquagreen_wechat_app/src/components/home/SalesHome.vue

<template>
  <view class="sales-home">
    <!-- 顶部山水背景 banner -->
    <view class="banner">
      <image class="banner-bg" src="/static/index-backpage.jpg" mode="aspectFill" />
      <view class="banner-veil"></view>
      <StatusBar />
      <view class="banner-inner px-4">
        <view class="flex items-center flex-1 min-w-0">
          <view class="avatar mr-3">
            <text class="uni-icons uniui-person-filled avatar-icon"></text>
          </view>
          <view class="min-w-0">
            <text class="greet block">{{ greetText }}，欢迎回来</text>
            <text class="username truncate">{{ userName }}</text>
          </view>
        </view>
        <view
          class="notify-btn flex-shrink-0"
          hover-class="notify-hover"
          :hover-start-time="0"
          :hover-stay-time="120"
          @click="goToNotification"
        >
          <text class="uni-icons uniui-notification-filled notify-icon"></text>
          <view v-if="notificationCount > 0" class="notify-badge">
            {{ notificationCount > 99 ? '99+' : notificationCount }}
          </view>
        </view>
      </view>
    </view>

    <!-- 内容区 -->
    <view class="content-wrap px-4 pb-24">
      <!-- 统计卡片 -->
      <view class="glass-card p-4">
        <view class="grid grid-cols-3 gap-3">
          <view
            class="stat-card"
            hover-class="stat-hover"
            :hover-start-time="0"
            :hover-stay-time="120"
            @click="goToProjectList"
          >
            <view class="stat-bar"></view>
            <text class="stat-value">{{ projectStore.totalCount }}</text>
            <text class="stat-label">本月项目</text>
          </view>
          <view
            class="stat-card"
            hover-class="stat-hover"
            :hover-start-time="0"
            :hover-stay-time="120"
            @click="goToTaskList"
          >
            <view class="stat-bar"></view>
            <text class="stat-value">{{ taskStore.pendingCount }}</text>
            <text class="stat-label">待确认</text>
          </view>
          <view
            class="stat-card"
            hover-class="stat-hover"
            :hover-start-time="0"
            :hover-stay-time="120"
            @click="goToTaskList"
          >
            <view class="stat-bar"></view>
            <text class="stat-value">{{ taskStore.todayCount }}</text>
            <text class="stat-label">进行中</text>
          </view>
        </view>
      </view>

      <!-- 快捷入口 -->
      <view class="glass-card p-4">
        <view class="grid grid-cols-3 gap-3">
          <view
            class="entry-card"
            hover-class="entry-hover"
            :hover-start-time="0"
            :hover-stay-time="120"
            @click="goToProjectList"
          >
            <view class="icon-chip">
              <text class="uni-icons uniui-folder-add chip-glyph"></text>
            </view>
            <text class="entry-label">项目库</text>
          </view>
          <view
            class="entry-card"
            hover-class="entry-hover"
            :hover-start-time="0"
            :hover-stay-time="120"
            @click="goToCustomer"
          >
            <view class="icon-chip">
              <text class="uni-icons uniui-personadd chip-glyph"></text>
            </view>
            <text class="entry-label">客户管理</text>
          </view>
          <view
            class="entry-card"
            hover-class="entry-hover"
            :hover-start-time="0"
            :hover-stay-time="120"
            @click="goToContract"
          >
            <view class="icon-chip">
              <text class="uni-icons uniui-compose chip-glyph"></text>
            </view>
            <text class="entry-label">合同管理</text>
          </view>
        </view>
      </view>

      <!-- 任务提醒入口 -->
      <view
        class="glass-card reminder-row"
        hover-class="reminder-hover"
        :hover-start-time="0"
        :hover-stay-time="120"
        @click="goToTaskReminder"
      >
        <view class="icon-chip mr-3">
          <text class="uni-icons uniui-notification-filled chip-glyph"></text>
        </view>
        <text class="flex-1 reminder-text">任务提醒</text>
        <view class="reminder-count">{{ taskStore.pendingCount }}</view>
        <text class="uni-icons uniui-arrowright row-arrow ml-2"></text>
      </view>

      <!-- 最新任务 -->
      <view class="glass-card">
        <view class="section-head">
          <view class="section-bar mr-2"></view>
          <text class="section-title flex-1">最新任务</text>
          <text class="section-more" @click="goToTaskList">查看全部</text>
        </view>
        <view v-if="taskStore.tasks.length === 0" class="py-6 text-center">
          <text class="empty-text">暂无任务</text>
        </view>
        <view v-else>
          <view
            v-for="task in latestTasks"
            :key="task.id"
            class="list-row"
            hover-class="row-hover"
            :hover-start-time="0"
            :hover-stay-time="120"
            @click="goToTaskDetail(task.id)"
          >
            <view class="icon-chip mr-3">
              <text class="uni-icons uniui-flag chip-glyph"></text>
            </view>
            <view class="flex-1 min-w-0 mr-2">
              <text class="row-title truncate">{{ task.projectName }}</text>
              <text class="row-sub truncate">{{ task.address || task.scheduleDate }}</text>
            </view>
            <StatusTag :status="task.status" />
          </view>
        </view>
      </view>

      <!-- 通知公告 -->
      <view class="glass-card">
        <view class="section-head">
          <view class="section-bar mr-2"></view>
          <text class="section-title flex-1">通知公告</text>
          <text class="section-more" @click="goToNoticeList">更多</text>
        </view>
        <view
          v-for="(notice, index) in notices"
          :key="notice.noticeId"
          class="list-row"
          hover-class="row-hover"
          :hover-start-time="0"
          :hover-stay-time="120"
          @click="goToNoticeDetail(notice.noticeId)"
        >
          <view class="dot mr-3" :class="index === 0 ? 'dot-active' : 'dot-muted'"></view>
          <text class="flex-1 row-title truncate mr-2">{{ notice.title }}</text>
          <text class="row-date flex-shrink-0">{{ formatDate(notice.publishTime, 'YYYY-MM-DD') }}</text>
        </view>
        <view v-if="notices.length === 0" class="list-row">
          <text style="font-size: 12px; color: #9ca3af;">暂无通知</text>
        </view>
      </view>

      <!-- 行业知识 -->
      <view class="glass-card">
        <view class="section-head">
          <view class="section-bar mr-2"></view>
          <text class="section-title flex-1">行业知识</text>
          <text class="section-more" @click="goToKnowledgeList">更多</text>
        </view>
        <view
          v-for="item in knowledgeList"
          :key="item.id"
          class="list-row"
          hover-class="row-hover"
          :hover-start-time="0"
          :hover-stay-time="120"
          @click="goToKnowledgeDetail(item.id)"
        >
          <view class="icon-chip mr-3">
            <text class="uni-icons uniui-chart chip-glyph"></text>
          </view>
          <view class="flex-1 min-w-0">
            <text class="row-title truncate">{{ item.title }}</text>
            <text class="row-sub truncate">{{ summaryOf(item.content) }}</text>
          </view>
        </view>
        <view v-if="knowledgeList.length === 0" class="list-row">
          <text style="font-size: 12px; color: #9ca3af;">暂无知识内容</text>
        </view>
      </view>
    </view>
  </view>
</template>

<script setup lang="ts">
import { ref, computed, onMounted } from 'vue'
import { useAuthStore } from '@/stores/auth'
import { useProjectStore } from '@/stores/project'
import { useTaskStore } from '@/stores/task'
import { useNotificationStore } from '@/stores/notification'
import StatusBar from '@/components/common/StatusBar.vue'
import StatusTag from '@/components/common/StatusTag.vue'
import { getNoticeList } from '@/api/notice'
import { getKnowledgeList, summaryOf, type KnowledgeItem } from '@/api/knowledge'
import { formatDate } from '@/utils'

const authStore = useAuthStore()
const projectStore = useProjectStore()
const taskStore = useTaskStore()
const notificationStore = useNotificationStore()

const userName = ref(authStore.user?.name || '张销售')
const notificationCount = computed(() => notificationStore.unreadCount)

const latestTasks = computed(() => taskStore.tasks.slice(0, 3))

const greetText = computed(() => {
  const hour = new Date().getHours()
  if (hour < 6) return '凌晨好'
  if (hour < 12) return '上午好'
  if (hour < 14) return '中午好'
  if (hour < 18) return '下午好'
  return '晚上好'
})

const notices = ref<any[]>([])

const knowledgeList = ref<KnowledgeItem[]>([])

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?id=${taskId}` })
}

function goToTaskReminder() {
  uni.navigateTo({ url: '/subPackages/pages-sales/taskReminder' })
}

function goToNotification() {
  uni.navigateTo({ url: '/subPackages/pages-common/messageList' })
}

function goToNoticeList() {
  uni.navigateTo({ url: '/subPackages/pages-common/noticeList' })
}

function goToNoticeDetail(noticeId: number) {
  uni.navigateTo({ url: `/subPackages/pages-common/noticeDetail?id=${noticeId}` })
}

function goToKnowledgeList() {
  uni.navigateTo({ url: '/subPackages/pages-common/knowledgeList' })
}

function goToKnowledgeDetail(id: number) {
  uni.navigateTo({ url: `/subPackages/pages-common/knowledgeDetail?id=${id}` })
}

function goToCustomer() {
  uni.navigateTo({ url: '/subPackages/pages-customer/customer' })
}

function goToContract() {
  uni.navigateTo({ url: '/subPackages/pages-contract/contract' })
}

onMounted(async () => {
  projectStore.fetchProjects()
  taskStore.fetchTasks()
  notificationStore.fetchUnreadCount()
  try {
    const res = await getNoticeList(1, 3)
    notices.value = res.rows || []
  } catch (error) {
    console.error('获取通知列表失败:', error)
  }
  try {
    const res = await getKnowledgeList(1, 2)
    knowledgeList.value = res.rows || []
  } catch (error) {
    console.error('获取知识列表失败:', error)
  }
})
</script>

<style scoped>
/* ==================== 页面外壳 ==================== */
.sales-home {
  position: relative;
  max-width: 430px;
  margin: 0 auto;
  min-height: 100vh;
  background-color: #f6fbf9; /* 云雾白 */
}

/* ==================== 顶部 banner（山水背景） ==================== */
.banner {
  position: relative;
  height: 168px;
  overflow: hidden;
  background-color: #dff0e8; /* 图片加载前的浅青绿兜底 */
}

.banner-bg {
  position: absolute;
  top: 0;
  left: 0;
  width: 100%;
  height: 100%;
  z-index: 0;
}

/* 蒙版：顶部提亮保文字、底部淡出衔接云雾白 */
.banner-veil {
  position: absolute;
  top: 0;
  left: 0;
  width: 100%;
  height: 100%;
  z-index: 1;
  background: linear-gradient(
    180deg,
    rgba(255, 255, 255, 0.5) 0%,
    rgba(255, 255, 255, 0.16) 45%,
    rgba(246, 251, 249, 0.66) 100%
  );
}

.banner-inner {
  position: relative;
  z-index: 2;
  display: flex;
  align-items: center;
  padding-top: 14px;
  padding-bottom: 24px;
}

.avatar {
  width: 48px;
  height: 48px;
  border-radius: 50%;
  background-color: rgba(255, 255, 255, 0.9);
  backdrop-filter: blur(8px);
  -webkit-backdrop-filter: blur(8px);
  display: flex;
  align-items: center;
  justify-content: center;
  box-shadow: 0 8px 22px -8px rgba(31, 41, 37, 0.4);
  flex-shrink: 0;
}

.avatar-icon {
  font-size: 24px;
  color: #368f6f;
}

.greet {
  font-size: 12px;
  color: rgba(31, 41, 37, 0.62);
}

.username {
  display: block;
  margin-top: 2px;
  font-size: 18px;
  font-weight: 800;
  letter-spacing: 0.5px;
  color: #1f2937;
}

/* 通知铃铛 */
.notify-btn {
  position: relative;
  width: 40px;
  height: 40px;
  border-radius: 50%;
  display: flex;
  align-items: center;
  justify-content: center;
  background-color: rgba(255, 255, 255, 0.6);
  backdrop-filter: blur(8px);
  -webkit-backdrop-filter: blur(8px);
  box-shadow: 0 6px 18px -8px rgba(31, 41, 37, 0.35);
}

.notify-icon {
  font-size: 20px;
  color: #368f6f;
}

.notify-badge {
  position: absolute;
  top: -4px;
  right: -4px;
  min-width: 18px;
  height: 18px;
  padding: 0 4px;
  border-radius: 9px;
  background-color: #ef4444;
  border: 1.5px solid rgba(255, 255, 255, 0.9);
  color: #ffffff;
  font-size: 10px;
  font-weight: 700;
  line-height: 15px;
  text-align: center;
}

.notify-hover {
  background-color: rgba(255, 255, 255, 0.88);
}

/* ==================== 内容区（轻微上叠 banner） ==================== */
.content-wrap {
  position: relative;
  z-index: 2;
  margin-top: -18px;
}

/* 磨砂玻璃卡 */
.glass-card {
  background-color: rgba(255, 255, 255, 0.85);
  backdrop-filter: blur(14px);
  -webkit-backdrop-filter: blur(14px);
  border: 1px solid rgba(164, 216, 152, 0.35);
  border-radius: 24px;
  box-shadow: 0 18px 50px -12px rgba(54, 143, 111, 0.28);
  overflow: hidden;
  margin-bottom: 12px;
}

/* ==================== 统计卡 ==================== */
.stat-card {
  position: relative;
  display: flex;
  flex-direction: column;
  align-items: center;
  justify-content: center;
  min-height: 88px;
  padding: 14px 6px 12px;
  border-radius: 16px;
  background-color: rgba(164, 216, 152, 0.14);
  border: 1px solid rgba(164, 216, 152, 0.3);
  overflow: hidden;
}

.stat-bar {
  position: absolute;
  top: 0;
  left: 50%;
  transform: translateX(-50%);
  width: 26px;
  height: 3px;
  border-radius: 0 0 3px 3px;
  background: linear-gradient(135deg, #368f6f 0%, #5ab8d0 100%);
}

.stat-value {
  font-size: 24px;
  font-weight: 800;
  line-height: 1.1;
  color: #368f6f;
}

.stat-label {
  margin-top: 6px;
  font-size: 12px;
  color: #6b7280;
}

.stat-hover {
  transform: scale(0.97);
  background-color: rgba(164, 216, 152, 0.24);
}

/* ==================== 快捷入口 ==================== */
.entry-card {
  display: flex;
  flex-direction: column;
  align-items: center;
  justify-content: center;
  padding: 14px 4px 12px;
  border-radius: 16px;
}

.entry-label {
  margin-top: 8px;
  font-size: 13px;
  font-weight: 500;
  color: #374151;
}

.entry-hover {
  background-color: rgba(164, 216, 152, 0.14);
  transform: scale(0.97);
}

/* 嫩芽浅底图标块（与个人中心 menu-icon 一致） */
.icon-chip {
  width: 42px;
  height: 42px;
  border-radius: 12px;
  flex-shrink: 0;
  display: flex;
  align-items: center;
  justify-content: center;
  background-color: rgba(164, 216, 152, 0.2);
}

.chip-glyph {
  font-size: 20px;
  color: #368f6f;
}

/* ==================== 任务提醒入口 ==================== */
.reminder-row {
  display: flex;
  align-items: center;
  padding: 14px 16px;
}

.reminder-text {
  font-size: 15px;
  font-weight: 600;
  color: #1f2937;
}

.reminder-count {
  min-width: 22px;
  height: 22px;
  padding: 0 7px;
  border-radius: 11px;
  display: flex;
  align-items: center;
  justify-content: center;
  font-size: 12px;
  font-weight: 700;
  color: #368f6f;
  background-color: rgba(164, 216, 152, 0.24);
}

.row-arrow {
  font-size: 16px;
  color: #c4d0cb;
}

.reminder-hover {
  background-color: rgba(164, 216, 152, 0.12);
}

/* ==================== 区块标题栏 ==================== */
.section-head {
  display: flex;
  align-items: center;
  padding: 16px 16px 12px;
}

.section-bar {
  width: 4px;
  height: 16px;
  border-radius: 2px;
  background: linear-gradient(180deg, #368f6f 0%, #5ab8d0 100%);
}

.section-title {
  font-size: 16px;
  font-weight: 700;
  color: #1f2937;
}

.section-more {
  font-size: 13px;
  color: #368f6f;
}

/* ==================== 列表行 ==================== */
.list-row {
  display: flex;
  align-items: center;
  padding: 13px 16px;
  border-top: 1px solid rgba(164, 216, 152, 0.18);
}

.row-title {
  display: block;
  font-size: 14px;
  font-weight: 500;
  color: #1f2937;
}

.row-sub {
  display: block;
  margin-top: 3px;
  font-size: 12px;
  color: #9ca3af;
}

.row-date {
  font-size: 12px;
  color: #9ca3af;
}

.row-hover {
  background-color: rgba(164, 216, 152, 0.1);
}

/* 通知圆点 */
.dot {
  width: 8px;
  height: 8px;
  border-radius: 50%;
  flex-shrink: 0;
}

.dot-active {
  background-color: #368f6f;
  box-shadow: 0 0 0 3px rgba(164, 216, 152, 0.3);
}

.dot-muted {
  background-color: #c4d0cb;
}

.empty-text {
  font-size: 13px;
  color: #9ca3af;
}
</style>