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>
|
|||
|
|
);
|
|||
|
|
}
|