82 lines
2.1 KiB
React
82 lines
2.1 KiB
React
|
import React, { useEffect, useState, useRef, useCallback } from "react";
|
||
|
|
import { Toast, Swiper, Image } from "antd-mobile";
|
||
|
|
import LoadingMask from "@/components/LoadingMask";
|
||
|
|
import { useRouter } from "next/navigation";
|
||
|
|
import requireAPI from "@/utils/requireAPI";
|
||
|
|
import OwnImage from "@/components/OwnImage";
|
||
|
|
import { goToPage } from "@/utils/tools";
|
||
|
|
export default function Banner() {
|
||
|
|
const [bannerList, setBannerList] = useState([]);
|
||
|
|
const [isLoading, setIsLoading] = useState(false);
|
||
|
|
const router = useRouter();
|
||
|
|
const ref = useRef(null);
|
||
|
|
useEffect(() => {
|
||
|
|
const getBannerList = async () => {
|
||
|
|
setIsLoading(true);
|
||
|
|
try {
|
||
|
|
const _data = await requireAPI(
|
||
|
|
"POST",
|
||
|
|
"/api/activity_banner/list",
|
||
|
|
null,
|
||
|
|
true
|
||
|
|
);
|
||
|
|
if (_data.ret === -1) {
|
||
|
|
Toast.show({
|
||
|
|
icon: "fail",
|
||
|
|
content: _data.msg,
|
||
|
|
position: "top",
|
||
|
|
});
|
||
|
|
return;
|
||
|
|
}
|
||
|
|
setBannerList(_data.data.list);
|
||
|
|
} catch (error) {
|
||
|
|
console.error(error);
|
||
|
|
} finally {
|
||
|
|
setIsLoading(false);
|
||
|
|
}
|
||
|
|
};
|
||
|
|
getBannerList();
|
||
|
|
}, []);
|
||
|
|
const items = useCallback(
|
||
|
|
(item, index) => (
|
||
|
|
<Swiper.Item key={index}>
|
||
|
|
<div
|
||
|
|
className="w-full h-[200px]"
|
||
|
|
onClick={() => {
|
||
|
|
const links = item?.hyperlinks;
|
||
|
|
if (links.length > 1) {
|
||
|
|
router.push(
|
||
|
|
links.filter((it) => it.inward_action_type === "h5")[0]?.url
|
||
|
|
);
|
||
|
|
} else {
|
||
|
|
router.push(links[0]?.url);
|
||
|
|
}
|
||
|
|
}}
|
||
|
|
>
|
||
|
|
<OwnImage
|
||
|
|
className={"w-full h-full"}
|
||
|
|
outClassName={"w-full h-full"}
|
||
|
|
src={item.image.images[0].urls[0]}
|
||
|
|
fit="cover"
|
||
|
|
position="center"
|
||
|
|
/>
|
||
|
|
</div>
|
||
|
|
</Swiper.Item>
|
||
|
|
),
|
||
|
|
[]
|
||
|
|
);
|
||
|
|
return (
|
||
|
|
<div className="flex-1 mt-6">
|
||
|
|
<Swiper
|
||
|
|
allowTouchMove
|
||
|
|
ref={ref}
|
||
|
|
loop
|
||
|
|
autoplay
|
||
|
|
style={{ "--border-radius": "8px" }}
|
||
|
|
>
|
||
|
|
{bannerList.map((item, index) => items(item, index))}
|
||
|
|
</Swiper>
|
||
|
|
</div>
|
||
|
|
);
|
||
|
|
}
|