You can not select more than 25 topics
Topics must start with a letter or number, can include dashes ('-') and can be up to 35 characters long.
125 lines
3.1 KiB
125 lines
3.1 KiB
<template>
|
|
<div class="relative rounded-[10px] bg-[#E9E9E9] mx-10 h-[936px]">
|
|
<ScrollView
|
|
ref="scrollTop"
|
|
pull-up
|
|
:scroll-top="false"
|
|
class="relative w-[1840px]"
|
|
:list="customerList"
|
|
scroll-x
|
|
@scroll-end="scrollEnd"
|
|
>
|
|
<div class="inline-grid grid-rows-[repeat(2,430px)] grid-flow-col gap-4 pl-6 pr-10 whitespace-nowrap pt-[30px] pb-3">
|
|
<ScrollListItem v-for="item of customerList" :key="item.addTime" :customer="item" />
|
|
<div class="flex-center row-span-2" :class="[isFirst ? 'col-end-[56]' : '']">
|
|
<Loading v-if="loading" />
|
|
<div v-if="loaded && customerList.length >= total && customerList.length" class="text-24 text-zinc-900 tb">没有更多数据</div>
|
|
</div>
|
|
</div>
|
|
<img
|
|
v-if="!customerList.length && loaded"
|
|
class="absolute top-1/2 left-1/2 -translate-x-1/2 -translate-y-1/2"
|
|
src="../../assets/images/nodata.svg"
|
|
alt=""
|
|
/>
|
|
<div v-if="customerList.length > 4" class="absolute left-1/2 -translate-x-1/2 bottom-5 flex flex-col items-center">
|
|
<img src="../../assets/images/hand.png" class="fadeInRight mb-[6px]" alt="" />
|
|
<p class="text-14 text-[#666]">左右滑动查看更多</p>
|
|
</div>
|
|
</ScrollView>
|
|
</div>
|
|
</template>
|
|
|
|
<script setup lang="ts">
|
|
import { ref, toRefs, watch } from 'vue'
|
|
import { useRootStore } from '@/store/root'
|
|
import { getCustomerList } from '@/http/api/base'
|
|
import { HTTP_CODE } from '@/enums'
|
|
import ScrollView from '@/base/ScrollView/ScrollView.vue'
|
|
import ScrollListItem from '@/components/ScrollListItem/ScrollListItem.vue'
|
|
import Loading from '@/base/Loading/Loading.vue'
|
|
|
|
type Props = {
|
|
mallCode: string
|
|
}
|
|
|
|
const props = withDefaults(defineProps<Props>(), {
|
|
mallCode: ''
|
|
})
|
|
|
|
watch(
|
|
() => props.mallCode,
|
|
() => {
|
|
_getCustomerList()
|
|
}
|
|
)
|
|
|
|
const store = useRootStore()
|
|
const { config } = toRefs(store)
|
|
|
|
const customerList = ref<Customer[]>([])
|
|
const pageIndex = ref(1)
|
|
const loading = ref(false)
|
|
const loaded = ref(false)
|
|
const isFirst = ref(true)
|
|
const total = ref(0)
|
|
|
|
function scrollEnd() {
|
|
pageIndex.value++
|
|
_getCustomerList()
|
|
}
|
|
|
|
function _getCustomerList() {
|
|
if (loading.value || loaded.value) {
|
|
return
|
|
}
|
|
loading.value = true
|
|
const params = {
|
|
pageIndex: pageIndex.value,
|
|
pageSize: 10,
|
|
mallCode: props.mallCode
|
|
}
|
|
getCustomerList(config.value.smallUrl, params)
|
|
.then(({ code, data }) => {
|
|
if (code === HTTP_CODE.ERR_OK) {
|
|
customerList.value.push(...data.list)
|
|
total.value = data.allCount
|
|
}
|
|
})
|
|
.finally(() => {
|
|
isFirst.value = false
|
|
loading.value = false
|
|
if (customerList.value.length >= total.value) {
|
|
loaded.value = true
|
|
}
|
|
})
|
|
}
|
|
|
|
const scrollTop = ref()
|
|
|
|
defineExpose({
|
|
scrollTop
|
|
})
|
|
</script>
|
|
|
|
<style>
|
|
.tb {
|
|
writing-mode: tb;
|
|
letter-spacing: 6px;
|
|
}
|
|
.fadeInRight {
|
|
animation: fade-in-right 1s infinite;
|
|
}
|
|
|
|
@keyframes fade-in-right {
|
|
from {
|
|
opacity: 0;
|
|
transform: translate3d(100%, 0, 0);
|
|
}
|
|
|
|
to {
|
|
opacity: 1;
|
|
transform: translate3d(0, 0, 0);
|
|
}
|
|
}
|
|
</style>
|
|
|