更换dialog标签为Modal组件

2024-06-25 20:39:04 +08:00 · 2024-06-25 20:39:04 +08:00 · 7b1916b620
parent f742022a2d
commit 7b1916b620
4 changed files with 67 additions and 99 deletions
--- a/app/[user_id]/_components/WechatBar/index.jsx
+++ b/app/[user_id]/_components/WechatBar/index.jsx
@ -5,7 +5,7 @@ import React, { useState } from "react";
 import { useRouter } from "next/navigation";
 import baseRequest from "@/utils/baseRequest";
 import { generateSignature } from "@/utils/crypto";
-import { Toast } from "antd-mobile";
+import { Toast, Modal } from "antd-mobile";
 import { checkAuth } from "@/utils/auth";

 export default function WechatBar({
@ -111,7 +111,29 @@ export default function WechatBar({
      >
        <div
          className="flex flex-row cursor-pointer items-center justify-center py-4"
-          onClick={() => document.getElementById("comfirm_modal").showModal()}
+          onClick={() =>
+            Modal.alert({
+              showCloseButton: true,
+              confirmText: "立即购买",
+              onConfirm: () => handlePurchase("alipay_h5"),
+              content: (
+                <div className="bg-[#17161A] p-2">
+                  <p className="text-white text-base font-medium">
+                    购买成功后请到"账号"-"已购"添加Ta的微信，若超72小时未添加成功请联系客服
+                  </p>
+                  <p className="text-secondary text-sm font-medium mt-4 text-center mb-1">
+                    确认购买即视为同意
+                    <Link
+                      className="link text-primary"
+                      href="/doc/rechargeagreement"
+                    >
+                      《用户充值协议》
+                    </Link>
+                  </p>
+                </div>
+              ),
+            })
+          }
        >
          <img
            src={
@ -151,32 +173,6 @@ export default function WechatBar({
          </pre>
        </div>
      </div>
-      <dialog id="comfirm_modal" className="modal">
-        <div className="modal-box bg-[#17161A]">
-          <p className="text-white text-base font-medium">
-            购买成功后请到"账号"-"已购"添加Ta的微信，若超72小时未添加成功请联系客服
-          </p>
-          <p className="text-secondary text-sm font-medium mt-4 text-center mb-1">
-            确认购买即视为同意
-            <Link className="link text-primary" href="/doc/rechargeagreement">
-              《用户充值协议》
-            </Link>
-          </p>
-          <div className="flex flex-row">
-            <button
-              className="flex flex-row flex-1 mx-2 items-center justify-center bg-[#FF669E] rounded-lg py-2"
-              onClick={() => handlePurchase("alipay_h5")}
-            >
-              <p className="text-white text-base ml-1">立即购买</p>
-            </button>
-            <form method="dialog" className="flex flex-row flex-1 mx-2">
-              <button className="flex flex-row flex-1 items-center justify-center border border-secondary rounded-lg py-2">
-                <p className="text-secondary text-base ml-1">取消</p>
-              </button>
-            </form>
-          </div>
-        </div>
-      </dialog>
    </div>
  );
 }
--- a/app/layout.jsx
+++ b/app/layout.jsx
@ -31,7 +31,10 @@ export default function RootLayout({ children }) {
      className="bg-[#07050A]"
      data-prefers-color-scheme="dark"
    >
-      <body className="box-border min-h-screen flex flex-col">
+      <body
+        className="box-border min-h-screen flex flex-col"
+        style={{ "--adm-color-primary": "#FF669E" }}
+      >
        <div className="flex flex-1 justify-center">{children}</div>
      </body>
    </html>
--- a/app/purchased/page.jsx
+++ b/app/purchased/page.jsx
@ -1,7 +1,7 @@
 "use client";
 import React, { useState, useEffect } from "react";
 import AuthBar from "@/components/AuthBar";
-import { Toast } from "antd-mobile";
+import { Toast, Modal } from "antd-mobile";
 import { checkAuth } from "@/utils/auth";
 import { useRouter } from "next/navigation";
 import baseRequest from "@/utils/baseRequest";
@ -105,7 +105,24 @@ export default function Purchased() {
    const handleClick = async () => {
      await getWechat(item?.account.mid);
      setTimeout(
-        () => document.getElementById("get_wechat_modal").showModal(),
+        () =>
+          Modal.alert({
+            showCloseButton: true,
+            confirmText: "复制",
+            onConfirm: () => {
+              copy(currentWechat);
+              Toast.show({
+                content: "复制成功",
+              });
+            },
+            content: (
+              <div className="bg-[#17161A] p-2">
+                <p className="text-white text-base font-medium text-center mb-4">
+                  Ta的微信号：<span>{currentWechat}</span>
+                </p>
+              </div>
+            ),
+          }),
        100
      );
    };
@ -162,37 +179,6 @@ export default function Purchased() {
    );
  };

-  const GetWechatModal = () => {
-    const handleCopy = () => {
-      copy(currentWechat);
-      Toast.show({
-        content: "复制成功",
-      });
-    };
-    return (
-      <dialog id="get_wechat_modal" className="modal">
-        <div className="modal-box bg-[#17161A]">
-          <p className="text-white text-base font-medium text-center mb-4">
-            Ta的微信号：<span>{currentWechat}</span>
-          </p>
-          <div className="flex flex-row">
-            <form method="dialog" className="flex flex-row flex-1 mx-2">
-              <button
-                className="flex flex-row flex-1 mx-2 items-center justify-center bg-[#FF669E] rounded-lg py-2"
-                onClick={handleCopy}
-              >
-                <p className="text-white text-base ml-1">复制</p>
-              </button>
-              <button className="flex flex-row flex-1 items-center justify-center border border-secondary rounded-lg py-2">
-                <p className="text-secondary text-base ml-1">取消</p>
-              </button>
-            </form>
-          </div>
-        </div>
-      </dialog>
-    );
-  };
-
  const SubmitUserWechatItem = ({ item }) => {
    const [wechat, setWechat] = useState("");
    const [remarks, setRemarks] = useState("");
@ -341,7 +327,6 @@ export default function Purchased() {
          return <DirectGetWechatItem key={item.order_id} item={item} />;
        }
      })}
-      <GetWechatModal />
    </section>
  );
 }
--- a/app/zone/[user_id]/page.jsx
+++ b/app/zone/[user_id]/page.jsx
@ -1,15 +1,16 @@
 "use client";

 import React, { useState, useEffect } from "react";
-import { Toast } from "antd-mobile";
+import { Toast, Modal } from "antd-mobile";
 import baseRequest from "@/utils/baseRequest";
 import { generateSignature } from "@/utils/crypto";
 import copy from "@/utils/copy";
 import { setCookie } from "cookies-next";
-import Link from "next/link";
 import InOtherApp from "@/components/InOtherApp";
+import { useRouter } from "next/navigation";

 export default function Zone({ params }) {
+  const router = useRouter();
  //页面数据
  const [data, setData] = useState({});
  useEffect(() => {
@ -46,12 +47,24 @@ export default function Zone({ params }) {
    getData();
  }, []);

-  //将主播链接复制到剪贴板，并存cookie
-  const copyAndSetCookieInviter = () => {
+  //将主播链接复制到剪贴板，并存cookie，并打开modal
+  const showModal = () => {
    setCookie("inviter", data?.streamer_ext?.user_id);
    copy(
      `【${data?.streamer_ext?.name}】『ID：${data?.streamer_ext?.user_id}』，复制此条消息，打开铁粉空间APP，查看详情https://tiefen.fun/zone/${data?.streamer_ext?.user_id}`
    );
+    Modal.alert({
+      showCloseButton: true,
+      confirmText: "前往下载",
+      onConfirm: () => router.push("/"),
+      content: (
+        <div className="bg-[#17161A] p-4">
+          <p className="text-white text-base font-medium">
+            {`请打开或下载【铁粉空间】APP，根据APP内弹窗指引加入空间。如未弹出，请在APP搜索ID：${data?.streamer_ext?.user_id}，加入空间。`}
+          </p>
+        </div>
+      ),
+    });
  };

  return (
@ -143,10 +156,7 @@ export default function Zone({ params }) {
      <div className="flex flex-row justify-around px-6 pt-6 z-10">
        <div
          className="flex flex-row items-center gap-1 cursor-pointer"
-          onClick={() => {
-            copyAndSetCookieInviter();
-            document.getElementById("comfirm_modal").showModal();
-          }}
+          onClick={showModal}
        >
          <img
            src={process.env.NEXT_PUBLIC_CDN_URL + "/public/images/tiefen.png"}
@ -157,10 +167,7 @@ export default function Zone({ params }) {
        </div>
        <div
          className="flex flex-row items-center gap-1 cursor-pointer"
-          onClick={() => {
-            copyAndSetCookieInviter();
-            document.getElementById("comfirm_modal").showModal();
-          }}
+          onClick={showModal}
        >
          <img
            src={process.env.NEXT_PUBLIC_CDN_URL + "/public/images/wechat.png"}
@ -173,10 +180,7 @@ export default function Zone({ params }) {
      <div className="px-6 pt-6">
        <div
          className="btn bg-gradient-to-r from-[#FF668B] to-[#FF66F0] rounded-full text-white text-lg font-medium w-full"
-          onClick={() => {
-            copyAndSetCookieInviter();
-            document.getElementById("comfirm_modal").showModal();
-          }}
+          onClick={showModal}
        >
          立即加入
        </div>
@ -206,26 +210,6 @@ export default function Zone({ params }) {
          3、本平台不提供违法及色情内容，如您发现空间内存在以上内容，请联系人工客服举报处理。
        </p>
      </div>
-      <dialog id="comfirm_modal" className="modal">
-        <div className="modal-box bg-[#17161A]">
-          <p className="text-white text-base font-medium">
-            {`请打开或下载【铁粉空间】APP，根据APP内弹窗指引加入空间。如未弹出，请在APP搜索ID：${data?.streamer_ext?.user_id}，加入空间。`}
-          </p>
-          <div className="flex flex-row mt-4">
-            <Link
-              className="flex flex-row flex-1 mx-2 items-center justify-center bg-[#FF669E] rounded-lg py-2"
-              href="/"
-            >
-              <p className="text-white text-base ml-1">确认</p>
-            </Link>
-            <form method="dialog" className="flex flex-row flex-1 mx-2">
-              <button className="flex flex-row flex-1 items-center justify-center border border-secondary rounded-lg py-2">
-                <p className="text-secondary text-base ml-1">取消</p>
-              </button>
-            </form>
-          </div>
-        </div>
-      </dialog>
    </section>
  );
 }