index.vue

<template>
  <view class="h-page" ref="uv-back-top" @click="showDropdown && (showDropdown = false)">
    <StatusBar bgColor="#3277FB" />
    <view
      :style="`position: fixed;z-index: 99;top: ${navHeight}px;`"
      class="bg-block"
    ></view>
    <view :style="`position: fixed;z-index: 99;top: ${navHeight + 6}px;`">
      <PageOptions
        default-type="account"
        :options="xAxisFields"
        :options-props="{ label: 'name', value: 'key' }"
        @change="handleOptionsChange"
        :has-today="true"

      >
         <template #leftIcon>
          <view v-if="!isEditMode" class="button-group float-left">
              <uv-icon name="arrow-left" color="#ffffff" size="20px" @tap="handleBack" />
          </view>
        </template>
        <template #rightIcon>
          <view v-if="!isEditMode" class="button-group">
            <image
              @tap.stop="handleEdit"
              src="/static/message/edit.png"
              class="operation-btn"
            ></image>
            <image
              @tap.stop="handleSetting"
              src="/static/message/setting.png"
              class="operation-btn"
            ></image>
          </view>
          <view v-else class="button-group">
            <image
              @tap.stop="handleCloseEdit"
              src="/static/message/close.png"
              class="operation-btn-close"
            ></image>
          </view>
        </template>
      </PageOptions>
      <!-- 消息头部：总数和下拉选择框 -->
      <view
        class="message-header-container"
        :style="`position: fixed;z-index: 90;top: ${navHeight + 90}px;`"
      >
        <view class="message-count">
          <text class="count-title">{{ t('TaskNotice.allMessages') }}</text>
          <text class="count-title">({{ total }})</text>
        </view>
        <view class="message-filter" @click.stop="toggleDropdown">
          <text class="filter-text">{{ currentFilterText }}</text>
          <view class="dropdown-icon">
            <uv-icon name="arrow-down" size="26rpx" color="#333333"></uv-icon>
          </view>
          <!-- 下拉选择框 -->
          <view class="dropdown-menu" v-if="showDropdown" @click.stop>
            <view
              v-for="(item, idx) in filterOptions"
              :key="idx"
              class="dropdown-item"
              @click="selectFilter(item)"
              :class="{ active: currentFilter === item.value }"
            >
              <text>{{ item.label }}</text>
            </view>
          </view>
        </view>
      </view>
    </view>
    <view style="height: 230rpx; background-color: #ffffff"></view>
    <view class="h-c-container">
      <view class="rank">
        <MessageList
          ref="messageListRef"
          @itemClick="handleMessageClick"
          @selectionChange="handleSelectionChange"
          @editModeChange="handleEditModeChange"
          @falseAlarm="handleFalseAlarm"
          @confirm="handleConfirm"
          v-if="messageList.length > 0"
          :messages="messageList"
        >
        </MessageList>
        <view
          class="p-empty"
          v-else
          style="margin-top: 40rpx; padding-bottom: 40rpx"
        >
          <image
            class="p-empty-img"
            src="/static/common/empty.png"
            mode=""
          ></image>
          <text class="p-empty-text chart-text">{{
            t("maintenance.monitor.project.empty.text")
          }}</text>
        </view>
        <!-- <ChartsNvue style="height: 580px;flex:none" ref="rankingRef" /> -->
      </view>
      <uv-load-more
        v-if="messageList.length > pageSize"
        :status="loadMoreStatus"
        :loading-text="loadingText"
        :loadmore-text="loadmoreText"
        :nomore-text="nomoreText"
      />
    </view>
    <uv-back-top
      :scroll-top="scrollTop"
      zIndex="999"
      icon="arrow-upward"
    ></uv-back-top>
  </view>
</template>

<script setup>
import {
  onReachBottom,
  onPageScroll,
  onPullDownRefresh,
  onShow,
  onLoad,
  onTabItemTap,
} from "@dcloudio/uni-app";
import { ref, computed, onMounted, nextTick } from "vue";
import { getStageObj, rpx2Px ,navigateToPage, setStageObj} from "@/utils";
import { useNav } from "@/hooks";
import PageOptions from "@/components/PageOptions.vue";
import MessageList from "./cmp/MessageList.vue";
import ResidenceTime from "@/pages/flow/components/ResidenceTime.nvue";
import StatusBar from "@/components/StatusBar.vue";

import { t, initI18n } from "@/plugins/index.js";
import { getMessageListApi, batchUpdateTaskStatusApi,readMessageApi } from "@/api";

import { useNoticeStore } from '@/store/modules/notice'
import dayjs from 'dayjs'

 import {
    timeFormat
  } from '@/uni_modules/uv-ui-tools/libs/function/index.js';


// onLoad(()=>{
//   initI18n()
// })
const noticeStore = useNoticeStore()
const { navHeight } = useNav();
const status = ref("loading");
const loadingText = ref(t("echartsTitle.loading"));
const loadmoreText = ref(t("app.common.loadMore"));
const nomoreText = ref(t("app.common.noMoreData"));
const messageList = ref([]);
// 是否显示空数据
  const isShowEmptyFlag = ref(false);
const scrollTop = ref(0);
const SCROLL_CACHE_KEY = 'notification_list_scroll';
const FILTER_CACHE_KEY = 'notification_list_filter';
const PAGE_COUNT_CACHE_KEY = 'notification_list_page_num';
const pageNum = ref(1);
const pageSize = ref(50);
const total = ref(0);
const sourceData = ref([]);
const xAxisFields = ref([]);
const selectIndex = ref(0);
const loadMoreStatus = ref("loading");
const messageListRef = ref(null);
const selectedMessages = ref([]);
const isEditMode = ref(false);

// 选择相关状态
const showDropdown = ref(false);
const currentFilter = ref('All Items');
// 过滤选项 Pending   	Confirm   False alarm
// 过滤选项 Pending   	Confirm   False alarm
const filterOptions = computed(() => [
  {
    label: t('maintenance.monitor.project.indexStatus.all'),
    value: "All Items",
  },
  {
    label: t('dictionary.pending'),
    value: "Pending",
  },
  {
    label: t('dictionary.confirmed'),
    value: "Confirm",
  },
  {
    label: t('TaskNotice.falseAlarm'),
    value: "False alarm",
  },
]);
const currentFilterText = computed(()=>{
  const index = filterOptions.value.findIndex(item=>item.value === currentFilter.value)
  return filterOptions.value[index].label
})

const handleBack = () => {
  uni.navigateBack();
};
// 选择过滤选项
const selectFilter = (option) => {
  currentFilter.value = option.value;
  showDropdown.value = false;
  console.log("showDropdown: 选择过滤选项", option.value);
  statusSelect.value = option.value;
  fetchMessages(true);
  // 这里可以添加过滤逻辑
  // emit("filterChange", option);
};

// 切换下拉菜单显示状态
const toggleDropdown = () => {
  showDropdown.value = !showDropdown.value;
};

// 处理编辑，同时作为编辑模式的开关
const handleEdit = () => {
  console.log("处理编辑:");
  if (messageListRef.value) {
    // 调用子组件的handleEdit方法，该方法会自动切换编辑模式
    messageListRef.value.handleEdit();
  }
};
// 处理关闭编辑
const handleCloseEdit = () => {
  console.log("关闭编辑");
  isEditMode.value = false;
  console.log("关闭编辑-end");
  if (messageListRef.value) {
    // 调用子组件的handleEdit方法，该方法会自动切换编辑模式
    messageListRef.value.handleEdit();
  }
};

// 处理编辑模式变化
const handleEditModeChange = (mode) => {
  isEditMode.value = mode;
  console.log("编辑模式:", mode);
};
// 处理消息选择变化
const handleSelectionChange = (selectedIds) => {
  selectedMessages.value = selectedIds;
  console.log("已选择的消息ID:", selectedMessages.value);
  // selectedMessages.value.forEach((id) => {
  //   console.log("id:", id);
  // });
};

// 批量更新接口
const handleBatchUpdate = (ids, status) => {
  console.log("批量更新:", ids);
  // 构造
  const param = ids.map((id) => ({
    taskId: id,
    status,
    counttime: timeFormat(new Date().getTime(), 'yyyy-mm-dd hh:MM:ss'),
  }));
  console.log("param---:", param);
  batchUpdateTaskStatusApi(param).then((res) => {
    console.log("批量更新:", res);
    fetchMessages(true);
  });
};

// 处理误报操作
const handleFalseAlarm = (ids) => {
  console.log("标记为误报:", ids);
  // 实际标记已读逻辑
  handleBatchUpdate(ids, "FALSE_ALARM");
};

// 处理确认操作
const handleConfirm = (ids) => {
  console.log("确认消息:", ids);
  // 实际归档逻辑
  handleBatchUpdate(ids, "RESOLVE");
};

onPageScroll((e) => {
  scrollTop.value = e.scrollTop;
  // #ifdef APP-NVUE
  scrollTop.value = e.detail.scrollTop;
  // #endif
});
// 恢复滚动位置与筛选
onMounted(() => {
  const saved = getStageObj(SCROLL_CACHE_KEY);
  if (saved && typeof saved.scrollTop === 'number') {
    const savedFilter = getStageObj(FILTER_CACHE_KEY);
    if (savedFilter && savedFilter.currentFilter) {
      currentFilter.value = savedFilter.currentFilter;
      statusSelect.value = savedFilter.currentFilter;
    }
    nextTick(() => {
      uni.pageScrollTo({ scrollTop: saved.scrollTop, duration: 0 });
    });
  }
});
const params = ref({});
const flag = ref(false);
let statusSelect = ref(undefined);

const handleOptionsChange = (e, key) => {
  pageNum.value = 1;
  params.value = e;
  console.log(e, "e-handleOptionsChange");
  console.log(key, "key-handleOptionsChange");

  if (key === "indicatorKey") {
    selectIndex.value = xAxisFields.value.findIndex(
      (el) => el.key === e.indicatorKey
    );
  }
  loadingText.value = t("echartsTitle.loading");
  status.value = "loading";
  if (flag.value) {
    sourceData.value = [];
  }
  fetchMessages(true).then(()=>{
    noticeStore.updateUnreadCount();
  })
};
// 获取消息数据
const fetchMessages = async (isRefresh = false) => {
  if (isRefresh) {
    pageNum.value = 1;
    messageList.value = [];
    isEditMode.value = false;
    messageListRef.value && messageListRef.value.toggleEditMode('force');
  }

  loadMoreStatus.value = "loading";
  // 获取group
  const account = getStageObj("account");
  console.log(account, "account");

  // 处理选项和对应传后端status 及 childStatus 组合字段回显
  const param = {
    accountId: account.id, // 集团id
    // status: statusSelect.value,  //" NEW | CLOSED " ：  进行中/已关闭
    // isRead: false,
    // childStatus： //  RESOLVE|FALSE_ALARM 已处理|误报
    // status: //  NEW | CLOSED 进行中/已关闭
    // 否者就去掉这个属性 完全不传
    mallId: params.value.storeId || undefined,
    childStatus:
      statusSelect.value === "False alarm"
        ? "FALSE_ALARM"
        : statusSelect.value === "Confirm"
        ? "RESOLVE"
        : undefined,
    status:
      statusSelect.value === "Pending"
        ? "NEW"
        : statusSelect.value === "Confirm" ||
          statusSelect.value === "False alarm"
        ? "CLOSED"
        : undefined,
    startTime: params.value.startDate,
    endTime: params.value.endDate,
    pageNum: pageNum.value,
    pageSize: pageSize.value,
  };
  // 值为空或者为undefined delete属性 兼容后端
  Object.keys(param).forEach((key) => {
    if (param[key] === undefined || param[key] === "") {
      delete param[key];
    }
  });
  console.log(param, "param", params.value);
  try {
    await getMessageListApi(param).then((res) => {
      console.log(res, "res");
      // // 模拟数据
      // const mockData = Array(10)
      //   .fill()
      //   .map((_, index) => ({
      //     id: `msg_${pageNum.value}_${index}`,
      //     type: ["unread", "read", "processed"][Math.floor(Math.random() * 3)],
      //     title: `Artisan's Nook Gallery ${index}`,
      //     description: `这是一条消息描述，可能会很长很长很长很长很长很长很长很长很长很长很长很长很长很长很长`,
      //     createTime: `2025-07-${17 - (pageNum.value - 1) * 10 - index} 14:00:20`,
      //     unread: Math.random() > 0.5,
      //     status: ["Pending", "Confirm", "False alarm"][
      //       Math.floor(Math.random() * 3)
      //     ],
      //   }));
      // messageList.value = [...messageList.value, ...mockData];】
      messageList.value = [...messageList.value, ...res.data.list];
      total.value = res.data.total;
      // childStatusValue 转换值
      // childStatus:   RESOLVE|FALSE_ALARM 已处理|误报
      //  status:   NEW | CLOSED 进行中/已关闭  其中NEW为Pending
      messageList.value.forEach((item) => {
        if (item.status === "NEW") {
          item.childStatusValue = "Pending";
        } else if (item.childStatus === "RESOLVE") {
          item.childStatusValue = "Confirm";
        } else if (item.childStatus === "FALSE_ALARM") {
          item.childStatusValue = "False alarm";
        }
      });
      // 分页 没有更多数据
      if (res.data.list.length < pageSize.value) {
        loadMoreStatus.value = "noMore";
      } else {
        loadMoreStatus.value = "more";
        // 刷新全选- 分页又加载数据的话
      }
    });
    isShowEmptyFlag.value = messageList.value.length === 0;
    // 模拟网络请求延迟
    // setTimeout(() => {
    //   // 模拟数据
    //   const mockData = Array(10)
    //     .fill()
    //     .map((_, index) => ({
    //       id: `msg_${pageNum.value}_${index}`,
    //       type: ["unread", "read", "processed"][Math.floor(Math.random() * 3)],
    //       title:
    //         index % 2 === 0
    //           ? "Artisan's Nook Gallery"
    //           : "PMI Health Vaping Space",
    //       description:
    //         "这是一条消息描述，可能会很长很长很长很长很长很长很长很长很长很长很长很长很长很长",
    //       time: `2025-07-${17 - (pageNum.value - 1) * 10 - index} 14:00:20`,
    //       unread: Math.random() > 0.5,
    //       // 右边的状态-  "Pending", "Confirm", "False alarm"];
    //       status:
    //         Math.random() > 0.7
    //           ? "Pending"
    //           : Math.random() > 0.5
    //           ? "Confirm"
    //           : "False alarm",
    //     }));

    //   messageList.value = [...messageList.value, ...mockData];
    //   console.log(messageList.value, "messageList.value");

    //   // 模拟没有更多数据
    //   if (pageNum.value >= 3) {
    //     console.log("---------noMore");
    //     loadMoreStatus.value = "noMore";
    //   } else {
    //     console.log("---------more");
    //     loadMoreStatus.value = "more";
    //   }

    //   // 结束下拉刷新
    //   uni.stopPullDownRefresh();
    // }, 1000);
  } catch (error) {
    //   uni.stopPullDownRefresh();
    uni.stopPullDownRefresh()
  }
};

// 处理消息点击
  const handleMessageClick = async (message) => {
    // 进入详情前缓存当前位置、筛选与已加载页数
    setStageObj(SCROLL_CACHE_KEY, { scrollTop: scrollTop.value });
    setStageObj(FILTER_CACHE_KEY, { currentFilter: currentFilter.value });
    setStageObj(PAGE_COUNT_CACHE_KEY, pageNum.value);
    setTimeout(() => {
      console.log("点击消息1:", message);
      navigateToPage(`/subPackages/accountGroup/pages/message/messageOperation`, {
          id: message.id,
        });
    }, 0);
  };
// 点击设置-跳转设置页面
const handleSetting = () => {
  console.log("点击设置");
  uni.navigateTo({
    url: "/subPackages/accountGroup/pages/settings/index",
  });
  console.log("点击设置-end");
};

// 加载更多
const loadMore = () => {
  if (loadMoreStatus.value === "loading" || loadMoreStatus.value === "noMore")
    return;

  pageNum.value++;
  fetchMessages();
};

// 监听上拉加载
onReachBottom(() => {
  loadMore();
});

// 监听下拉刷新
onPullDownRefresh(() => {
  fetchMessages(true);
  noticeStore.updateUnreadCount();
  uni.stopPullDownRefresh()
});

onShow(() => {
  showDropdown.value = false
  initI18n()
  if (!params.value.startDate) {
    return false
  }
  const saved = getStageObj(SCROLL_CACHE_KEY);
  const savedPages = getStageObj(PAGE_COUNT_CACHE_KEY);
  if (saved && typeof saved.scrollTop === 'number') {
    fetchMessages(true).then(async () => {
      if (typeof savedPages === 'number' && savedPages > 1) {
        while (pageNum.value < savedPages && loadMoreStatus.value !== 'noMore') {
          pageNum.value++;
          await fetchMessages();
        }
      }
      nextTick(() => {
        uni.pageScrollTo({ scrollTop: saved.scrollTop, duration: 0 });
        setStageObj(SCROLL_CACHE_KEY, null);
        setStageObj(PAGE_COUNT_CACHE_KEY, null);
          noticeStore.updateUnreadCount();
      });
    });
  } else {
    fetchMessages(true).then(()=>{
      noticeStore.updateUnreadCount();
    });
  }
  // // #ifdef APP-PLUS
  // noticeStore.updateUnreadCount();
  // // #endif
});

// 添加 tabbar 切换事件处理
// onTabItemTap(() => {
//   // tabbar 切换时重置所有状态
//   scrollTop.value = 0;
//   pageNum.value = 1;
//   loadMoreStatus.value = 'loadmore';
  
//   // 清除所有缓存
//   setStageObj(SCROLL_CACHE_KEY, null);
//   setStageObj(FILTER_CACHE_KEY, null);
//   setStageObj(PAGE_COUNT_CACHE_KEY, null);
  
//   // 重置筛选条件为默认值
//   currentFilter.value = 'all';
  
//   // 重新加载数据
//   fetchMessages(true);
  
//   // 滚动到顶部
//   uni.pageScrollTo({ scrollTop: 0, duration: 0 });
// });
</script>

<style lang="scss">
.bg-block {
  height: 12rpx;
  background-color: #3277fb;
  width: 100%;
}
.h-page {
  /* #ifdef H5 */
  min-height: calc(100vh - 44px);
  /* #endif */
  /* #ifndef H5 */
  min-height: 100vh;
  /* #endif */
  background-color: #ffffff;

  .h-c-container {
    padding: 0 32rpx 20rpx;
    flex: 1;
    background-color: #ffffff;
    padding-bottom: calc(env(safe-area-inset-bottom) + 80rpx);
  }
  .button-group {
    display: flex;
    align-items: center;
    gap: 28rpx;
    /* #ifdef MP-WEIXIN */
    padding-left: 60rpx;
    /* #endif */
    /* #ifndef MP-WEIXIN */
    position: absolute;
    right: 20rpx;
    top: 10rpx;

    /* #endif */
    .operation-btn {
      width: 40rpx;
      height: 40rpx;
    }
    .operation-btn-close {
      width: 32rpx;
      height: 32rpx;
    }
  }
  .float-left{
    position: absolute;
    left: 20rpx;
    top: 10rpx;
  }
  .message-header-container {
    display: flex;
    justify-content: space-between;
    align-items: center;
    padding: 20rpx 32rpx;
    width: 100%;
    z-index: 999;
    background: #ffffff;
    .message-count {
      display: flex;
      align-items: center;
      gap: 10rpx;
    }

    .count-title {
      font-weight: normal;
      font-size: 28rpx;
      color: #262626;
    }
    .message-filter {
      position: relative;
      display: flex;
      align-items: center;
    }

    .filter-text {
      font-family: Inter, Inter;
      font-weight: 400;
      font-size: 24rpx;
      color: #4e515e;
      margin-right: 16rpx;
    }

    .dropdown-icon {
      display: flex;
      align-items: center;
    }

    .dropdown-menu {
      position: absolute;
      top: 100%;
      right: 0;
      width: 200rpx;
      background-color: #ffffff;
      border-radius: 8rpx;
      box-shadow: 0 2rpx 10rpx rgba(0, 0, 0, 0.1);
      z-index: 10;
      margin-top: 10rpx;
    }

    .dropdown-item {
      padding: 20rpx;
      font-size: 28rpx;
      color: #333333;
      border-bottom: 1rpx solid #f5f5f5;
    }

    .dropdown-item.active {
      color: #387cf5;
      background-color: #f0f7ff;
    }

    .dropdown-item:last-child {
      border-bottom: none;
    }
  }
}
.navbar-right-button-container {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 20rpx;
}

.rank {
  // padding: 32rpx;
  background-color: #fff;
  border-radius: 16rpx;
  flex: 1;
}
</style>