342 lines
13 KiB
JavaScript
342 lines
13 KiB
JavaScript
"use client";
|
||
|
||
import React, { useEffect, useState } from "react";
|
||
import { Image, Mask, Toast, Input, TextArea, DotLoading } from "antd-mobile";
|
||
import requireAPI from "@/utils/requireAPI";
|
||
import { get } from "@/utils/storeInfo";
|
||
import { useRouter } from "next/navigation";
|
||
import { getStreamerDetailInfo } from "@/api/space";
|
||
import { FontAwesomeIcon } from "@fortawesome/react-fontawesome";
|
||
import { faCopy } from "@fortawesome/free-solid-svg-icons";
|
||
export default function AddWeChat({
|
||
visible,
|
||
closeMask,
|
||
name,
|
||
price,
|
||
streamerMid,
|
||
avatar,
|
||
streamerData,
|
||
}) {
|
||
const [isMoneyEnough, setIsMoneyEnough] = useState(true);
|
||
//是否已经解锁微信
|
||
const [streamerDetailData, setStreamerDetailData] = useState(null);
|
||
const [wechat, setWechat] = useState(<DotLoading />);
|
||
//保存用户微信号
|
||
const [userWechat, setUserWechat] = useState("");
|
||
//保存用户备注
|
||
const [remarks, setRemarks] = useState("");
|
||
const router = useRouter();
|
||
useEffect(() => {
|
||
console.log("avatar", avatar);
|
||
if (!streamerMid) return;
|
||
getStreamerDetailInfo(streamerMid).then((res) => {
|
||
setStreamerDetailData(res);
|
||
});
|
||
}, [streamerData]);
|
||
useEffect(() => {
|
||
console.log("avatar", avatar);
|
||
if (!streamerDetailData || !streamerDetailData?.is_unlock_wechat) return;
|
||
requireAPI("POST", "/api/vas/query_wechat", {
|
||
body: {
|
||
uid: streamerMid,
|
||
},
|
||
}).then((res) => {
|
||
setWechat(res.data?.wechat_contact);
|
||
});
|
||
}, [streamerDetailData]);
|
||
//点击解锁微信按钮
|
||
const unlockWechat = async (type) => {
|
||
//余额不够就显示余额不足前往充值，够就直接购买
|
||
|
||
//先支付，支付成功后添加解锁关系，再展示解锁界面
|
||
//支付金币解锁微信
|
||
const account = get("account");
|
||
if (account) {
|
||
try {
|
||
const userResponse = await requireAPI(
|
||
"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("余额足够");
|
||
if (type) {
|
||
if (!userWechat) {
|
||
Alert.alert(null, "请填写您的微信");
|
||
return;
|
||
}
|
||
|
||
//付款函数
|
||
const payCoin = async () => {
|
||
try {
|
||
//支付金币解锁微信
|
||
const unlockData = await requireAPI(
|
||
"POST",
|
||
"/api/vas/one_step_unlock",
|
||
{
|
||
body: {
|
||
contact_product_id: "contact_wechat",
|
||
uid: streamerMid,
|
||
},
|
||
}
|
||
);
|
||
if (unlockData.ret === -1) {
|
||
Toast.show({
|
||
icon: "fail",
|
||
content: unlockData.msg,
|
||
position: "top",
|
||
});
|
||
return;
|
||
}
|
||
return unlockData.data.order_id;
|
||
} catch (error) {
|
||
console.error(error);
|
||
}
|
||
};
|
||
|
||
//提交微信函数
|
||
const submitWechat = async (order_id) => {
|
||
//提交用户微信和备注
|
||
try {
|
||
const submitWechatData = await requireAPI(
|
||
"POST",
|
||
"/api/vas/consumer_fill_contact",
|
||
{
|
||
body: {
|
||
order_id: order_id,
|
||
wechat: userWechat,
|
||
note: remarks,
|
||
},
|
||
}
|
||
);
|
||
if (submitWechatData.ret === -1) {
|
||
Toast.show({
|
||
icon: "fail",
|
||
content: submitWechatData.msg,
|
||
position: "top",
|
||
});
|
||
return;
|
||
}
|
||
} catch (error) {
|
||
console.error(error);
|
||
}
|
||
};
|
||
|
||
//用户未解锁微信情况：先支付，再提交用户微信和备注
|
||
if (streamerDetailData.is_unlock_wechat === 1) {
|
||
//用户已解锁微信情况：直接提交用户微信和备注
|
||
await submitWechat(streamerData.wechat_order_id);
|
||
setStreamerDetailData({
|
||
...streamerData,
|
||
wechat_order_status: 3,
|
||
});
|
||
} else {
|
||
const order_id = await payCoin();
|
||
if (!order_id) return;
|
||
await submitWechat(order_id);
|
||
//展示解锁成功界面
|
||
// setIsWechatUnlocked(true);
|
||
setStreamerDetailData({
|
||
...streamerDetailData,wechat_order_status:3
|
||
})
|
||
return;
|
||
}
|
||
} else {
|
||
const data = await requireAPI("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);
|
||
getStreamerDetailInfo(streamerMid).then((res) => {
|
||
setStreamerDetailData(res);
|
||
});
|
||
} 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"
|
||
fit="cover"
|
||
/>
|
||
<p className="text-2xl font-bold">{name}</p>
|
||
<div className="mt-2 w-full">
|
||
<div>
|
||
{streamerData?.streamer_ext?.wechat_lock_type === 0 ? (
|
||
<div className="flex flex-col justify-center items-center">
|
||
<div className="my-2 bg-[#FFFFFF1A] px-4 py-2 rounded-lg text-base text-center">
|
||
{streamerDetailData?.is_unlock_wechat
|
||
? wechat
|
||
: "解锁后展示"}
|
||
{!!streamerDetailData?.is_unlock_wechat && (
|
||
<FontAwesomeIcon
|
||
icon={faCopy}
|
||
// size="sm"
|
||
color="#ffffff"
|
||
className="ml-2"
|
||
/>
|
||
)}
|
||
</div>
|
||
<p className="text-[red] text-center mb-2">
|
||
添加时请备注自己“铁粉空间”昵称
|
||
<br />
|
||
若解锁后72小时为通过好友，请联系客服
|
||
</p>
|
||
{(!streamerDetailData?.is_unlock_wechat ||
|
||
streamerDetailData?.wechat_order_status === 2) && (
|
||
<div
|
||
className="bg-primary px-4 py-2 rounded-full flex items-center justify-center"
|
||
onClick={unlockWechat}
|
||
>
|
||
{!streamerDetailData?.is_unlock_wechat && (
|
||
<span className="text-[16px] whitespace-nowrap">
|
||
解锁微信（
|
||
{
|
||
streamerDetailData?.streamer_ext
|
||
?.wechat_coin_price
|
||
}
|
||
金币）
|
||
</span>
|
||
)}
|
||
</div>
|
||
)}
|
||
</div>
|
||
) : (
|
||
<div>
|
||
{streamerDetailData?.is_unlock_wechat &&
|
||
streamerDetailData?.wechat_order_status !== 2 ? (
|
||
<p className="text-sm text-center text-white mt-2">
|
||
{(streamerDetailData?.wechat_order_status === 0 ||
|
||
streamerDetailData?.wechat_order_status === 3) &&
|
||
"已成功提交您的微信，请耐心等待"}
|
||
{(streamerDetailData?.wechat_order_status === 4 ||
|
||
streamerDetailData?.wechat_order_status === 5) &&
|
||
"已确认添加，订单完成"}
|
||
</p>
|
||
) : (
|
||
<div>
|
||
<div>
|
||
<p>
|
||
<span className="text-[#F53030]">*</span>
|
||
您的微信
|
||
</p>
|
||
<div className="text-white text-sm border border-[#2c2b2f] rounded-xl p-2 my-1 w-full">
|
||
<Input
|
||
placeholder="填写您的微信，以便Ta主动联系您"
|
||
style={{ "--font-size": "small" }}
|
||
onChange={(value) => setUserWechat(value)}
|
||
value={userWechat}
|
||
/>
|
||
</div>
|
||
</div>
|
||
<div className="mt-2">
|
||
<p>备注</p>
|
||
<div className="text-white border border-[#2c2b2f] rounded-xl p-2 my-1 w-full">
|
||
<TextArea
|
||
placeholder="如添加好友需填写验证信息，请将相应答案填写在此处"
|
||
style={{ "--font-size": "small" }}
|
||
onChange={(value) => setRemarks(value)}
|
||
value={remarks}
|
||
/>
|
||
</div>
|
||
</div>
|
||
</div>
|
||
)}
|
||
<p className="text-xs text-center text-[#F53030] font-medium my-2">
|
||
若解锁后72小时未通过好友，请联系客服
|
||
</p>
|
||
{(!streamerDetailData?.is_unlock_wechat ||
|
||
streamerDetailData?.wechat_order_status === 2) && (
|
||
<div
|
||
className="bg-primary px-4 py-2 rounded-full flex items-center justify-center"
|
||
onClick={() => unlockWechat("sendWechat")}
|
||
>
|
||
{/* {!streamerDetailData?.is_unlock_wechat && (
|
||
<span className="text-[16px] whitespace-nowrap">
|
||
解锁微信（
|
||
{streamerDetailData?.streamer_ext?.wechat_coin_price}
|
||
金币）
|
||
</span>
|
||
)} */}
|
||
{!streamerDetailData?.is_unlock_wechat && (
|
||
<span className="text-[16px] whitespace-nowrap">
|
||
提交并支付（
|
||
{
|
||
streamerDetailData?.streamer_ext
|
||
?.wechat_coin_price
|
||
}
|
||
金币）
|
||
</span>
|
||
)}
|
||
{streamerDetailData?.wechat_order_status === 2 && (
|
||
<span className="text-white text-base font-medium px-4 whitespace-nowrap">
|
||
提交微信
|
||
</span>
|
||
)}
|
||
</div>
|
||
)}
|
||
</div>
|
||
)}
|
||
</div>
|
||
</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>
|
||
);
|
||
}
|