"use client"; import React, { useState, useEffect } from "react"; import { useRouter } from "next/navigation"; import { Toast } from "antd-mobile"; import { generateSignature } from "@/utils/crypto"; import webviewBaseRequest from "@/utils/webviewBaseRequest"; export default function Pay() { const router = useRouter(); const alipayBlock = () => { const base = webviewBaseRequest(); if (base?.b_mid === 161) { createOrder("alipay_h5"); return; } Toast.show({ content: "支付渠道维护升级中，请24小时后再试", }); }; //商品列表 const [productList, setProductList] = useState([]); //选择的价格档位 const [selectedPrice, setSelectedPrice] = useState({}); //选择任意金额充值 const [customCoin, setCustomCoin] = useState({ selected: false, num: 1000 }); //任意金额充值的金币数量 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); useEffect(() => { const getData = async () => { const base = webviewBaseRequest(); 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 base = webviewBaseRequest(); const body = { ...base, product_id: customCoin.selected ? "h5_custom_coin" : selectedPrice.id, custom_coins: customCoin.selected ? customCoin.num : 0, 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); } }; 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}

)}
{/*
*/}
); }