新增广场动态发布

2024-11-12 18:01:42 +08:00 · 2024-11-12 18:01:42 +08:00 · 9b85ccb8bb
parent e9e95f3749
commit 9b85ccb8bb
11 changed files with 334 additions and 67 deletions
--- a/app/page.js
+++ b/app/page.js
@ -11,6 +11,7 @@ import { Tabs, Swiper, Toast, InfiniteScroll, List, Image } from "antd-mobile";
 import { FontAwesomeIcon } from "@fortawesome/react-fontawesome";
 import { faRefresh } from "@fortawesome/free-solid-svg-icons";
 import PostItem from "../components/PostItem";
+import { useRouter } from "next/navigation";
 // import { sleep } from "antd-mobile/es/utils/sleep";
 import "./index.css";
 import PostItemSkeleton from "@/components/skeletons/PostItemSkeleton";
@ -30,12 +31,23 @@ const tabItems = [
 ];

 export default function Home() {
+  const router = useRouter();
  const recommPostRef = useRef();
  const followPostRef = useRef();
  const swiperRef = useRef(null);
  const [activeIndex, setActiveIndex] = useState(0);
+  const [streamerInfo, setStreamerInfo] = useState(null);

  const [scrollHeight, setScrollHeight] = useState(0);
+
+  useEffect(() => {
+    const info = get("account");
+    console.log("info",info)
+    if (info) {
+      setStreamerInfo(info);
+    }
+  }, []
+  )
  const childrenFunc = () => {
    if (!activeIndex) {
      recommPostRef.current?.doRefresh();
@ -97,7 +109,7 @@ export default function Home() {
      </Swiper>
      <div
        id="rightddd"
-        className={`fixed bottom-[96px] right-4 z-[50] w-10 h-10 flex items-center justify-center bg-[#1d1d1d71] rounded-full text-white
+        className={`fixed bottom-[146px] right-4 z-[50] w-10 h-10 flex items-center justify-center bg-[#1d1d1d71] rounded-full text-white
        }`}
        onClick={childrenFunc}
      >
@ -107,6 +119,25 @@ export default function Home() {
          style={{ maxWidth: "20px" }}
        />
      </div>
+      {streamerInfo?.role === 3 && (
+        <div
+          // onClick={() => setIsCreatePostModalVisible(!isCreatePostModalVisible)}
+          className="fixed right-6 bottom-16"
+          style={{ zIndex: 999 }}
+          onClick={() => {
+            router.push("/streamerPosts/createPost");
+          }}
+        >
+          <Image
+            src={
+              process.env.NEXT_PUBLIC_WEB_ASSETS_URL + "/icons/createpost.png"
+            }
+            width={88}
+            height={88}
+            placeholder=""
+          />
+        </div>
+      )}
      <StreamerNavigator userId={Number(get("inviter"))} />
      <AddToHome />
    </div>
@ -122,6 +153,7 @@ const RecommPostList = forwardRef(({ scrollHeight }, ref) => {
    //   setCommenPostList(res);
    //   setHasMore(true)
    // });
+    
  }, []);
  useImperativeHandle(
    ref,
--- a/app/space/[id]/page.js
+++ b/app/space/[id]/page.js
@ -189,20 +189,7 @@ export default function PersonSpace() {
        <div
          onClick={() =>
            router.push(
-              "setting?data=" +
-                encodeURIComponent(
-                  JSON.stringify({
-                    mid: streamerInfo?.mid,
-                    id: streamerInfo?.id,
-                    ct: streamerInfo?.streamer_ext?.ct,
-                    user_id: streamerInfo?.streamer_ext?.user_id,
-                    name: streamerInfo?.streamer_ext?.name,
-                    visitor_role: streamerInfo?.visitor_role,
-                    avatar:
-                      streamerInfo?.streamer_ext?.avatar?.images[0]?.urls[0],
-                    admission_price: streamerInfo?.admission_price,
-                  })
-                )
+              "setting/" + streamerInfo?.mid
            )
          }
        >
--- a/app/space/createImagePost/page.jsx
+++ b/app/space/createImagePost/page.jsx
@ -287,6 +287,7 @@ export default function CreateImagePost() {
        <div className="mt-4">
          <UploadImgs
            type={1}
+            maxLength={30}
            existImages={oldPhotos}
            assets={formData.imageAssets}
            getImgs={(imgs) => {
--- a/app/space/createVideoPost/page.jsx
+++ b/app/space/createVideoPost/page.jsx
@ -254,6 +254,7 @@ export default function CreateVideoPost() {
        </div>
        <UploadImgs
          type={2}
+          maxLength={1}
          assets={formData.imageAssets}
          getImgs={(imgs) =>
            setFormData((old) => ({ ...old, imageAssets: imgs }))
--- a/app/space/editSpacePost/[zid]/page.jsx
+++ b/app/space/editSpacePost/[zid]/page.jsx
@ -4,12 +4,12 @@ import { DotLoading, Popup, Toast, TextArea, Switch } from "antd-mobile";
 import { FontAwesomeIcon } from "@fortawesome/react-fontawesome";
 import { faAngleLeft } from "@fortawesome/free-solid-svg-icons";
 import requireAPI from "@/utils/requireAPI";
-import { useRouter, useSearchParams } from "next/navigation";
+import { useRouter, useSearchParams, useParams } from "next/navigation";
 import { multiUploadImage } from "@/utils/upload";
 import UploadImgs from "@/components/UploadImgs";
 import OwnInput from "@/components/OwnInput";
 export default function EditSpacePost() {
-  const searchParams = useSearchParams();
+  const params = useParams();
  const [data, setData] = useState(null);
  const [isSubmitting, setIsSubmitting] = useState(false);
  const [priceEdit, setPriceEdit] = useState(false);
@ -32,27 +32,67 @@ export default function EditSpacePost() {
  });
  const router = useRouter();
  useEffect(() => {
-    const dataStr = searchParams.get("data");
-    const data = JSON.parse(decodeURIComponent(dataStr));
-    setData(data);
-    const publicData = {
-      price: data?.price ? data?.price / 100 : 0,
-      imageVisibleRange: data?.media_visible_range,
-      isCreatingPaidText: data?.is_creating_paid_text,
-      isFreeForIronfan: data?.is_ironfan_visible,
-      blurCover: data?.is_blurring_cover == 1,
-    };
-    // const imgs = getExistImgs(data);
-    setFormData({
-      content: data?.paid_text
-        ? data?.text.slice(0, data?.text.length - data?.paid_text.length)
-        : data?.text,
-      paidText: data?.paid_text,
-      imageAssets: [],
-      ...publicData,
-    });
-    setPriceEditData(publicData);
+    // const dataStr = searchParams.get("data");
+    // const data = JSON.parse(decodeURIComponent(dataStr));
+    const { zid } = params;
+    console.log("zid", zid);
+    getData(parseInt(zid, 10));
  }, []);
+  const getData = async (zid) => {
+    try {
+      const body = {
+        ids: [zid],
+      };
+
+      const _data = await requireAPI(
+        "POST",
+        "/api/zone_moment/list_by_ids_from_creater",
+        {
+          body,
+        },
+        true
+      );
+      if (_data.ret === -1) {
+        Toast.show({
+          icon: "fail",
+          content: _data.msg,
+          position: "top",
+        });
+        return;
+      }
+
+      setData(_data.data.list[0]);
+      const {
+        text,
+        paid_text,
+        price,
+        media_visible_range,
+        is_creating_paid_text,
+        is_ironfan_visible,
+        is_blurring_cover,
+      } = _data.data.list[0];
+      const publicData = {
+        price: price ? price / 100 : 0,
+        imageVisibleRange: media_visible_range,
+        isCreatingPaidText: is_creating_paid_text,
+        isFreeForIronfan: is_ironfan_visible,
+        blurCover: is_blurring_cover == 1,
+      };
+      setFormData({
+        content: paid_text
+          ? text.slice(0, text.length - paid_text.length)
+          : text,
+        paidText: paid_text,
+        imageAssets: [],
+        ...publicData,
+      });
+      setPriceEditData(publicData);
+    } catch (error) {
+      console.error(error);
+    } finally {
+      setIsSubmitting(false);
+    }
+  };
  //发布内容
  const handleSubmit = async () => {
    if (formData.content == "") {
@ -287,6 +327,7 @@ export default function EditSpacePost() {
        {data?.m_type && (
          <div className="mt-2">
            <UploadImgs
+              maxLength={data?.m_type == 2 ? 1 : 30}
              type={data?.m_type}
              existImages={getExistImgs}
              accept={
--- a/app/space/setting/[mid]/page.js
+++ b/app/space/setting/[mid]/page.js
@ -2,27 +2,26 @@

 import React, { useEffect, useState, useCallback } from "react";
 import { Image, Avatar, Divider, Dialog, Toast } from "antd-mobile";
-import { redirect, useRouter, useSearchParams } from "next/navigation";
+import { redirect, useRouter, useParams } from "next/navigation";
 import { FontAwesomeIcon } from "@fortawesome/react-fontawesome";
 import {
  faAngleLeft,
  faAngleRight,
  faCalendar,
 } from "@fortawesome/free-solid-svg-icons";
-import { getSpaceData } from "@/api/space";
+import { getSpaceData,getStreamerInfo } from "@/api/space";
 import requireAPI from "@/utils/requireAPI";
 export default function Setting() {
  const router = useRouter();
-  const searchParams = useSearchParams();
+  const params = useParams();
  const [streamerInfo, setStreamerInfo] = useState(null);
  useEffect(() => {
    (async () => {
-      const currentData = searchParams.get("data");
-      if (currentData) {
-        let data = await JSON.parse(decodeURIComponent(currentData));
-
-        await getSpaceData(Number(data.mid)).then((res) => {
-          setStreamerInfo({ ...data, refund_enable: res?.refund_enable });
+      const {mid} = params;
+      if (mid) {
+        const info = await getStreamerInfo(Number(mid));
+        await getSpaceData(Number(mid)).then((res) => {
+          setStreamerInfo({ ...info, refund_enable: res?.refund_enable });
        });
      }
    })();
@ -126,7 +125,7 @@ export default function Setting() {
          className="flex justify-between items-center"
          onClick={() => {
            router.push(
-              "setting/spaceIntroSetting?data=" + searchParams.get("data")
+              "spaceIntroSetting/" + streamerInfo.mid
            );
          }}
        >
@ -191,7 +190,7 @@ export default function Setting() {
              <li>
                <div
                  onClick={() =>
-                    router.push("setting/spaceMember?zid=" + streamerInfo.id)
+                    router.push("spaceMember?zid=" + streamerInfo.id)
                  }
                  className="flex justify-between"
                >
@ -208,7 +207,7 @@ export default function Setting() {
                <div
                  onClick={() =>
                    router.push(
-                      "setting/spacePaymentSetting?zid=" + streamerInfo.id
+                      "spacePaymentSetting?zid=" + streamerInfo.id
                    )
                  }
                  className="flex justify-between"
@ -231,7 +230,7 @@ export default function Setting() {
                <div
                  onClick={() =>
                    router.push(
-                      "setting/spaceRefund?mid=" +
+                      "spaceRefund?mid=" +
                        streamerInfo.mid +
                        "&id=" +
                        streamerInfo.id
--- a/app/space/setting/spaceIntroSetting/[mid]/page.jsx
+++ b/app/space/setting/spaceIntroSetting/[mid]/page.jsx
@ -3,21 +3,22 @@
 import OwnInput from "@/components/OwnInput";
 import { Button, Divider, TextArea, Toast } from "antd-mobile";
 import React, { useEffect, useState } from "react";
-import { useRouter, useSearchParams } from "next/navigation";
+import { useRouter, useSearchParams,useParams } from "next/navigation";
 import { FontAwesomeIcon } from "@fortawesome/react-fontawesome";
 import { faAngleRight, faAngleLeft } from "@fortawesome/free-solid-svg-icons";
 import { getStreamerInfo } from "@/api/space";
 import requireAPI from "@/utils/requireAPI";
 export default function SpaceIntroSetting() {
-  const searchParams = useSearchParams();
+  const params = useParams();
  const router = useRouter();
  const [data, setData] = useState({});
  const [isSubmitting, setIsSubmitting] = useState(false);
  //空间介绍
  const [spaceIntro, setSpaceIntro] = useState("");
  useEffect(() => {
-    const _data = decodeURIComponent(searchParams.get("data"));
-    getStreamerInfo(_data.mid).then((res) => {
+    // const _data = decodeURIComponent(searchParams.get("data"));
+    const {mid} = params
+    getStreamerInfo(parseInt(mid,10)).then((res) => {
      setData(res);
      setSpaceIntro(res?.profile);
    });
@ -93,7 +94,7 @@ export default function SpaceIntroSetting() {
          />
          <Divider />
          <div
-            onClick={() => router.push("spaceIntroSetting/editStreamerMedia")}
+            onClick={() => router.push("editStreamerMedia")}
            className="flex justify-between py-2"
          >
            <p className="text-base text-white">
--- a/app/space/setting/spacePaymentSetting/page.jsx
+++ b/app/space/setting/spacePaymentSetting/page.jsx
@ -414,7 +414,7 @@ export default function spacePaymentSetting() {
        <p className="text-base text-center leading-9">空间付费设置</p>
      </div>
      {/* 内容 */}
-      <div className="pt-16 p-4">
+      <div className="pt-16 p-4 mt-4">
        <div>
          <div className="flex justify-between items-center">
            <p className="text-sm whitespace-nowrap">
--- a/app/streamerPosts/createPost/page.jsx
+++ b/app/streamerPosts/createPost/page.jsx
@ -0,0 +1,189 @@
+"use client";
+import React, { useState, useEffect } from "react";
+import { DotLoading, Popup, Toast, TextArea, Switch } from "antd-mobile";
+import { FontAwesomeIcon } from "@fortawesome/react-fontawesome";
+import { faAngleLeft } from "@fortawesome/free-solid-svg-icons";
+import requireAPI from "@/utils/requireAPI";
+import { useRouter } from "next/navigation";
+import { multiUploadImage } from "@/utils/upload";
+import UploadImgs from "@/components/UploadImgs";
+export default function CreatePost() {
+  const [isSubmitting, setIsSubmitting] = useState(false);
+  const [oldPhotos, setOldPhotos] = useState([]);
+  //价格
+  const [formData, setFormData] = useState({
+    content: "",
+    imageAssets: [],
+    videoAssets: [],
+  });
+  const router = useRouter();
+  useEffect(() => {
+    getPostCountData();
+  }, []);
+  const getPostCountData = async () => {
+    try {
+      const _data = await requireAPI(
+        "POST",
+        "/api/zone_moment/list_statistics_by_creater_mid"
+      );
+
+      if (_data.ret === -1) {
+        Toast.show({
+          icon: "fail",
+          content: _data.msg,
+          position: "top",
+        });
+        return;
+      }
+    } catch (error) {
+      console.error(error);
+    }
+  };
+  //发布内容
+  const handleSubmit = async () => {
+    if (formData.content == "") {
+      Toast.show({
+        icon: "fail",
+        content: "动态内容不能为空",
+        position: "top",
+      });
+      return;
+    }
+    if (
+      formData.imageAssets.length === 0 &&
+      formData.videoAssets.length === 0
+    ) {
+      Toast.show({
+        icon: "fail",
+        content: "请上传图片或视频",
+        position: "top",
+      });
+      return;
+    }
+    //提交数据
+    if (isSubmitting) return;
+    setIsSubmitting(true);
+    const { content, imageAssets } = formData;
+    const newMedia = imageAssets.filter((it) => it.id == undefined);
+    const media = await multiUploadImage(newMedia, 1);
+    // const media = await multiUploadImage(imageAssets);
+    media.image_ids = [
+      ...imageAssets.filter((it) => it.id != undefined).map((it) => it.id),
+      ...media.image_ids,
+    ];
+    try {
+      const body = {
+        text: content,
+        media_component: media,
+        status: 2,
+      };
+      const data = await requireAPI("POST", "/api/moment/create", {
+        body,
+      },true);
+      if (data.ret === -1) {
+        Toast.show({
+          icon: "fail",
+          content: data.msg,
+          position: "top",
+        });
+        return;
+      }
+      //提交成功后显示Toast并返回上一页
+      Toast.show({
+        icon: "success",
+        content: "发布成功",
+        position: "top",
+      });
+      router.back();
+    } catch (error) {
+      console.error(error);
+    } finally {
+      setIsSubmitting(false);
+    }
+  };
+  return (
+    <div className="flex-1">
+      {/* 头部标题 */}
+      <div className="p-4 fixed top-0 z-10 w-full flex justify-between items-center bg-black">
+        <div className="w-9 h-9 flex items-center justify-center bg-[#FFFFFF1A] rounded-full">
+          <FontAwesomeIcon
+            icon={faAngleLeft}
+            style={{ maxWidth: "12px" }}
+            size="xl"
+            onClick={() => {
+              router.back();
+            }}
+          />
+        </div>
+        <p className="text-base text-center leading-9">广场动态</p>
+        {isSubmitting ? (
+          <DotLoading />
+        ) : (
+          <span className="text-primary text-lg" onClick={handleSubmit}>
+            发布
+          </span>
+        )}
+      </div>
+      {/* 内容 */}
+      <div className="pt-16 p-4">
+        <div className="mt-2">
+          <p className="text-base font-medium text-white">动态内容</p>
+          <div className="h-32">
+            <TextArea
+              placeholder="请遵守平台准则，严禁发布违规内容"
+              value={formData.content}
+              autoSize={{ minRows: 6, maxRows: 15 }}
+              onChange={(value) =>
+                setFormData((old) => ({ ...old, content: value }))
+              }
+              style={{ "--font-size": "14px" }}
+              className="h-full bg-[#FFFFFF1A] rounded-2xl mt-2 mb-4 p-2"
+            />
+          </div>
+        </div>
+        <div className="mt-4">
+          <p className="text-base font-medium mt-4 mb-1">
+            图片
+            <span className="text-[#FFFFFF80] text-sm">
+              （添加图片后不可添加视频）
+            </span>
+          </p>
+          <UploadImgs
+            type={1}
+            id="uploadAvatarBtn1"
+            existImages={oldPhotos}
+            assets={formData.imageAssets}
+            getImgs={(imgs) => {
+              setFormData((old) => ({
+                ...old,
+                imageAssets: imgs,
+                videoAssets: [],
+              }));
+            }}
+          />
+        </div>
+        <div className="mt-4">
+          <p className="text-base font-medium mt-4 mb-1">
+            视频
+            <span className="text-[#FFFFFF80] text-sm">
+              （添加视频后不可添加图片）
+            </span>
+          </p>
+          <UploadImgs
+            type={2}
+            accept="video/*"
+            id="uploadAvatarBtn2"
+            assets={formData.videoAssets}
+            getImgs={(imgs) => {
+              setFormData((old) => ({
+                ...old,
+                videoAssets: imgs,
+                imageAssets: [],
+              }));
+            }}
+          />
+        </div>
+      </div>
+    </div>
+  );
+}
--- a/components/PostItem/index.js
+++ b/components/PostItem/index.js
@ -185,9 +185,7 @@ export default function PostItem({
                className="py-1 px-2 inline-block bg-[#F53030] rounded"
                onClick={() => {
                  router.push(
-                    `/space/editSpacePost?data=${encodeURIComponent(
-                      JSON.stringify(data)
-                    )}`
+                    `/space/editSpacePost/${data.id}`
                  );
                }}
              >
@ -392,9 +390,7 @@ export default function PostItem({
                          className="py-1 px-4"
                          onClick={() => {
                            router.push(
-                              `/space/editSpacePost?data=${encodeURIComponent(
-                                JSON.stringify(data)
-                              )}`
+                              `/space/editSpacePost/${data.id}`
                            );
                          }}
                        >
--- a/components/UploadImgs/index.js
+++ b/components/UploadImgs/index.js
@ -1,7 +1,7 @@
 "use client";

 import React, { useEffect, useState } from "react";
-import { DotLoading, Image, List, ImageViewer, Modal } from "antd-mobile";
+import { DotLoading, Image, Toast, ImageViewer, Modal } from "antd-mobile";
 import { FontAwesomeIcon } from "@fortawesome/react-fontawesome";
 import { faAdd, faClose, faPlay } from "@fortawesome/free-solid-svg-icons";
 import { getVideoBase64 } from "@/utils/tools";
@ -14,8 +14,9 @@ export default function UploadImgs({
  type = 1,
  videoSrc = null,
  getVideoCover,
+  id = "uploadAvatarBtn",
+  maxLength=9
 }) {
-  const maxCount = 6;
  const [loading, setLoading] = useState(false);
  const [filesUrls, setFilesUrls] = useState([]);
  const [videoUrl, setVideoUrl] = useState(null);
@ -33,17 +34,36 @@ export default function UploadImgs({
  useEffect(() => {
    getVideoCover && getVideoCover(frameImage);
  }, [frameImage]);
+  useEffect(() => {
+    if (assets && assets.length > 0) {
+      const list = assets.map((it, index) => ({
+        url: it.url || URL.createObjectURL(it),
+        id: `${index}`,
+      }));
+      setFilesUrls(list);
+    } else {
+      setFilesUrls([]);
+    }
+  }, [assets]);

  const handleUploadImage = async (e) => {
    let file = e.target.files[0];
    if (!file) return;
+    if((e.target.files.length+assets.length)>maxLength){
+      Toast.show({
+        icon: "fail",
+        content: '最多上传'+maxLength+'张图片',
+        position: "top",
+      });
+      return
+    }
    var videoUrl = URL.createObjectURL(file);
    var videoObj = document.createElement("video");
    const eles = Array.from(e.target.files);
    if (type == 1) {
      const newFils = eles.map((it, index) => ({
        url: URL.createObjectURL(it),
-        id: "new" + index,
+        id: it.name,
      }));
      setFilesUrls((old) => [...old, ...newFils]);
    } else {
@ -214,7 +234,7 @@ export default function UploadImgs({
      <div className="grid grid-cols-4 gap-1">
        {type == 2 && filesUrls.length > 0 ? null : (
          <>
-            <label htmlFor="uploadAvatarBtn">
+            <label htmlFor={id}>
              <div
                className="border-2 border-[#ffffff80] text-[#ffffff80] rounded border-dashed w-full h-full flex justify-center items-center"
                style={{ minHeight: "calc(25vw - 0.75rem)" }}
@ -227,7 +247,7 @@ export default function UploadImgs({
            <input
              type="file"
              multiple={type == 1}
-              id="uploadAvatarBtn"
+              id={id}
              style={{ display: "none" }}
              // accept="image/png, image/jpeg, video/*"
              accept={accept}