wishpal_ironfan
/
tiefen_space_h5
6
0
Fork 0
Code Issues Pull Requests Packages Projects Releases Wiki Activity

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

This commit is contained in:
al 2024-07-12 22:52:48 +08:00
parent fc2253f59b
commit de15daecd5
13 changed files with 143 additions and 97 deletions
Show Stats Download Patch File Download Diff File Expand all files Collapse all files

23
api/public.js
View File

@ -2,6 +2,29 @@ import { get } from "@/utils/storeInfo";
import require from "@/utils/require"; import require from "@/utils/require";
import { Toast } from "antd-mobile"; 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) => { export const handleFollow = async (isFollowed, followedID, callback) => {
const account = get("account"); const account = get("account");
let body = { let body = {

4
app/layout.js
View File

@ -5,6 +5,7 @@ import "./globals.css";
import BottomNav from "../components/BottomNav"; import BottomNav from "../components/BottomNav";
import { Provider } from "react-redux"; import { Provider } from "react-redux";
import store from "../store"; import store from "../store";
import withAuth from "@/components/WithAuth";
const inter = Inter({ subsets: ["latin"] }); const inter = Inter({ subsets: ["latin"] });
export const metadata = { export const metadata = {
@ -35,7 +36,8 @@ export default function RootLayout({ children }) {
<html lang="zh-CN" className="bg-deepBg" data-prefers-color-scheme="dark"> <html lang="zh-CN" className="bg-deepBg" data-prefers-color-scheme="dark">
<body className={inter.className}> <body className={inter.className}>
<main className={`w-full bg-deepBg `}> <main className={`w-full bg-deepBg `}>
<Provider store={store}>{children}</Provider> {withAuth(<Provider store={store}>{children}</Provider>)}
{/* <Provider store={store}>{children}</Provider> */}
</main> </main>
<footer className="fixed left-0 w-screen bg-black" style={{top:"calc(100vh - 57px)"}}> <footer className="fixed left-0 w-screen bg-black" style={{top:"calc(100vh - 57px)"}}>
<div> <div>

67
app/messageDetail/page.js
View File

@ -6,7 +6,7 @@ import baseRequest from "@/utils/baseRequest";
import { generateSignature } from "@/utils/crypto"; import { generateSignature } from "@/utils/crypto";
import { FontAwesomeIcon } from "@fortawesome/react-fontawesome"; import { FontAwesomeIcon } from "@fortawesome/react-fontawesome";
import { faAngleLeft } from "@fortawesome/free-solid-svg-icons"; 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"; import { useRouter } from "next/navigation";
const blurhash = "LcKUTa%gOYWBYRt6xuoJo~s8V@fk"; const blurhash = "LcKUTa%gOYWBYRt6xuoJo~s8V@fk";
import { get } from "@/utils/storeInfo"; import { get } from "@/utils/storeInfo";
@ -28,6 +28,7 @@ export default function MessageDetail({}) {
const [sessionId, setSessionId] = useState(); const [sessionId, setSessionId] = useState();
const [userInfo, setUserInfo] = useState(null); const [userInfo, setUserInfo] = useState(null);
const [newMessage, setNewMessage] = useState(""); const [newMessage, setNewMessage] = useState("");
const [loading, setLoading] = useState(false);
const [offset, setOffset] = useState(0); const [offset, setOffset] = useState(0);
const [more, setMore] = useState(1); const [more, setMore] = useState(1);
@ -37,11 +38,24 @@ export default function MessageDetail({}) {
const userData = get("account"); const userData = get("account");
setUserInfo(userData); setUserInfo(userData);
getSession(userData.mid); 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(() => { useEffect(() => {
if (toScrollBottom.current) { if (toScrollBottom.current) {
scrollBox.current?.scrollTo(0, scrollBox.current.scrollHeight); scrollBox.current?.scrollTo(0, scrollBox.current.scrollHeight+50);
toScrollBottom.current = 0; toScrollBottom.current = 0;
} }
}, [toScrollBottom.current]); }, [toScrollBottom.current]);
@ -63,14 +77,6 @@ export default function MessageDetail({}) {
}); });
}); });
} }
const intervalId = setInterval(() => {
updateMessages();
}, 3000); // 间隔时间为3秒
// 在组件卸载时清除定时器
return () => {
clearInterval(intervalId);
};
}, [sessionId]); }, [sessionId]);
//查询session //查询session
const getSession = async (mid) => { const getSession = async (mid) => {
@ -122,6 +128,7 @@ export default function MessageDetail({}) {
const loadEarlierHistory = async () => { const loadEarlierHistory = async () => {
if (!more) return; if (!more) return;
try { try {
setLoading(true)
const data = const data =
await require("POST", "/api/contact_customer_service/list_by_session_id", { await require("POST", "/api/contact_customer_service/list_by_session_id", {
body: { body: {
@ -140,8 +147,9 @@ export default function MessageDetail({}) {
} }
setOffset(data.data.offset); setOffset(data.data.offset);
setMore(data.data.more); setMore(data.data.more);
let mathNewMessages = handleData(data.data.list); let mathNewMessages = handleData([...oldMessages,...data.data.list]);
// setMessages((prev) => [...prev, ...temMessages]); // setMessages((prev) => [...prev, ...temMessages]);
setLoading(false)
return mathNewMessages; return mathNewMessages;
} catch (error) { } catch (error) {
console.error(error); console.error(error);
@ -183,8 +191,11 @@ export default function MessageDetail({}) {
return; return;
} }
// updateLatestHistory(); // updateLatestHistory();
console.log("oldArr", oldArr); // console.log("oldArr", oldArr);
updateMessages(lastId, 0, oldArr); updateMessages(lastId, 0, oldArr).then(res=>{
setNewMessage("");
toScrollBottom.current = 1;
});
} catch (error) { } catch (error) {
console.error(error); console.error(error);
} }
@ -243,13 +254,11 @@ export default function MessageDetail({}) {
}; };
} }
}); });
// console.log("[...messages, ...temMessages]", [ // console.log("handledmessages......", handledmessages);
// ...handledmessages, // console.log("[...messages, ...temMessages]", temMessages);
// ...temMessages, setHandledmessages(temMessages);
// ]); setOldMessages(list);
setHandledmessages([...handledmessages, ...temMessages]); let newMessages = temMessages.reverse();
setOldMessages([...oldMessages, ...list]);
let newMessages = [...handledmessages, ...temMessages].reverse();
let mathNewMessages = newMessages.reduce( let mathNewMessages = newMessages.reduce(
(accumulator, currentValue, index, sourceArray) => { (accumulator, currentValue, index, sourceArray) => {
// console.log( // console.log(
@ -296,7 +305,7 @@ export default function MessageDetail({}) {
}; };
const updateMessages = async (lastId, currentOffset, oldArr) => { const updateMessages = async (lastId, currentOffset, oldArr) => {
console.log("lastId", lastId); // console.log("lastId", lastId);
try { try {
const data = const data =
await require("POST", "/api/contact_customer_service/list_by_session_id", { 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) => { let newData = data.data.list.filter((element) => {
return element.id > lastId; return element.id > lastId;
}); });
console.log("[...messages,...newData]", [...newData, ...oldArr]); // console.log("[...messages,...newData]", [...newData]);
let mathNewMessages = handleData([...newData, ...oldArr]); let mathNewMessages = handleData([...newData,...oldArr]);
setMessages((old) => { setMessages((old) => {
toScrollBottom.current = 1; toScrollBottom.current = 1;
setNewMessage("");
return mathNewMessages; return mathNewMessages;
}); });
return
} catch (error) { } catch (error) {
console.error(error); console.error(error);
} }
@ -345,12 +354,12 @@ export default function MessageDetail({}) {
<div> <div>
<div className="my-[57px]"> <div className="my-[57px]">
<div className="flex justify-center py-2"> <div className="flex justify-center py-2">
<p <div
className="px-3 py-2 rounded-full bg-[#FFFFFF1A]" className="px-3 py-2 rounded-full bg-[#FFFFFF1A]"
onClick={loadMore}
> >
{more ? "查看更早" : "无更早消息"} {loading? <DotLoading /> : more ? <span onClick={loadMore}>查看更早</span>:<span>无更早消息</span>}
</p> </div>
</div> </div>
<ul className="py-2"> <ul className="py-2">
{messages?.map((item, index) => ( {messages?.map((item, index) => (

11
app/my/page.js
View File

@ -91,8 +91,8 @@ const My = () => {
size="xl" size="xl"
className="h-6 mr-2" className="h-6 mr-2"
onClick={() => { onClick={() => {
searchParams.append(); // searchParams.append();
router.back(); // router.back();
}} }}
/> />
</div> </div>
@ -289,7 +289,12 @@ const My = () => {
className="h-4 text-gray-300" className="h-4 text-gray-300"
/> />
</li> */} </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"> <div className="flex items-center">
<Image <Image
className="mr-2" className="mr-2"

2
app/my/setting/page.js
View File

@ -5,6 +5,7 @@ import { List } from "antd-mobile";
import { FontAwesomeIcon } from "@fortawesome/react-fontawesome"; import { FontAwesomeIcon } from "@fortawesome/react-fontawesome";
import { faAngleLeft } from "@fortawesome/free-solid-svg-icons"; import { faAngleLeft } from "@fortawesome/free-solid-svg-icons";
import { useRouter } from "next/navigation"; import { useRouter } from "next/navigation";
import {handleLogout} from "@/api/public"
export default function Setting() { export default function Setting() {
const router = useRouter(); const router = useRouter();
return ( return (
@ -25,6 +26,7 @@ export default function Setting() {
<div className="pt-16 "> <div className="pt-16 ">
<List mode="card"> <List mode="card">
<List.Item arrow onClick={() => { <List.Item arrow onClick={() => {
handleLogout();
router.push("/login"); router.push("/login");
}}>退出账号</List.Item> }}>退出账号</List.Item>
{/* <List.Item arrow onClick={() => { {/* <List.Item arrow onClick={() => {

3
app/my/wallet/page.js
View File

@ -75,6 +75,7 @@ export default function Wallet() {
icon={faWallet} icon={faWallet}
size="xl" size="xl"
color="red" color="red"
className="w-[28px]"
/> />
<span className="text-base text-white font-medium ml-2"> <span className="text-base text-white font-medium ml-2">
充值 充值
@ -103,6 +104,7 @@ export default function Wallet() {
icon={faPrint} icon={faPrint}
size="xl" size="xl"
color="#60a5fa" color="#60a5fa"
className="w-[28px]"
/> />
<span className="text-base text-white font-medium ml-2"> <span className="text-base text-white font-medium ml-2">
收支明细 收支明细
@ -126,6 +128,7 @@ export default function Wallet() {
icon={faDollar} icon={faDollar}
size="xl" size="xl"
color="#fb923c" color="#fb923c"
className="w-[28px]"
/> />
<span className="text-base text-white font-medium ml-2"> <span className="text-base text-white font-medium ml-2">
提现 提现

6
app/page.js
View File

@ -183,10 +183,10 @@ const RecommPostList = forwardRef(({ scrollHeight }, ref) => {
)} )}
{commenPostList.map((item) => ( {commenPostList.map((item) => (
<List.Item key={item.id} className="!p-0"> <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> </List.Item>
))} ))}
{commenPostList.length == 0 && ( {commenPostList.length == 0 && !loading && (
<div <div
className={`flex flex-col items-center justify-center`} className={`flex flex-col items-center justify-center`}
style={{ height: `${scrollHeight}px` }} style={{ height: `${scrollHeight}px` }}
@ -283,7 +283,7 @@ const FollowPostList = forwardRef(({ scrollHeight }, ref) => {
)} )}
{followPostList.map((item, index) => ( {followPostList.map((item, index) => (
<List.Item key={item.id + "_" + index} className="!p-0"> <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> </List.Item>
))} ))}
{followPostList.length == 0 && ( {followPostList.length == 0 && (

6
app/profile/[mid]/page.js
View File

@ -65,7 +65,7 @@ export default function PersonSpace() {
})), })),
]; ];
console.log("photosArr", photosArr); // console.log("photosArr", photosArr);
setTopPhotos(photosArr); setTopPhotos(photosArr);
setLoading(false); setLoading(false);
} catch (error) { } catch (error) {
@ -244,7 +244,7 @@ export default function PersonSpace() {
className="w-4 h-full mr-1" className="w-4 h-full mr-1"
/> />
<span className="text-white text-xs font-medium ml-0.5"> <span className="text-white text-xs font-medium ml-0.5">
{`全网粉丝 : ${streamerInfo?.streamer_ext?.fans}万`} {`全网粉丝 : ${streamerInfo?.streamer_ext?.fans || 0}万`}
</span> </span>
</li> </li>
{streamerInfo?.streamer_ext?.age && ( {streamerInfo?.streamer_ext?.age && (
@ -337,7 +337,7 @@ export default function PersonSpace() {
<span className="font-bold text-base">空间动态</span> <span className="font-bold text-base">空间动态</span>
<div className="h-4 text-xs text-[#ffffff88]"> <div className="h-4 text-xs text-[#ffffff88]">
<span className="mr-2"> <span className="mr-2">
查看{spaceData?.zone_moment_count}条 查看{spaceData?.zone_moment_count || 0}条
</span> </span>
<FontAwesomeIcon <FontAwesomeIcon
icon={faAngleRight} icon={faAngleRight}

2
app/space/[id]/page.js
View File

@ -374,7 +374,7 @@ export default function PersonSpace() {
)} )}
{postList.map((item, index) => ( {postList.map((item, index) => (
<List.Item key={item.id + "_" + index} className="!p-0"> <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> </List.Item>
))} ))}
<InfiniteScroll loadMore={loadMore} hasMore={hasMore} /> <InfiniteScroll loadMore={loadMore} hasMore={hasMore} />

14
app/space/page.js
View File

@ -170,11 +170,11 @@ export default function Space() {
className="w-full h-52" className="w-full h-52"
> >
<div className="h-full flex flex-col rounded-lg overflow-hidden bg-[#FFFFFF1A]"> <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 <div
className="w-full z-0 h-[42px]" className="w-full z-0 h-[42px]"
></div> ></div> */}
<div className="flex flex-col absolute w-full h-full pl-[22px] pt-[30px]"> <div className="flex flex-col w-full h-full px-[22px] py-[30px]">
<p className="text-white font-medium text-lg"> <p className="text-white font-medium text-lg">
发现更多 发现更多
</p> </p>
@ -237,7 +237,7 @@ export default function Space() {
)} )}
{dataList.map((item, index) => ( {dataList.map((item, index) => (
<List.Item className="!p-0" key={item.id + "_" + 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> </List.Item>
))} ))}
<InfiniteScroll loadMore={loadMore} hasMore={hasMore} /> <InfiniteScroll loadMore={loadMore} hasMore={hasMore} />
@ -296,13 +296,13 @@ const VisitingCard = ({ data }) => {
className="rounded-lg" className="rounded-lg"
/> />
<div className="absolute bottom-0 left-0 w-full px-2 py-3 bg-[#1b1b1b] flex items-center rounded-b-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"> <ul className="ml-2">
{data?.admission_price !== 0 && ( {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 && ( {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> </ul>
</div> </div>

2
components/PostItem/index.js
View File

@ -75,7 +75,7 @@ export default function PostItem({
</div> </div>
<div className="mr-8"> <div className="mr-8">
{data.media_component && <Photos media={data.media_component} />} {data.media_component && <Photos media={data.media_component} />}
{type == "space" && !isCreator && data.c_type && ( {type == "space" && !isCreator && !!data.c_type && (
<PaySpacePost <PaySpacePost
type={data.is_ironfan_visible ? "ironFan" : "superFan"} type={data.is_ironfan_visible ? "ironFan" : "superFan"}
price={data.price / 100} price={data.price / 100}

98
utils/require.js
View File

@ -1,54 +1,56 @@
import baseRequest from "./baseRequest"; import baseRequest from "./baseRequest";
import {get} from "./storeInfo"; import { get } from "./storeInfo";
import { Toast } from "antd-mobile"; import { Toast } from "antd-mobile";
import { checkAuth } from "./auth";
// import { useRouter } from "next/navigation";
// import webviewBaseRequest from "@/utils/webviewBaseRequest"; // import webviewBaseRequest from "@/utils/webviewBaseRequest";
const base = baseRequest(); const base = baseRequest();
// 创建一个封装 fetch 的函数 // 创建一个封装 fetch 的函数
export default function customFetch(method, url, options = {},mid) { export default function customFetch(method, url, options = {}, mid) {
// 默认选项 // 默认选项
const defaultOptions = { const defaultOptions = {
method: method, method: method,
headers: { headers: {
'Content-Type': 'application/json', "Content-Type": "application/json",
'X-Req-Source-TF': 'wittgenstein', "X-Req-Source-TF": "wittgenstein",
...options?.headers ...options?.headers,
// 可以添加其他默认头部信息 // 可以添加其他默认头部信息
} },
// 可以添加其他默认选项 // 可以添加其他默认选项
}; };
let newBody = {...options?.body} let newBody = { ...options?.body };
if(mid){ if (mid) {
newBody.mid=get("account").mid newBody.mid = get("account").mid;
} }
const body=JSON.stringify({...base,...newBody}) const body = JSON.stringify({ ...base, ...newBody });
console.log("newBody",body) // console.log("newBody",body)
// 合并选项 // 合并选项
const mergedOptions = { ...defaultOptions, body}; const mergedOptions = { ...defaultOptions, body };
// console.log("mergedOptions",mergedOptions) // console.log("mergedOptions",mergedOptions)
// 返回 Promise 对象 // 返回 Promise 对象
return new Promise((resolve, reject) => { return new Promise((resolve, reject) => {
fetch(url, mergedOptions) fetch(url, mergedOptions)
.then(response => { .then((response) => {
// 检查响应状态码 // 检查响应状态码
if (!response.ok) { if (!response.ok) {
throw new Error(`HTTP error! status: ${response.status}`); throw new Error(`HTTP error! status: ${response.status}`);
} }
// 解析 JSON 响应 // 解析 JSON 响应
return response.json(); return response.json();
}) })
.then(data => { .then((data) => {
// 解析成功，返回数据 // 解析成功，返回数据
resolve(data); resolve(data);
}) })
.catch(error => { .catch((error) => {
Toast.show({ Toast.show({
icon: "fail", icon: "fail",
content:error.toString(), content: error.toString(),
position: "top", position: "top",
}); });
// 请求失败，拒绝 Promise // 请求失败，拒绝 Promise
reject(error); reject(error);
}); });
}); });
} }

2
utils/storeInfo.js
View File

@ -3,7 +3,7 @@ export function save(key,value){
} }
export function get(key){ export function get(key){
let data = localStorage.getItem("account"); let data = localStorage.getItem("account");
console.log(key,data) // console.log(key,data)
return data ? JSON.parse(data) : {}; return data ? JSON.parse(data) : {};
} }