Compare commits
2 Commits
| Author | SHA1 | Date |
|---|---|---|
 yezian
|
bb9c05273f | |
|
yezian
|
747903396b |
253
app/pay/page.jsx
253
app/pay/page.jsx
|
|
@ -1,13 +1,14 @@
|
|||
"use client";
|
||||
|
||||
import React, { useState, useEffect } from "react";
|
||||
import { useRouter } from "next/navigation";
|
||||
import { useRouter, useSearchParams } 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 searchParams = useSearchParams();
|
||||
|
||||
const alipayBlock = () => {
|
||||
const base = webviewBaseRequest();
|
||||
|
|
@ -42,10 +43,21 @@ export default function Pay() {
|
|||
}
|
||||
};
|
||||
|
||||
//iap商品
|
||||
const [iapProductList, setIapProductList] = useState([]);
|
||||
|
||||
//获取当前充值档位
|
||||
const [isFetching, setIsFetching] = useState(true);
|
||||
useEffect(() => {
|
||||
const getData = async () => {
|
||||
const iapProducts = searchParams.get("product");
|
||||
if (iapProducts) {
|
||||
const strIapProducts = decodeURIComponent(iapProducts);
|
||||
const arrayIapProducts = JSON.parse(strIapProducts);
|
||||
setIapProductList(arrayIapProducts);
|
||||
setIsFetching(false);
|
||||
return;
|
||||
}
|
||||
const base = webviewBaseRequest();
|
||||
const body = { ...base };
|
||||
const signature = generateSignature(body);
|
||||
|
|
@ -79,7 +91,11 @@ export default function Pay() {
|
|||
//创建充值订单
|
||||
const [isLoading, setIsLoading] = useState(false);
|
||||
const createOrder = async (type = "alipay_h5") => {
|
||||
if (!selectedPrice.id && !customCoin.selected) {
|
||||
if (
|
||||
!selectedPrice.id &&
|
||||
!customCoin.selected &&
|
||||
!selectedIapItem.identifier
|
||||
) {
|
||||
Toast.show({
|
||||
content: "请选择充值档位",
|
||||
});
|
||||
|
|
@ -92,6 +108,17 @@ export default function Pay() {
|
|||
return;
|
||||
}
|
||||
|
||||
//iap支付的情况
|
||||
if (type === "iap") {
|
||||
window.ReactNativeWebView.postMessage(
|
||||
JSON.stringify({
|
||||
type: "IAP",
|
||||
data: selectedIapItem.identifier,
|
||||
})
|
||||
);
|
||||
return;
|
||||
}
|
||||
|
||||
const base = webviewBaseRequest();
|
||||
const body = {
|
||||
...base,
|
||||
|
|
@ -150,6 +177,7 @@ export default function Pay() {
|
|||
}
|
||||
};
|
||||
|
||||
//普通商品组件
|
||||
const PriceItem = ({ item }) => {
|
||||
const handleClickPrice = (item) => {
|
||||
setSelectedPrice(item);
|
||||
|
|
@ -188,6 +216,45 @@ export default function Pay() {
|
|||
);
|
||||
};
|
||||
|
||||
//iap商品组件
|
||||
const [selectedIapItem, setSelectedIapItem] = useState({});
|
||||
const IapItem = ({ item }) => {
|
||||
const handleClick = (item) => {
|
||||
setSelectedIapItem(item);
|
||||
};
|
||||
return (
|
||||
<div className="basis-1/3 p-2">
|
||||
<button
|
||||
onClick={() => handleClick(item)}
|
||||
className={
|
||||
selectedIapItem.identifier === item.identifier
|
||||
? "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={
|
||||
selectedIapItem.identifier === item.identifier
|
||||
? "text-base text-primary"
|
||||
: "text-base text-secondary"
|
||||
}
|
||||
>
|
||||
{item.product.title}
|
||||
</p>
|
||||
<p
|
||||
className={
|
||||
selectedIapItem.identifier === item.identifier
|
||||
? "text-base text-primary"
|
||||
: "text-base text-secondary"
|
||||
}
|
||||
>
|
||||
{item.product.priceString}
|
||||
</p>
|
||||
</button>
|
||||
</div>
|
||||
);
|
||||
};
|
||||
|
||||
if (isFetching) {
|
||||
return (
|
||||
<section className="flex flex-1 justify-center container">
|
||||
|
|
@ -202,61 +269,69 @@ export default function Pay() {
|
|||
<span className="absolute top-1/2 loading loading-spinner loading-lg"></span>
|
||||
)}
|
||||
<div className="flex flex-1 flex-col p-4">
|
||||
<div
|
||||
onClick={() => router.push("/pay/info")}
|
||||
className="flex flex-row items-center bg-neutral rounded-lg w-full p-2"
|
||||
>
|
||||
<svg viewBox="0 0 1024 1024" width="24" height="24">
|
||||
<path
|
||||
d="M512 65.983389c-245.952318 0-446.016611 200.064292-446.016611 446.016611S266.047682 958.016611 512 958.016611 958.016611 757.952318 958.016611 512 757.952318 65.983389 512 65.983389zM544.00086 736.00086c0 17.695686-14.303454 32.00086-32.00086 32.00086s-32.00086-14.303454-32.00086-32.00086L479.99914 448c0-17.695686 14.303454-32.00086 32.00086-32.00086 17.695686 0 32.00086 14.303454 32.00086 32.00086L544.00086 736.00086zM512 352.00086c-26.496224 0-48.00043-21.53689-48.00043-48.00043 0-26.527187 21.504206-48.00043 48.00043-48.00043s48.00043 21.471523 48.00043 48.00043C560.00043 330.46397 538.496224 352.00086 512 352.00086z"
|
||||
fill="#FFF04C"
|
||||
></path>
|
||||
</svg>
|
||||
<div className="ml-2 flex flex-col">
|
||||
<p className="text-base font-semibold text-white">支付遇到问题？</p>
|
||||
<p className="text-xs text-secondary">
|
||||
无法唤起支付宝APP，点击支付无反应？
|
||||
</p>
|
||||
</div>
|
||||
<div className="ml-auto">
|
||||
{productList.length > 0 && (
|
||||
<div
|
||||
onClick={() => router.push("/pay/info")}
|
||||
className="flex flex-row items-center bg-neutral rounded-lg w-full p-2"
|
||||
>
|
||||
<svg viewBox="0 0 1024 1024" width="24" height="24">
|
||||
<path
|
||||
d="M761.055557 532.128047c0.512619-0.992555 1.343475-1.823411 1.792447-2.848649 8.800538-18.304636 5.919204-40.703346-9.664077-55.424808L399.935923 139.743798c-19.264507-18.208305-49.631179-17.344765-67.872168 1.888778-18.208305 19.264507-17.375729 49.631179 1.888778 67.872168l316.960409 299.839269L335.199677 813.631716c-19.071845 18.399247-19.648112 48.767639-1.247144 67.872168 9.407768 9.791372 21.984142 14.688778 34.560516 14.688778 12.000108 0 24.000215-4.479398 33.311652-13.439914l350.048434-337.375729c0.672598-0.672598 0.927187-1.599785 1.599785-2.303346 0.512619-0.479935 1.056202-0.832576 1.567101-1.343475C757.759656 538.879828 759.199462 535.391265 761.055557 532.128047z"
|
||||
fill="#ffffff"
|
||||
d="M512 65.983389c-245.952318 0-446.016611 200.064292-446.016611 446.016611S266.047682 958.016611 512 958.016611 958.016611 757.952318 958.016611 512 757.952318 65.983389 512 65.983389zM544.00086 736.00086c0 17.695686-14.303454 32.00086-32.00086 32.00086s-32.00086-14.303454-32.00086-32.00086L479.99914 448c0-17.695686 14.303454-32.00086 32.00086-32.00086 17.695686 0 32.00086 14.303454 32.00086 32.00086L544.00086 736.00086zM512 352.00086c-26.496224 0-48.00043-21.53689-48.00043-48.00043 0-26.527187 21.504206-48.00043 48.00043-48.00043s48.00043 21.471523 48.00043 48.00043C560.00043 330.46397 538.496224 352.00086 512 352.00086z"
|
||||
fill="#FFF04C"
|
||||
></path>
|
||||
</svg>
|
||||
<div className="ml-2 flex flex-col">
|
||||
<p className="text-base font-semibold text-white">
|
||||
支付遇到问题？
|
||||
</p>
|
||||
<p className="text-xs text-secondary">
|
||||
无法唤起支付宝APP，点击支付无反应？
|
||||
</p>
|
||||
</div>
|
||||
<div className="ml-auto">
|
||||
<svg viewBox="0 0 1024 1024" width="24" height="24">
|
||||
<path
|
||||
d="M761.055557 532.128047c0.512619-0.992555 1.343475-1.823411 1.792447-2.848649 8.800538-18.304636 5.919204-40.703346-9.664077-55.424808L399.935923 139.743798c-19.264507-18.208305-49.631179-17.344765-67.872168 1.888778-18.208305 19.264507-17.375729 49.631179 1.888778 67.872168l316.960409 299.839269L335.199677 813.631716c-19.071845 18.399247-19.648112 48.767639-1.247144 67.872168 9.407768 9.791372 21.984142 14.688778 34.560516 14.688778 12.000108 0 24.000215-4.479398 33.311652-13.439914l350.048434-337.375729c0.672598-0.672598 0.927187-1.599785 1.599785-2.303346 0.512619-0.479935 1.056202-0.832576 1.567101-1.343475C757.759656 538.879828 759.199462 535.391265 761.055557 532.128047z"
|
||||
fill="#ffffff"
|
||||
></path>
|
||||
</svg>
|
||||
</div>
|
||||
</div>
|
||||
</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
|
||||
)}
|
||||
<p className="text-white text-base font-semibold my-2 ml-2">
|
||||
选择充值金额
|
||||
</p>
|
||||
{productList.length > 0 && (
|
||||
<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
|
||||
? "text-base text-primary"
|
||||
: "text-base text-secondary"
|
||||
? "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>
|
||||
</button>
|
||||
<p
|
||||
className={
|
||||
customCoin.selected
|
||||
? "text-base text-primary"
|
||||
: "text-base text-secondary"
|
||||
}
|
||||
>
|
||||
自定义金币
|
||||
</p>
|
||||
</button>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
)}
|
||||
{customCoin.selected && (
|
||||
<div className="px-2 mt-2">
|
||||
<input
|
||||
|
|
@ -272,36 +347,64 @@ export default function Pay() {
|
|||
</p>
|
||||
</div>
|
||||
)}
|
||||
<div className="flex mt-auto mb-12">
|
||||
<div className="basis-1/2 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>
|
||||
{/* iap商品 */}
|
||||
{iapProductList.length > 0 && (
|
||||
<div className="flex flex-wrap">
|
||||
{iapProductList?.map((item) => (
|
||||
<IapItem key={item.identifier} item={item} />
|
||||
))}
|
||||
</div>
|
||||
<div className="basis-1/2 px-2">
|
||||
<button
|
||||
onClick={() => createOrder("wxpay_h5")}
|
||||
className="flex flex-row h-12 w-full items-center justify-center bg-primary rounded-full py-2"
|
||||
>
|
||||
<svg viewBox="0 0 1228 1024" width="18" height="18">
|
||||
<path
|
||||
d="M530.8928 703.1296a41.472 41.472 0 0 1-35.7376-19.8144l-2.7136-5.5808L278.272 394.752a18.7392 18.7392 0 0 1-2.048-8.1408 19.968 19.968 0 0 1 20.48-19.3536c4.608 0 8.8576 1.4336 12.288 3.84l234.3936 139.9296a64.4096 64.4096 0 0 0 54.528 5.9392L1116.2624 204.8C1004.9536 80.896 821.76 0 614.4 0 275.0464 0 0 216.576 0 483.6352c0 145.7152 82.7392 276.8896 212.2752 365.5168a38.1952 38.1952 0 0 1 17.2032 31.488 44.4928 44.4928 0 0 1-2.1504 12.3904l-27.6992 97.4848c-1.3312 4.608-3.328 9.3696-3.328 14.1312 0 10.752 9.216 19.3536 20.48 19.3536 4.4032 0 8.0384-1.536 11.776-3.584l134.5536-73.3184c10.1376-5.5296 20.7872-8.96 32.6144-8.96 6.2976 0 12.288 0.9216 18.0736 2.5088 62.72 17.0496 130.4576 26.5728 200.5504 26.5728C953.7024 967.168 1228.8 750.592 1228.8 483.6352c0-80.9472-25.4464-157.1328-70.0416-224.1024l-604.9792 436.992-4.4544 2.4064a42.1376 42.1376 0 0 1-18.432 4.1984z"
|
||||
fill="#FFFFFF"
|
||||
></path>
|
||||
</svg>
|
||||
<p className="text-white text-base ml-1">微信支付</p>
|
||||
</button>
|
||||
)}
|
||||
{productList.length > 0 && (
|
||||
<div className="flex mt-auto mb-12">
|
||||
<div className="basis-1/2 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 className="basis-1/2 px-2">
|
||||
<button
|
||||
onClick={() => createOrder("wxpay_h5")}
|
||||
className="flex flex-row h-12 w-full items-center justify-center bg-primary rounded-full py-2"
|
||||
>
|
||||
<svg viewBox="0 0 1228 1024" width="18" height="18">
|
||||
<path
|
||||
d="M530.8928 703.1296a41.472 41.472 0 0 1-35.7376-19.8144l-2.7136-5.5808L278.272 394.752a18.7392 18.7392 0 0 1-2.048-8.1408 19.968 19.968 0 0 1 20.48-19.3536c4.608 0 8.8576 1.4336 12.288 3.84l234.3936 139.9296a64.4096 64.4096 0 0 0 54.528 5.9392L1116.2624 204.8C1004.9536 80.896 821.76 0 614.4 0 275.0464 0 0 216.576 0 483.6352c0 145.7152 82.7392 276.8896 212.2752 365.5168a38.1952 38.1952 0 0 1 17.2032 31.488 44.4928 44.4928 0 0 1-2.1504 12.3904l-27.6992 97.4848c-1.3312 4.608-3.328 9.3696-3.328 14.1312 0 10.752 9.216 19.3536 20.48 19.3536 4.4032 0 8.0384-1.536 11.776-3.584l134.5536-73.3184c10.1376-5.5296 20.7872-8.96 32.6144-8.96 6.2976 0 12.288 0.9216 18.0736 2.5088 62.72 17.0496 130.4576 26.5728 200.5504 26.5728C953.7024 967.168 1228.8 750.592 1228.8 483.6352c0-80.9472-25.4464-157.1328-70.0416-224.1024l-604.9792 436.992-4.4544 2.4064a42.1376 42.1376 0 0 1-18.432 4.1984z"
|
||||
fill="#FFFFFF"
|
||||
></path>
|
||||
</svg>
|
||||
<p className="text-white text-base ml-1">微信支付</p>
|
||||
</button>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
)}
|
||||
{iapProductList.length > 0 && (
|
||||
<div className="flex mt-auto mb-12">
|
||||
<div className="w-full px-2">
|
||||
<button
|
||||
onClick={() => createOrder("iap")}
|
||||
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="M645.289723 165.758826C677.460161 122.793797 701.865322 62.036894 693.033384 0c-52.607627 3.797306-114.089859 38.61306-149.972271 84.010072-32.682435 41.130375-59.562245 102.313942-49.066319 161.705521 57.514259 1.834654 116.863172-33.834427 151.294929-79.956767zM938.663644 753.402663c-23.295835 52.820959-34.517089 76.415459-64.511543 123.177795-41.855704 65.279538-100.905952 146.644295-174.121433 147.198957-64.980873 0.725328-81.748754-43.30636-169.982796-42.751697-88.234042 0.46933-106.623245 43.605024-171.732117 42.965029-73.130149-0.682662-129.065752-74.026142-170.964122-139.348347-117.11917-182.441374-129.44975-396.626524-57.172928-510.545717 51.327636-80.895427 132.393729-128.212425 208.553189-128.212425 77.482118 0 126.207106 43.519692 190.377318 43.519692 62.292892 0 100.137957-43.647691 189.779989-43.647691 67.839519 0 139.732344 37.802399 190.889315 103.03927-167.678812 94.036667-140.543004 339.069598 28.885128 404.605134z"
|
||||
fill="#FFFFFF"
|
||||
></path>
|
||||
</svg>
|
||||
<p className="text-white text-base ml-1">立即充值</p>
|
||||
</button>
|
||||
</div>
|
||||
</div>
|
||||
)}
|
||||
</div>
|
||||
</section>
|
||||
);
|
||||
|
|
|
|||
100
app/vip/page.jsx
100
app/vip/page.jsx
|
|
@ -16,10 +16,11 @@ import vipright4 from "@/public/images/vipright4.png";
|
|||
import viptitle from "@/public/images/viptitle.png";
|
||||
import Link from "next/link";
|
||||
import { Toast } from "antd-mobile";
|
||||
import { useRouter } from "next/navigation";
|
||||
import { useRouter, useSearchParams } from "next/navigation";
|
||||
|
||||
export default function Vip() {
|
||||
const router = useRouter();
|
||||
const searchParams = useSearchParams();
|
||||
|
||||
const alipayBlock = () => {
|
||||
const base = webviewBaseRequest();
|
||||
|
|
@ -32,6 +33,13 @@ export default function Vip() {
|
|||
});
|
||||
};
|
||||
|
||||
//检查是否需要使用金币支付
|
||||
const [useCoinpay, setUseCoinpay] = useState(false);
|
||||
useEffect(() => {
|
||||
const useCoinpayStr = searchParams.get("use_coinpay");
|
||||
setUseCoinpay(useCoinpayStr === "1" ? true : false);
|
||||
}, []);
|
||||
|
||||
//检查用户是否是vip
|
||||
const [isVip, setIsVip] = useState(false);
|
||||
const [name, setName] = useState("");
|
||||
|
|
@ -98,6 +106,25 @@ export default function Vip() {
|
|||
return;
|
||||
}
|
||||
|
||||
//金币支付
|
||||
if (type === "coin") {
|
||||
window.ReactNativeWebView.postMessage(
|
||||
JSON.stringify({
|
||||
type: "COINPAY",
|
||||
data: {
|
||||
url: "/api/vas/create_order",
|
||||
body: { product_id: "membership" },
|
||||
product: "会员资格",
|
||||
coinPrice: 490,
|
||||
validity: "永久",
|
||||
info: "",
|
||||
onPurchaseDone: () => {},
|
||||
},
|
||||
})
|
||||
);
|
||||
return;
|
||||
}
|
||||
|
||||
setIsLoading(true);
|
||||
|
||||
const signature = generateSignature(body);
|
||||
|
|
@ -245,35 +272,56 @@ export default function Vip() {
|
|||
<div className="flex flex-col w-full fixed left-0 bottom-0 z-20">
|
||||
<div className="h-12 bg-gradient-to-t from-[#07050AE5] to-[#07050A00]"></div>
|
||||
<div className="flex flex-col pt-3 pb-11 px-4 bg-[#07050AE5]">
|
||||
<div className="flex flex-row justify-between">
|
||||
<div className="basis-1/2 px-2">
|
||||
<div
|
||||
onClick={() => createOrder("alipay_h5")}
|
||||
className="flex flex-row cursor-pointer gap-1.5 h-11 items-center justify-center bg-primary rounded-full"
|
||||
>
|
||||
<Image src={alipay} width={22} alt="" />
|
||||
<p className="text-white text-base font-medium whitespace-nowrap">
|
||||
支付宝支付
|
||||
</p>
|
||||
{useCoinpay ? (
|
||||
<div className="flex flex-row justify-between">
|
||||
<div className="w-full px-2">
|
||||
<div
|
||||
onClick={() => createOrder("coin")}
|
||||
className="flex flex-row cursor-pointer gap-1.5 h-11 items-center justify-center bg-primary rounded-full"
|
||||
>
|
||||
<svg viewBox="0 0 1024 1024" width="18" height="18">
|
||||
<path
|
||||
d="M512 967.0656c-251.392 0-455.0656-203.776-455.0656-455.0656S260.608 56.9344 512 56.9344s455.0656 203.776 455.0656 455.0656S763.392 967.0656 512 967.0656z m-57.344-540.3648h-84.8896c-15.6672 0-28.4672 12.6976-28.4672 28.4672 0 15.6672 12.6976 28.4672 28.4672 28.4672h113.7664v85.2992H369.7664c-15.6672 0-28.4672 12.6976-28.4672 28.4672 0 15.6672 12.6976 28.4672 28.4672 28.4672h113.7664v113.7664c0 15.6672 12.6976 28.4672 28.4672 28.4672s28.4672-12.6976 28.4672-28.4672V625.7664h113.7664c15.6672 0 28.4672-12.6976 28.4672-28.4672 0-15.6672-12.6976-28.4672-28.4672-28.4672H540.4672v-85.2992h113.7664c15.6672 0 28.4672-12.6976 28.4672-28.4672 0-15.6672-12.6976-28.4672-28.4672-28.4672h-82.944l81.92-81.92c11.0592-11.0592 11.0592-29.0816 0-40.2432-11.0592-11.0592-29.0816-11.0592-40.2432 0L513.024 404.48l-99.9424-99.9424c-11.0592-11.0592-29.0816-11.0592-40.2432 0-11.0592 11.0592-11.0592 29.0816 0 40.2432l81.8176 81.92z"
|
||||
fill="#FFFFFF"
|
||||
></path>
|
||||
</svg>
|
||||
<p className="text-white text-base font-medium whitespace-nowrap">
|
||||
金币支付
|
||||
</p>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
<div className="basis-1/2 px-2">
|
||||
<div
|
||||
onClick={() => createOrder("wxpay_h5")}
|
||||
className="flex flex-row cursor-pointer gap-1.5 h-11 items-center justify-center bg-primary rounded-full"
|
||||
>
|
||||
<svg viewBox="0 0 1228 1024" width="18" height="18">
|
||||
<path
|
||||
d="M530.8928 703.1296a41.472 41.472 0 0 1-35.7376-19.8144l-2.7136-5.5808L278.272 394.752a18.7392 18.7392 0 0 1-2.048-8.1408 19.968 19.968 0 0 1 20.48-19.3536c4.608 0 8.8576 1.4336 12.288 3.84l234.3936 139.9296a64.4096 64.4096 0 0 0 54.528 5.9392L1116.2624 204.8C1004.9536 80.896 821.76 0 614.4 0 275.0464 0 0 216.576 0 483.6352c0 145.7152 82.7392 276.8896 212.2752 365.5168a38.1952 38.1952 0 0 1 17.2032 31.488 44.4928 44.4928 0 0 1-2.1504 12.3904l-27.6992 97.4848c-1.3312 4.608-3.328 9.3696-3.328 14.1312 0 10.752 9.216 19.3536 20.48 19.3536 4.4032 0 8.0384-1.536 11.776-3.584l134.5536-73.3184c10.1376-5.5296 20.7872-8.96 32.6144-8.96 6.2976 0 12.288 0.9216 18.0736 2.5088 62.72 17.0496 130.4576 26.5728 200.5504 26.5728C953.7024 967.168 1228.8 750.592 1228.8 483.6352c0-80.9472-25.4464-157.1328-70.0416-224.1024l-604.9792 436.992-4.4544 2.4064a42.1376 42.1376 0 0 1-18.432 4.1984z"
|
||||
fill="#FFFFFF"
|
||||
></path>
|
||||
</svg>
|
||||
<p className="text-white text-base font-medium whitespace-nowrap">
|
||||
微信支付
|
||||
</p>
|
||||
) : (
|
||||
<div className="flex flex-row justify-between">
|
||||
<div className="basis-1/2 px-2">
|
||||
<div
|
||||
onClick={() => createOrder("alipay_h5")}
|
||||
className="flex flex-row cursor-pointer gap-1.5 h-11 items-center justify-center bg-primary rounded-full"
|
||||
>
|
||||
<Image src={alipay} width={22} alt="" />
|
||||
<p className="text-white text-base font-medium whitespace-nowrap">
|
||||
支付宝支付
|
||||
</p>
|
||||
</div>
|
||||
</div>
|
||||
<div className="basis-1/2 px-2">
|
||||
<div
|
||||
onClick={() => createOrder("wxpay_h5")}
|
||||
className="flex flex-row cursor-pointer gap-1.5 h-11 items-center justify-center bg-primary rounded-full"
|
||||
>
|
||||
<svg viewBox="0 0 1228 1024" width="18" height="18">
|
||||
<path
|
||||
d="M530.8928 703.1296a41.472 41.472 0 0 1-35.7376-19.8144l-2.7136-5.5808L278.272 394.752a18.7392 18.7392 0 0 1-2.048-8.1408 19.968 19.968 0 0 1 20.48-19.3536c4.608 0 8.8576 1.4336 12.288 3.84l234.3936 139.9296a64.4096 64.4096 0 0 0 54.528 5.9392L1116.2624 204.8C1004.9536 80.896 821.76 0 614.4 0 275.0464 0 0 216.576 0 483.6352c0 145.7152 82.7392 276.8896 212.2752 365.5168a38.1952 38.1952 0 0 1 17.2032 31.488 44.4928 44.4928 0 0 1-2.1504 12.3904l-27.6992 97.4848c-1.3312 4.608-3.328 9.3696-3.328 14.1312 0 10.752 9.216 19.3536 20.48 19.3536 4.4032 0 8.0384-1.536 11.776-3.584l134.5536-73.3184c10.1376-5.5296 20.7872-8.96 32.6144-8.96 6.2976 0 12.288 0.9216 18.0736 2.5088 62.72 17.0496 130.4576 26.5728 200.5504 26.5728C953.7024 967.168 1228.8 750.592 1228.8 483.6352c0-80.9472-25.4464-157.1328-70.0416-224.1024l-604.9792 436.992-4.4544 2.4064a42.1376 42.1376 0 0 1-18.432 4.1984z"
|
||||
fill="#FFFFFF"
|
||||
></path>
|
||||
</svg>
|
||||
<p className="text-white text-base font-medium whitespace-nowrap">
|
||||
微信支付
|
||||
</p>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
)}
|
||||
<p className="text-secondary text-xs font-medium mt-4 text-center mb-1">
|
||||
确认购买即视为同意
|
||||
<Link
|
||||
|
|
|
|||
Loading…
Reference in New Issue