fix: 滚动id函数优化

CHANGELOG.md

@@ -11,6 +11,7 @@
  default plugin | 添加默认插件;项目列表;全局项目最大高度设置 | ed1d87b
  - | indexedDB | 687394e
  mp | 兼容小程序，去除window，document等 | 9178255
+ - | network控制本地缓存的使用 | 858429e
  phone-bind | 验证码validate | a427250
  pinch | alloy finger实现图片的pinch放大缩小 | de01343
  plugin | 插件添加了token及param参数 | aeb0292

src/components/Roles/Roles.vue

@@ -92,7 +92,6 @@ export default {
         .exec();
 
       const system = uni.getSystemInfoSync(); // 获取系统信息
-      console.log('system: ', system);
       // 当前滚动的位置
       let left = 0;
       let screenWidth = system.windowWidth;

src/components/TimeLine/TimeLine.vue

@@ -6,7 +6,7 @@
     :lower-threshold="300"
     scroll-y="true"
     :upper-threshold="300"
-    :scroll-into-view="viewId"
+    :scroll-into-view="scrollToTaskId"
     @scroll="scroll"
     @scrolltolower="handleScrollBottom"
     @scrolltoupper="handleScrollTop"
@@ -36,12 +36,12 @@ export default {
 
   computed: {
     ...mapState('role', ['visibleRoles']),
-    ...mapState('task', ['scrollTop', 'showTips', 'tasks', 'topEnd', 'bottomEnd', 'showSkeleton', 'timeNode', 'viewId']),
+    ...mapState('task', ['scrollTop', 'showTips', 'tasks', 'topEnd', 'bottomEnd', 'showSkeleton', 'timeNode', 'scrollToTaskId']),
     ...mapGetters('task', ['timeGranularity']),
   },
 
   methods: {
-    ...mapMutations('task', ['setScrollTop', 'setShrink', 'setUpTasks', 'setDownTasks', 'setViewId']),
+    ...mapMutations('task', ['setScrollTop', 'setShrink', 'setUpTasks', 'setDownTasks', 'setScrollToTaskId']),
 
     // 滚动
     scroll(e) {
@@ -96,22 +96,16 @@ export default {
 
     // 设置自动滚动位置
     setScrollPosition() {
-      const { tasks, timeNode } = this;
+      // 如果storage里有taskId 滚动到这个id的任务
-      for (let i = 0; i < tasks.length; i++) {
+      const taskId = this.$t.storage.getStorageSync('taskId');
-        const item = tasks[i];
+      if (taskId) {
-        const show = this.$t.time.isSame(+item.planStart, +timeNode, this.timeGranularity);
+        this.setScrollToTaskId(`a${taskId}`);
-        // 如果storage里有timeNode,修改store里的timeNode
+        this.$t.storage.setStorageSync('taskId', ''); // 记录后即刻清除本地存储
-        const taskId = this.$t.storage.getStorageSync('taskId');
+      } else {
-        // 清空storage
+        // 没有本地记录的taskId
-        if (taskId) {
+        // 找到当前时间基准线的任务id 记录 并滚动到当前时间基准线
-          this.setViewId(`a${taskId}`);
+        const task = this.tasks.find(item => this.$moment(+item.planStart).isSame(this.timeNode, this.timeGranularity));
-          this.$t.storage.setStorageSync('taskId', '');
+        task && this.setScrollToTaskId(`a${task.id}`); // 有这个task 就记录他的id
-          return;
-        }
-        if (show) {
-          this.setViewId(`a${item.id}`);
-          return;
-        }
       }
     },
   },

src/pages/project/project.vue

@@ -11,7 +11,7 @@
       <Globals />
 
       <!-- 定期任务面板 -->
-      <TimeLine @getTasks="getTasks" class="flex-1 overflow-hidden" ref="child" />
+      <TimeLine @getTasks="getTasks" class="flex-1 overflow-hidden" ref="timeLine" />
     </view>
   </view>
 </template>
@@ -47,6 +47,7 @@ export default {
      */
     timeNode(val) {
       if (val && this.roleId) {
+        this.clearTasksData();
         // 根据时间和角色查找日常任务
         this.initTasks();
       }
@@ -107,8 +108,7 @@ export default {
         // 不论有没有token都直接从userId获取token
         // token有过期时间 从本地获取可能是过期 干脆直接从userId获取
         if (!options || !options.u) {
-          // 参数里没有u (userId)提示
+          this.$t.ui.showToast('缺少用户信息参数'); // 参数里没有u (userId)提示
-          this.$t.ui.showToast('缺少用户信息参数');
         } else {
           this.getToken(options.u);
         }
@@ -118,17 +118,14 @@ export default {
       options && options.pname && this.setProjectName(options.pname);
 
       if (!options || !options.p) {
-        // 没有项目id参数
+        this.$t.ui.showToast('缺少项目信息参数'); // 没有项目id参数
-        this.$t.ui.showToast('缺少项目信息参数');
       } else {
-        // 根据项目id获取项目信息
+        this.getProjectById({ projectId: options.p }); // 根据项目id获取项目信息
-        this.getProjectById({ projectId: options.p });
       }
     },
 
     /**
      * 通过项目id获取项目信息
-     * @param {string} projectId
      * @param {object} params 提交的参数
      */
     async getProjectById(params) {
@@ -159,8 +156,8 @@ export default {
       });
     },
 
-    // 初始化 时间轴
+    // 清除已有的任务数据
-    async initTasks() {
+    clearTasksData() {
       // 清空日常任务的数据
       this.setPermanents([]);
       this.setDailyTasks([]);
@@ -169,15 +166,19 @@ export default {
       // 到顶的标志复位
       // 到底的标志复位
       this.clearEndFlag();
-      // 根据时间和角色查找日常任务
+    },
-      this.getGlobalData();
+
-      // 向上加载空数据
+    // 初始化 时间轴
-      this.setPrevTasks();
+    async initTasks() {
+      this.getGlobalData(); // 查可变日常任务
+      this.setPrevTasks(); // 向上加载空数据
       // storage没有存储值就跳转到当前时间位置
+      // taskId就是要滚动到任务的id
+      // 通常是点了这个任务 打开详情页 返回来直接滚动到这个任务
       const storageTaskId = this.$t.storage.getStorageSync('taskId');
       this.$nextTick(() => {
         if (!storageTaskId) {
-          this.$refs.child.setScrollPosition();
+          this.$refs.timeLine.setScrollPosition();
         }
       });
       // 向下加载空数据
@@ -188,7 +189,7 @@ export default {
       // 从详情页返回时跳转到之前的位置 storage有存储值
       this.$nextTick(() => {
         if (storageTaskId) {
-          this.$refs.child.setScrollPosition();
+          this.$refs.timeLine.setScrollPosition();
         }
       });
     },

src/store/task/mutations.js

@@ -11,10 +11,10 @@ const mutations = {
   /**
    * 记录时间轴向上滚动的距离
    * @param { object } state
-   * @param { string } data
+   * @param {string} taskId
    */
-  setViewId(state, data) {
+  setScrollToTaskId(state, taskId) {
-    state.viewId = data;
+    state.scrollToTaskId = taskId;
   },
 
   /**

src/store/task/state.js

@@ -1,6 +1,6 @@
 const state = {
   scrollTop: 0,
-  viewId: '', // 时间轴自动滚动的位置
+  scrollToTaskId: '', // 时间轴自动滚动的位置
   isShrink: false, // true: 收起， false：展开
   tip: {
     taskId: '', // 当前正在修改状态的任务的id

src/utils/time.js

@@ -104,12 +104,9 @@ const validateTimeIsToday = time => {
  * 检测两个日期是否相同
  * @param {number | date} time
  * @param {number | date} value
- * @param {string} cycle 传入 day 将会比较 day、 month和 year
+ * @param {string} cycle 传入 day 将会比较 day、 month和 year “一般是时间颗粒度”
  */
-const isSame = (time, value, cycle) => {
+const isSame = (time, value, cycle) => dayjs(time).isSame(value, cycle);
-  const str = dayjs(time).isSame(value, cycle);
-  return str;
-};
 
 /**
  * 格式化开始时间