tiefen_space_web/app/vip/page.jsx

288 lines
11 KiB
JavaScript
Raw Blame History

This file contains ambiguous Unicode characters

This file contains Unicode characters that might be confused with other characters. If you think that this is intentional, you can safely ignore this warning. Use the Escape button to reveal them.

"use client";
import React, { useState, useEffect } from "react";
import { generateSignature } from "@/utils/crypto";
import webviewBaseRequest from "@/utils/webviewBaseRequest";
import Image from "next/image";
import vipbackground from "@/public/images/vipbackground.png";
import isvip from "@/public/images/isvip.png";
import notvip from "@/public/images/notvip.png";
import alipay from "@/public/images/alipay.png";
import contact from "@/public/images/contact.png";
import vipright1 from "@/public/images/vipright1.png";
import vipright2 from "@/public/images/vipright2.png";
import vipright3 from "@/public/images/vipright3.png";
import vipright4 from "@/public/images/vipright4.png";
import viptitle from "@/public/images/viptitle.png";
import Link from "next/link";
import { Toast } from "antd-mobile";
import { useRouter } from "next/navigation";
export default function Vip() {
const router = useRouter();
const alipayBlock = () => {
const base = webviewBaseRequest();
if (base?.b_mid === 161) {
createOrder("alipay_h5");
return;
}
Toast.show({
content: "支付渠道维护升级中请24小时后再试",
});
};
//检查用户是否是vip
const [isVip, setIsVip] = useState(false);
const [name, setName] = useState("");
const [isFetching, setIsFetching] = useState(true);
useEffect(() => {
const getUserData = async () => {
try {
const base = webviewBaseRequest();
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);
}
};
setTimeout(() => {
getUserData();
}, 500);
}, []);
//创建充值订单
const [isLoading, setIsLoading] = useState(false);
const createOrder = async (type = "alipay_h5") => {
const base = webviewBaseRequest();
const body = {
...base,
product_id: "membership",
pay_type: type,
from: "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 "alipay_h5":
router.push(`${data.data.alipay_h5_param_str}`);
break;
case "wxpay_h5":
router.push(
`https://weixin.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>
)}
<Image
className="absolute top-0 left-0 z-0 w-full"
src={vipbackground}
alt=""
/>
<div className="flex flex-col z-10">
<Image className="pt-24" src={viptitle} alt="" />
<div className="flex flex-col px-4 pb-32">
{isVip ? (
<div className="relative">
<Image src={isvip} alt="" />
<p className="absolute bottom-5 left-5 text-[#521824B2] text-sm font-medium">
{name}
</p>
</div>
) : (
<Image src={notvip} 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">
<Image className="w-11" src={vipright1} 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">
<Image className="w-11" src={vipright2} 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">
<Image className="w-11" src={vipright3} 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">
<Image className="w-11" src={vipright4} 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"
>
<Image src={alipay} width={22} alt="" />
<p className="text-white text-base font-medium whitespace-nowrap">
支付宝支付
</p>
</div>
</div> */}
<div className="w-full px-2">
<div
onClick={() => createOrder("wxpay_h5")}
className="flex flex-row cursor-pointer gap-1.5 h-11 items-center justify-center bg-primary rounded-full"
>
<svg viewBox="0 0 1228 1024" width="18" height="18">
<path
d="M530.8928 703.1296a41.472 41.472 0 0 1-35.7376-19.8144l-2.7136-5.5808L278.272 394.752a18.7392 18.7392 0 0 1-2.048-8.1408 19.968 19.968 0 0 1 20.48-19.3536c4.608 0 8.8576 1.4336 12.288 3.84l234.3936 139.9296a64.4096 64.4096 0 0 0 54.528 5.9392L1116.2624 204.8C1004.9536 80.896 821.76 0 614.4 0 275.0464 0 0 216.576 0 483.6352c0 145.7152 82.7392 276.8896 212.2752 365.5168a38.1952 38.1952 0 0 1 17.2032 31.488 44.4928 44.4928 0 0 1-2.1504 12.3904l-27.6992 97.4848c-1.3312 4.608-3.328 9.3696-3.328 14.1312 0 10.752 9.216 19.3536 20.48 19.3536 4.4032 0 8.0384-1.536 11.776-3.584l134.5536-73.3184c10.1376-5.5296 20.7872-8.96 32.6144-8.96 6.2976 0 12.288 0.9216 18.0736 2.5088 62.72 17.0496 130.4576 26.5728 200.5504 26.5728C953.7024 967.168 1228.8 750.592 1228.8 483.6352c0-80.9472-25.4464-157.1328-70.0416-224.1024l-604.9792 436.992-4.4544 2.4064a42.1376 42.1376 0 0 1-18.432 4.1984z"
fill="#FFFFFF"
></path>
</svg>
<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>
);
}