{"version":3,"sources":["webpack:///./src/views/cardList/UserPhotosCardList.vue","webpack:///./src/views/cardList/UserPhotosCardList.vue?4585","webpack:///./src/views/cardList/UserPhotosCardList.vue?fab3"],"names":["list","cardColumnSize","column","detailsUrlparameter","UserIdProp","name","inheritAttrs","components","PersonalCardMain","props","cardColumn","Number","UserId","type","String","required","likeList","Array","setup","route","store","state","userPhotosCardList","userPhotosCardTotalCount","a","get","value","then","data","headers","commit","length","Math","ceil","userPhotosTotalPage","userPhotosTotalNumber","currentPage","isUserPhotosScrollLoading","windowScroll","prevScrollTop","document","documentElement","scrollHeight","clientHeight","scrollTop","body","window","pageYOffset","height","touchDown","scrollDown","userPhotosParams","userId","page","dispatch","addEventListener","removeEventListener","params","againRequest","render"],"mappings":"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","file":"js/chunk-2d0e489f.c7240105.js","sourcesContent":["<template>\n  <PersonalCardMain :list=\"list\" :cardColumnSize=\"column\" :detailsUrlparameter=\"`@${UserIdProp}`\"></PersonalCardMain>\n</template>\n\n<script lang=\"ts\">\nimport { computed, defineComponent, onMounted, onUnmounted, ref, watch } from 'vue';\nimport PersonalCardMain from '../../components/cardMain/PersonalCardMain.vue';\nimport store from '../../store';\nimport { useRoute } from 'vue-router';\nimport axios from 'axios';\n\nexport default defineComponent({\n  name: 'UserPhotosListCard',\n  inheritAttrs: false,\n  components: {\n    PersonalCardMain,\n  },\n  props: {\n    cardColumn: Number,\n    UserId: {\n      type: String,\n      required: true,\n    },\n    likeList: {\n      type: Array,\n      required: false,\n    },\n  },\n  setup(props) {\n    const route = useRoute();\n    const column = computed(() => props.cardColumn);\n\n    // 获取当前个人页的用户ID\n    const UserIdProp = computed(() => Number(props.UserId));\n\n    // 获取第一页数据\n    const list = computed(() => store.state.userPhotosCardList);\n\n    const userPhotosCardTotalCount = ref();\n    // 获取列表总数量\n    axios.get(`/posts?user=${UserIdProp.value}&action=published`).then(data => {\n      userPhotosCardTotalCount.value = data.headers['x-total-count'];\n    });\n\n    // 获取列表总数量\n    // const userPhotosCardTotalCount = computed(() => store.state.userPhotosCardTotalCount);\n\n    /**\n     * 样式控制\n     */\n    // 将 没有更多 提示  初始化设置为false\n    store.commit('noMore', false);\n\n    if (list.value.length === 0) {\n      //没有搜索到内容 则 修改搜索结果为true, 切换到未没有内容组件\n      store.commit('setSearchFailure', false);\n    } else {\n      // 搜索到内容将未没有内容提示隐藏,  并且将主页搜索框隐藏\n      store.commit('setSearchFailure', false);\n      // 如果总页数等于1\n      if (Math.ceil(userPhotosCardTotalCount.value / 10) === 1) {\n        // 将 没有更多 提示 设置为true\n        store.commit('noMore', true);\n      }\n    }\n\n    /**\n     *userPhotos页加载更多\n     */\n\n    // 计算UserPhotos页的总页数\n    const userPhotosTotalPage = computed(() => Math.ceil(userPhotosCardTotalCount.value / 10));\n    // 获取当前加载的UserPhotos卡片的数量\n    const userPhotosTotalNumber = computed(() =>\n      store.state.userPhotosCardList.length === 0 ? 1 : Math.ceil(store.state.userPhotosCardList.length / 10),\n    );\n    // 默认当前页数\n    const currentPage = ref(userPhotosTotalNumber.value);\n    // 是否加载默认设置为true\n    const isUserPhotosScrollLoading = ref(true);\n\n    // 滚动加载事件函数\n    const windowScroll = async () => {\n      const prevScrollTop = ref(0);\n\n      // 判断 如果document 并且 isLoading 为true进入\n      if (document && isUserPhotosScrollLoading.value) {\n        // 解构 页面可滚动内容的高度 与 窗口可见高度\n        const { scrollHeight, clientHeight } = document.documentElement;\n        // 获得 滚动的高度 (兼容)\n        const scrollTop = document.documentElement.scrollTop || document.body.scrollTop || window.pageYOffset || 0;\n\n        // 可滚动的极限高度 = 窗口可见高度 + 滚动的高度 + 200\n        const height = clientHeight + scrollTop + 200;\n\n        // touchDown = (页面可滚动内容的高度 - 可滚动的极限高度) < 0\n        const touchDown = scrollHeight - height < 0;\n\n        // 进入滚动加载事件,判断是否是向下滚动\n        const scrollDown = scrollTop > prevScrollTop.value;\n\n        // 条件全部成立,进入加载\n        if (\n          touchDown &&\n          scrollDown &&\n          isUserPhotosScrollLoading.value &&\n          userPhotosTotalPage.value > currentPage.value\n        ) {\n          // 是否加载设置为false,防止重复加载\n          isUserPhotosScrollLoading.value = false;\n          // 禁止显示全局请求加载样式\n          store.commit('setIsShowLoading', false);\n          // 设置 是否显示加载更多 为 true\n          store.commit('isShowLoadingMore', true);\n          // 加载下一页数据\n          const userPhotosParams = { userId: UserIdProp.value, page: currentPage.value + 1 };\n          await store.dispatch('getPageUserPhotosCardList', userPhotosParams).then(() => {\n            // 加载完毕 将当前页数+1\n            currentPage.value = currentPage.value + 1;\n          });\n          // 加载完毕后 设置 是否显示加载更多 为 false\n          store.commit('isShowLoadingMore', false);\n        }\n\n        // 判断本次加载是否到最后一页 , 如果判断成立则将 isLoading.value设置为false,不成立恢复为true\n        if (userPhotosTotalPage.value <= currentPage.value) {\n          isUserPhotosScrollLoading.value = false;\n          store.commit('noMore', true);\n        } else {\n          isUserPhotosScrollLoading.value = true;\n          store.commit('noMore', false);\n        }\n\n        // 将当前的scrollTop 赋值给prevScrollTop,用于下次进入滚动加载事件,判断是否是向下滚动\n        prevScrollTop.value = scrollTop;\n      }\n    };\n\n    onMounted(async () => {\n      // 组件创建时监听scroll事件\n      window.addEventListener('scroll', windowScroll);\n    });\n\n    onUnmounted(() => {\n      // 组件卸载时卸载scroll事件\n      window.removeEventListener('scroll', windowScroll);\n    });\n\n    /**\n     * 监听 路由上的UserId参数是否发生改变, 如果发生改变 则 重新加载新的标签数据\n     */\n    watch(\n      () => route.params.UserId,\n      () => {\n        if (route.params.UserId) {\n          // 默认当前页数\n          currentPage.value = 1;\n          // 是否加载默认设置为true\n          isUserPhotosScrollLoading.value = true;\n        }\n      },\n    );\n\n    /**\n     * 监听againRequest(用于删除功能后触发 重新加载数据)\n     */\n    watch(\n      () => store.state.againRequest,\n      () => {\n        if (store.state.againRequest === true) {\n          // 默认当前页数\n          currentPage.value = 1;\n          // 是否加载默认设置为true\n          isUserPhotosScrollLoading.value = true;\n          // 恢复到顶部\n          document.documentElement.scrollTop = 0;\n          document.body.scrollTop = 0;\n\n          // 恢复 againRequest 为 false\n          store.commit('againRequest', false);\n        }\n      },\n    );\n\n    return {\n      list,\n      column,\n      UserIdProp,\n    };\n  },\n});\n</script>\n\n<style></style>\n","\nimport { computed, defineComponent, onMounted, onUnmounted, ref, watch } from 'vue';\nimport PersonalCardMain from '../../components/cardMain/PersonalCardMain.vue';\nimport store from '../../store';\nimport { useRoute } from 'vue-router';\nimport axios from 'axios';\n\nexport default defineComponent({\n  name: 'UserPhotosListCard',\n  inheritAttrs: false,\n  components: {\n    PersonalCardMain,\n  },\n  props: {\n    cardColumn: Number,\n    UserId: {\n      type: String,\n      required: true,\n    },\n    likeList: {\n      type: Array,\n      required: false,\n    },\n  },\n  setup(props) {\n    const route = useRoute();\n    const column = computed(() => props.cardColumn);\n\n    // 获取当前个人页的用户ID\n    const UserIdProp = computed(() => Number(props.UserId));\n\n    // 获取第一页数据\n    const list = computed(() => store.state.userPhotosCardList);\n\n    const userPhotosCardTotalCount = ref();\n    // 获取列表总数量\n    axios.get(`/posts?user=${UserIdProp.value}&action=published`).then(data => {\n      userPhotosCardTotalCount.value = data.headers['x-total-count'];\n    });\n\n    // 获取列表总数量\n    // const userPhotosCardTotalCount = computed(() => store.state.userPhotosCardTotalCount);\n\n    /**\n     * 样式控制\n     */\n    // 将 没有更多 提示  初始化设置为false\n    store.commit('noMore', false);\n\n    if (list.value.length === 0) {\n      //没有搜索到内容 则 修改搜索结果为true, 切换到未没有内容组件\n      store.commit('setSearchFailure', false);\n    } else {\n      // 搜索到内容将未没有内容提示隐藏,  并且将主页搜索框隐藏\n      store.commit('setSearchFailure', false);\n      // 如果总页数等于1\n      if (Math.ceil(userPhotosCardTotalCount.value / 10) === 1) {\n        // 将 没有更多 提示 设置为true\n        store.commit('noMore', true);\n      }\n    }\n\n    /**\n     *userPhotos页加载更多\n     */\n\n    // 计算UserPhotos页的总页数\n    const userPhotosTotalPage = computed(() => Math.ceil(userPhotosCardTotalCount.value / 10));\n    // 获取当前加载的UserPhotos卡片的数量\n    const userPhotosTotalNumber = computed(() =>\n      store.state.userPhotosCardList.length === 0 ? 1 : Math.ceil(store.state.userPhotosCardList.length / 10),\n    );\n    // 默认当前页数\n    const currentPage = ref(userPhotosTotalNumber.value);\n    // 是否加载默认设置为true\n    const isUserPhotosScrollLoading = ref(true);\n\n    // 滚动加载事件函数\n    const windowScroll = async () => {\n      const prevScrollTop = ref(0);\n\n      // 判断 如果document 并且 isLoading 为true进入\n      if (document && isUserPhotosScrollLoading.value) {\n        // 解构 页面可滚动内容的高度 与 窗口可见高度\n        const { scrollHeight, clientHeight } = document.documentElement;\n        // 获得 滚动的高度 (兼容)\n        const scrollTop = document.documentElement.scrollTop || document.body.scrollTop || window.pageYOffset || 0;\n\n        // 可滚动的极限高度 = 窗口可见高度 + 滚动的高度 + 200\n        const height = clientHeight + scrollTop + 200;\n\n        // touchDown = (页面可滚动内容的高度 - 可滚动的极限高度) < 0\n        const touchDown = scrollHeight - height < 0;\n\n        // 进入滚动加载事件,判断是否是向下滚动\n        const scrollDown = scrollTop > prevScrollTop.value;\n\n        // 条件全部成立,进入加载\n        if (\n          touchDown &&\n          scrollDown &&\n          isUserPhotosScrollLoading.value &&\n          userPhotosTotalPage.value > currentPage.value\n        ) {\n          // 是否加载设置为false,防止重复加载\n          isUserPhotosScrollLoading.value = false;\n          // 禁止显示全局请求加载样式\n          store.commit('setIsShowLoading', false);\n          // 设置 是否显示加载更多 为 true\n          store.commit('isShowLoadingMore', true);\n          // 加载下一页数据\n          const userPhotosParams = { userId: UserIdProp.value, page: currentPage.value + 1 };\n          await store.dispatch('getPageUserPhotosCardList', userPhotosParams).then(() => {\n            // 加载完毕 将当前页数+1\n            currentPage.value = currentPage.value + 1;\n          });\n          // 加载完毕后 设置 是否显示加载更多 为 false\n          store.commit('isShowLoadingMore', false);\n        }\n\n        // 判断本次加载是否到最后一页 , 如果判断成立则将 isLoading.value设置为false,不成立恢复为true\n        if (userPhotosTotalPage.value <= currentPage.value) {\n          isUserPhotosScrollLoading.value = false;\n          store.commit('noMore', true);\n        } else {\n          isUserPhotosScrollLoading.value = true;\n          store.commit('noMore', false);\n        }\n\n        // 将当前的scrollTop 赋值给prevScrollTop,用于下次进入滚动加载事件,判断是否是向下滚动\n        prevScrollTop.value = scrollTop;\n      }\n    };\n\n    onMounted(async () => {\n      // 组件创建时监听scroll事件\n      window.addEventListener('scroll', windowScroll);\n    });\n\n    onUnmounted(() => {\n      // 组件卸载时卸载scroll事件\n      window.removeEventListener('scroll', windowScroll);\n    });\n\n    /**\n     * 监听 路由上的UserId参数是否发生改变, 如果发生改变 则 重新加载新的标签数据\n     */\n    watch(\n      () => route.params.UserId,\n      () => {\n        if (route.params.UserId) {\n          // 默认当前页数\n          currentPage.value = 1;\n          // 是否加载默认设置为true\n          isUserPhotosScrollLoading.value = true;\n        }\n      },\n    );\n\n    /**\n     * 监听againRequest(用于删除功能后触发 重新加载数据)\n     */\n    watch(\n      () => store.state.againRequest,\n      () => {\n        if (store.state.againRequest === true) {\n          // 默认当前页数\n          currentPage.value = 1;\n          // 是否加载默认设置为true\n          isUserPhotosScrollLoading.value = true;\n          // 恢复到顶部\n          document.documentElement.scrollTop = 0;\n          document.body.scrollTop = 0;\n\n          // 恢复 againRequest 为 false\n          store.commit('againRequest', false);\n        }\n      },\n    );\n\n    return {\n      list,\n      column,\n      UserIdProp,\n    };\n  },\n});\n","import { render } from \"./UserPhotosCardList.vue?vue&type=template&id=00f7b76c\"\nimport script from \"./UserPhotosCardList.vue?vue&type=script&lang=ts\"\nexport * from \"./UserPhotosCardList.vue?vue&type=script&lang=ts\"\nscript.render = render\n\nexport default script"],"sourceRoot":""}