118 lines
3.6 KiB
JavaScript
118 lines
3.6 KiB
JavaScript
|
"use client";
|
|||
|
|
|
|||
|
|
import React, { useState } from "react";
|
|||
|
|
import { Image, Mask, Toast } from "antd-mobile";
|
|||
|
|
import require from "@/utils/require";
|
|||
|
|
import { get } from "@/utils/storeInfo";
|
|||
|
|
import { useRouter } from "next/navigation";
|
|||
|
|
export default function AddWeChat({
|
|||
|
|
visible,
|
|||
|
|
closeMask,
|
|||
|
|
name,
|
|||
|
|
price,
|
|||
|
|
streamerMid,
|
|||
|
|
avatar
|
|||
|
|
}) {
|
|||
|
|
const [isMoneyEnough, setIsMoneyEnough] = useState(true);
|
|||
|
|
const router = useRouter();
|
|||
|
|
//点击解锁微信按钮
|
|||
|
|
const unlockWechat = async () => {
|
|||
|
|
//余额不够就显示余额不足前往充值，够就直接购买
|
|||
|
|
|
|||
|
|
//先支付，支付成功后添加解锁关系，再展示解锁界面
|
|||
|
|
//支付金币解锁微信
|
|||
|
|
const account = get("account");
|
|||
|
|
if (account) {
|
|||
|
|
try {
|
|||
|
|
const userResponse = await require("POST", "/api/account/list_by_mid", {
|
|||
|
|
body: {
|
|||
|
|
mid: account.mid,
|
|||
|
|
},
|
|||
|
|
});
|
|||
|
|
if (userResponse.ret === -1) {
|
|||
|
|
Toast.show({
|
|||
|
|
icon: "fail",
|
|||
|
|
content: data.msg,
|
|||
|
|
position: "top",
|
|||
|
|
});
|
|||
|
|
return;
|
|||
|
|
}
|
|||
|
|
if (userResponse?.data.account?.gold_num >= price) {
|
|||
|
|
console.log("余额足够");
|
|||
|
|
const data = await require("POST", "/api/vas/one_step_unlock", {
|
|||
|
|
body: {
|
|||
|
|
contact_product_id: "contact_wechat",
|
|||
|
|
uid: streamerMid,
|
|||
|
|
},
|
|||
|
|
});
|
|||
|
|
if (data.ret === -1) {
|
|||
|
|
Toast.show({
|
|||
|
|
icon: "fail",
|
|||
|
|
content: data.msg,
|
|||
|
|
position: "top",
|
|||
|
|
});
|
|||
|
|
return;
|
|||
|
|
}
|
|||
|
|
//展示解锁界面
|
|||
|
|
// setIsWechatUnlocked(true);
|
|||
|
|
} else {
|
|||
|
|
setIsMoneyEnough(false);
|
|||
|
|
}
|
|||
|
|
} catch (error) {
|
|||
|
|
console.error(error);
|
|||
|
|
}
|
|||
|
|
}
|
|||
|
|
};
|
|||
|
|
|
|||
|
|
return (
|
|||
|
|
<Mask visible={visible}>
|
|||
|
|
<div className="relative w-screen h-screen">
|
|||
|
|
<div className="w-full h-full" onClick={() => closeMask(false)}></div>
|
|||
|
|
<div className="absolute top-1/2 left-1/2 -ml-[35vw] -mt-[35vw] w-[70vw] h-max flex flex-col justify-center items-center p-4 pt-10 bg-[#261e30] rounded-2xl">
|
|||
|
|
{isMoneyEnough ? (
|
|||
|
|
<>
|
|||
|
|
<Image
|
|||
|
|
src={avatar}
|
|||
|
|
width={64}
|
|||
|
|
height={64}
|
|||
|
|
className="rounded-full absolute -top-8"
|
|||
|
|
/>
|
|||
|
|
<p className="text-2xl font-bold">{name}</p>
|
|||
|
|
<div className="my-2 bg-[#FFFFFF1A] px-4 py-2 rounded-lg text-base">
|
|||
|
|
解锁后展示
|
|||
|
|
</div>
|
|||
|
|
<p className="text-[red] text-center mb-2">
|
|||
|
|
添加时请备注自己“铁粉空间”昵称
|
|||
|
|
<br />
|
|||
|
|
若解锁后72小时为通过好友，请联系客服
|
|||
|
|
</p>
|
|||
|
|
<div
|
|||
|
|
className="bg-primary px-4 py-2 rounded-full flex items-center"
|
|||
|
|
onClick={unlockWechat}
|
|||
|
|
>
|
|||
|
|
<span className="text-[16px]">解锁微信（{price}金币）</span>
|
|||
|
|
</div>
|
|||
|
|
</>
|
|||
|
|
) : (
|
|||
|
|
<>
|
|||
|
|
<p className="text-2xl text-white font-medium mb-4">
|
|||
|
|
余额不足
|
|||
|
|
</p>
|
|||
|
|
<div
|
|||
|
|
onClick={() => {
|
|||
|
|
router.push("/my/wallet");
|
|||
|
|
closeMask(false);
|
|||
|
|
setIsMoneyEnough(true);
|
|||
|
|
}}
|
|||
|
|
className="px-4 py-2 bg-[#FF669E] rounded-full items-center justify-center"
|
|||
|
|
>
|
|||
|
|
<span className="text-white text-base">前往充值</span>
|
|||
|
|
</div>
|
|||
|
|
</>
|
|||
|
|
)}
|
|||
|
|
</div>
|
|||
|
|
</div>
|
|||
|
|
</Mask>
|
|||
|
|
);
|
|||
|
|
}
|