|
|
|
@ -1,43 +1,43 @@ |
|
|
|
<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-gray-400 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 class="flex relative items-stretch rounded-[10px] bg-[#E9E9E9] mx-10"> |
|
|
|
<div class="swiper-container w-[calc(100%-104px)] my-[30px]"> |
|
|
|
<Swiper |
|
|
|
v-if="chunkList.length" |
|
|
|
:autoplay="chunkList.length > 6" |
|
|
|
:modules="modules" |
|
|
|
:slides-offset-before="24" |
|
|
|
style="height: 879px" |
|
|
|
@swiper="swiperInit" |
|
|
|
> |
|
|
|
<SwiperSlide v-for="item of chunkList" :key="JSON.stringify(item)"> |
|
|
|
<div class="flex flex-wrap gap-4"> |
|
|
|
<ScrollListItem v-for="customer of item" :key="customer.addTime" :customer="customer" /> |
|
|
|
</div> |
|
|
|
</SwiperSlide> |
|
|
|
</Swiper> |
|
|
|
</div> |
|
|
|
<div class="flex shrink-0 flex-col items-center w-[104px] rounded-[10px] bg-[#C70082] pt-[120px]"> |
|
|
|
<img src="../../assets/images/arrow.svg" alt="" /> |
|
|
|
<p class="text-20 text-white pt-4 tb tracking-[10px]">请在右边的写字台书写您的心声和建议吧</p> |
|
|
|
<i class="text-20 text-white">!</i> |
|
|
|
</div> |
|
|
|
</div> |
|
|
|
</template> |
|
|
|
|
|
|
|
<script setup lang="ts"> |
|
|
|
import { ref, toRefs, watch } from 'vue' |
|
|
|
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 ScrollView from '@/base/ScrollView/ScrollView.vue' |
|
|
|
import { chunk } from 'lodash-es' |
|
|
|
import ScrollListItem from '@/components/ScrollListItem/ScrollListItem.vue' |
|
|
|
import Loading from '@/base/Loading/Loading.vue' |
|
|
|
import SwiperCore, { Autoplay } from 'swiper' |
|
|
|
import { Swiper, SwiperSlide } from 'swiper/vue' |
|
|
|
|
|
|
|
import 'swiper/css' |
|
|
|
|
|
|
|
const modules = [Autoplay] |
|
|
|
SwiperCore.use(modules) |
|
|
|
|
|
|
|
type Props = { |
|
|
|
mallCode: string |
|
|
|
@ -59,53 +59,48 @@ 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() |
|
|
|
} |
|
|
|
const chunkList = computed(() => chunk(customerList.value, 6)) |
|
|
|
|
|
|
|
function _getCustomerList() { |
|
|
|
if (loading.value || loaded.value) { |
|
|
|
return |
|
|
|
} |
|
|
|
loading.value = true |
|
|
|
const params = { |
|
|
|
pageIndex: pageIndex.value, |
|
|
|
pageSize: 10, |
|
|
|
pageSize: 1000, |
|
|
|
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 |
|
|
|
} |
|
|
|
}) |
|
|
|
getCustomerList(config.value.smallUrl, params).then(({ code, data }) => { |
|
|
|
if (code === HTTP_CODE.ERR_OK) { |
|
|
|
customerList.value.push(...data.list) |
|
|
|
} |
|
|
|
}) |
|
|
|
} |
|
|
|
|
|
|
|
const scrollTop = ref() |
|
|
|
const swiper = ref() |
|
|
|
|
|
|
|
function swiperInit(_swiper: any) { |
|
|
|
swiper.value = _swiper |
|
|
|
} |
|
|
|
function start() { |
|
|
|
swiper.value?.autoplay?.start() |
|
|
|
} |
|
|
|
function stop() { |
|
|
|
swiper.value?.autoplay?.stop() |
|
|
|
} |
|
|
|
|
|
|
|
onMounted(() => { |
|
|
|
window.addEventListener('touchend', stop) |
|
|
|
}) |
|
|
|
onBeforeUnmount(() => { |
|
|
|
window.removeEventListener('touchend', stop) |
|
|
|
}) |
|
|
|
|
|
|
|
defineExpose({ |
|
|
|
scrollTop |
|
|
|
start |
|
|
|
}) |
|
|
|
</script> |
|
|
|
|
|
|
|
<style> |
|
|
|
.tb { |
|
|
|
writing-mode: tb; |
|
|
|
letter-spacing: 6px; |
|
|
|
} |
|
|
|
.fadeInRight { |
|
|
|
animation: fade-in-right 1s infinite; |
|
|
|
|
