334 lines
11 KiB
JavaScript
334 lines
11 KiB
JavaScript
"use client";
|
||
|
||
import React, { useState, useEffect, useCallback } from "react";
|
||
import { generateSignature } from "@/utils/crypto";
|
||
import webviewBaseRequest from "@/utils/webviewBaseRequest";
|
||
import Link from "next/link";
|
||
import { Toast } from "antd-mobile";
|
||
import { useRouter, useSearchParams } from "next/navigation";
|
||
export default function Vip() {
|
||
const router = useRouter();
|
||
const searchParams = useSearchParams();
|
||
|
||
//检查用户是否是vip
|
||
const [isVip, setIsVip] = useState(false);
|
||
const [name, setName] = useState("");
|
||
const [isFetching, setIsFetching] = useState(true);
|
||
|
||
const getBase = useCallback(
|
||
(webviewBase) => {
|
||
let searchParamsObj = null;
|
||
let currentBaseCode = searchParams.get("base");
|
||
if (currentBaseCode) {
|
||
let currentBase = JSON.parse(currentBaseCode);
|
||
searchParamsObj = { ...currentBase };
|
||
}
|
||
return searchParamsObj || webviewBase;
|
||
},
|
||
[searchParams]
|
||
);
|
||
const getUserData = async () => {
|
||
const webviewBase = webviewBaseRequest();
|
||
let base = getBase(webviewBase);
|
||
try {
|
||
const signature = generateSignature({
|
||
...base,
|
||
mid: base.b_mid,
|
||
});
|
||
const detailResponse = await fetch(
|
||
`/api/account/list_by_mid?signature=${signature}`,
|
||
{
|
||
method: "POST",
|
||
headers: {
|
||
"Content-Type": "application/json",
|
||
},
|
||
body: JSON.stringify({
|
||
...base,
|
||
mid: base.b_mid,
|
||
}),
|
||
}
|
||
);
|
||
const detailData = await detailResponse.json();
|
||
if (detailData.ret === -1) {
|
||
Toast.show({
|
||
content: detailData.msg,
|
||
});
|
||
return;
|
||
}
|
||
setName(detailData.data.account.name);
|
||
if (detailData.data.account.is_a_member === 1) setIsVip(true);
|
||
setIsFetching(false);
|
||
} catch (error) {
|
||
console.error(error);
|
||
}
|
||
};
|
||
//轮询请求
|
||
useEffect(() => {
|
||
setTimeout(() => {
|
||
getUserData();
|
||
}, 500);
|
||
const intervalId = setInterval(() => {
|
||
getUserData();
|
||
}, 2000);
|
||
return () => clearInterval(intervalId);
|
||
}, []);
|
||
|
||
//创建充值订单
|
||
const [isLoading, setIsLoading] = useState(false);
|
||
const createOrder = async (type = "alipay_h5") => {
|
||
const webviewBase = webviewBaseRequest();
|
||
let base = getBase(webviewBase);
|
||
if (base?.b_dt === 1 && base?.b_ver !== "1.5.0") {
|
||
Toast.show({
|
||
content: "ios暂时无法开通会员，请等待版本更新",
|
||
});
|
||
return;
|
||
}
|
||
const body = {
|
||
...base,
|
||
product_id: "membership",
|
||
pay_type: type,
|
||
redirect_url: type === "yeepay_wxpay_h5" ? window.location.href : "",
|
||
from: searchParams.get("base") ? "web" : "app",
|
||
};
|
||
|
||
//如果是微信jsapi支付直接跳转到中间页
|
||
if (type === "wxpay_jsapi") {
|
||
router.push(`/pay/${encodeURIComponent(JSON.stringify(body))}`);
|
||
return;
|
||
}
|
||
|
||
setIsLoading(true);
|
||
|
||
const signature = generateSignature(body);
|
||
try {
|
||
const response = await fetch(
|
||
`/api/vas/create_order?signature=${signature}`,
|
||
{
|
||
method: "POST",
|
||
headers: {
|
||
"Content-Type": "application/json",
|
||
},
|
||
body: JSON.stringify(body),
|
||
}
|
||
);
|
||
const data = await response.json();
|
||
if (data.ret === -1) {
|
||
Toast.show({
|
||
content: data.msg,
|
||
});
|
||
return;
|
||
}
|
||
switch (type) {
|
||
case "yeepay_alipay_h5":
|
||
router.push(`${data.data.yeepay_alipay_h5_param_str}`);
|
||
break;
|
||
case "yeepay_wxpay_h5":
|
||
router.push(`${data.data.yeepay_wxpay_h5_param_str}`);
|
||
break;
|
||
case "alipay_h5":
|
||
router.push(`${data.data.alipay_h5_param_str}`);
|
||
break;
|
||
case "wxpay_h5":
|
||
router.push(
|
||
`https://shop.tiefen.fun/pay/wxpay_h5/${encodeURIComponent(
|
||
data.data.wxpay_h5_param_str
|
||
)}`
|
||
);
|
||
break;
|
||
default:
|
||
router.push(`${data.data.alipay_h5_param_str}`);
|
||
break;
|
||
}
|
||
} catch (error) {
|
||
console.error(error);
|
||
} finally {
|
||
setIsLoading(false);
|
||
}
|
||
};
|
||
|
||
if (isFetching) {
|
||
return (
|
||
<section className="flex flex-1 justify-center container">
|
||
<span className="absolute top-1/2 loading loading-spinner loading-lg"></span>
|
||
</section>
|
||
);
|
||
}
|
||
|
||
return (
|
||
<section className="flex flex-1 justify-center container">
|
||
{isLoading && (
|
||
<span className="absolute top-1/2 loading loading-spinner loading-lg z-20"></span>
|
||
)}
|
||
<img
|
||
className="absolute top-0 left-0 z-0 w-full"
|
||
src={
|
||
process.env.NEXT_PUBLIC_CDN_URL + "/public/images/vipbackground.png"
|
||
}
|
||
alt=""
|
||
/>
|
||
<div className="flex flex-col z-10">
|
||
<img
|
||
className="pt-24"
|
||
src={process.env.NEXT_PUBLIC_CDN_URL + "/public/images/viptitle.png"}
|
||
alt=""
|
||
/>
|
||
<div className="flex flex-col px-4 pb-32">
|
||
{isVip ? (
|
||
<div className="relative">
|
||
<img
|
||
src={
|
||
process.env.NEXT_PUBLIC_CDN_URL + "/public/images/isvip.png"
|
||
}
|
||
alt=""
|
||
/>
|
||
<p className="absolute bottom-5 left-5 text-[#521824B2] text-sm font-medium">
|
||
{name}
|
||
</p>
|
||
</div>
|
||
) : (
|
||
<img
|
||
src={
|
||
process.env.NEXT_PUBLIC_CDN_URL + "/public/images/notvip.png"
|
||
}
|
||
alt=""
|
||
/>
|
||
)}
|
||
<div
|
||
className="flex flex-col p-4 rounded-2xl mt-4"
|
||
style={{
|
||
background:
|
||
"linear-gradient(94.52deg, #241018 3.66%, #0F080B 100%), linear-gradient(90deg, rgba(66, 50, 56, 0.5) 0%, rgba(61, 42, 48, 0.5) 100%)",
|
||
border: "2px solid",
|
||
borderColor: "#42323880",
|
||
}}
|
||
>
|
||
<p className="text-[#F5C4CC] text-2xl font-bold">会员权益</p>
|
||
<div className="flex flex-row flex-wrap gap-y-3.5 mt-4">
|
||
<div className="flex flex-row items-center basis-1/2">
|
||
<img
|
||
className="w-11"
|
||
src={
|
||
process.env.NEXT_PUBLIC_CDN_URL +
|
||
"/public/images/vipright1.png"
|
||
}
|
||
alt=""
|
||
/>
|
||
<div className="flex flex-col ml-1.5">
|
||
<p className="text-[#F5C4CC] text-sm">高清图片</p>
|
||
<p className="text-[#613F46] text-xs">下载保存</p>
|
||
</div>
|
||
</div>
|
||
<div className="flex flex-row items-center basis-1/2">
|
||
<img
|
||
className="w-11"
|
||
src={
|
||
process.env.NEXT_PUBLIC_CDN_URL +
|
||
"/public/images/vipright4.png"
|
||
}
|
||
alt=""
|
||
/>
|
||
<div className="flex flex-col ml-1.5">
|
||
<p className="text-[#F5C4CC] text-sm">搜索筛选</p>
|
||
<p className="text-[#613F46] text-xs">发现心仪</p>
|
||
</div>
|
||
</div>
|
||
<div className="flex flex-row items-center basis-1/2">
|
||
<img
|
||
className="w-11"
|
||
src={
|
||
process.env.NEXT_PUBLIC_CDN_URL +
|
||
"/public/images/vipright2.png"
|
||
}
|
||
alt=""
|
||
/>
|
||
<div className="flex flex-col ml-1.5">
|
||
<p className="text-[#F5C4CC] text-sm">身份标签</p>
|
||
<p className="text-[#613F46] text-xs">专属标识</p>
|
||
</div>
|
||
</div>
|
||
<div className="flex flex-row items-center basis-1/2">
|
||
<img
|
||
className="w-11"
|
||
src={
|
||
process.env.NEXT_PUBLIC_CDN_URL +
|
||
"/public/images/vipright3.png"
|
||
}
|
||
alt=""
|
||
/>
|
||
<div className="flex flex-col ml-1.5">
|
||
<p className="text-[#F5C4CC] text-sm">专属客服</p>
|
||
<p className="text-[#613F46] text-xs">极速服务</p>
|
||
</div>
|
||
</div>
|
||
</div>
|
||
</div>
|
||
<div
|
||
className="flex flex-col p-4 rounded-2xl mt-4"
|
||
style={{
|
||
border: "2px solid",
|
||
borderColor: "#42323880",
|
||
}}
|
||
>
|
||
<p className="text-base font-medium text-[#F5C4CC]">会员规则</p>
|
||
<p className="text-xs font-medium text-[#F5C4CC] mt-2">
|
||
1、会员权限永久有效，开通后请勿传播平台付费内容；
|
||
</p>
|
||
<p className="text-xs font-medium text-[#F5C4CC]">
|
||
2、更多特权内容敬请期待，详情请关注本页面会员权益信息变化。
|
||
</p>
|
||
<p className="text-base font-medium text-[#F5C4CC] mt-6">
|
||
注意事项
|
||
</p>
|
||
<p className="text-xs font-medium text-[#F5C4CC] mt-2">
|
||
1、会员特权属于虚拟商品，一经售出概不退换；
|
||
</p>
|
||
<p className="text-xs font-medium text-[#F5C4CC]">
|
||
2、请确保支付时您的网络环境保持畅通，避免因第三方网络环境导致的支付失败；
|
||
</p>
|
||
<p className="text-xs font-medium text-[#F5C4CC]">
|
||
3、本项特权内容最终解释权归铁粉空间运营方所有。
|
||
</p>
|
||
</div>
|
||
</div>
|
||
{!isVip && (
|
||
<div className="flex flex-col w-full fixed left-0 bottom-0 z-20">
|
||
<div className="h-12 bg-gradient-to-t from-[#07050AE5] to-[#07050A00]"></div>
|
||
<div className="flex flex-col pt-3 pb-11 px-4 bg-[#07050AE5]">
|
||
<div className="flex flex-row justify-between">
|
||
<div className="w-full px-2">
|
||
<div
|
||
onClick={() => createOrder("alipay_h5")}
|
||
className="flex flex-row cursor-pointer gap-1.5 h-11 items-center justify-center bg-primary rounded-full"
|
||
>
|
||
<img
|
||
className="w-[22px]"
|
||
src={
|
||
process.env.NEXT_PUBLIC_CDN_URL +
|
||
"/public/images/alipay.png"
|
||
}
|
||
alt=""
|
||
/>
|
||
<p className="text-white text-base font-medium whitespace-nowrap">
|
||
支付宝支付
|
||
</p>
|
||
</div>
|
||
</div>
|
||
</div>
|
||
<p className="text-secondary text-xs font-medium mt-4 text-center mb-1">
|
||
确认购买即视为同意
|
||
<Link
|
||
className="link text-[#309EDC]"
|
||
href="/doc/rechargeagreement"
|
||
>
|
||
《用户充值协议》
|
||
</Link>
|
||
</p>
|
||
</div>
|
||
</div>
|
||
)}
|
||
</div>
|
||
</section>
|
||
);
|
||
}
|