TALL-MUI-4/components/TimeLine/TimeLine.vue

<template>
  <!-- 时间间隔栏 -->
  <!-- <Barrier /> -->

  <scroll-view
    :lower-threshold="300"
    scroll-y="true"
    :upper-threshold="300"
    :scroll-into-view="scrollToTaskId"
    @scroll="scroll"
    @scrolltolower="handleScrollBottom"
    @scrolltoupper="handleScrollTop"
    id="scroll"
  >
    <!-- 时间轴 -->
    <!-- <u-divider bg-color="#f3f4f6" class="pt-5" fontSize="14px" v-if="topEnd">到顶啦</u-divider> -->

    <TimeBox />

    <!-- <u-divider bg-color="#f3f4f6" class="pb-5" fontSize="14px" v-if="bottomEnd">到底啦</u-divider> -->
  </scroll-view>
</template>

<script setup>
import { reactive, computed } from 'vue';
import { useStore } from 'vuex';
// import Barrier from './component/Barrier.vue';
import dayjs from 'dayjs';
import TimeBox from './component/TimeBox.vue';

const store = useStore();
// const visibleRoles = computed(() => store.state.role.visibleRoles);
// const scrollTop = computed(() => store.state.task.scrollTop);
const tasks = computed(() => store.state.task.tasks);
const topEnd = computed(() => store.state.task.topEnd);
const bottomEnd = computed(() => store.state.task.bottomEnd);
const showSkeleton = computed(() => store.state.task.showSkeleton);
const timeNode = computed(() => store.state.task.timeNode);
const scrollToTaskId = computed(() => store.state.task.scrollToTaskId);
const timeGranularity = computed(() => store.getters['task/timeGranularity']);
const emit = defineEmits(['getTasks']);

const data = reactive({ top: 0 });

// 滚动
function scroll(e) {
  data.top = e.detail.scrollTop;
  store.commit('task/setShrink', data.top > data.scrollTop);
  store.commit('task/setScrollTop', data.top);
}

// 滚动到顶部
async function handleScrollTop() {
  if (!tasks.value || !tasks.value.length || showSkeleton.value) return;
  const startTime = tasks.value[0].planStart - 0;
  if (topEnd.value) {
    // 没有数据时 自动加载数据
    console.warn('滚动到顶部没有数据时: ');
    const addTasks = uni.$task.setPlaceholderTasks(startTime, true, timeGranularity.value);
    store.commit('task/setUpTasks', addTasks);
  } else {
    // 有数据时
    console.warn('滚动到顶部有数据时: ');
    const detailId = tasks.value.findIndex(task => task.detailId);
    const timeNodeValue = tasks.value[detailId].planStart - 0;
    const upQuery = {
      timeNode: timeNodeValue,
      queryType: 0,
      queryNum: 6,
    };
    await emit('getTasks', upQuery);
  }
}

// 滚动到底部
async function handleScrollBottom() {
  if (!tasks.value || !tasks.value.length || showSkeleton.value) return;
  const startTime = tasks.value[tasks.value.length - 1].planStart - 0;
  if (bottomEnd.value) {
    // 没有数据时 自动加载数据
    console.warn('滚动到底部没有数据时: ');
    const addTasks = uni.$task.setPlaceholderTasks(startTime, false, timeGranularity.value);
    store.commit('task/setDownTasks', addTasks);
  } else {
    // 时间基准点=最后一个任务的开始时间+当前时间颗粒度
    console.warn('滚动到底部有数据时: ');
    const arr = [];
    tasks.value.forEach(task => {
      if (task.detailId) {
        arr.push(task);
      }
    });
    const nextQueryTime = +uni.$time.add(+arr[arr.length - 1].planStart, 1, timeGranularity.value);
    const downQuery = {
      timeNode: nextQueryTime,
      queryType: 1,
      queryNum: 6,
    };
    await emit('getTasks', downQuery);
  }
}

// 设置自动滚动位置
function setScrollPosition() {
  // 如果storage里有taskId 滚动到这个id的任务
  const taskId = uni.$storage.getStorageSync('taskId');
  if (taskId) {
    store.commit('task/setScrollToTaskId', `a${taskId}`);
    uni.$storage.setStorageSync('taskId', ''); // 记录后即刻清除本地存储
  } else {
    const item = tasks.value.find(task => task.detailId);
    if (item) {
      store.commit('task/setScrollToTaskId', `a${item.id}`);
    } else {
      // 没有本地记录的taskId
      // 找到当前时间基准线的任务id 记录 并滚动到当前时间基准线
      const task = tasks.value.find(item => dayjs(+item.planStart).isSame(timeNode.value, timeGranularity.value));
      task && store.commit('task/setScrollToTaskId', `a${task.id}`); // 有这个task 就记录他的id
    }
  }
}

defineExpose({
	setScrollPosition
})
</script>