广场

front/src/views/capacitySquare/components/algorithm.vue

@@ -28,7 +28,7 @@
 </template>
 <script setup>
   import { pageWithAttrs } from '@/api/abilityStatistics'
-  import { ref, onMounted } from 'vue'
+  import { ref, onMounted, onBeforeUnmount } from 'vue'
   const dataList = ref([])
   const params = {
     deptIds: [],
@@ -40,6 +40,7 @@
     pageSize: 9,
     type: '组件服务',
   }
+  let algorithmclass = null
   const imgSrc = ref(require('@/assets/capacitySquare/algorithm-photo.jpg'))
   const dataLength = ref(true)
   const isNoMore = ref(false)
@@ -55,22 +56,23 @@
   pageWithAttrsFunction()
   //图片显示
   const algorithmCardPhoto = (List) => {
+    let obj = List.filter((item) => item.attrType === '图层缩略图')[0]
+    if (obj) {
       List.map((item) => {
         if (item.attrType === '图层缩略图') {
           url.value = item.attrValue
         }
       })
+    } else {
+      url.value = '@/assets/capacitySquare/algorithm-photo2.jpg'
+    }
     return url.value
   }
   //跳转详情页
   const detailFunction = (id) => {
     window.open(window.SITE_CONFIG.previewUrl + `#/details?id=${id}`)
   }
-  onMounted(() => {
+  const algorithmFunction = (e) => {
-    const algorithmclass = document.querySelector('.algorithm-class')
-    if (dataLength.value) {
-      //监听滚动事件
-      algorithmclass.addEventListener('scroll', (e) => {
     var scrollTop = e.currentTarget.scrollTop
     var windowHeight = e.currentTarget.clientHeight
     var scrollHeight = e.currentTarget.scrollHeight
@@ -91,8 +93,17 @@
     } else {
       isNoMore.value = false
     }
-      })
   }
+
+  onMounted(() => {
+    algorithmclass = document.querySelector('.algorithm-class')
+    if (dataLength.value) {
+      //监听滚动事件
+      algorithmclass.addEventListener('scroll', algorithmFunction, true)
+    }
+  })
+  onBeforeUnmount(() => {
+    algorithmclass.removeEventListener('scroll', algorithmFunction, true)
   })
 </script>
 

front/src/views/capacitySquare/components/layer.vue

@@ -28,8 +28,9 @@
 </template>
 <script setup>
   import { pageWithAttrs } from '@/api/abilityStatistics'
-  import { ref, onMounted } from 'vue'
+  import { ref, onMounted, onBeforeUnmount } from 'vue'
   const dataList = ref([])
+  let algorithmclass = null
   const params = {
     deptIds: [],
     districtId: '',
@@ -55,22 +56,23 @@
   pageWithAttrsFunction()
   //图片显示
   const algorithmCardPhoto = (List) => {
+    let obj = List.filter((item) => item.attrType === '图层缩略图')[0]
+    if (obj) {
       List.map((item) => {
         if (item.attrType === '图层缩略图') {
           url.value = item.attrValue
         }
       })
+    } else {
+      url.value = '@/assets/capacitySquare/algorithm-photo2.jpg'
+    }
     return url.value
   }
   //跳转详情页
   const detailFunction = (id) => {
     window.open(window.SITE_CONFIG.previewUrl + `#/details?id=${id}`)
   }
-  onMounted(() => {
+  const layerFunction = (e) => {
-    const algorithmclass = document.querySelector('.algorithm-class')
-    if (dataLength.value) {
-      //监听滚动事件
-      algorithmclass.addEventListener('scroll', (e) => {
     var scrollTop = e.currentTarget.scrollTop
     var windowHeight = e.currentTarget.clientHeight
     var scrollHeight = e.currentTarget.scrollHeight
@@ -91,8 +93,16 @@
     } else {
       isNoMore.value = false
     }
-      })
   }
+  onMounted(() => {
+    algorithmclass = document.querySelector('.algorithm-class')
+    if (dataLength.value) {
+      //监听滚动事件
+      algorithmclass.addEventListener('scroll', layerFunction, true)
+    }
+  })
+  onBeforeUnmount(() => {
+    algorithmclass.removeEventListener('scroll', layerFunction, true)
   })
 </script>