diff --git a/app/zone/pay/[zid]/[product_id]/[moment_id]/page.jsx b/app/zone/pay/[zid]/[product_id]/[moment_id]/page.jsx index a9bb355..ddff0bf 100644 --- a/app/zone/pay/[zid]/[product_id]/[moment_id]/page.jsx +++ b/app/zone/pay/[zid]/[product_id]/[moment_id]/page.jsx @@ -3,19 +3,22 @@ import React, { useState, useEffect, useCallback } from "react"; import Divider from "@/components/Divider"; import Link from "next/link"; -import { Toast, Switch } from "antd-mobile"; +import { Toast, Switch, Image } from "antd-mobile"; import { generateSignature } from "@/utils/crypto"; import webviewBaseRequest from "@/utils/webviewBaseRequest"; import { useRouter, useSearchParams } from "next/navigation"; +let selectedIndex = 0; export default function Pay({ params }) { const router = useRouter(); const searchParams = useSearchParams(); //当前选购的商品数据 const [data, setData] = useState({}); + //超粉商品数据 const [superfanshipData, setSuperfanshipData] = useState(); const [isFetching, setIsFetching] = useState(true); + const [superChecked, setSuperChecked] = useState({ index: 0 }); const getBase = useCallback( (webviewBase) => { let searchParamsObj = null; @@ -39,6 +42,7 @@ export default function Pay({ params }) { product_id: params.product_id, ...base, }; + // debugger; const signature = generateSignature(body); const response = await fetch( `/api/zone/get_cashier?signature=${signature}`, @@ -87,6 +91,21 @@ export default function Pay({ params }) { ); const temData = await response.json(); if (temData.ret === -1) return; + const superfanPriceList = temData.data?.superfan_price_list?.filter( + (it) => it.enable + ); + if (superfanPriceList) { + if (selectedIndex) { + setSuperChecked({ + index: selectedIndex, + ...superfanPriceList[selectedIndex], + }); + } else { + setSuperChecked({ index: 0, ...superfanPriceList[0] }); + } + } else { + setSuperChecked({ index: 0, ...temData.data }); + } setSuperfanshipData(temData.data); } catch (error) { console.error(error); @@ -95,22 +114,36 @@ export default function Pay({ params }) { //轮询请求 useEffect(() => { - setTimeout(() => { + // debugger; + const timer = setTimeout(() => { getData(); getSuperfanshipData(); }, 500); const intervalId = setInterval(() => { getData(); - getSuperfanshipData(); + getSuperfanshipData(superChecked); }, 2000); - return () => clearInterval(intervalId); + return () => { + clearInterval(intervalId); + clearTimeout(timer); + }; }, []); //是否勾选购买超粉switch组件 const [checked, setChecked] = useState( params.product_id === "h5_zone_superfanship" ? true : false ); - + const superId = superfanshipData?.superfan_price_list + ? superChecked?.period == 4 + ? "h5_zone_superfanship_year" + : superChecked?.period == 3 + ? "h5_zone_superfanship_half_year" + : superChecked?.period == 2 + ? "h5_zone_superfanship_season" + : superChecked?.period == 1 + ? "h5_zone_superfanship_month" + : "h5_zone_superfanship_eternal" + : "h5_zone_superfanship"; //创建订单 const [isLoading, setIsLoading] = useState(false); const createOrder = async (type = "alipay_h5") => { @@ -120,13 +153,12 @@ export default function Pay({ params }) { ...base, zid: parseInt(params.zid), moment_id: parseInt(params.moment_id), - product_id: checked ? "h5_zone_superfanship" : params.product_id, + product_id: checked ? superId : params.product_id, pay_type: type, redirect_url: type === "yeepay_wxpay_h5" ? window.location.href : "", from: searchParams.get("base") ? "web" : "app", }; setIsLoading(true); - const signature = generateSignature(body); try { const response = await fetch( @@ -174,6 +206,11 @@ export default function Pay({ params }) { } }; + const handleSelectSuper = (it) => { + selectedIndex = it.index; + setSuperChecked({ ...it, selected: it.index }); + }; + if (isFetching) { return (
@@ -208,32 +245,46 @@ export default function Pay({ params }) { )}
-

- ¥{" "} - {checked - ? (superfanshipData?.price / 100).toFixed(2) - : (data?.price / 100).toFixed(2)} -

-
-

付费商品：

-

- {checked ? superfanshipData?.name : data?.name} -

+
+ ¥ + + {checked + ? ((superChecked?.price || data?.price) / 100).toFixed(2) + : (data?.price / 100).toFixed(2)} +
- -
-

有效期：

-

- {checked ? superfanshipData?.validity : data?.validity} -

+
+
+

付费商品：

+

{checked ? superfanshipData?.name : data?.name}

+
+
+

有效期：

+

+ {checked + ? superChecked?.period == 1 + ? "一个月" + : superChecked?.period == 2 + ? "三个月" + : superChecked?.period == 3 + ? "半年" + : superChecked?.period == 4 + ? "一年" + : "永久" + : data?.validity} +

+
- + {params.product_id === "h5_zone_moment" && superfanshipData && ( -
+
setChecked(!checked)} + >

开通超粉，空间动态免费看 @@ -252,31 +303,113 @@ export default function Pay({ params }) {

)}
- + {/* setChecked(!checked)} + > */} + {/* setChecked(!checked)} style={{ - "--checked-color": "#FFD685", - "--height": "30px", - "--width": "60px", + "--checked-color": "#FFE9AB", }} - /> + /> */} +
+ )} + {params.product_id === "h5_zone_superfanship" && ( + <> + {superfanshipData?.is_superfanship_give_wechat === 1 && ( +
+ + + +

+ 额外附赠空间主人私人微信 +

+
+ )} + + )} + {checked && ( +
+ {superfanshipData?.superfan_price_list + ?.filter((it) => it.enable) + ?.map((it, index) => ( +
handleSelectSuper({ index, ...it })} + className={`relative flex flex-col items-center p-2 text-center bg-cover bg- bg-no-repeat rounded-2xl w-full h-[calc(100vw/3-1rem)] + ${ + superChecked?.index == index + ? "border-2 border-[#ffffff] text-[#663B0B]" + : "border-2 border-[#FFFFFF14] text-white" + } + + ${ + !it.is_superfanship_give_wechat + ? "justify-center" + : "justify-start" + } + `} + style={{ + backgroundImage: `url(${ + superChecked?.index == index + ? process.env.NEXT_PUBLIC_CDN_URL + + "/public/images/superFan_price_bg.png" + : "" + })`, + }} + > +
+

+ {it.period == 0 + ? "永久" + : it.period == 1 + ? "月度" + : it.period == 2 + ? "季度" + : it.period == 3 + ? "半年" + : "年度"} + 超粉 +

+

+ ¥ + + {it.price / 100} + +

+
+ {it.is_superfanship_give_wechat ? ( +

+ 赠送微信 +

+ ) : ( + "" + )} +
+ ))}
)} - {params.product_id === "h5_zone_superfanship" && - superfanshipData?.is_superfanship_give_wechat === 1 && ( -
- - - -

- 额外附赠空间主人私人微信 -

-
- )} {checked ? (

购买须知：

diff --git a/public/images/superFan_price_bg.png b/public/images/superFan_price_bg.png new file mode 100644 index 0000000..cce99ba Binary files /dev/null and b/public/images/superFan_price_bg.png differ