修复客服聊天功能存在的bug

2024-07-12 22:52:48 +08:00 · 2024-07-12 22:52:48 +08:00 · de15daecd5
parent fc2253f59b
commit de15daecd5
13 changed files with 143 additions and 97 deletions
--- a/api/public.js
+++ b/api/public.js
@ -2,6 +2,29 @@ import { get } from "@/utils/storeInfo";
 import require from "@/utils/require";
 import { Toast } from "antd-mobile";
 //关注和取关功能
+export const handleLogout = async () => {
+  const account = get("account");
+  try {
+    const data = await require("POST", `/api/login/logout`, {
+      body: {
+        mid:account.mid
+      },
+    });
+    if (data.ret === -1) {
+      Toast.show({
+        icon: "fail",
+        content: data.msg,
+        position: "top",
+      });
+      return;
+    } else {
+      console.error(error);
+    }
+  } catch (error) {
+    console.error(error);
+  }
+};
+//关注和取关功能
 export const handleFollow = async (isFollowed, followedID, callback) => {
  const account = get("account");
  let body = {
--- a/app/layout.js
+++ b/app/layout.js
@ -5,6 +5,7 @@ import "./globals.css";
 import BottomNav from "../components/BottomNav";
 import { Provider } from "react-redux";
 import store from "../store";
+import withAuth from "@/components/WithAuth";
 const inter = Inter({ subsets: ["latin"] });

 export const metadata = {
@ -35,7 +36,8 @@ export default function RootLayout({ children }) {
    <html lang="zh-CN" className="bg-deepBg" data-prefers-color-scheme="dark">
      <body className={inter.className}>
        <main className={`w-full bg-deepBg `}>
-          <Provider store={store}>{children}</Provider>
+          {withAuth(<Provider store={store}>{children}</Provider>)}
+          {/* <Provider store={store}>{children}</Provider> */}
        </main>
        <footer className="fixed left-0 w-screen bg-black" style={{top:"calc(100vh - 57px)"}}>
          <div>
--- a/app/messageDetail/page.js
+++ b/app/messageDetail/page.js
@ -6,7 +6,7 @@ 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, Toast, Avatar } from "antd-mobile";
+import { Input, Button, Toast, Avatar, DotLoading } from "antd-mobile";
 import { useRouter } from "next/navigation";
 const blurhash = "LcKUTa%gOYWBYRt6xuoJo~s8V@fk";
 import { get } from "@/utils/storeInfo";
@ -28,6 +28,7 @@ export default function MessageDetail({}) {
  const [sessionId, setSessionId] = useState();
  const [userInfo, setUserInfo] = useState(null);
  const [newMessage, setNewMessage] = useState("");
+  const [loading, setLoading] = useState(false);

  const [offset, setOffset] = useState(0);
  const [more, setMore] = useState(1);
@ -37,11 +38,24 @@ export default function MessageDetail({}) {
    const userData = get("account");
    setUserInfo(userData);
    getSession(userData.mid);
-    
  }, []);
+  useEffect(() => {
+    const intervalId = setInterval(() => {
+      // console.log("oldMessages[0]", oldMessages[0]);
+      if (oldMessages[0]) {
+        updateMessages(oldMessages[0]?.id, 0, oldMessages);
+        toScrollBottom.current = 1;
+      }
+    }, 3000); // 间隔时间为3秒
+
+    // 在组件卸载时清除定时器
+    return () => {
+      clearInterval(intervalId);
+    };
+  }, [oldMessages]);
  useEffect(() => {
    if (toScrollBottom.current) {
-      scrollBox.current?.scrollTo(0, scrollBox.current.scrollHeight);
+      scrollBox.current?.scrollTo(0, scrollBox.current.scrollHeight+50);
      toScrollBottom.current = 0;
    }
  }, [toScrollBottom.current]);
@ -63,14 +77,6 @@ export default function MessageDetail({}) {
        });
      });
    }
-    const intervalId = setInterval(() => {
-      updateMessages();
-    }, 3000); // 间隔时间为3秒
-
-    // 在组件卸载时清除定时器
-    return () => {
-      clearInterval(intervalId);
-    };
  }, [sessionId]);
  //查询session
  const getSession = async (mid) => {
@ -122,6 +128,7 @@ export default function MessageDetail({}) {
  const loadEarlierHistory = async () => {
    if (!more) return;
    try {
+      setLoading(true)
      const data =
        await require("POST", "/api/contact_customer_service/list_by_session_id", {
          body: {
@ -140,8 +147,9 @@ export default function MessageDetail({}) {
      }
      setOffset(data.data.offset);
      setMore(data.data.more);
-      let mathNewMessages = handleData(data.data.list);
+      let mathNewMessages = handleData([...oldMessages,...data.data.list]);
      // setMessages((prev) => [...prev, ...temMessages]);
+      setLoading(false)
      return mathNewMessages;
    } catch (error) {
      console.error(error);
@ -183,8 +191,11 @@ export default function MessageDetail({}) {
          return;
        }
        // updateLatestHistory();
-        console.log("oldArr", oldArr);
-        updateMessages(lastId, 0, oldArr);
+        // console.log("oldArr", oldArr);
+        updateMessages(lastId, 0, oldArr).then(res=>{
+          setNewMessage("");
+          toScrollBottom.current = 1;
+        });
      } catch (error) {
        console.error(error);
      }
@ -243,13 +254,11 @@ export default function MessageDetail({}) {
        };
      }
    });
-    // console.log("[...messages, ...temMessages]", [
-    //   ...handledmessages,
-    //   ...temMessages,
-    // ]);
-    setHandledmessages([...handledmessages, ...temMessages]);
-    setOldMessages([...oldMessages, ...list]);
-    let newMessages = [...handledmessages, ...temMessages].reverse();
+    // console.log("handledmessages......", handledmessages);
+    // console.log("[...messages, ...temMessages]", temMessages);
+    setHandledmessages(temMessages);
+    setOldMessages(list);
+    let newMessages = temMessages.reverse();
    let mathNewMessages = newMessages.reduce(
      (accumulator, currentValue, index, sourceArray) => {
        // console.log(
@ -296,7 +305,7 @@ export default function MessageDetail({}) {
  };

  const updateMessages = async (lastId, currentOffset, oldArr) => {
-    console.log("lastId", lastId);
+    // console.log("lastId", lastId);
    try {
      const data =
        await require("POST", "/api/contact_customer_service/list_by_session_id", {
@ -317,13 +326,13 @@ export default function MessageDetail({}) {
      let newData = data.data.list.filter((element) => {
        return element.id > lastId;
      });
-      console.log("[...messages,...newData]", [...newData, ...oldArr]);
-      let mathNewMessages = handleData([...newData, ...oldArr]);
+      // console.log("[...messages,...newData]", [...newData]);
+      let mathNewMessages = handleData([...newData,...oldArr]);
      setMessages((old) => {
        toScrollBottom.current = 1;
-        setNewMessage("");
        return mathNewMessages;
      });
+      return
    } catch (error) {
      console.error(error);
    }
@ -345,12 +354,12 @@ export default function MessageDetail({}) {
      <div>
        <div className="my-[57px]">
          <div className="flex justify-center py-2">
-            <p
+            <div
              className="px-3 py-2 rounded-full bg-[#FFFFFF1A]"
-              onClick={loadMore}
+              
            >
-              {more ? "查看更早" : "无更早消息"}
-            </p>
+              {loading? <DotLoading /> : more ? <span onClick={loadMore}>查看更早</span>:<span>无更早消息</span>}
+            </div>
          </div>
          <ul className="py-2">
            {messages?.map((item, index) => (
--- a/app/my/page.js
+++ b/app/my/page.js
@ -91,8 +91,8 @@ const My = () => {
          size="xl"
          className="h-6 mr-2"
          onClick={() => {
-            searchParams.append();
-            router.back();
+            // searchParams.append();
+            // router.back();
          }}
        />
      </div>
@ -289,7 +289,12 @@ const My = () => {
              className="h-4 text-gray-300"
            />
          </li> */}
-          <li className="flex justify-between items-center p-3 py-2">
+          <li
+            className="flex justify-between items-center p-3 py-2"
+            onClick={() => {
+              router.push("/messageDetail");
+            }}
+          >
            <div className="flex items-center">
              <Image
                className="mr-2"
--- a/app/my/setting/page.js
+++ b/app/my/setting/page.js
@ -5,6 +5,7 @@ import { List } from "antd-mobile";
 import { FontAwesomeIcon } from "@fortawesome/react-fontawesome";
 import { faAngleLeft } from "@fortawesome/free-solid-svg-icons";
 import { useRouter } from "next/navigation";
+import {handleLogout} from "@/api/public"
 export default function Setting() {
  const router = useRouter();
  return (
@ -25,6 +26,7 @@ export default function Setting() {
      <div className="pt-16 ">
        <List mode="card">
          <List.Item arrow onClick={() => {
+            handleLogout();
            router.push("/login");
          }}>退出账号</List.Item>
          {/* <List.Item arrow onClick={() => {
--- a/app/my/wallet/page.js
+++ b/app/my/wallet/page.js
@ -75,6 +75,7 @@ export default function Wallet() {
                  icon={faWallet}
                  size="xl"
                  color="red"
+                  className="w-[28px]"
                />
                <span className="text-base text-white font-medium ml-2">
                  充值
@ -103,6 +104,7 @@ export default function Wallet() {
                  icon={faPrint}
                  size="xl"
                  color="#60a5fa"
+                  className="w-[28px]"
                />
                <span className="text-base text-white font-medium ml-2">
                  收支明细
@ -126,6 +128,7 @@ export default function Wallet() {
                  icon={faDollar}
                  size="xl"
                  color="#fb923c"
+                  className="w-[28px]"
                />
                <span className="text-base text-white font-medium ml-2">
                  提现
--- a/app/page.js
+++ b/app/page.js
@ -183,10 +183,10 @@ const RecommPostList = forwardRef(({ scrollHeight }, ref) => {
        )}
        {commenPostList.map((item) => (
          <List.Item key={item.id} className="!p-0">
-            <PostItem type="post" data={item} />
+            <PostItem type="post" data={item}  date={new Date(item.ct*1000)}/>
          </List.Item>
        ))}
-        {commenPostList.length == 0 && (
+        {commenPostList.length == 0 && !loading && (
          <div
            className={`flex flex-col items-center justify-center`}
            style={{ height: `${scrollHeight}px` }}
@ -283,7 +283,7 @@ const FollowPostList = forwardRef(({ scrollHeight }, ref) => {
        )}
        {followPostList.map((item, index) => (
          <List.Item key={item.id + "_" + index} className="!p-0">
-            <PostItem type="post" data={item} />
+            <PostItem type="post" data={item} date={new Date(item.ct*1000)}/>
          </List.Item>
        ))}
        {followPostList.length == 0 && (
--- a/app/profile/[mid]/page.js
+++ b/app/profile/[mid]/page.js
@ -65,7 +65,7 @@ export default function PersonSpace() {
        })),
      ];

-      console.log("photosArr", photosArr);
+      // console.log("photosArr", photosArr);
      setTopPhotos(photosArr);
      setLoading(false);
    } catch (error) {
@ -244,7 +244,7 @@ export default function PersonSpace() {
                    className="w-4 h-full mr-1"
                  />
                  <span className="text-white text-xs font-medium ml-0.5">
-                    {`全网粉丝 : ${streamerInfo?.streamer_ext?.fans}万`}
+                    {`全网粉丝 : ${streamerInfo?.streamer_ext?.fans || 0}万`}
                  </span>
                </li>
                {streamerInfo?.streamer_ext?.age && (
@ -337,7 +337,7 @@ export default function PersonSpace() {
                <span className="font-bold text-base">空间动态</span>
                <div className="h-4 text-xs text-[#ffffff88]">
                  <span className="mr-2">
-                    查看{spaceData?.zone_moment_count}条
+                    查看{spaceData?.zone_moment_count || 0}条
                  </span>
                  <FontAwesomeIcon
                    icon={faAngleRight}
--- a/app/space/[id]/page.js
+++ b/app/space/[id]/page.js
@ -374,7 +374,7 @@ export default function PersonSpace() {
                    )}
                    {postList.map((item, index) => (
                      <List.Item key={item.id + "_" + index} className="!p-0">
-                        <PostItem type="space" data={item} />
+                        <PostItem type="space" data={item} date={new Date(item.ct*1000)}/>
                      </List.Item>
                    ))}
                    <InfiniteScroll loadMore={loadMore} hasMore={hasMore} />
--- a/app/space/page.js
+++ b/app/space/page.js
@ -170,11 +170,11 @@ export default function Space() {
                    className="w-full h-52"
                  >
                    <div className="h-full flex flex-col rounded-lg overflow-hidden bg-[#FFFFFF1A]">
-                      <div className="w-full z-0"></div>
+                      {/* <div className="w-full z-0"></div>
                      <div
                        className="w-full z-0 h-[42px]"
-                      ></div>
-                      <div className="flex flex-col absolute w-full h-full pl-[22px] pt-[30px]">
+                      ></div> */}
+                      <div className="flex flex-col w-full h-full px-[22px] py-[30px]">
                        <p className="text-white font-medium text-lg">
                          发现更多
                        </p>
@ -237,7 +237,7 @@ export default function Space() {
                )}
                {dataList.map((item, index) => (
                  <List.Item className="!p-0" key={item.id + "_" + index}>
-                    <PostItem type="space" data={item} />
+                    <PostItem type="space" data={item} date={new Date(item.ct*1000)}/>
                  </List.Item>
                ))}
                <InfiniteScroll loadMore={loadMore} hasMore={hasMore} />
@ -296,13 +296,13 @@ const VisitingCard = ({ data }) => {
        className="rounded-lg"
      />
      <div className="absolute bottom-0 left-0 w-full px-2 py-3 bg-[#1b1b1b] flex items-center rounded-b-lg">
-        <span className="font-bold">{data?.streamer_ext?.name}</span>
+        <span className="font-bold overflow-hidden whitespace-nowrap text-ellipsis">{data?.streamer_ext?.name}</span>
        <ul className="ml-2">
          {data?.admission_price !== 0 && (
-            <li className="text-[10px] bg-primary rounded px-1 mr-1">付费</li>
+            <li className="text-[10px] bg-primary rounded px-1 mr-1 whitespace-nowrap">付费</li>
          )}
          {data.visitor_role === 3 && (
-            <li className="text-[10px] bg-primary rounded px-1 mr-1">付费</li>
+            <li className="text-[10px] bg-primary rounded px-1 mr-1 whitespace-nowrap">付费</li>
          )}
        </ul>
      </div>
--- a/components/PostItem/index.js
+++ b/components/PostItem/index.js
@ -75,7 +75,7 @@ export default function PostItem({
          </div>
          <div className="mr-8">
            {data.media_component && <Photos media={data.media_component} />}
-            {type == "space" && !isCreator && data.c_type && (
+            {type == "space" && !isCreator && !!data.c_type && (
              <PaySpacePost
                type={data.is_ironfan_visible ? "ironFan" : "superFan"}
                price={data.price / 100}
--- a/utils/require.js
+++ b/utils/require.js
@ -1,54 +1,56 @@
 import baseRequest from "./baseRequest";
-import {get} from "./storeInfo";
+import { get } from "./storeInfo";
 import { Toast } from "antd-mobile";
+import { checkAuth } from "./auth";
+// import { useRouter } from "next/navigation";
 // import webviewBaseRequest from "@/utils/webviewBaseRequest";
 const base = baseRequest();
 // 创建一个封装 fetch 的函数
-export default function customFetch(method, url, options = {},mid) {
-    // 默认选项
-    const defaultOptions = {
-        method: method,
-        headers: {
-            'Content-Type': 'application/json',
-            'X-Req-Source-TF': 'wittgenstein',
-            ...options?.headers
-            // 可以添加其他默认头部信息
-        }
-        // 可以添加其他默认选项
-    };
-    let newBody = {...options?.body}
-    if(mid){
-        newBody.mid=get("account").mid
-    }
-    const body=JSON.stringify({...base,...newBody})
-    console.log("newBody",body)
+export default function customFetch(method, url, options = {}, mid) {
+  // 默认选项
+  const defaultOptions = {
+    method: method,
+    headers: {
+      "Content-Type": "application/json",
+      "X-Req-Source-TF": "wittgenstein",
+      ...options?.headers,
+      // 可以添加其他默认头部信息
+    },
+    // 可以添加其他默认选项
+  };
+  let newBody = { ...options?.body };
+  if (mid) {
+    newBody.mid = get("account").mid;
+  }
+  const body = JSON.stringify({ ...base, ...newBody });
+  // console.log("newBody",body)

-    // 合并选项
-    const mergedOptions = { ...defaultOptions, body};
-    // console.log("mergedOptions",mergedOptions)
-    // 返回 Promise 对象
-    return new Promise((resolve, reject) => {
-        fetch(url, mergedOptions)
-            .then(response => {
-                // 检查响应状态码
-                if (!response.ok) {
-                    throw new Error(`HTTP error! status: ${response.status}`);
-                }
-                // 解析 JSON 响应
-                return response.json();
-            })
-            .then(data => {
-                // 解析成功，返回数据
-                resolve(data);
-            })
-            .catch(error => {
-                Toast.show({
-                    icon: "fail",
-                    content:error.toString(),
-                    position: "top",
-                  });
-                // 请求失败，拒绝 Promise
-                reject(error);
-            });
-    });
-}
+  // 合并选项
+  const mergedOptions = { ...defaultOptions, body };
+  // console.log("mergedOptions",mergedOptions)
+  // 返回 Promise 对象
+  return new Promise((resolve, reject) => {
+    fetch(url, mergedOptions)
+      .then((response) => {
+        // 检查响应状态码
+        if (!response.ok) {
+          throw new Error(`HTTP error! status: ${response.status}`);
+        }
+        // 解析 JSON 响应
+        return response.json();
+      })
+      .then((data) => {
+        // 解析成功，返回数据
+        resolve(data);
+      })
+      .catch((error) => {
+        Toast.show({
+          icon: "fail",
+          content: error.toString(),
+          position: "top",
+        });
+        // 请求失败，拒绝 Promise
+        reject(error);
+      });
+  });
+}
--- a/utils/storeInfo.js
+++ b/utils/storeInfo.js
@ -3,7 +3,7 @@ export function save(key,value){
 }
 export function get(key){
    let data = localStorage.getItem("account");
-    console.log(key,data)
+    // console.log(key,data)

    return data ? JSON.parse(data) : {};
 }