✨ feat(我的页面): 列表跳转位置保存

@@ -120,7 +120,8 @@ export default {
       this.$router.push({
         path: '/client/videoDetail',
         query: {
-          prod_id: this.item.id
+          prod_id: this.item.id,
+          path: this.item.path // 特殊标识，判断入口 为keepAlive使用
         }
       });
     },

@@ -28,6 +28,9 @@ export const useUnwatchList = () => {
         if (res.data.code === 1) {
           prod_list.value = _.concat(prod_list.value, res.data.data.prod);
           prod_list.value = _.uniqBy(prod_list.value, 'id');
+          _.each(prod_list.value, (item) => {
+            item.path = 'unWatchList'
+          })
           offset.value = prod_list.value.length;
           loading.value = false;
           // 数据全部加载完成

@@ -197,7 +197,8 @@ export default [{
   name: '未看作品',
   component: () => import('./views/me/unwatchList.vue'),
   meta: {
-    title: '未看作品'
+    title: '未看作品',
+    keepAlive: true
   },
   children: []
 }, {

@@ -9,6 +9,8 @@ export const mainStore = defineStore('main', {
       comment_num: 0,
       video_detail: {},
       scrollTop: 0,
+      scrollTopCollection: 0,
+      scrollTopLike: 0,
     };
   },
   getters: {},
@@ -25,5 +27,11 @@ export const mainStore = defineStore('main', {
     changeScrollTop (v) {
       this.scrollTop = v;
     },
+    changeScrollTopCollection (v) {
+      this.scrollTopCollection = v;
+    },
+    changeScrollTopLike (v) {
+      this.scrollTopLike = v;
+    },
   },
 });

@@ -9,28 +9,51 @@
 
 <script setup>
 import VideoCard from '@/components/VideoCard/index.vue'
+import Cookies from 'js-cookie'
 
 import { ref } from 'vue'
 import axios from '@/utils/axios';
 import { Toast } from 'vant';
+import $ from 'jquery'
+import _ from 'lodash'
+
+/******************** 返回点击位置 ********************/
+window.addEventListener('scroll', () => {
+  if (window.scrollY) {
+    Cookies.set('scrollTopCollection', window.scrollY);
+  }
+})
+
+const scrollTopCollection = Cookies.get('scrollTopCollection') ? Number(Cookies.get('scrollTopCollection')) : 0;
+if (scrollTopCollection) {
+  setTimeout(() => {
+    $("html,body").animate({ "scrollTop": scrollTopCollection })
+  }, 500)
+}
+/*****************************************************/
 
 // 处理书籍下作品列表
 const prodList = ref([])
 axios.get('/srv/?a=my_favor')
-.then(res => {
-  if (res.data.code === 1) {
-    prodList.value = res.data.data.prod;
-  } else {
-    console.warn(res);
-    Toast({
-      icon: 'close',
-      message: res.data.msg
-    });
-  }
-})
-.catch(err => {
-  console.error(err); 
-})
+  .then(res => {
+    if (res.data.code === 1) {
+      prodList.value = res.data.data.prod;
+      _.each(prodList.value, (item) => {
+        item.path = 'myCollection'
+      })
+    } else {
+      console.warn(res);
+      Toast({
+        icon: 'close',
+        message: res.data.msg
+      });
+    }
+  })
+  .catch(err => {
+    console.error(err);
+  });
+
+
 </script>
 
 <script>
@@ -38,12 +61,12 @@ import mixin from 'common/mixin';
 
 export default {
   mixins: [mixin.init],
-  data () {
+  data() {
     return {
 
     }
   },
-  mounted () {
+  mounted() {
 
   },
   methods: {
@@ -53,5 +76,4 @@ export default {
 </script>
 
 <style lang="less" scoped>
-
-</style>
\ No newline at end of file
+</style>

@@ -286,6 +286,7 @@ const getUnwatch = () => {
 
 <script>
 import mixin from 'common/mixin';
+import Cookies from 'js-cookie'
 
 export default {
   mixins: [mixin.init],
@@ -295,7 +296,9 @@ export default {
     }
   },
   mounted() {
-
+    // 重置位置缓存
+    Cookies.set('scrollTopCollection', 0);
+    Cookies.set('scrollTopLike', 0);
   },
   methods: {
 

@@ -9,10 +9,28 @@
 
 <script setup>
 import VideoCard from '@/components/VideoCard/index.vue'
+import Cookies from 'js-cookie'
 
 import { ref } from 'vue'
 import axios from '@/utils/axios';
 import { Toast } from 'vant';
+import $ from 'jquery'
+import _ from 'lodash'
+
+/******************** 返回点击位置 ********************/
+window.addEventListener('scroll', () => {
+  if (window.scrollY) {
+    Cookies.set('scrollTopLike', window.scrollY);
+  }
+})
+
+const scrollTopLike = Cookies.get('scrollTopLike') ? Number(Cookies.get('scrollTopLike')) : 0;
+if (scrollTopLike) {
+  setTimeout(() => {
+    $("html,body").animate({ "scrollTop": scrollTopLike })
+  }, 500)
+}
+/*****************************************************/
 
 // 处理书籍下作品列表
 const prodList = ref([])
@@ -20,6 +38,9 @@ axios.get('/srv/?a=my_like')
 .then(res => {
   if (res.data.code === 1) {
     prodList.value = res.data.data.prod;
+    _.each(prodList.value, (item) => {
+      item.path = 'myLike'
+    })
   } else {
     console.warn(res);
     Toast({
@@ -30,7 +51,7 @@ axios.get('/srv/?a=my_like')
 })
 .catch(err => {
   console.error(err); 
-})
+});
 </script>
 
 <script>
@@ -54,4 +75,4 @@ export default {
 
 <style lang="less" scoped>
 
-</style>
\ No newline at end of file
+</style>

@@ -15,8 +15,75 @@ import { useUnwatchList } from '@/composables/useUnwatchList.js'
 
 import VideoCard from '@/components/VideoCard/index.vue'
 
+import { ref, onActivated } from 'vue'
+import { mainStore } from '@/store'
+import { storeToRefs } from 'pinia'
+import { useRoute, useRouter, onBeforeRouteLeave } from 'vue-router'
+import $ from 'jquery'
+import _ from 'lodash';
+import { wxInfo } from '@/utils/tools';
+
+const $route = useRoute();
+const $router = useRouter();
+
 const { onLoad, prod_list, finished, loading } = useUnwatchList();
 
+/****************** keepAlive 模块 *******************/
+
+onActivated(() => { // keepAlive 重置后执行回调
+  // TAG: pinia应用，动态刷新数据
+  const store = mainStore()
+  // 处理数据未刷新数据显示问题
+  // Pinia 解构方法：storeToRefs
+  const { video_detail } = storeToRefs(store);
+  // 如果作品信息有变化及时修正
+  const arr = ref([]);
+  _.each(prod_list.value, (item) => {
+    if (item.id === video_detail.value.id) {
+      item = video_detail.value
+    }
+    arr.value.push(item);
+  })
+  // 触发更新
+  prod_list.value = arr.value;
+  /**
+   * 判断微信环境
+   */
+  if (wxInfo().isiOS || wxInfo().isAndroid) {
+    // TODO: 手机微信浏览器位置变动了，需要手动调整位置，但是无刷新是起作用的
+    const { scrollTop } = storeToRefs(store);
+    if (scrollTop.value) {
+      $("html,body").animate({ "scrollTop": scrollTop.value })
+    }
+    window.addEventListener('scroll',()=>{
+      if (window.scrollY) {
+        store.changeScrollTop(window.scrollY)
+      }
+    });
+  }
+});
+
+const changeRouterKeepAlive = (path, keepAlive) => {
+  $router.options.routes.map((item) => {
+    if (item.path === path) {
+      item.meta.keepAlive = keepAlive;
+    }
+  });
+};
+
+onBeforeRouteLeave((to, from) => {
+  // 如果是从页面返回，需要重置keepAlive状态
+  // 列表页 =》 详情页
+  // TAG: keepAlive
+  if (to.path === '/client/videoDetail' && to.query.path) {
+    changeRouterKeepAlive(from.path, true);
+  } else {
+    changeRouterKeepAlive(from.path, false);
+  }
+})
+
+/*********************************************************/
+
 </script>
 
 <script>
@@ -40,4 +107,4 @@ export default {
 
 <style lang="less" scoped>
 .unwatch-list-page {}
-</style>
\ No newline at end of file
+</style>

@@ -20,7 +20,8 @@ axios.get('/srv/?a=my_prod')
 .then(res => {
   if (res.data.code === 1) {
     res.data.data.prod.forEach(v => {
-      v.status = v.status.toUpperCase()
+      v.status = v.status.toUpperCase();
+      v.path = 'myVideoList'
     })
     prodList.value = res.data.data.prod;
   } else {
@@ -56,4 +57,4 @@ export default {
 
 <style lang="less" scoped>
 
-</style>
\ No newline at end of file
+</style>