diff --git a/app/recharge/page.jsx b/app/recharge/page.jsx new file mode 100644 index 0000000..451a6d0 --- /dev/null +++ b/app/recharge/page.jsx @@ -0,0 +1,333 @@ +"use client"; + +import React, { useState, useEffect } from "react"; +import { useRouter } from "next/navigation"; +import { Toast } from "antd-mobile"; +import { generateSignature } from "@/utils/crypto"; +import baseRequest from "@/utils/baseRequest"; + +export default function Recharge() { + const router = useRouter(); + + //用户user_id + const [userId, setUserId] = useState(""); + + //商品列表 + const [productList, setProductList] = useState([]); + + //选择的价格档位 + const [selectedPrice, setSelectedPrice] = useState({}); + + //选择任意金额充值 + const [customCoin, setCustomCoin] = useState({ selected: false, num: 1000 }); + + //查询用户信息 + const [selectedUser, setSelectedUser] = useState({}); + const querryUserData = async () => { + const base = baseRequest(); + const body = { ...base, user_id: parseInt(userId, 10) }; + const signature = generateSignature(body); + try { + const response = await fetch( + `/api/account/list_others_by_user_id?signature=${signature}`, + { + method: "POST", + headers: { + "Content-Type": "application/json", + }, + body: JSON.stringify(body), + } + ); + const data = await response.json(); + console.log(data); + if (data.ret === -1) { + Toast.show({ + content: data.msg, + }); + return; + } + } catch (error) { + console.error(error); + } + }; + + //任意金额充值的金币数量 + 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 = baseRequest(); + 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 = baseRequest(); + 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://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); + } + }; + + const PriceItem = ({ item }) => { + const handleClickPrice = (item) => { + setSelectedPrice(item); + setCustomCoin({ ...customCoin, selected: false }); + }; + return ( +
+ +
+ ); + }; + + if (isFetching) { + return ( +
+ +
+ ); + } + + return ( +
+ {isLoading && ( + + )} +
+

+ 请选择您要充值的账号 +

+
+ setUserId(e.target.value)} + className="input input-bordered input-md input-primary w-full" + /> + +
+ {/*
+
+ +
+

+ {item.account?.name} +

+

{orderLabel}

+
+
+ {item.lock_type === 0 && item.order_status !== 6 && ( + + )} +
*/} +

选择充值金额

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

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

+
+ )} +
+
+ +
+
+
+
+ ); +}