From 14ddadb3a3a7da6af929f448195231fc1a8eaf42 Mon Sep 17 00:00:00 2001 From: al Date: Thu, 20 Feb 2025 18:21:05 +0800 Subject: [PATCH] =?UTF-8?q?=E4=BF=AE=E5=A4=8D=E7=A9=BA=E9=97=B4=E5=85=B3?= =?UTF-8?q?=E6=B3=A8=E9=A1=B5=E9=9D=A2=E6=BB=9A=E5=8A=A8=EF=BC=8C=E6=B7=BB?= =?UTF-8?q?=E5=8A=A0=E5=B7=B2=E8=A7=A3=E9=94=81=E5=86=8D=E8=BF=9B=E7=A9=BA?= =?UTF-8?q?=E9=97=B4=EF=BC=8C=E4=BF=AE=E5=A4=8D=E7=A9=BA=E9=97=B4=E4=BB=B7?= =?UTF-8?q?=E6=A0=BC=E4=B8=8D=E8=83=BD=E4=B8=BA0?= MIME-Version: 1.0 Content-Type: text/plain; charset=UTF-8 Content-Transfer-Encoding: 8bit --- api/space.js | 1 + app/page.js | 16 +- app/space/page.js | 510 +++++++++++------- .../person_space_introduce/[mid]/page.js | 56 +- .../setting/spacePaymentSetting/page.jsx | 2 +- .../skeletons/SpaceItemSkeleton/index.js | 13 + .../SpaceItemSkeleton/index.module.scss | 14 + 7 files changed, 385 insertions(+), 227 deletions(-) create mode 100644 components/skeletons/SpaceItemSkeleton/index.js create mode 100644 components/skeletons/SpaceItemSkeleton/index.module.scss diff --git a/api/space.js b/api/space.js index 72e92fa..09c153c 100644 --- a/api/space.js +++ b/api/space.js @@ -19,6 +19,7 @@ export const getStreamerInfo = async (mid) => { ...data.data.list[0], refund_enable: data.data.refund_enable, refund_status: data.data.refund_status, + exit_status: data.data.exit_status, }; } catch (error) { // console.error(error); diff --git a/app/page.js b/app/page.js index beb7071..c6e225f 100644 --- a/app/page.js +++ b/app/page.js @@ -40,7 +40,8 @@ export default function Home() { const [activeIndex, setActiveIndex] = useState(0); const [account, setAccount] = useState(null); const [scrollHeight, setScrollHeight] = useState(0); - + const [loading, setLoading] = useState(false); + const [offset, setOffset] = useState(0); // useEffect(() => { // const info = get("account"); // console.log("info",info) @@ -49,11 +50,14 @@ export default function Home() { // } // }, [] // ) - const childrenFunc = () => { + const childrenFunc = async () => { + setLoading(true); if (!activeIndex) { - recommPostRef.current?.doRefresh(); + await recommPostRef.current?.doRefresh(); + setLoading(false); } else { - followPostRef.current?.doRefresh(); + await followPostRef.current?.doRefresh(); + setLoading(false); } }; useEffect(() => { @@ -110,7 +114,9 @@ export default function Home() {
{ @@ -49,85 +48,16 @@ export default function Space() { // // window.removeEventListener("resize", handleResize); // }; }, []); - useEffect(() => { - firstRequest(); - setDataList([]); - }, [activeIndex]); - const firstRequest = () => { - resetOffset(); - if (activeIndex === 0) { - getSpaceList(); - } - if (activeIndex === 1) { - getSpacePosts(0).then((res) => { - res && setDataList(res); - }); + const childrenFunc = async () => { + setLoading(true); + if (!activeIndex) { + await spaceRef.current?.doRefresh(); + setLoading(false); + } else { + await spacePostRef.current?.doRefresh(); + setLoading(false); } }; - const resetOffset = () => { - setOffset(0); - }; - const getSpaceList = async () => { - // setLoading(true); - try { - const data = await requireAPI("POST", "/api/zone/list_by_visitor_mid"); - // setLoading(false); - if (data.ret === -1) { - Toast.show({ - icon: "fail", - content: data.msg, - position: "top", - }); - return; - } - //在末尾添加元素以展示查看更多卡片 - if (data.data.list.length !== 0) { - const finalData = [...data.data.list]; - setDataList(finalData); - return; - } - } catch (error) { - // console.error(error); - } - }; - const getSpacePosts = async (offset) => { - // setLoading(true); - try { - const data = await requireAPI( - "POST", - "/api/zone_moment/list_by_visitor_mid", - { - body: { offset, limit: 4 }, - } - ); - // setLoading(false); - if (data.ret === -1) { - Toast.show({ - icon: "fail", - content: data.msg, - position: "top", - }); - return; - } - //在末尾添加元素以展示查看更多卡片 - setHasMore(data.data.more); - setOffset(data.data.offset); - if (data.data.list.length !== 0) { - const finalData = [...data.data.list]; - return finalData; - } - } catch (error) { - // console.error(error); - } - }; - async function loadMore() { - if (!offset) return; - const append = await getSpacePosts(offset); - if (append) { - setDataList((val) => [...val, ...append]); - // setHasMore(append.length > 0); - } - } return (
@@ -167,127 +97,14 @@ export default function Space() { }} > -
- {!loading ? ( - //
- - //
- <> - {dataList?.length > 0 ? ( -
-
    - {dataList?.map((item) => ( -
  • - -
    • - ))} -
  • router.push("/search")}> -
    navigation.navigate("Stream")} - // onClick={} - className="w-full h-52" - > -
    - {/*
    -
    */} -
    -

    - 发现更多 -

    -

    - 缘分就在不经意间 -

    - -
    -
    -
    -
    • -
-
- ) : ( -
- -
- - 搜索空间 - - {/* - 查看推荐 - */} -
-
- )} - - ) : ( -
- -
- )} -
+ {!activeIndex && ( + + )} -
- - {loading && !dataList.length && ( - <> - - - - - - )} - {dataList?.map((item, index) => ( - - - - ))} - - - - - {/* {!dataList?.length && ( -
- -
- )} */} -
+ {!!activeIndex && ( + + )}
@@ -358,3 +176,277 @@ const VisitingCard = ({ data }) => {
); }; + +const SpacesList = forwardRef(({ scrollHeight }, ref) => { + const [loading, setLoading] = useState(false); + const [hasMore, setHasMore] = useState(true); + const [offset, setOffset] = useState(0); + const [spacesList, setSpacesList] = useState([]); + useEffect(() => { + // getSpaceList(2).then((res) => { + // setSpacesList(res); + // setHasMore(true) + // }); + }, []); + useImperativeHandle( + ref, + () => { + return { doRefresh }; + }, + [] + ); + async function doRefresh() { + // await sleep(1000); + // Toast.show({ + // icon: "fail", + // content: "刷新失败", + // }); + // throw new Error("刷新失败"); + window.scrollTo({ + top: 0, + left: 0, + behavior: "smooth", // 可选，平滑滚动效果 + }); + const list = await getSpaceList(1); + setSpacesList(list); + setHasMore(true); + return true; + } + async function loadMore() { + // debugger + const list = await getSpaceList(!spacesList.length ? 2 : 0); + if (list.length == 0) { + setHasMore(false); + } + setSpacesList([...spacesList, ...list]); + } + const getSpaceList = async (type = 2) => { + setLoading(true); + try { + const data = await requireAPI( + "POST", + "/api/zone/list_by_visitor_mid_v2", + { + body: { offset, limit: 4 }, + } + ); + setOffset(data.data.offset); + setHasMore(data.data.more); + setLoading(false); + if (data.ret == -1) { + // Toast.show({ + // icon: "fail", + // content: data.msg, + // position: "top", + // }); + return []; + } else { + return data.data.list; + } + } catch (error) { + setLoading(false); + } + }; + return ( + //
+
+ {loading && !spacesList.length && ( +
+ + + + + + + + + + +
+ )} +
    + {spacesList?.map((item) => ( +
  • + +
    • + ))} +
  • router.push("/search")}> +
    navigation.navigate("Stream")} + // onClick={} + className="w-full h-52" + > +
    + {/*
    +
    */} +
    +

    发现更多

    +

    缘分就在不经意间

    + +
    +
    +
    +
    • + {/* {spacesList?.length == 0 && !loading && ( +
    + +
    + )} */} +
+ {/* {!!spacesList?.length && ( + + )} */} + + + +
+ ); +}); +const SpacePostList = forwardRef(({ scrollHeight }, ref) => { + const [loading, setLoading] = useState(false); + const [hasMore, setHasMore] = useState(false); + const [spacePostList, setSpacePostList] = useState([]); + const [currentTime, setCurrentTime] = useState(); + const [offset, setOffset] = useState(0); + const ids = useRef(null); + useEffect(() => { + getFollowIds().then((res) => { + ids.current = res; + getSpacePostList(res, 0); + }); + }, []); + useImperativeHandle( + ref, + () => { + return { doRefresh }; + }, + [] + ); + async function doRefresh() { + // await sleep(1000); + // Toast.show({ + // icon: "fail", + // content: "刷新失败", + // }); + // throw new Error("刷新失败"); + // getRecommPostList(1); + window.scrollTo({ + top: 0, + left: 0, + behavior: "smooth", // 可选，平滑滚动效果 + }); + // setSpacePostList([]); + await getSpacePostList(ids.current, 0); + return true; + } + async function loadMore() { + await getSpacePostList(ids.current, offset); + // const newList = [...spacePostList, ...list]; + // setSpacePostList(newList); + } + const getFollowIds = async () => { + setLoading(true); + setCurrentTime(Math.floor(new Date().getTime() / 1000)); + const data = await requireAPI( + "POST", + "/api/account_relation/list_follow", + { + body: { offset, limit: 4 }, + }, + true + ); + return data; + }; + const getSpacePostList = async (data, offset) => { + if (data.data.list.length > 0) { + //查关注主播展示资料 + const postsResponse = await requireAPI( + "POST", + "/api/zone_moment/list_by_visitor_mid", + { + body: { + offset, + limit: 4, + }, + } + ); + // debugger; + // console.log("offset", postsResponse.data.offset); + setOffset(postsResponse.data.offset); + setHasMore(postsResponse.data.more); + setLoading(false); + if (data.ret == -1) { + // Toast.show({ + // icon: "fail", + // content: data.msg, + // position: "top", + // }); + } else { + setSpacePostList((old) => { + if (!offset) { + return postsResponse.data.list; + } else { + return [...old, ...postsResponse.data.list]; + } + }); + } + } else { + setLoading(false); + } + }; + + return ( +
+ {/* */} + + {loading && !spacePostList.length && ( +
+ + + + + +
+ )} + {spacePostList?.map((item, index) => ( + + + + ))} + {!spacePostList?.length && ( +
+ +
+ )} + + {!!spacePostList?.length && ( + + )} + {/* */} +
+ ); +}); diff --git a/app/space/person_space_introduce/[mid]/page.js b/app/space/person_space_introduce/[mid]/page.js index 853f57c..cd8ef54 100644 --- a/app/space/person_space_introduce/[mid]/page.js +++ b/app/space/person_space_introduce/[mid]/page.js @@ -72,7 +72,28 @@ export default function PersonSpaceIntroduce() { }); return; } - router.push("/space/" + mid); + router.replace("/space/" + mid); + } catch (error) { + // console.error(error); + } + }; + const handleReenterSpace = async () => { + try { + const body = { + zid: data?.id, + }; + const _data = await requireAPI("POST", "/api/zone/exit_reenter", { + body, + }); + if (_data.ret === -1) { + Toast.show({ + icon: "fail", + content: _data.msg, + position: "top", + }); + return; + } + router.replace("/space/" + mid); } catch (error) { // console.error(error); } @@ -235,6 +256,10 @@ export default function PersonSpaceIntroduce() {
{ + if (data.exit_status === 1) { + handleReenterSpace(); + return; + } if (data?.admission_price === 0) { handleJoinFreeSpace(); } else { @@ -269,18 +294,25 @@ export default function PersonSpaceIntroduce() { } }} > - {data?.admission_price !== 0 && ( - + {data?.exit_status === 1 ? ( + 已解锁 + ) : ( + <> + {data?.admission_price !== 0 && ( + + )} + + {data?.admission_price === 0 + ? "免费加入" + : `${(data?.admission_price || 0) / 100}元立即加入`} + + )} - - {data?.admission_price === 0 - ? "免费加入" - : `${(data?.admission_price || 0) / 100}元立即加入`} - + { // if (value.length === 0) { // return Promise.reject(messageEle("请选择性别")); diff --git a/components/skeletons/SpaceItemSkeleton/index.js b/components/skeletons/SpaceItemSkeleton/index.js new file mode 100644 index 0000000..15998b1 --- /dev/null +++ b/components/skeletons/SpaceItemSkeleton/index.js @@ -0,0 +1,13 @@ +"use client"; + +import React from "react"; +import { Skeleton } from "antd-mobile"; +import styles from "./index.module.scss"; +export default function SpaceItemSkeleton() { + return ( +
+ + +
+ ); +} diff --git a/components/skeletons/SpaceItemSkeleton/index.module.scss b/components/skeletons/SpaceItemSkeleton/index.module.scss new file mode 100644 index 0000000..45e7743 --- /dev/null +++ b/components/skeletons/SpaceItemSkeleton/index.module.scss @@ -0,0 +1,14 @@ + +.photoSkeleton { + --height: 13rem!important; + --border-radius: 4px!important; + background-color: #ffffff1a; + // margin-bottom: 1rem; + } +.titleSkeleton { + --height: 42px!important; + --border-radius: 4px!important; + background-color: #ffffff1a; + position: absolute; + bottom: 0; +} \ No newline at end of file -- 2.41.0