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 #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="!isShowEmptyFlag" :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 uniPagination from "@/uni_modules/uni-pagination/components/uni-pagination/uni-pagination.vue";
  import StatusBar from "@/components/StatusBar.vue";
  import dayjs from 'dayjs'

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

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

  // onShow(() => {
  //   initI18n()
  //   updateTabBarText()
  // })
  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 = 'message_list_scroll';
  const FILTER_CACHE_KEY = 'message_list_filter';
  const PAGE_COUNT_CACHE_KEY = 'message_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 selectFilter = (option) => {
    currentFilter.value = option.value;
    showDropdown.value = false;
    statusSelect.value = option.value;
    fetchMessages(true);
    // 这里可以添加过滤逻辑
    // emit("filterChange", option);
  };

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

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

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

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

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

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

  onPageScroll((e) => {
    scrollTop.value = e.scrollTop;
    // #ifdef APP-NVUE
    scrollTop.value = e.detail.scrollTop;
    // #endif
  });
  // 返回或进入页面时恢复滚动位置
onMounted(() => {
    console.log('onMounted-message');
    
    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;

    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");

    // 处理选项和对应传后端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];
      }
    });
    try {
      await getMessageListApi(param).then((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()
    }
  };

  // 处理消息点击
  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("message.childStatusValue---:", message.childStatusValue);
      navigateToPage(`/subPackages/accountGroup/pages/message/messageOperation`, {
          id: message.id,
        });
    }, 0);
  };
  // 点击设置-跳转设置页面
  const handleSetting = () => {
    uni.navigateTo({
      url: "/subPackages/accountGroup/pages/settings/index",
    });
  };

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

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

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

  // 监听下拉刷新
  onPullDownRefresh(() => {
    fetchMessages(true);
    noticeStore.updateUnreadCount();
    uni.stopPullDownRefresh()
  });
onShow(() => {
    initI18n()
    updateTabBarText()
    showDropdown.value = false
    console.log('onMounted-message----onshow');

    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') {
    console.log('onMounted-message----onshow----saved');
      
      fetchMessages(true).then(async () => {
        // 如果之前加载过多页，则按页补齐
        console.log('onMounted-message----onshow----请求接口');
        
        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);
          // // app端需要再当前要更新tabbar页面中-onShow中更新下角标 - 不然发现不起作用
          noticeStore.updateUnreadCount();
        });
      });
    } else {
      fetchMessages(true).then(()=>{
        noticeStore.updateUnreadCount();
      });
    }
  });

  // 添加 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;
      }
    }

    .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-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>