feat: 🚀 间隔5分钟刷新一次数据

src/App.vue

@@ -1,28 +1,48 @@
 <template>
   <WeatherAndTime :mall-code="mallCode" />
-  <ScrollList ref="scrollList" :mall-code="mallCode" />
+  <ScrollList ref="scrollList" :customer-list="customerList" :mall-code="mallCode" />
 </template>
 <script setup lang="ts">
-import { onMounted, onBeforeUnmount, ref } from 'vue'
-import { useAutoBack } from '@/composables/useAutoBack'
+import { onMounted, onBeforeUnmount, ref, toRefs, shallowRef } from 'vue'
+import { useRootStore } from '@/store/root'
+import { getCustomerList } from '@/http/api/base'
+import { HTTP_CODE } from '@/enums'
 import WeatherAndTime from '@/components/WeatherAndTime/WeatherAndTime.vue'
 import ScrollList from '@/components/ScrollList/ScrollList.vue'
 
+const store = useRootStore()
+const { config } = toRefs(store)
+
 const scrollList = ref<InstanceType<typeof ScrollList> | null>(null)
 const mallCode = ref<string>('')
 
-const { checkHandleScreen } = useAutoBack(_checkHandleScreen)
-function _checkHandleScreen() {
-  scrollList.value?.start()
+const pageIndex = ref(1)
+const customerList = shallowRef<Customer[]>([])
+function _getCustomerList() {
+  const params = {
+    pageIndex: pageIndex.value,
+    pageSize: 1000,
+    mallCode: mallCode.value
+  }
+  getCustomerList(config.value.smallUrl, params).then(({ code, data }) => {
+    if (code === HTTP_CODE.ERR_OK) {
+      customerList.value = [...data.list, ...customerList.value]
+    }
+  })
 }
 
+let timer: any
 onMounted(() => {
   const href = window.location.href
   mallCode.value = href.split('=')[1]
-  window.addEventListener('touchend', checkHandleScreen)
+  _getCustomerList()
+  timer = setInterval(() => {
+    _getCustomerList()
+    scrollList.value?.start()
+  }, 60000 * 5)
 })
 onBeforeUnmount(() => {
-  window.removeEventListener('touchend', checkHandleScreen)
+  clearInterval(timer)
 })
 </script>
 

src/components/ScrollList/ScrollList.vue

@@ -5,6 +5,9 @@
         v-if="chunkList.length"
         rewind
         :autoplay="chunkList.length > 1 ? { delay: 15000 } : false"
+        observer
+        observe-parents
+        observe-slide-children
         :modules="modules"
         style="height: 879px"
         @swiper="swiperInit"
@@ -25,10 +28,7 @@
 </template>
 
 <script setup lang="ts">
-import { ref, toRefs, watch, computed, onMounted, onBeforeUnmount } from 'vue'
-import { useRootStore } from '@/store/root'
-import { getCustomerList } from '@/http/api/base'
-import { HTTP_CODE } from '@/enums'
+import { ref, computed, onMounted, onBeforeUnmount } from 'vue'
 import { chunk } from 'lodash-es'
 import ScrollListItem from '@/components/ScrollListItem/ScrollListItem.vue'
 import SwiperCore, { Autoplay } from 'swiper'
@@ -41,38 +41,15 @@ SwiperCore.use(modules)
 
 type Props = {
   mallCode: string
+  customerList: Customer[]
 }
 
 const props = withDefaults(defineProps<Props>(), {
-  mallCode: ''
+  mallCode: '',
+  customerList: () => []
 })
 
-watch(
-  () => props.mallCode,
-  () => {
-    _getCustomerList()
-  }
-)
-
-const store = useRootStore()
-const { config } = toRefs(store)
-
-const customerList = ref<Customer[]>([])
-const pageIndex = ref(1)
-const chunkList = computed(() => chunk(customerList.value, 6))
-
-function _getCustomerList() {
-  const params = {
-    pageIndex: pageIndex.value,
-    pageSize: 1000,
-    mallCode: props.mallCode
-  }
-  getCustomerList(config.value.smallUrl, params).then(({ code, data }) => {
-    if (code === HTTP_CODE.ERR_OK) {
-      customerList.value.push(...data.list)
-    }
-  })
-}
+const chunkList = computed(() => chunk(props.customerList, 6))
 
 const swiper = ref()
 

src/composables/useAutoBack.ts

@@ -1,33 +0,0 @@
-import { ref } from 'vue'
-
-export const useAutoBack = (callback: () => void) => {
-  const MIN_TIME = 0
-  const CHECK_TIME = 1000
-  const TO_INDEX_TIME = 15
-  const toIndexTime = ref(TO_INDEX_TIME) //回首页的时间
-
-  const toIndexInterval = ref()
-
-  function sleepToIndex() {
-    return new Promise<void>(resolve => {
-      toIndexInterval.value = setInterval(() => {
-        toIndexTime.value--
-        if (toIndexTime.value <= MIN_TIME) {
-          clearInterval(toIndexInterval.value)
-          resolve()
-        }
-      }, CHECK_TIME)
-    })
-  }
-
-  async function checkHandleScreen() {
-    toIndexTime.value = TO_INDEX_TIME
-    clearInterval(toIndexInterval.value)
-    await sleepToIndex()
-    callback()
-  }
-
-  return {
-    checkHandleScreen
-  }
-}