wishpal_ironfan
/
tiefen_space_web
6
0
Fork 0
Code Issues Pull Requests Packages Projects Releases Wiki Activity

更换dialog标签为Modal组件

This commit is contained in:
yezian 2024-06-25 20:39:04 +08:00
parent f742022a2d
commit 7b1916b620
4 changed files with 67 additions and 99 deletions
Show Stats Download Patch File Download Diff File Expand all files Collapse all files

52
app/[user_id]/_components/WechatBar/index.jsx
View File

@ -5,7 +5,7 @@ import React, { useState } from "react";
import { useRouter } from "next/navigation"; import { useRouter } from "next/navigation";
import baseRequest from "@/utils/baseRequest"; import baseRequest from "@/utils/baseRequest";
import { generateSignature } from "@/utils/crypto"; import { generateSignature } from "@/utils/crypto";
import { Toast } from "antd-mobile"; import { Toast, Modal } from "antd-mobile";
import { checkAuth } from "@/utils/auth"; import { checkAuth } from "@/utils/auth";
export default function WechatBar({ export default function WechatBar({
@ -111,7 +111,29 @@ export default function WechatBar({
> >
<div <div
className="flex flex-row cursor-pointer items-center justify-center py-4" 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 <img
src={ src={
@ -151,32 +173,6 @@ export default function WechatBar({
</pre> </pre>
</div> </div>
</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> </div>
); );
} }

5
app/layout.jsx
View File

@ -31,7 +31,10 @@ export default function RootLayout({ children }) {
className="bg-[#07050A]" className="bg-[#07050A]"
data-prefers-color-scheme="dark" 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> <div className="flex flex-1 justify-center">{children}</div>
</body> </body>
</html> </html>

53
app/purchased/page.jsx
View File

@ -1,7 +1,7 @@
"use client"; "use client";
import React, { useState, useEffect } from "react"; import React, { useState, useEffect } from "react";
import AuthBar from "@/components/AuthBar"; import AuthBar from "@/components/AuthBar";
import { Toast } from "antd-mobile"; import { Toast, Modal } from "antd-mobile";
import { checkAuth } from "@/utils/auth"; import { checkAuth } from "@/utils/auth";
import { useRouter } from "next/navigation"; import { useRouter } from "next/navigation";
import baseRequest from "@/utils/baseRequest"; import baseRequest from "@/utils/baseRequest";
@ -105,7 +105,24 @@ export default function Purchased() {
const handleClick = async () => { const handleClick = async () => {
await getWechat(item?.account.mid); await getWechat(item?.account.mid);
setTimeout( 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 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 SubmitUserWechatItem = ({ item }) => {
const [wechat, setWechat] = useState(""); const [wechat, setWechat] = useState("");
const [remarks, setRemarks] = useState(""); const [remarks, setRemarks] = useState("");
@ -341,7 +327,6 @@ export default function Purchased() {
return <DirectGetWechatItem key={item.order_id} item={item} />; return <DirectGetWechatItem key={item.order_id} item={item} />;
} }
})} })}
<GetWechatModal />
</section> </section>
); );
} }

56
app/zone/[user_id]/page.jsx
View File

@ -1,15 +1,16 @@
"use client"; "use client";
import React, { useState, useEffect } from "react"; import React, { useState, useEffect } from "react";
import { Toast } from "antd-mobile"; import { Toast, Modal } from "antd-mobile";
import baseRequest from "@/utils/baseRequest"; import baseRequest from "@/utils/baseRequest";
import { generateSignature } from "@/utils/crypto"; import { generateSignature } from "@/utils/crypto";
import copy from "@/utils/copy"; import copy from "@/utils/copy";
import { setCookie } from "cookies-next"; import { setCookie } from "cookies-next";
import Link from "next/link";
import InOtherApp from "@/components/InOtherApp"; import InOtherApp from "@/components/InOtherApp";
import { useRouter } from "next/navigation";
export default function Zone({ params }) { export default function Zone({ params }) {
const router = useRouter();
//页面数据 //页面数据
const [data, setData] = useState({}); const [data, setData] = useState({});
useEffect(() => { useEffect(() => {
@ -46,12 +47,24 @@ export default function Zone({ params }) {
getData(); getData();
}, []); }, []);
//将主播链接复制到剪贴板，并存cookie //将主播链接复制到剪贴板，并存cookie，并打开modal
const copyAndSetCookieInviter = () => { const showModal = () => {
setCookie("inviter", data?.streamer_ext?.user_id); setCookie("inviter", data?.streamer_ext?.user_id);
copy( copy(
`【${data?.streamer_ext?.name}】『ID：${data?.streamer_ext?.user_id}』，复制此条消息，打开铁粉空间APP，查看详情https://tiefen.fun/zone/${data?.streamer_ext?.user_id}` `【${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 ( 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 justify-around px-6 pt-6 z-10">
<div <div
className="flex flex-row items-center gap-1 cursor-pointer" className="flex flex-row items-center gap-1 cursor-pointer"
onClick={() => { onClick={showModal}
copyAndSetCookieInviter();
document.getElementById("comfirm_modal").showModal();
}}
> >
<img <img
src={process.env.NEXT_PUBLIC_CDN_URL + "/public/images/tiefen.png"} src={process.env.NEXT_PUBLIC_CDN_URL + "/public/images/tiefen.png"}
@ -157,10 +167,7 @@ export default function Zone({ params }) {
</div> </div>
<div <div
className="flex flex-row items-center gap-1 cursor-pointer" className="flex flex-row items-center gap-1 cursor-pointer"
onClick={() => { onClick={showModal}
copyAndSetCookieInviter();
document.getElementById("comfirm_modal").showModal();
}}
> >
<img <img
src={process.env.NEXT_PUBLIC_CDN_URL + "/public/images/wechat.png"} 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="px-6 pt-6">
<div <div
className="btn bg-gradient-to-r from-[#FF668B] to-[#FF66F0] rounded-full text-white text-lg font-medium w-full" className="btn bg-gradient-to-r from-[#FF668B] to-[#FF66F0] rounded-full text-white text-lg font-medium w-full"
onClick={() => { onClick={showModal}
copyAndSetCookieInviter();
document.getElementById("comfirm_modal").showModal();
}}
> >
立即加入 立即加入
</div> </div>
@ -206,26 +210,6 @@ export default function Zone({ params }) {
3、本平台不提供违法及色情内容，如您发现空间内存在以上内容，请联系人工客服举报处理。 3、本平台不提供违法及色情内容，如您发现空间内存在以上内容，请联系人工客服举报处理。
</p> </p>
</div> </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> </section>
); );
} }