初步完成网页充值金币功能

app/recharge/page.jsx

@@ -0,0 +1,356 @@
+"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 [user, setUser] = useState({ isSelected: false, data: {} });
+  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_without_token?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;
+      }
+      setUser({ isSelected: false, data: data.data.list[0] });
+    } catch (error) {
+      console.error(error);
+    }
+  };
+
+  //选中用户
+  const handleSelectUser = () => {
+    setUser((prev) => {
+      return { ...prev, isSelected: !prev.isSelected };
+    });
+  };
+
+  //任意金额充值的金币数量
+  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 (!user.isSelected || !user.data?.mid) {
+      Toast.show({
+        content: "请选择要充值的账号",
+      });
+      return;
+    }
+    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,
+      mid: 1,
+      product_id: customCoin.selected ? "h5_custom_coin" : selectedPrice.id,
+      custom_coins: customCoin.selected ? customCoin.num : 0,
+      pay_type: type,
+      from: "wx_pub",
+    };
+
+    //如果是微信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_wx_pub?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;
+      }
+      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 (
+      <div className="basis-1/3 p-2">
+        <button
+          onClick={() => handleClickPrice(item)}
+          className={
+            selectedPrice.id === item.id
+              ? "flex flex-col w-full py-4 border bg-[#FF61B030] border-primary rounded-lg items-center"
+              : "flex flex-col w-full py-4 border bg-[#FFFFFF1A] border-secondary rounded-lg items-center"
+          }
+        >
+          <p
+            className={
+              selectedPrice.id === item.id
+                ? "text-base text-primary"
+                : "text-base text-secondary"
+            }
+          >
+            {item.name}
+          </p>
+          <p
+            className={
+              selectedPrice.real_price === item.real_price
+                ? "text-base text-primary"
+                : "text-base text-secondary"
+            }
+          >
+            ¥{item.real_price / 100}
+          </p>
+        </button>
+      </div>
+    );
+  };
+
+  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"></span>
+      )}
+      <div className="flex flex-1 flex-col p-4">
+        <p className="text-white text-base font-semibold my-2">
+          请选择您要充值的账号
+        </p>
+        <div className="flex flex-row">
+          <input
+            type="text"
+            name="user_id"
+            placeholder="请输入您的用户ID"
+            value={userId}
+            onChange={(e) => setUserId(e.target.value)}
+            className="input input-bordered input-md input-primary w-full"
+          />
+          <button
+            onClick={querryUserData}
+            className="btn btn-primary text-white max-w-sm ml-2"
+          >
+            搜索
+          </button>
+        </div>
+        {user.data?.mid && (
+          <div
+            className={`flex flex-row my-2 p-4 justify-between items-center rounded-lg border ${
+              user.isSelected ? "border-primary" : "border-neutral"
+            }`}
+          >
+            <div className="flex flex-row items-center">
+              <img
+                className="w-12 h-12 rounded-full"
+                src={user?.data?.avatar?.images[0].urls[0]}
+                alt=""
+              />
+              <div className="flex flex-col ml-2">
+                <p className="text-base text-white font-medium">
+                  {user?.data?.name}
+                </p>
+                <p className="text-sm text-secondary font-medium">
+                  {user?.data?.user_id}
+                </p>
+              </div>
+            </div>
+            <button
+              className={`btn text-white ${
+                user.isSelected ? "btn-neutral" : "btn-primary"
+              }`}
+              onClick={handleSelectUser}
+            >
+              {user.isSelected ? "取消" : "选中"}
+            </button>
+          </div>
+        )}
+        <p className="text-white text-base font-semibold my-2">选择充值金额</p>
+        <div className="flex flex-wrap">
+          {productList?.map((item) => (
+            <PriceItem key={item.id} item={item} />
+          ))}
+          {/* 任意金额充值 */}
+          <div className="basis-1/3 p-2">
+            <button
+              onClick={() => {
+                setSelectedPrice([]);
+                setCustomCoin({ ...customCoin, selected: true });
+              }}
+              className={
+                customCoin.selected
+                  ? "flex flex-col w-full h-full py-4 border bg-[#FF61B030] border-primary rounded-lg items-center justify-center"
+                  : "flex flex-col w-full h-full py-4 border bg-[#FFFFFF1A] border-secondary rounded-lg items-center justify-center"
+              }
+            >
+              <p
+                className={
+                  customCoin.selected
+                    ? "text-base text-primary"
+                    : "text-base text-secondary"
+                }
+              >
+                自定义金币
+              </p>
+            </button>
+          </div>
+        </div>
+        {customCoin.selected && (
+          <div className="px-2 mt-2">
+            <input
+              type="number"
+              name="custom_price"
+              placeholder="请输入金币数额"
+              value={customCoin.num.toString()}
+              onChange={handleChangeCustomCoin}
+              className="input input-bordered input-md input-primary w-full"
+            />
+            <p className="text-secondary text-base mt-2">
+              预估金额：¥{customCoin.num / 10}
+            </p>
+          </div>
+        )}
+        <div className="flex mt-auto mb-12">
+          <div className="w-full px-2">
+            <button
+              onClick={() => createOrder("alipay_h5")}
+              className="flex flex-row h-12 w-full items-center justify-center bg-primary rounded-full py-2"
+            >
+              <svg viewBox="0 0 1024 1024" width="18" height="18">
+                <path
+                  d="M1024.0512 701.0304V196.864A196.9664 196.9664 0 0 0 827.136 0H196.864A196.9664 196.9664 0 0 0 0 196.864v630.272A196.9152 196.9152 0 0 0 196.864 1024h630.272a197.12 197.12 0 0 0 193.8432-162.0992c-52.224-22.6304-278.528-120.32-396.4416-176.64-89.7024 108.6976-183.7056 173.9264-325.3248 173.9264s-236.1856-87.2448-224.8192-194.048c7.4752-70.0416 55.552-184.576 264.2944-164.9664 110.08 10.3424 160.4096 30.8736 250.1632 60.5184 23.1936-42.5984 42.496-89.4464 57.1392-139.264H248.064v-39.424h196.9152V311.1424H204.8V267.776h240.128V165.632s2.1504-15.9744 19.8144-15.9744h98.4576V267.776h256v43.4176h-256V381.952h208.8448a805.9904 805.9904 0 0 1-84.8384 212.6848c60.672 22.016 336.7936 106.3936 336.7936 106.3936zM283.5456 791.6032c-149.6576 0-173.312-94.464-165.376-133.9392 7.8336-39.3216 51.2-90.624 134.4-90.624 95.5904 0 181.248 24.4736 284.0576 74.5472-72.192 94.0032-160.9216 150.016-253.0816 150.016z"
+                  fill="#FFFFFF"
+                ></path>
+              </svg>
+              <p className="text-white text-base ml-1">支付宝</p>
+            </button>
+          </div>
+        </div>
+      </div>
+    </section>
+  );
+}