@ -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 : 6 px ;
}
. fadeInRight {
animation : fade - in - right 1 s infinite ;
姜鑫
