chore(release): 1.0.0-B.14

CHANGELOG.md

@@ -2,6 +2,13 @@
 
 All notable changes to this project will be documented in this file. See [standard-version](https://github.com/conventional-changelog/standard-version) for commit guidelines.
 
+## [1.0.0-B.14](https://git.1000my.com/project_yongwangyun/YongWang_Customer/compare/v1.0.0-B.13...v1.0.0-B.14) (2024-01-05)
+
+
+### Features
+
+* 🚀 间隔5分钟刷新一次数据 ([a708abe](https://git.1000my.com/project_yongwangyun/YongWang_Customer/commit/a708abec873464a8ed23a48a6c7711b2675f5614))
+
 ## [1.0.0-B.13](https://git.1000my.com/project_yongwangyun/YongWang_Customer/compare/v1.0.0-B.12...v1.0.0-B.13) (2024-01-03)
 
 ## [1.0.0-B.12](https://git.1000my.com/project_yongwangyun/YongWang_Customer/compare/v1.0.0-B.11...v1.0.0-B.12) (2024-01-03)

package-lock.json

@@ -1,6 +1,6 @@
 {
   "name": "vue_cli_ts",
-  "version": "1.0.0-B.13",
+  "version": "1.0.0-B.14",
   "lockfileVersion": 1,
   "requires": true,
   "dependencies": {

package.json

@@ -1,6 +1,6 @@
 {
   "name": "vue_cli_ts",
-  "version": "1.0.0-B.13",
+  "version": "1.0.0-B.14",
   "private": true,
   "scripts": {
     "serve": "vue-cli-service serve",

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
-  }
-}