"use client"; import React, { useState, useEffect, useCallback } from "react"; import { useRouter, useSearchParams } from "next/navigation"; import { Toast } from "antd-mobile"; import { generateSignature } from "@/utils/crypto"; import webviewBaseRequest from "@/utils/webviewBaseRequest"; import Link from "next/link"; export default function Pay() { const router = useRouter(); //是否显示被隐藏的支付方式 const [isPaymentHided, setIsPaymentHided] = useState(true); const searchParams = useSearchParams(); //商品列表 const [productList, setProductList] = useState([]); //选择的价格档位 const [selectedPrice, setSelectedPrice] = useState({}); //选择任意金额充值 const [customCoin, setCustomCoin] = useState({ selected: false, num: 1000 }); //判断当前环境是否在app内 const [isInApp, setIsInApp] = useState(true); //任意金额充值的金币数量 const handleChangeCustomCoin = (e) => { let newValue = parseInt(e.target.value, 10); // 确保输入的值在最小值和最大值范围内 if (newValue >= 0 && newValue <= 100000) { setCustomCoin({ ...customCoin, num: newValue }); } else if (isNaN(newValue)) { setCustomCoin({ ...customCoin, num: 0 }); } else if (newValue > 100000) { setCustomCoin({ ...customCoin, num: 100000 }); } }; //获取当前充值档位 const [isFetching, setIsFetching] = useState(true); const getBase = useCallback( (webviewBase) => { let searchParamsObj = null; let currentBaseCode = searchParams.get("base"); if (currentBaseCode) { setIsInApp(false); let currentBase = JSON.parse(currentBaseCode); searchParamsObj = { ...currentBase }; } return searchParamsObj || webviewBase; }, [searchParams] ); useEffect(() => { const getData = async () => { const webviewBase = webviewBaseRequest(); const base = getBase(webviewBase); const body = { ...base }; const signature = generateSignature(body); try { const response = await fetch( `/api/vas/get_coins_product_list?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; } setProductList(data.data.list_alipay_h5); setIsFetching(false); } catch (error) { console.error(error); } }; getData(); }, []); //创建充值订单 const [isLoading, setIsLoading] = useState(false); const createOrder = async (type = "alipay_h5") => { if (!selectedPrice.id && !customCoin.selected) { Toast.show({ content: "请选择充值档位", }); return; } if (customCoin.selected && customCoin.num < 10) { Toast.show({ content: "最低充值1元哦～", }); return; } const webviewBase = webviewBaseRequest(); const base = getBase(webviewBase); const body = { ...base, product_id: customCoin.selected ? "h5_custom_coin" : selectedPrice.id, custom_coins: customCoin.selected ? customCoin.num : 0, 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://app.tiefen.fun/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); } }; const PriceItem = ({ item }) => { const handleClickPrice = (item) => { setSelectedPrice(item); setCustomCoin({ ...customCoin, selected: false }); }; return (
); }; if (isFetching) { return (
); } return (
{isLoading && ( )}
router.push("/pay/info")} className="flex flex-row items-center bg-neutral rounded-lg w-full p-2" >

支付遇到问题？

无法唤起支付宝APP，点击支付无反应？

选择充值金额

{productList?.map((item) => ( ))} {/* 任意金额充值 */}
{customCoin.selected && (

预估金额：¥{customCoin.num / 10}

)}
createOrder("alipay_h5")} className="flex flex-row cursor-pointer gap-1.5 h-11 items-center justify-center bg-primary rounded-full" >

支付宝支付

{isInApp && (isPaymentHided ? (
setIsPaymentHided(false)} className="flex flex-row cursor-pointer gap-1.5 h-11 items-center justify-center bg-[#2E2E2E] rounded-full" >

其他支付

) : (
createOrder("wxpay_h5")} className="flex flex-row cursor-pointer gap-1.5 h-11 items-center justify-center bg-primary rounded-full" >

微信支付

))}

确认购买即视为同意 《用户充值协议》

); }