deepChartVueApp/components/deepExploration_header.vue

<template>
  <view class="titleContent">
    <view class="left">
      <uni-icons
        @click="handleBack"
        type="back"
        size="23"
        color="#111"
      ></uni-icons>
    </view>
    <view class="title">深度探索</view>
    <view class="right">
      <image
        class="notice"
        src="/static/deepExploration-images/notice.png"
        mode="aspectFill"
      ></image>
      <image
        @click="openHistoryDrawer"
        class="history"
        src="/static/deepExploration-images/history.png"
        mode="aspectFill"
      ></image>
    </view>
  </view>

  <view class="drawer-overlay" v-show="showHistoryDrawer"></view>

  <view
    class="drawer-panel"
    v-show="showHistoryDrawer"
    @click.stop
    @touchmove.stop.prevent
    :style="{ transform: 'translateY(' + drawerOffsetY + 'px)' }"
  >
    <view class="drawer-header">
      <text class="drawer-title">历史对话</text>
      <view class="drawer-actions">
        <view class="delete-all-container">
          <image
            class="delete-icon"
            src="/static/icons/Group_48095481.svg"
          ></image>
          <text class="delete-all" @click="clearAllHistory">删除全部</text>
        </view>
        <view class="drawer-close" @click="onDrawerBackClick"
          ><text class="drawer-close-icon"></text
        ></view>
      </view>
    </view>
    <scroll-view scroll-y="true" class="drawer-content">
      <view class="drawer-inner">
        <view v-if="groupedHistory.length === 0" class="empty-history">
          <text>暂无历史记录</text>
        </view>
        <view
          v-for="(section, sIdx) in groupedHistory"
          :key="sIdx"
          class="history-section"
        >
          <text class="section-title">{{ section.title }}</text>
          <view
            v-for="(item, idx) in section.items"
            :key="idx"
            class="history-item"
          >
            <view class="history-left">
              <view class="flag-circle">
                <image
                  class="icon-stock-model"
                  :src="modelImage(item.model)"
                  mode="scaleToFill"
              /></view>
            </view>
            <view class="history-left">
              <view class="flag-circle">
                <image
                  class="icon-stock"
                  :src="stockImage(item.stockMarket)"
                  mode="scaleToFill"
              /></view>
            </view>
            <view class="history-main" @click="itemClick(item)">
              <text class="history-query">{{ item.stockName }}</text>
              <text class="history-query">（{{ item.stockCode }}）</text>
            </view>
            <text class="history-time">{{
              formatTimeForHistory(item.createdTime)
            }}</text>
          </view>
        </view>
      </view>
    </scroll-view>
  </view>
</template>

<script setup>
import {
  RecordListApi,
  RecordInfoApi,
} from "../api/deepExploration/deepExploration";
import { ref, onMounted, computed } from "vue";
import { useDeepExplorationStore } from "../stores/modules/deepExploration";

const props = defineProps({
  name: {
    type: String,
    default: "",
  },
});
const showHistoryDrawer = ref(false);
const drawerOffsetY = ref(0);
// const handleHistory = () => {
//   showHistoryDrawer.value = true;
// };

function modelType(model) {
  switch (model) {
    case 1:
      return "主力追踪";
    case 2:
      return "主力雷达";
    case 3:
      return "主力解码";
    case 4:
      return "主力资金流";
  }
}
// 历史记录
const openHistoryDrawer = async () => {
  const res = await RecordListApi({
    model: 1,
  });

  if (res.code === 200) {
    historyList.value = res.data;
  }

  console.log("historyList.value", historyList.value);

  const hideDistance = uni.upx2px(900);
  drawerOffsetY.value = hideDistance;
  showHistoryDrawer.value = true;
  setTimeout(() => {
    drawerOffsetY.value = 0;
  }, 10);
};

const clearAllHistory = () => {
  searchHistory.value = [];

  //   uni.setStorageSync("search_history", []);
};

//返回上一页
const handleBack = () => {
  uni.navigateBack();
};

const closeHistoryDrawer = () => {
  showHistoryDrawer.value = false;
};
const onDrawerBackClick = () => {
  const hideDistance = uni.upx2px(900);
  drawerOffsetY.value = hideDistance;
  setTimeout(() => {
    closeHistoryDrawer();
    drawerOffsetY.value = 0;
  }, 180);
};

// 历史记录国家图像
function modelImage(model) {
  switch (model) {
    case 1:
      return "../../static/icons/tracking.png";
    case 2:
      return "../../static/icons/radar.png";
    case 3:
      return "../../static/icons/decoding.png";
    case 4:
      return "../../static/icons/funds.png";
  }
}

// 历史记录国家图像
function stockImage(Market) {
  switch (Market) {
    case "usa":
      return "../../static/marketSituation-image/country-flag/us.png";
    case "can":
      return "../../static/marketSituation-image/country-flag/can.png";
    case "vi":
      return "../../static/marketSituation-image/country-flag/vi.png";
    case "th":
      return "../../static/marketSituation-image/country-flag/th.png";
    case "my":
      return "../../static/marketSituation-image/country-flag/my.png";
    case "sg":
      return "../../static/marketSituation-image/country-flag/sg.png";
    case "hk":
      return "../../static/marketSituation-image/country-flag/hk.png";
    case "cn":
      return "../../static/marketSituation-image/country-flag/cn.png";
  }
}

// 历史记录详情
async function itemClick(item) {
  const res = await RecordInfoApi({
    recordId: item.id,
    parentId: item.parentId,
    model: 5,
  });
  if (res.code == 200) {
    const message = res.data;
    const deepExplorationStore = useDeepExplorationStore();
    deepExplorationStore.setDeepExplorationInfo(message);
    console.log("点击了历史数据", deepExplorationStore.deepExplorationInfo);
    onDrawerBackClick();
    setTimeout(() => {
      uni.navigateTo({
        url: "/pages/deepExploration/MainForceActions",
      });
    }, 200);
  }
}
const historyList = ref([]);

// 为历史记录格式化时间：YYYY-MM-DD HH:mm
const formatTimeForHistory = (timeString) => {
  // 假设 timeString 格式为 "YYYY-MM-DD HH:mm:ss"
  const parts = timeString.split(" ");
  if (parts.length >= 2) {
    const datePart = parts[0];
    const timePart = parts[1];
    const timeParts = timePart.split(":");
    if (timeParts.length >= 2) {
      return `${datePart} ${timeParts[0]}:${timeParts[1]}`;
    }
  }
  return timeString;
};

// 历史分组（今天/昨天/近一周/按月）
const groupedHistory = computed(() => {
  const sections = [];

  // 从缓存获取今天日期，如果没有则使用当前日期
  const now = new Date();

  const startOfDay = (d) =>
    new Date(d.getFullYear(), d.getMonth(), d.getDate());
  const isSameDay = (a, b) =>
    startOfDay(a).getTime() === startOfDay(b).getTime();
  const isYesterday = (d) => {
    const y = new Date(now.getFullYear(), now.getMonth(), now.getDate() - 1);
    return isSameDay(d, y);
  };
  const isToday = (d) => isSameDay(d, now);
  const withinLast7Days = (d) => {
    const seven = new Date(
      now.getFullYear(),
      now.getMonth(),
      now.getDate() - 7
    );
    return d >= seven && !isToday(d) && !isYesterday(d);
  };
  const monthLabel = (d) => `${d.getMonth() + 1}月`;

  const today = [];
  const yesterday = [];
  const last7 = [];
  const byMonth = new Map();

  // 使用 historyList.value 替代 searchHistory.value
  historyList.value.forEach((item) => {
    // 根据你的数据结构，使用 createdTime 字段
    const dt = new Date(item.createdTime);
    if (isToday(dt)) {
      today.push(item);
    } else if (isYesterday(dt)) {
      yesterday.push(item);
    } else if (withinLast7Days(dt)) {
      last7.push(item);
    } else {
      const year = dt.getFullYear();
      const month = dt.getMonth() + 1;
      const key = `${year}-${month}`;
      if (!byMonth.has(key))
        byMonth.set(key, {
          title: `${year}年${month}月`,
          year,
          month,
          items: [],
        });
      byMonth.get(key).items.push(item);
    }
  });

  if (today.length) sections.push({ title: "今天", items: today });
  if (yesterday.length) sections.push({ title: "昨天", items: yesterday });
  if (last7.length) sections.push({ title: "近一周", items: last7 });

  const monthSections = Array.from(byMonth.values()).sort((a, b) => {
    if (a.year !== b.year) return b.year - a.year;
    return b.month - a.month; // 月份倒序，如 10月 在 9月 之前
  });
  sections.push(...monthSections);

  return sections;
});

onMounted(() => {});
</script>

<style scoped lang="scss">
* {
  box-sizing: border-box;
}

.titleContent {
  display: flex;
  align-items: center;
  justify-content: space-between;
  padding: 30rpx 60rpx 40rpx 35rpx;
  box-shadow: 2rpx 2rpx 8rpx rgba(0, 0, 0, 0.1);

  .left {
    display: flex;
    align-items: center;
    width: 36rpx;
    height: 36rpx;
  }

  .title {
    position: absolute;
    left: 50%;
    transform: translateX(-50%);
    color: #000000;
    font-family: "PingFang SC";
    font-size: 19px;
    font-style: normal;
    font-weight: 400;
    line-height: 25px;
  }

  .right {
    display: flex;
    align-items: center;
    gap: 20rpx;

    .notice {
      width: 35rpx;
      height: 35rpx;
      gap: 20rpx;
    }

    .history {
      width: 32rpx;
      height: 32rpx;
      align-items: center;
    }
  }
}

/* 搜索历史侧拉框样式 */
.drawer-overlay {
  position: fixed;
  left: 0;
  top: 0;
  right: 0;
  bottom: 0;
  background-color: rgba(0, 0, 0, 0.35);
  z-index: 900;
}

.drawer-panel {
  position: fixed;
  left: 0;
  right: 0;
  bottom: 0;
  height: 75vh;
  max-height: 80vh;
  width: 100%;
  background: #ffffff;
  box-shadow: 0 -8rpx 20rpx rgba(0, 0, 0, 0.06);
  z-index: 1000;
  display: flex;
  flex-direction: column;
  border-top-left-radius: 20rpx;
  border-top-right-radius: 20rpx;
  transition: transform 0.22s ease;
}

.drawer-back {
  position: absolute;
  left: 50%;
  top: -14px;
  transform: translateX(-50%);
  width: 28px;
  height: 48px;
  border-radius: 12px;
  background: #fff;
  box-shadow: 0 2px 10px rgba(0, 0, 0, 0.08);
  display: flex;
  align-items: center;
  justify-content: center;
}

.drawer-back-icon {
  font-size: 16px;
  color: #8a8a8a;
}

.drawer-actions {
  display: flex;
  align-items: center;
  gap: 40rpx;
}

.delete-all-container {
  display: flex;
  align-items: center;
  gap: 14rpx;
}

.delete-icon {
  width: 28rpx;
  height: 32rpx;
}

.delete-all {
  font-size: 28rpx;
}

.drawer-close {
  background: url("../static/icons/close-two.svg");
  width: 48rpx;
  height: 48rpx;
  border-radius: 24rpx;
  /* background: #f5f5f5; */
  /* box-shadow: 0 2px 8px rgba(0,0,0,0.08); */
  display: flex;
  align-items: center;
  justify-content: center;

  image {
    width: 100%;
    height: 100%;
  }
}

.drawer-header {
  display: flex;
  align-items: center;
  justify-content: space-between;
  padding: 52rpx 28rpx 0rpx 28rpx;
  /* border-bottom: 2rpx solid #f0f0f0; */
}

.drawer-title {
  font-size: 32rpx;
  font-weight: 600;
  color: #333333;
}

.drawer-content {
  flex: 1;
  min-height: 0;
  /* 让 flex 子元素可在容器内收缩以启用滚动 */
  height: 100%;
  overscroll-behavior-y: contain;
  /* 防止滚动串联到页面 */
  -webkit-overflow-scrolling: touch;
  /* iOS 惯性滚动 */
  touch-action: pan-y;
  /* 优化触控滚动，仅垂直 */
}

.drawer-inner {
  padding: 20rpx 24rpx 20rpx 24rpx;
}

.history-section {
  margin-bottom: 20rpx;
  /* margin: 0 24rpx; */
}

.section-title {
  font-size: 26rpx;
  color: #888;
  margin: 10rpx 6rpx 16rpx;
}

.history-item {
  display: flex;
  align-items: center;
  padding: 19rpx 18rpx;
  background-color: #f6f7f9;
  border-radius: 12rpx;
  margin-bottom: 12rpx;
}

.history-left {
  margin-right: 20rpx;
  width: 50rpx;
  height: 50rpx;
}

.icon-stock-model {
  width: 45rpx;
  height: 45rpx;
}

.icon-stock {
  width: 36rpx;
  height: 36rpx;
}

.flag-circle {
  width: 50rpx;
  height: 50rpx;
  border-radius: 50%;
  background: #fff;
  border: 2rpx solid #eee;
  display: flex;
  align-items: center;
  justify-content: center;
  // image {
  //   width: 50rpx;
  //   height: 50rpx;
  //   border-radius: 50%;
  // }
}

.history-main {
  flex: 1;
}

.history-query {
  color: #000000;
  text-align: center;
  font-size: 24rpx;
  font-weight: 400;
  line-height: 40rpx;
}

.history-time {
  font-size: 22rpx;
  color: #999;
}

.history-card {
  background-color: #fff;
  border: 2rpx solid #f2f2f2;
  border-left: 8rpx solid rgb(220, 31, 29);
  border-radius: 12rpx;
  padding: 18rpx 20rpx;
  margin-bottom: 16rpx;
  box-shadow: 0 4rpx 10rpx rgba(0, 0, 0, 0.03);
}

.history-query {
  font-size: 28rpx;
  color: #333333;
  font-weight: 500;
}

.history-time {
  margin-top: 8rpx;
  font-size: 22rpx;
  color: #888888;
}

.empty-history {
  padding: 40rpx;
  color: #999999;
  text-align: center;
}
</style>