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.
120 lines
2.8 KiB
120 lines
2.8 KiB
<template>
|
|
<div class="flex relative items-stretch rounded-[10px] bg-[#E9E9E9] mx-10">
|
|
<div class="swiper-container w-[calc(100%-104px)] my-[30px] pl-6">
|
|
<Swiper
|
|
v-if="chunkList.length"
|
|
rewind
|
|
:autoplay="chunkList.length > 1 ? { delay: 15000 } : false"
|
|
:modules="modules"
|
|
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-[56px]">
|
|
<img src="../../assets/images/arrow.svg" alt="" />
|
|
<p class="text-24 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, computed, onMounted, onBeforeUnmount } from 'vue'
|
|
import { useRootStore } from '@/store/root'
|
|
import { getCustomerList } from '@/http/api/base'
|
|
import { HTTP_CODE } from '@/enums'
|
|
import { chunk } from 'lodash-es'
|
|
import ScrollListItem from '@/components/ScrollListItem/ScrollListItem.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
|
|
}
|
|
|
|
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 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 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({
|
|
start
|
|
})
|
|
</script>
|
|
|
|
<style>
|
|
.tb {
|
|
writing-mode: tb;
|
|
}
|
|
.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>
|
|
|