diff --git a/app/globals.css b/app/globals.css index 8c56ddb..9f396ef 100644 --- a/app/globals.css +++ b/app/globals.css @@ -123,7 +123,11 @@ body{ background-color: #07050A; color: #ffffff88; } -.adm-jumbo-tabs-header .adm-jumbo-tabs-tab-list{ +.spaceBoxTwo .adm-jumbo-tabs-header .adm-jumbo-tabs-tab-list{ + display: grid; + grid-template-columns: repeat(2, 1fr); +} +.spaceBoxThree .adm-jumbo-tabs-header .adm-jumbo-tabs-tab-list{ display: grid; grid-template-columns: repeat(3, 1fr); } diff --git a/app/messageDetail/page.js b/app/messageDetail/page.js index baa19a6..94ae99b 100644 --- a/app/messageDetail/page.js +++ b/app/messageDetail/page.js @@ -1,22 +1,17 @@ "use client"; -import React, { useState, useCallback, useEffect } from "react"; +import React, { useState, useRef, useEffect, useCallback } from "react"; import baseRequest from "@/utils/baseRequest"; import { generateSignature } from "@/utils/crypto"; import { FontAwesomeIcon } from "@fortawesome/react-fontawesome"; import { faAngleLeft } from "@fortawesome/free-solid-svg-icons"; -import { - Input, - Button, - PullToRefresh, - List, - InfiniteScroll, - Toast -} from "antd-mobile"; +import { Input, Button, Toast, Avatar } from "antd-mobile"; import { useRouter } from "next/navigation"; const blurhash = "LcKUTa%gOYWBYRt6xuoJo~s8V@fk"; - +import { get } from "@/utils/storeInfo"; +import require from "@/utils/require"; +import { formatDeadline } from "@/utils/tools"; /* params格式： { @@ -25,32 +20,117 @@ params格式： */ export default function MessageDetail({}) { - const [hasMore, setHasMore] = useState(true); + // const [hasMore, setHasMore] = useState(true); const router = useRouter(); - const getSession = async () => { - const apiUrl = process.env.EXPO_PUBLIC_API_URL; - try { - const base = baseRequest(); - const account = await get("account"); - const signature = generateSignature({ - mid: account.mid, - ...base, + const [oldMessages, setOldMessages] = useState([]); + const [messages, setMessages] = useState([]); + const [handledmessages, setHandledmessages] = useState([]); + const [sessionId, setSessionId] = useState(); + const [userInfo, setUserInfo] = useState(null); + const [newMessage, setNewMessage] = useState(""); + + const [offset, setOffset] = useState(0); + const [more, setMore] = useState(1); + const scrollBox = useRef(); + const toScrollBottom = useRef(0); + useEffect(() => { + const userData = get("account"); + setUserInfo(userData); + getSession(userData.mid); + + }, []); + useEffect(() => { + if (toScrollBottom.current) { + scrollBox.current?.scrollTo(0, scrollBox.current.scrollHeight); + toScrollBottom.current = 0; + } + }, [toScrollBottom.current]); + // useEffect(() => { + // if (offset == 12) { + // console.log("offset--------", offset); + + // scrollBox.current?.scrollTo(0, scrollBox.current.scrollHeight); + + // // console.log("scrollBox.current",scrollBox.current.scrollHeight,scrollBox.current.scrollTop) + // } + // }, [offset]); + useEffect(() => { + if (sessionId && userInfo.mid) { + loadEarlierHistory().then((res) => { + setMessages((old) => { + toScrollBottom.current = 1; + return res; + }); }); - const detailResponse = await fetch( - `${apiUrl}/api/contact_customer_service_session/list_by_mid?signature=${signature}`, - { - method: "POST", - headers: { - "Content-Type": "application/json", + } + const intervalId = setInterval(() => { + updateMessages(); + }, 3000); // 间隔时间为3秒 + + // 在组件卸载时清除定时器 + return () => { + clearInterval(intervalId); + }; + }, [sessionId]); + //查询session + const getSession = async (mid) => { + try { + const data = + await require("POST", "/api/contact_customer_service_session/list_by_mid", { + body: { + mid: Number(mid), }, - body: JSON.stringify({ - mid: account.mid, - ...base, - }), - } - ); - const detailData = await detailResponse.json(); - if (detailData.ret === -1) { + }); + if (data.ret === -1) { + Toast.show({ + icon: "fail", + content: data.msg, + position: "top", + }); + } + if (data.data.session) { + setSessionId(data.data.session.id); + return; + } + } catch (error) { + console.error(error); + } + }; + //创建session + const createSession = async () => { + try { + const data = + await require("POST", "/api/contact_customer_service_session/create", { + body: { + sub_mid: Number(mid), + obj_mid: 0, + }, + }); + if (data.ret === -1) { + Toast.show({ + icon: "fail", + content: data.msg, + position: "top", + }); + } + setSessionId(data.data.session_id); + } catch (error) { + console.error(error); + } + }; + //请求历史记录 + const loadEarlierHistory = async () => { + if (!more) return; + try { + const data = + await require("POST", "/api/contact_customer_service/list_by_session_id", { + body: { + session_id: sessionId, + offset: offset, + limit: 12, + }, + }); + if (data.ret === -1) { Toast.show({ icon: "fail", content: data.msg, @@ -58,29 +138,198 @@ export default function MessageDetail({}) { }); return; } - if (detailData.data.session) { - setSessionId(detailData.data.session.id); - return; - } + setOffset(data.data.offset); + setMore(data.data.more); + let mathNewMessages = handleData(data.data.list); + // setMessages((prev) => [...prev, ...temMessages]); + return mathNewMessages; } catch (error) { console.error(error); } }; - async function doRefresh() { - await sleep(1000); - Toast.show({ - icon: "fail", - content: "刷新失败", - }); - throw new Error("刷新失败"); - } + //发送私信功能 + const onSend = useCallback( + async (message, lastId, oldArr) => { + if (message == "") { + Toast.show({ + icon: "error", + content: "不可发送空内容", + position: "top", + }); + return; + } + + //如果是第一次发送，需要创建session + if (!sessionId) await createSession(); + + //查询历史记录的时候后移一位，防止记录重复 + setOffset((prev) => prev + 1); + //请求接口发送私信 + try { + const data = + await require("POST", "/api/contact_customer_service/create", { + body: { + session_id: sessionId, + predicate: 0, + message, + }, + }); + if (data.ret === -1) { + Toast.show({ + icon: "error", + content: data.msg, + position: "top", + }); + return; + } + // updateLatestHistory(); + console.log("oldArr", oldArr); + updateMessages(lastId, 0, oldArr); + } catch (error) { + console.error(error); + } + // //每次发送都缓存信息到本地 + // addArr(`${selfData.mid}_to_${params.mid}_messages`, messages); + }, + [userInfo, sessionId] + ); + // async function doRefresh() { + // await sleep(1000); + // Toast.show({ + // icon: "fail", + // content: "刷新失败", + // }); + // throw new Error("刷新失败"); + // } async function loadMore() { - const append = await mockRequest(); - setData((val) => [...val, ...append]); - setHasMore(append.length > 0); + if (sessionId && userInfo.mid && offset && more) { + const append = await loadEarlierHistory(); + if (append) { + // setMessages((val) => [...val, ...append]); + setMessages(append); + // setHasMore(append.length > 0); + } + } } + + const handleData = (list) => { + // console.log("list", list); + const account = get("account"); + const temMessages = list.map((item) => { + if (item.predicate === 0) { + return { + predicate: item.predicate, + _id: item.id, + // createdAt: new Date(item.ct * 1000).toISOString(), + createdAt: item.ct, + text: item.message, + user: { + _id: account?.mid, + name: account?.name, + avatar: account?.avatar?.images[0]?.urls[0], + }, + }; + } else { + return { + predicate: item.predicate, + _id: item.id, + createdAt: item.ct, + text: item.message, + user: { + _id: 0, + name: "客服", + avatar: "images/icon.png", + }, + }; + } + }); + // console.log("[...messages, ...temMessages]", [ + // ...handledmessages, + // ...temMessages, + // ]); + setHandledmessages([...handledmessages, ...temMessages]); + setOldMessages([...oldMessages, ...list]); + let newMessages = [...handledmessages, ...temMessages].reverse(); + let mathNewMessages = newMessages.reduce( + (accumulator, currentValue, index, sourceArray) => { + // console.log( + // accumulator.time, + // "----", + // currentValue.createdAt, + // "---", + // index + // ); + if (accumulator.time > currentValue.createdAt) { + let newData = { + ...accumulator, + time: accumulator.time, + messages: [...accumulator.messages, currentValue], + totalArr: + index == sourceArray.length - 1 + ? [ + ...accumulator.totalArr, + [...accumulator.messages, currentValue], + ] + : [...accumulator.totalArr], + }; + return newData; + } else { + let newData = { + ...accumulator, + time: currentValue.createdAt + 60 * 3, + messages: [currentValue], + totalArr: + index == sourceArray.length - 1 + ? [ + ...accumulator.totalArr, + accumulator.messages, + [currentValue], + ] + : [...accumulator.totalArr, accumulator.messages], + }; + return newData; + } + }, + { time: newMessages[0]?.createdAt + 60 * 3, messages: [], totalArr: [] } + ); + return mathNewMessages.totalArr; + }; + + const updateMessages = async (lastId, currentOffset, oldArr) => { + console.log("lastId", lastId); + try { + const data = + await require("POST", "/api/contact_customer_service/list_by_session_id", { + body: { + session_id: sessionId, + offset: currentOffset, + limit: 12, + }, + }); + if (data.ret === -1) { + Toast.show({ + icon: "fail", + content: data.msg, + position: "top", + }); + return; + } + let newData = data.data.list.filter((element) => { + return element.id > lastId; + }); + console.log("[...messages,...newData]", [...newData, ...oldArr]); + let mathNewMessages = handleData([...newData, ...oldArr]); + setMessages((old) => { + toScrollBottom.current = 1; + setNewMessage(""); + return mathNewMessages; + }); + } catch (error) { + console.error(error); + } + }; return ( -
+
在线服务

-
- - - - - - - - +
+
+

+ {more ? "查看更早" : "无更早消息"} +

+
+
    + {messages?.map((item, index) => ( +
  • +

    + {formatDeadline(item[0].createdAt)} +

    +
      + {item.map((it) => ( +
    • +
      + {it?.predicate == 1 ? ( +
      + +
      + {it?.text} +
      +
      + ) : ( +
      +
      + {it?.text} +
      + +
      + )} +
      +
      • + ))} +
    +
    • + ))} + {} + {/* */} +
-
+
- +
{ - router.push("messageDetail"); + router.push("/messageDetail"); }} >
{ - router.push("WebWithoutHeader", { - uri: webUrl + "/zone/share/" + data?.streamer_ext?.user_id, - }) + console.log(webUrl + "/zone/share/" + streamerInfo?.streamer_ext?.user_id) + router.push(webUrl + "/zone/share/" + streamerInfo?.streamer_ext?.user_id) }} className="flex justify-between pt-4 pb-2" > diff --git a/app/space/[id]/page.js b/app/space/[id]/page.js index 99b4da2..a218173 100644 --- a/app/space/[id]/page.js +++ b/app/space/[id]/page.js @@ -160,7 +160,7 @@ export default function PersonSpace() { } }; return ( -
+
router.push("setting")} + onClick={() => router.push("setting?data="+encodeURIComponent(JSON.stringify(streamerInfo?.streamer_ext)))} />
{/* 内容 */} @@ -277,7 +277,7 @@ export default function PersonSpace() { 10 )}/${parseInt(streamerInfo?.ironfanship_price / 100, 10)}`}

- {streamerInfo?.is_superfanship_enabled && ( + {!!streamerInfo?.is_superfanship_enabled && (
  • { @@ -304,7 +304,9 @@ export default function PersonSpace() { )}
  • setMaskVisible(true)} + onClick={() => { + router.push("/messageDetail"); + }} >
    -
      +
      • setMaskVisible({ visible: true, type: "weChat" })} @@ -434,7 +436,7 @@ export default function PersonSpace() {

        {/*

        0/299

        */}
        • - {streamerInfo?.is_superfanship_enabled && ( + {!!streamerInfo?.is_superfanship_enabled && (
      • { diff --git a/app/space/setting/page.js b/app/space/setting/page.js index 29b55de..c0d85bf 100644 --- a/app/space/setting/page.js +++ b/app/space/setting/page.js @@ -1,14 +1,56 @@ "use client"; import React, { useEffect, useState, useRef } from "react"; -import { Image, Avatar } from "antd-mobile"; -import { useRouter } from "next/navigation"; +import { Image, Avatar, Divider, Dialog, Toast } from "antd-mobile"; +import { useRouter, useSearchParams } from "next/navigation"; import { FontAwesomeIcon } from "@fortawesome/react-fontawesome"; -import { faAngleLeft, faAngleRight } from "@fortawesome/free-solid-svg-icons"; +import { + faAngleLeft, + faAngleRight, + faCalendar, +} from "@fortawesome/free-solid-svg-icons"; export default function Setting() { const router = useRouter(); + const searchParams = useSearchParams(); + const [streamerInfo, setStreamerInfo] = useState(null); + const [showModal, setShowModal] = useState(false); useEffect(() => { + let data = JSON.parse(decodeURIComponent(searchParams.get("data"))); + setStreamerInfo(data); }, []); + const handleShowVideo = () => { + Dialog.className = "videoMask"; + Dialog.show({ + title: "是否确认退出空间？", + content: ( +
        + 一旦退出，您的空间成员身份将会被取消，若当前空间为付费空间，下次加入时，需要再次付费。请确保知晓以上内容后谨慎选择退出。 +
        + ), + bodyStyle: { + // background: "none", + maxHeight: "none", + width: "80vw", + position: "absolute", + top: "calc(50% - 50px)", + left: "10vw", + }, + actions: [ + { + key: "submit", + text: "确定", + onClick: () => { + i; + }, + }, + { + key: "cancel", + text: "取消", + onClick: () => {}, + }, + ], + }); + }; return (
        @@ -24,29 +66,93 @@ export default function Setting() {

        空间设置

        {/* 内容 */} -
        + +
        +
        -

        测试账号

        -
        - - 213422 -
        +

        {streamerInfo?.name}

        +
          +
        • + + {streamerInfo?.user_id} +
          • +
        • + { + router.back(); + }} + /> + {streamerInfo?.user_id} +
          • +
        -
        +
          +
        • +
          router.push("/share/" + streamerInfo.mid)} + className="flex justify-between" + > + 分享空间 + { + router.back(); + }} + /> +
          + +
          • +
        • { + const result = await Dialog.confirm({ + title: "是否确认退出空间？", + content: "一旦退出，您的空间成员身份将会被取消，若当前空间为付费空间，下次加入时，需要再次付费。请确保知晓以上内容后谨慎选择退出。", + bodyStyle: { + maxHeight: "none", + width: "80vw", + position: "fixed", + top: "200px", + left: "10vw", + }, + }); + if (result) { + Toast.show({ content: "点击了确认", position: "bottom" }); + } + }} + > +
          + 退出空间 + { + router.back(); + }} + /> +
          + +
          • +
        ); diff --git a/components/Photos/index.js b/components/Photos/index.js index bcc9de7..b824233 100644 --- a/components/Photos/index.js +++ b/components/Photos/index.js @@ -67,7 +67,7 @@ export default function Photos({ media }) {
        @@ -116,8 +116,8 @@ export default function Photos({ media }) { placeholder={
        } - width={currentPhotos.length>1 ? "25vw":"100%"} - height={currentPhotos.length>1 ? "25vw":"100%"} + width={currentPhotos.length>1 ? "24vw":"100%"} + height={currentPhotos.length>1 ? "24vw":"100%"} className={`rounded max-w-full`} fit="cover" src={item.url} diff --git a/components/PostItem/index.js b/components/PostItem/index.js index b754a32..1a614ea 100644 --- a/components/PostItem/index.js +++ b/components/PostItem/index.js @@ -4,11 +4,11 @@ import React, { useEffect, useState, useMemo } from "react"; import Photos from "../Photos"; import { useRouter } from "next/navigation"; import PaySpacePost from "../PaySpacePost"; -import { Image } from "antd-mobile"; +import { Image, Popover, Divider } from "antd-mobile"; import { FontAwesomeIcon } from "@fortawesome/react-fontawesome"; import { faAngleRight } from "@fortawesome/free-solid-svg-icons"; import { handleFollow, thumbsUp } from "@/api/public"; -import {get} from "@/utils/storeInfo" +import { get } from "@/utils/storeInfo"; export default function PostItem({ type, follow, @@ -18,14 +18,16 @@ export default function PostItem({ const router = useRouter(); const [isOpenText, setIsOpenText] = useState(false); const [isFollow, setIsFollow] = useState(data.is_followed); - const [isThumbsUp, setIsThumbsUp] = useState(data?.is_thumbed_up || data?.is_zone_moment_thumbed_up); + const [isThumbsUp, setIsThumbsUp] = useState( + data?.is_thumbed_up || data?.is_zone_moment_thumbed_up + ); //判断是否是发帖人 const [isCreator, setIsCreator] = useState(false); useEffect(() => { const account = get("account"); - if (account.mid === data.mid) setIsCreator(true); + if (account.mid === data.mid) setIsCreator(true); return () => { - router.prefetch("/profile/"+data.mid); + router.prefetch("/profile/" + data.mid); }; }, []); const getDays = useMemo(() => { @@ -35,7 +37,7 @@ export default function PostItem({ }, []); return (
        - {type == "space" && data?.is_headed === 1 && ( + {type == "space" && data?.is_headed === 1 && ( )}
        @@ -43,7 +45,7 @@ export default function PostItem({ className="flex-none w-8 h-8 rounded-full mr-2" src={data.streamer_ext?.avatar.images[0].urls[0]} alt="" - onClick={() => router.push("/profile/"+data.mid)} + onClick={() => router.push("/profile/" + data.mid)} />
        @@ -72,23 +74,23 @@ export default function PostItem({ )}
        - {data.media_component && } - {type == "space" && !isCreator && data.c_type && ( - - )} + {data.media_component && } + {type == "space" && !isCreator && data.c_type && ( + + )}
        {type == "post" ? (
        router.push("/profile/"+data.mid)} + onClick={() => router.push("/profile/" + data.mid)} > {data.is_active_within_a_week ? ( <> @@ -141,7 +143,9 @@ export default function PostItem({
        thumbsUp(data.id, isThumbsUp, setIsThumbsUp,type == "space")} + onClick={() => + thumbsUp(data.id, isThumbsUp, setIsThumbsUp, type == "space") + } > - {isThumbsUp == 1 ? "已赞" : "点赞"} + + {isThumbsUp == 1 ? "已赞" : "点赞"} +
        - ··· + +
      • { + router.push("/messageDetail"); + }} + > + 举报 +
        • +
      + } + trigger="click" + placement="left" + > + ··· +
    • {/*
    */} diff --git a/public/images/icon.png b/public/images/icon.png new file mode 100644 index 0000000..17a1b57 Binary files /dev/null and b/public/images/icon.png differ