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

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

  <scroll-view
    :lower-threshold="300"
    style="height: 800px;"
    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 :tasks="tasks" />

    <!-- <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 props = defineProps({
  tasks: {
    type: Array,
    default: () => []
  }
})

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 (!props.tasks || !props.tasks.length || showSkeleton.value) return;
  // 先把现在的任务放进去
  store.commit('task/updateTasks', props.tasks)

  const startTime = props.tasks[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 = props.tasks.findIndex(task => task.detailId);
    const timeNodeValue = props.tasks[detailId].planStart - 0;
    const upQuery = {
      timeNode: timeNodeValue,
      queryType: 0,
      queryNum: 3,
    };
    await emit('getTasks', upQuery);
  }
}

// 滚动到底部
async function handleScrollBottom() {
  if (!props.tasks || !props.tasks.length || showSkeleton.value) return;
  // 先把现在的任务放进去
  store.commit('task/updateTasks', props.tasks)

  const startTime = props.tasks[props.tasks.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 = [];
    props.tasks.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: 3,
    };
    await emit('getTasks', downQuery);
  }
}
</script>