125 lines
3.4 KiB
JavaScript
125 lines
3.4 KiB
JavaScript
"use client";
|
||
|
||
import React, { useState, useCallback, useEffect } 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,
|
||
} from "antd-mobile";
|
||
import { useRouter } from "next/navigation";
|
||
const blurhash = "LcKUTa%gOYWBYRt6xuoJo~s8V@fk";
|
||
|
||
/*
|
||
params格式：
|
||
{
|
||
mid: item.mid,
|
||
}
|
||
*/
|
||
|
||
export default function MessageDetail({}) {
|
||
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 detailResponse = await fetch(
|
||
`${apiUrl}/api/contact_customer_service_session/list_by_mid?signature=${signature}`,
|
||
{
|
||
method: "POST",
|
||
headers: {
|
||
"Content-Type": "application/json",
|
||
},
|
||
body: JSON.stringify({
|
||
mid: account.mid,
|
||
...base,
|
||
}),
|
||
}
|
||
);
|
||
const detailData = await detailResponse.json();
|
||
if (detailData.ret === -1) {
|
||
Toast.show({
|
||
type: "error",
|
||
text1: detailData.msg,
|
||
topOffset: 60,
|
||
});
|
||
return;
|
||
}
|
||
if (detailData.data.session) {
|
||
setSessionId(detailData.data.session.id);
|
||
return;
|
||
}
|
||
} catch (error) {
|
||
console.error(error);
|
||
}
|
||
};
|
||
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);
|
||
}
|
||
return (
|
||
<div className="bg-[#13121F] h-screen">
|
||
<div className="p-4 fixed top-0 z-10 w-full bg-black">
|
||
<div className="flex items-center justify-center absolute">
|
||
<FontAwesomeIcon
|
||
icon={faAngleLeft}
|
||
size="xl"
|
||
onClick={() => {
|
||
router.back();
|
||
}}
|
||
/>
|
||
</div>
|
||
<p className="text-base text-center">在线服务</p>
|
||
</div>
|
||
<div>
|
||
<div>
|
||
<PullToRefresh onRefresh={doRefresh}>
|
||
<List className="px-4 overflow-y-auto scrollbarBox_hidden">
|
||
<List.Item className="!p-0">
|
||
|
||
</List.Item>
|
||
<List.Item className="!p-0"></List.Item>
|
||
<List.Item className="!p-0"></List.Item>
|
||
<InfiniteScroll loadMore={loadMore} hasMore={hasMore} />
|
||
</List>
|
||
</PullToRefresh>
|
||
</div>
|
||
<div className="w-full h-16 fixed bottom-0 grid grid-cols-[1fr_68px] items-center p-2 border-t-2 border-[#ffffff2a]">
|
||
<div className="rounded bg-[#222036] px-4 py-2 mr-2">
|
||
<Input placeholder="输入新消息" className="" />
|
||
</div>
|
||
<Button
|
||
size="middle"
|
||
block
|
||
// onClick={handleSubmit}
|
||
style={{ "--background-color": "#FF669E", color: "#FFFFFF" }}
|
||
>
|
||
发送
|
||
</Button>
|
||
</div>
|
||
</div>
|
||
</div>
|
||
);
|
||
}
|