|
@@ -1,5 +1,6 @@
|
|
|
"use client";
|
|
|
import { GroupType, PrizeTypes } from "@/api/home";
|
|
|
+import Box from "@/components/Box";
|
|
|
import CustomTabs from "@/components/Tabs";
|
|
|
import { useRouter } from "@/i18n/routing";
|
|
|
import { useSystemStore } from "@/stores/useSystemStore";
|
|
@@ -162,20 +163,40 @@ const Tabs: FC<Props> = (props) => {
|
|
|
|
|
|
const tabData = React.useMemo(() => {
|
|
|
return [...tabs, ...newButtonGroup].map((item, idx) => {
|
|
|
+ const id = `${item.category_name}_${item.action_params}`;
|
|
|
return {
|
|
|
...item,
|
|
|
name: item.category_name,
|
|
|
- id: `${item.category_name}_${idx}`,
|
|
|
- jump_id: groupGames[idx].jump_id,
|
|
|
+ id,
|
|
|
+ jump_id: item.action_params,
|
|
|
headerRender: () => (
|
|
|
- <TabItem
|
|
|
- item={item as TabItemType}
|
|
|
- active={`${item.category_name}_${idx}` === active || (!active && idx === 0)}
|
|
|
- ></TabItem>
|
|
|
+ <Box
|
|
|
+ action={item.action_type}
|
|
|
+ actionData={item.action_params}
|
|
|
+ additional={{
|
|
|
+ 6: () => {
|
|
|
+ setActive(id);
|
|
|
+ },
|
|
|
+ 8: () => {
|
|
|
+ setActive(id);
|
|
|
+ selectHandler(id);
|
|
|
+ },
|
|
|
+ }}
|
|
|
+ pt={false}
|
|
|
+ pr={false}
|
|
|
+ pb={false}
|
|
|
+ pl={false}
|
|
|
+ >
|
|
|
+ <TabItem
|
|
|
+ item={item as TabItemType}
|
|
|
+ active={`${id}` === active || (!active && idx === 0)}
|
|
|
+ ></TabItem>
|
|
|
+ </Box>
|
|
|
),
|
|
|
};
|
|
|
});
|
|
|
- }, [tabs, active, newButtonGroup, groupGames]);
|
|
|
+ // eslint-disable-next-line react-hooks/exhaustive-deps
|
|
|
+ }, [tabs, active, newButtonGroup]);
|
|
|
|
|
|
const getTab = (id: string) => {
|
|
|
let result = tabData.find((item: any) => {
|
|
@@ -216,24 +237,26 @@ const Tabs: FC<Props> = (props) => {
|
|
|
let target = null;
|
|
|
for (let i = 0; i < tabData.length; i++) {
|
|
|
const element = tabData[i];
|
|
|
- const dom = document.querySelector(`#jump_${element.jump_id}`);
|
|
|
- if (dom) {
|
|
|
- const boundInfo = dom.getBoundingClientRect();
|
|
|
- if (!stickyRef.current) {
|
|
|
- getStickyContainerInfo();
|
|
|
- }
|
|
|
- if (!containerRef.current) {
|
|
|
- getContainerInfo();
|
|
|
- }
|
|
|
- if (boundInfo.top < stickyRef.current + containerRef.current + 10) {
|
|
|
- target = element;
|
|
|
- } else {
|
|
|
- break;
|
|
|
+ if (element.action_type === 8) {
|
|
|
+ const dom = document.querySelector(`#jump_${element.jump_id}`);
|
|
|
+ if (dom) {
|
|
|
+ const boundInfo = dom.getBoundingClientRect();
|
|
|
+ if (!stickyRef.current) {
|
|
|
+ getStickyContainerInfo();
|
|
|
+ }
|
|
|
+ if (!containerRef.current) {
|
|
|
+ getContainerInfo();
|
|
|
+ }
|
|
|
+ if (boundInfo.top < stickyRef.current + containerRef.current + 10) {
|
|
|
+ target = element;
|
|
|
+ } else {
|
|
|
+ break;
|
|
|
+ }
|
|
|
}
|
|
|
}
|
|
|
- }
|
|
|
- if (target) {
|
|
|
- setActive(target.id);
|
|
|
+ if (target) {
|
|
|
+ setActive(target.id);
|
|
|
+ }
|
|
|
}
|
|
|
requestAnimationFrame(doScorll);
|
|
|
};
|
|
@@ -241,7 +264,9 @@ const Tabs: FC<Props> = (props) => {
|
|
|
const selectHandler = (id?: string) => {
|
|
|
if (!id) return;
|
|
|
const toTab = getTab(id);
|
|
|
+
|
|
|
const toDom = document.querySelector(`#jump_${toTab.jump_id}`);
|
|
|
+
|
|
|
const container = document.querySelector("#maincontainer");
|
|
|
if (!stickyRef.current) {
|
|
|
getStickyContainerInfo();
|
|
@@ -269,7 +294,7 @@ const Tabs: FC<Props> = (props) => {
|
|
|
<CustomTabs
|
|
|
items={tabData as any}
|
|
|
activeKey={active}
|
|
|
- onChanage={selectHandler}
|
|
|
+ // onChanage={selectHandler}
|
|
|
></CustomTabs>
|
|
|
</div>
|
|
|
{/* <div className="sticky top-[0rem] z-[3] bg-[var(--primary1)] px-[.1rem] pb-[.05rem] pt-[.05rem]">
|