tiefen_space_h5/app/messageDetail/page.js

"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,
  Toast
} 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({
          icon: "fail",
          content: data.msg,
          position: "top",
        });
        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>
  );
}