messageReport.vue

<template>
  <view class="h-page" ref="uv-back-top">
    <CustomNavBar :title="t('PreMenu.regionalRanking')" />
    <view :style="`position: fixed;z-index: 99;top: ${navHeight + 44}px;`">
      <PageOptions
        default-type="account"
        :options="xAxisFields"
        :options-props="{ label: 'name', value: 'key' }"
        @change="handleOptionsChange"
        choose-group="1"
        has-store="0"
      />
    </view>
    <view style="height: 164rpx"></view>
    <view class="h-c-container">
      <view class="summary-stats-wrap">
        <!-- 总体统计 -->
        <view class="summary-stats">
          <view class="stat-item">
            <view class="stat-label">Alert Count</view>
            <view class="stat-value">306</view>
          </view>
          <view class="stat-item">
            <view class="stat-label">Processed</view>
            <view class="stat-value">224</view>
          </view>
          <view class="stat-item">
            <view class="stat-label">Unprocessed</view>
            <view class="stat-value">82</view>
          </view>
        </view>

        <!-- 详细表格 -->
        <view class="detail-table">
          <!-- 表头 -->
          <view class="table-header">
            <view class="header-cell store-name">Store Name</view>
            <view class="header-cell alert-count">Alert Count</view>
            <view class="header-cell processed">Processed</view>
          </view>

          <!-- 表格数据 -->
          <view
            class="table-row"
            v-for="(item, index) in tableData"
            :key="index"
          >
            <view class="table-cell store-name">{{ item.storeName }}</view>
            <view class="table-cell alert-count">{{ item.alertCount }}</view>
            <view class="table-cell processed">{{ item.processed }}</view>
          </view>
        </view>
      </view>
    </view>
    <uv-back-top
      :scroll-top="scrollTop"
      zIndex="999"
      icon="arrow-upward"
    ></uv-back-top>
  </view>
</template>

<script setup>
import { onReachBottom, onPageScroll } from "@dcloudio/uni-app";
import { ref, computed, onMounted } from "vue";
import { getStageObj } from "@/utils";
import { useNav } from "@/hooks";
import PageOptions from "@/components/PageOptions.vue";
import CustomNavBar from "@/components/CustomNav.nvue";

import { t } from "@/plugins/index.js";
import { getMallStatisticsApi } from "@/api";

const { navHeight } = useNav();
const status = ref("loading");
const tableData = ref([]);
onReachBottom(() => {});

const scrollTop = ref(0);
onPageScroll((e) => {
  scrollTop.value = e.scrollTop;
  // #ifdef APP-NVUE
  scrollTop.value = e.detail.scrollTop;
  // #endif
});

const params = ref({});
const totalParam = ref({});
const handleOptionsChange = (e, key) => {
  page.value = 1;
  params.value = e;
  status.value = "loading";
};
const getMessageReport = () => {
  const param = {
    accountId: getStageObj("account")?.id, // 集团id
    startTime: params.value.startDate,
    endTime: params.value.endDate,
  };
  getMallStatisticsApi(param).then((res) => {
    console.log(res, "resgetMessageReport");
    totalParam.value = {
      alertCount: res?.data?.total,
      processed: res?.data?.closeEdSum,
      unprocessed: res?.data?.unCloseSum,
    };
    const list = res?.data?.resultMap;
    tableData.value = list.map((item) => ({
      storeName: item?.mallName,
      alertCount:
        (item.statusCountMap?.CLOSED || 0) + (item.statusCountMap?.NEW || 0),
      processed: item.statusCountMap?.CLOSED,
    }));
    console.log(tableData.value, "tableData.value");
  });
};
onMounted(() => {
  getMessageReport();
});

const page = ref(1);
const xAxisFields = ref([]);
</script>

<style lang="scss">
.h-page {
  /* #ifdef H5 */
  min-height: calc(100vh - 44px);
  /* #endif */
  /* #ifndef H5 */
  min-height: 100vh;
  /* #endif */
  background-color: #ffffff;

  .h-c-container {
    padding: 0 0rpx 20rpx;
    flex: 1;
  }
}

.summary-stats-wrap {
  padding: 32rpx;
  background-color: #fff;
  flex: 1;
}

.summary-stats {
  display: flex;
  justify-content: space-between;
  margin-bottom: 20rpx;
  padding: 38rpx 0;
  background: #ffffff;
  border-radius: 8rpx 8rpx 8rpx 8rpx;
  border: 2rpx solid #eef0f3;
}

.stat-item {
  text-align: center;
  flex: 1;
  position: relative;

  &:not(:last-child)::after {
    content: "";
    position: absolute;
    right: 0;
    top: 50%;
    transform: translateY(-50%);
    width: 2rpx;
    height: 84rpx;
    background-color: #e1e4ea;
  }
}

.stat-label {
  font-weight: 400;
  font-size: 24rpx;
  color: #1d2541;
  margin-bottom: 16rpx;
}

.stat-value {
  font-weight: bold;
  font-size: 36rpx;
  color: #202328;
}

.detail-table {
  width: 100%;
}
// 表格
.table-header {
  display: flex;
  padding: 18rpx 24rpx;
  background: #f9f9fc;
  .header-cell {
    font-weight: 500;
    font-size: 26rpx;
    color: #1d2541;
  }
}

.table-row {
  display: flex;
  padding: 18rpx 24rpx;
  border-bottom: 1rpx solid #f2f2f6;
}

.table-cell {
  font-weight: 400;
  font-size: 26rpx;
  color: #202328;
}

.store-name {
  flex: 1;
  text-align: left;
}

.alert-count {
  flex: 1;
  text-align: center;
}

.processed {
  flex: 1;
  text-align: center;
}
</style>