新增广场动态编辑功能

2024-11-19 16:06:55 +08:00 · 2024-11-19 16:06:55 +08:00 · 7a049a54b2
parent c6ac80cd12
commit 7a049a54b2
7 changed files with 279 additions and 43 deletions
--- a/app/my/wallet/page.js
+++ b/app/my/wallet/page.js
@ -203,7 +203,7 @@ export default function Wallet() {
                  style={{ maxWidth: "20px" }}
                />
                <span className="text-base text-white font-medium ml-2">
-                  近一周收支
+                  近一周收益
                </span>
              </div>
              <FontAwesomeIcon
--- a/app/space/person_space_introduce/[mid]/page.js
+++ b/app/space/person_space_introduce/[mid]/page.js
@ -7,7 +7,6 @@ import { FontAwesomeIcon } from "@fortawesome/react-fontawesome";
 import {
  faAngleLeft,
  faAngleRight,
-  faClose,
  // faSave,
 } from "@fortawesome/free-solid-svg-icons";
 import AddWeChat from "@/components/AddWeChat";
--- a/app/space/setting/agencySetting/page.jsx
+++ b/app/space/setting/agencySetting/page.jsx
@ -15,7 +15,6 @@ import {
  Space,
  SpinLoading,
 } from "antd-mobile";
-import Empty from "@/components/Empty";
 import { FontAwesomeIcon } from "@fortawesome/react-fontawesome";
 import {
  faAngleLeft,
@ -72,7 +71,13 @@ export default function AgencySetting() {
    setModalVisible(!modalVisible);
    const zid = Number(searchParams.get("zid"));
    handler.current = Dialog.show({
-      content: <ModalMask setModalVisible={setModalVisible} zid={zid} />,
+      content: (
+        <ModalMask
+          setModalVisible={setModalVisible}
+          zid={zid}
+          router={router}
+        />
+      ),
      bodyStyle: {
        backgroundColor: "#17161A",
        maxHeight: "none",
@ -113,13 +118,20 @@ export default function AgencySetting() {
      <div className="p-4 pt-20">
        <div className="flex justify-center items-center">
          {data ? (
-            <Image
-              src={data?.third_partner_account.avatar.images[0].urls[0]}
-              width={74}
-              height={74}
-              className="h-full mr-1"
-              placeholder=""
-            />
+            <div className="flex-1 flex flex-col justify-center items-center">
+              <Image
+                src={data?.third_partner_account.avatar.images[0].urls[0]}
+                width={74}
+                height={74}
+                className="h-full mr-1"
+                placeholder=""
+              />
+              <div className="flex flex-col border-2 border-[#2c2b2f] rounded-2xl p-4 w-full mt-6 text-base font-medium">
+                <p>代运营昵称：{data.third_partner_account.name}</p>
+                <p>ID：{data.third_partner_account.user_id}</p>
+                <p>分成比例：{(data.sharing_ratio * 100).toFixed()}%</p>
+              </div>
+            </div>
          ) : (
            <div
              onClick={handleAddAgency}
@ -133,7 +145,6 @@ export default function AgencySetting() {
            </div>
          )}
        </div>
-
        <div className="mt-8 text-[#FFFFFF80] text-sm">
          <p className="text-base font-medium">注意事项：</p>
          <p>
@ -151,7 +162,7 @@ export default function AgencySetting() {
  );
 }

-const ModalMask = ({ setModalVisible, zid }) => {
+const ModalMask = ({ setModalVisible, zid, router }) => {
  const [isloading, setIsloading] = useState([]);
  const [isSelected, setIsSelected] = useState(false);
  const [seconds, setSeconds] = useState(60);
@ -162,6 +173,7 @@ const ModalMask = ({ setModalVisible, zid }) => {
  const [userId, setUserId] = useState("");
  const [isCounting, setIsCounting] = useState(false);
  const [rate, setRate] = useState([null]);
+  // const router = useRouter();
  //生成比例选项
  const generateItems = useCallback((min, max) => {
    const items = [];
@ -312,6 +324,7 @@ const ModalMask = ({ setModalVisible, zid }) => {
        return;
      }
      setModalVisible(false);
+      router.back();
    } catch (error) {
      console.error(error);
    }
--- a/app/space/setting/collaboratorSetting/page.jsx
+++ b/app/space/setting/collaboratorSetting/page.jsx
@ -16,7 +16,6 @@ import {
  List,
  Dialog,
 } from "antd-mobile";
-import Empty from "@/components/Empty";
 import { FontAwesomeIcon } from "@fortawesome/react-fontawesome";
 import {
  faAngleLeft,
@ -28,7 +27,6 @@ import requireAPI from "@/utils/requireAPI";
 import { useRouter, useSearchParams } from "next/navigation";
 import OwnInput from "@/components/OwnInput";
 import { get } from "@/utils/storeInfo";
-import { JSEncrypt } from "jsencrypt";
 export default function CollaboratorSetting() {
  const [data, setData] = useState(null);
  const [selfMid, setSelfMid] = useState();
@ -51,9 +49,9 @@ export default function CollaboratorSetting() {
    const totalRate = data?.list?.reduce((acc, cur) => {
      return acc + cur.sharing_ratio || 0;
    }, 0);
-    return !totalRate
-      ? 0
-      : (data?.zone_third_partner?.sharing_ratio - totalRate).toFixed(2);
+    return (data?.zone_third_partner?.sharing_ratio - (totalRate || 0)).toFixed(
+      2
+    );
  }, [data]);
  const getData = async () => {
    const zid = Number(searchParams.get("zid"));
@ -92,6 +90,9 @@ export default function CollaboratorSetting() {
          setModalVisible={setModalVisible}
          zid={zid}
          handleRefresh={getData}
+          maxRate={
+            (data?.zone_third_partner?.sharing_ratio * 100).toFixed() || 0
+          }
        />
      ),
      bodyStyle: {
@ -148,11 +149,7 @@ export default function CollaboratorSetting() {
                style={{ "--border-radius": "100px", "--size": "42px" }}
              />
              <div className="ml-2 justify-around flex-1">
-                <p
-                  className="text-base  font-medium"
-                  numberOfLines={1}
-                  ellipsizeMode="tail"
-                >
+                <p className="text-base font-medium whitespace-nowrap">
                  {item?.collaborator_account?.name}
                </p>
                <div className="flex">
@ -295,7 +292,7 @@ export default function CollaboratorSetting() {
  );
 }

-const ModalMask = ({ setModalVisible, zid, handleRefresh }) => {
+const ModalMask = ({ setModalVisible, zid, handleRefresh, maxRate }) => {
  const [isloading, setIsloading] = useState([]);
  const [isSelected, setIsSelected] = useState(false);
  const [seconds, setSeconds] = useState(60);
@ -313,7 +310,7 @@ const ModalMask = ({ setModalVisible, zid, handleRefresh }) => {
    }
    return items;
  }, []);
-  const rates = useMemo(() => generateItems(1, 50), []);
+  const rates = useMemo(() => generateItems(1, maxRate), [maxRate]);
  useEffect(() => {
    async function getMobilePhone() {
      setMobilePhone(await get("mobile_phone"));
--- a/app/streamerPosts/editPost/[zid]/page.jsx
+++ b/app/streamerPosts/editPost/[zid]/page.jsx
@ -0,0 +1,226 @@
+"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, useParams } from "next/navigation";
+import { multiUploadImage } from "@/utils/upload";
+import UploadImgs from "@/components/UploadImgs";
+export default function EditPost() {
+  const params = useParams();
+  const [isSubmitting, setIsSubmitting] = useState(false);
+  const [oldPhotos, setOldPhotos] = useState([]);
+  const [data, setData] = useState(null);
+  //价格
+  const [formData, setFormData] = useState({
+    content: "",
+    imageAssets: [],
+    videoAssets: [],
+  });
+  const router = useRouter();
+  useEffect(() => {
+    getData();
+  }, []);
+  const getData = async () => {
+    const ids = [parseInt(params.zid, 10)];
+    try {
+      const body = {
+        ids,
+      };
+      const _data = await requireAPI(
+        "POST",
+        "/api/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, media_component } = _data.data.list[0];
+      setFormData({
+        content: text,
+        imageAssets: media_component.images.map((it) => ({
+          url: it.urls[0],
+          id: it.id,
+        })),
+        videoAssets: media_component.videos.map((it) => ({
+          url: it.urls[0],
+          id: it.id,
+        })),
+      });
+    } catch (error) {
+      console.error(error);
+    } finally {
+      setIsSubmitting(false);
+    }
+  };
+  //发布内容
+  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, videoAssets } = formData;
+    const newImageMedia = imageAssets.filter((it) => it.id == undefined);
+    const type = formData.imageAssets.length > 0 ? 1 : 2;
+    const media = await multiUploadImage(
+      type == 1 ? newImageMedia : videoAssets,
+      type
+    );
+    // const media = await multiUploadImage(imageAssets);
+    if (type == 1) {
+      media.image_ids = [
+        ...imageAssets.filter((it) => it.id != undefined).map((it) => it.id),
+        ...media.image_ids,
+      ];
+    }
+    try {
+      const body = {
+        id: parseInt(params.zid, 10),
+        text: content,
+        media_component: media,
+        status: 2,
+      };
+      const data = await requireAPI(
+        "POST",
+        "/api/moment/update",
+        {
+          body,
+        },
+        true,
+        100000
+      );
+      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": "16px" }}
+              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
@ -189,23 +189,24 @@ export default function PostItem({
          )}
          {(type == "space"
            ? data?.status === 3
-            : data?.status === 5 || data?.status === 6) &&
-            (type == "space" ? (
-              <p
-                className="py-1 px-2 inline-block bg-[#F53030] rounded"
-                onClick={() => {
-                  router.push(`/space/editSpacePost/${data.id}`);
-                }}
-              >
-                <span className="text-sm">
-                  审核未通过，请<span className="underline">重新编辑</span>。
-                </span>
-              </p>
-            ) : (
-              <p className="py-1 px-2 inline-block bg-[#F53030] rounded">
-                <span className="text-sm">审核未通过，请删除后重新提交。</span>
-              </p>
-            ))}
+            : data?.status === 5 || data?.status === 6) && (
+            <p
+              className="py-1 px-2 inline-block bg-[#F53030] rounded"
+              onClick={() => {
+                router.push(
+                  `${
+                    type == "space"
+                      ? "/space/editSpacePost"
+                      : "/streamerPosts/editPost"
+                  }/${data.id}`
+                );
+              }}
+            >
+              <span className="text-sm">
+                审核未通过，请<span className="underline">重新编辑</span>。
+              </span>
+            </p>
+          )}
          <div>
            {!data?.is_zone_moment_unlocked ? (
              <span
--- a/utils/requireAPI.js
+++ b/utils/requireAPI.js
@ -46,7 +46,7 @@ export default function customFetch(

  // 合并选项
  const mergedOptions = { ...defaultOptions, body };
-  // console.log("body", body);
+  console.log("body", body);
  // 返回 Promise 对象
  return new Promise((resolve, reject) => {
    fetch(url, mergedOptions)