YongWang_Customer/src/App.vue

<template>
  <WeatherAndTime :mall-code="mallCode" />
  <ScrollList ref="scrollList" :customer-list="customerList" :mall-code="mallCode" />
  <img src="./assets/images/back_index_icon.svg" class="fixed bottom-11 left-[52px] w-28 h-12 z-100" alt="" @click="back" />
</template>
<script setup lang="ts">
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 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
    }
  })
}

let timer: any
onMounted(() => {
  const href = window.location.href
  mallCode.value = href.split('=')[1]
  _getCustomerList()
  timer = setInterval(() => {
    _getCustomerList()
    scrollList.value?.scroll()
  }, 1000 * 60)
})
onBeforeUnmount(() => {
  clearInterval(timer)
})

function back() {
  scrollList.value?.scroll()
}
</script>

<style>
html,
body,
#app {
  overflow: hidden;
  width: 1920px;
  height: 1080px;
}
#app {
  background: url('./assets/images/bg.webp') no-repeat center center;
  background-size: 1920px 1080px;
}
</style>