<template>
<div class="swipe">
<van-swipe class="swipe-list" :autoplay="3000" indicator-color="white">
<template v-for="(item, index) in swipeData">
<van-swipe-item class="item">
<img :src="item.url" alt="" />
</van-swipe-item>
</template>
<template #indicator="{ active, total }">
<div class="indicator">
<template v-for="(value, key, index) in swipeGroup" :key="key">
<span class="item" :class="{ active: swipeData[active]?.enumPictureCategory == key }">
<span class="text">{{ getName(value[0].title) }}</span>
<span class="count" v-if="swipeData[active]?.enumPictureCategory == key"> {{ getCategoryIndex(swipeData[active]) }}/{{ value.length }} </span>
</span>
</template>
</div>
</template>
</van-swipe>
</div>
</template>
<script setup>
const props = defineProps({
swipeData: {
type: Array,
default: () => []
}
})
// 对数据进行转换
const swipeGroup = {}
props.swipeData.forEach(v => {
let valueArray = swipeGroup[v.enumPictureCategory]
// 一开始为undefined
if (!valueArray) {
valueArray = []
swipeGroup[v.enumPictureCategory] = valueArray
}
valueArray.push(v)
})
// 定义转换tag数据的方法
const nameReg = /【(.*?)】/i
const getName = name => {
// 将 【卧室】: 转为 卧室
// return name.replace(":", "").replace("】", "").replace("【", "")
const results = nameReg.exec(name)
return results[1]
}
// 查找各项的index
const getCategoryIndex = item => {
const valueArray = swipeGroup[item.enumPictureCategory]
return valueArray.findIndex(data => data === item) + 1
}
</script>
<style lang="less" scoped>
.swipe {
.swipe-list {
.item {
img {
width: 100%;
}
}
.indicator {
position: absolute;
right: 5px;
bottom: 5px;
display: flex;
padding: 2px 5px;
font-size: 12px;
color: #fff;
background: rgba(0, 0, 0, 0.8);
.item {
margin: 0 3px;
&.active {
padding: 0 3px;
border-radius: 5px;
background-color: #fff;
color: #333;
}
}
}
}
}
</style>
props.swipeData
swipeGroup