100 lines
2.9 KiB
JavaScript
100 lines
2.9 KiB
JavaScript
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 baseRequest from "@/utils/baseRequest";
|
|
export default function Banner() {
|
|
const base = baseRequest();
|
|
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",
|
|
{ body: { device_type: 2 } },
|
|
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={item.id}>
|
|
<div
|
|
className="w-full h-[calc((100vw-2rem)*3/7)]"
|
|
onClick={() => {
|
|
const links = item?.hyperlinks;
|
|
if (links.length > 1) {
|
|
router.push(
|
|
links.filter((it) => it.inward_action_type === "h5")[0]?.url
|
|
);
|
|
} else {
|
|
if (links[0]?.action === "outward") {
|
|
// 在新的标签也打开
|
|
window.open(links[0]?.url);
|
|
} else {
|
|
// alert(links[0]?.params);
|
|
// alert(encodeURIComponent(links[0]?.params));
|
|
router.push(
|
|
`/webView/${encodeURIComponent(
|
|
links[0]?.url +
|
|
(links[0]?.action === "webViewWithOutHeaderInward" ||
|
|
links[0]?.action === "webViewHeaderInward"
|
|
? `?base=${encodeURIComponent(JSON.stringify(base))}`
|
|
: "")
|
|
)}`
|
|
);
|
|
}
|
|
}
|
|
}}
|
|
>
|
|
<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">
|
|
{bannerList.length > 0 && (
|
|
<Swiper
|
|
allowTouchMove
|
|
ref={ref}
|
|
loop
|
|
autoplay
|
|
style={{ "--border-radius": "8px" }}
|
|
>
|
|
{bannerList.map((item, index) => items(item, index))}
|
|
</Swiper>
|
|
)}
|
|
</div>
|
|
);
|
|
}
|