Merge pull request '增加任意金额充值功能；修改footer的copyright' (#1) from custom_coin into main

Reviewed-on: https://git.wishpal.cn/wishpal_ironfan/tiefen_space_web/pulls/1

app/layout.jsx

@@ -48,7 +48,7 @@ export default function RootLayout({ children }) {
                 ｜  
             </span>
             <a className="text-xs text-secondary">
-              Copyright © 2023 成都心意到了科技有限公司
+              Copyright © 2023-2024 成都心意到了科技有限公司
             </a>
           </div>
         </footer>

app/pay/page.jsx

@@ -6,6 +6,7 @@ import { Toast } from "antd-mobile";
 import { generateSignature } from "@/utils/crypto";
 import webviewBaseRequest from "@/utils/webviewBaseRequest";
 
+//todo:限制自定义金币充值的最大最小值，以及禁止小数点
 export default function Pay() {
   const router = useRouter();
 
@@ -13,9 +14,26 @@ export default function Pay() {
   const [productList, setProductList] = useState([]);
 
   //选择的价格档位
-  const [selectedPrice, setSelectedPrice] = 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();
@@ -40,6 +58,7 @@ export default function Pay() {
           return;
         }
         setProductList(data.data.list_alipay_h5);
+        setIsFetching(false);
       } catch (error) {
         console.error(error);
       }
@@ -50,17 +69,24 @@ export default function Pay() {
   //创建充值订单
   const [isLoading, setIsLoading] = useState(false);
   const createOrder = async () => {
-    if (!selectedPrice.id) {
+    if (!selectedPrice.id && !customCoin.selected) {
       Toast.show({
         content: "请选择充值档位",
       });
       return;
     }
+    if (customCoin.selected && customCoin.num < 10) {
+      Toast.show({
+        content: "最低充值1元哦～",
+      });
+      return;
+    }
     setIsLoading(true);
     const base = webviewBaseRequest();
     const body = {
       ...base,
-      product_id: selectedPrice.id,
+      product_id: customCoin.selected ? "h5_custom_coin" : selectedPrice.id,
+      custom_coins: customCoin.selected ? customCoin.num : 0,
       pay_type: "alipay_h5",
       from: "app",
     };
@@ -116,6 +142,7 @@ export default function Pay() {
   const PriceItem = ({ item }) => {
     const handleClickPrice = (item) => {
       setSelectedPrice(item);
+      setCustomCoin({ ...customCoin, selected: false });
     };
     return (
       <div className="basis-1/3 p-2">
@@ -150,6 +177,14 @@ export default function Pay() {
     );
   };
 
+  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 && (
@@ -186,7 +221,46 @@ export default function Pay() {
           {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="basis-1/2 px-2">
             <button