55 lines
1.6 KiB
TypeScript
55 lines
1.6 KiB
TypeScript
import { Image, Swiper, SwiperItem, View } from '@tarojs/components'
|
|
import { useEffect, useState } from 'react'
|
|
import styles from './index.module.scss'
|
|
import { goLink } from '@/common/common'
|
|
import { GetBannerList } from '@/api/banner'
|
|
import { formatImgUrl } from '@/common/format'
|
|
|
|
interface item { title: string; img: string; url: string; id: number }
|
|
|
|
interface params {
|
|
list?: item[]
|
|
swiperOnClick?: (val: item) => void
|
|
style?: Object
|
|
}
|
|
const Banner = (props: params) => {
|
|
const { swiperOnClick, style = {} } = props
|
|
|
|
const [list, setList] = useState<any[]>([])
|
|
const { fetchData, state } = GetBannerList()
|
|
const getData = async() => {
|
|
const res = await fetchData()
|
|
setList(res.data?.list)
|
|
}
|
|
useEffect(() => {
|
|
getData()
|
|
}, [])
|
|
|
|
const skipTo = (item) => {
|
|
if (item.jump_type == 2 || item.jump_type == 0) {
|
|
goLink(`${item.link}&title=${item.title}`)
|
|
}
|
|
else {
|
|
goLink(item.link)
|
|
}
|
|
}
|
|
|
|
return (
|
|
<View className={styles.swiper_con} style={style}>
|
|
<Swiper className={styles.xswiper} indicatorColor="#ccc" indicatorActiveColor="#fff" circular indicatorDots autoplay>
|
|
{list?.map((item) => {
|
|
return (
|
|
<SwiperItem key={item.id}>
|
|
<View className={styles.image_item} onClick={() => skipTo(item)}>
|
|
<Image mode="aspectFill" src={formatImgUrl(item.prev_view_url, '!w800')}></Image>
|
|
</View>
|
|
</SwiperItem>
|
|
)
|
|
})}
|
|
</Swiper>
|
|
</View>
|
|
)
|
|
}
|
|
|
|
export default Banner
|