添加微信支付功能
This commit is contained in:
parent
03c125f5e4
commit
5032d290a7
|
|
@ -66,13 +66,13 @@ export default function Weixin({ params }) {
|
|||
<div className="flex flex-col gap-4 px-4 mt-4">
|
||||
<button
|
||||
onClick={saveQrcode}
|
||||
className="btn btn-primary text-white text-base"
|
||||
className="btn btn-primary rounded-full text-white text-base"
|
||||
>
|
||||
① 点此保存二维码
|
||||
</button>
|
||||
<button
|
||||
onClick={openWechat}
|
||||
className="btn btn-primary text-white text-base"
|
||||
className="btn btn-primary rounded-full text-white text-base"
|
||||
>
|
||||
{device === 0 ? "② 点此打开微信" : "② 点此打开微信扫一扫"}
|
||||
</button>
|
||||
|
|
|
|||
|
|
@ -67,7 +67,7 @@ export default function Pay() {
|
|||
|
||||
//创建充值订单
|
||||
const [isLoading, setIsLoading] = useState(false);
|
||||
const createOrder = async () => {
|
||||
const createOrder = async (type = "alipay_h5") => {
|
||||
if (!selectedPrice.id && !customCoin.selected) {
|
||||
Toast.show({
|
||||
content: "请选择充值档位",
|
||||
|
|
@ -86,7 +86,7 @@ export default function Pay() {
|
|||
...base,
|
||||
product_id: customCoin.selected ? "h5_custom_coin" : selectedPrice.id,
|
||||
custom_coins: customCoin.selected ? customCoin.num : 0,
|
||||
pay_type: "alipay_h5",
|
||||
pay_type: type,
|
||||
from: "app",
|
||||
};
|
||||
const signature = generateSignature(body);
|
||||
|
|
@ -108,7 +108,19 @@ export default function Pay() {
|
|||
});
|
||||
return;
|
||||
}
|
||||
switch (type) {
|
||||
case "alipay_h5":
|
||||
router.push(`${data.data.alipay_h5_param_str}`);
|
||||
break;
|
||||
case "wxpay_native":
|
||||
router.push(
|
||||
`/pay/${encodeURIComponent(data.data.wxpay_native_param_str)}`
|
||||
);
|
||||
break;
|
||||
default:
|
||||
router.push(`${data.data.alipay_h5_param_str}`);
|
||||
break;
|
||||
}
|
||||
} catch (error) {
|
||||
console.error(error);
|
||||
} finally {
|
||||
|
|
@ -116,28 +128,6 @@ export default function Pay() {
|
|||
}
|
||||
};
|
||||
|
||||
//跳转联系客服
|
||||
const handleContact = () => {
|
||||
if (navigator.userAgent.includes("FromWebview")) {
|
||||
window.ReactNativeWebView.postMessage(
|
||||
JSON.stringify({
|
||||
type: "NAVIGATE",
|
||||
data: {
|
||||
page: "MessageDetail",
|
||||
params: {
|
||||
mid: 1,
|
||||
},
|
||||
},
|
||||
})
|
||||
);
|
||||
} else {
|
||||
Toast.show({
|
||||
content: "请下载app联系客服充值",
|
||||
});
|
||||
}
|
||||
document.getElementById("manual_pay_modal").close();
|
||||
};
|
||||
|
||||
const PriceItem = ({ item }) => {
|
||||
const handleClickPrice = (item) => {
|
||||
setSelectedPrice(item);
|
||||
|
|
@ -263,20 +253,12 @@ export default function Pay() {
|
|||
<div className="flex mt-auto mb-12">
|
||||
<div className="basis-1/2 px-2">
|
||||
<button
|
||||
onClick={createOrder}
|
||||
className="flex flex-row w-full items-center justify-center bg-primary rounded-lg py-2"
|
||||
onClick={() => createOrder("alipay_h5")}
|
||||
className="flex flex-row w-full items-center justify-center bg-primary rounded-full py-2"
|
||||
>
|
||||
<svg viewBox="0 0 1024 1024" width="28" height="28">
|
||||
<svg viewBox="0 0 1024 1024" width="18" height="18">
|
||||
<path
|
||||
d="M42.666667 42.666667h938.666666v938.666666H42.666667z"
|
||||
fillOpacity="0"
|
||||
></path>
|
||||
<path
|
||||
d="M981.333333 823.466667v4.266666c0 81.066667-68.266667 149.333333-149.333333 149.333334h-640c-38.4 0-76.8-17.066667-106.666667-42.666667s-42.666667-68.266667-42.666666-106.666667v-640c0-34.133333 17.066667-72.533333 42.666666-102.4s68.266667-42.666667 106.666667-42.666666h640C913.066667 42.666667 981.333333 110.933333 981.333333 192v631.466667z"
|
||||
fill="#009FE9"
|
||||
></path>
|
||||
<path
|
||||
d="M819.2 635.733333c-38.4-12.8-89.6-29.866667-145.066667-51.2 34.133333-64 64-132.266667 81.066667-204.8h-187.733333V324.266667h226.133333v-38.4l-226.133333 4.266666V174.933333h-93.866667c-17.066667 0-21.333333 17.066667-21.333333 17.066667v93.866667H230.4v38.4h226.133333v55.466666H268.8v38.4h375.466667c-17.066667 46.933333-34.133333 93.866667-59.733334 136.533334-119.466667-38.4-243.2-72.533333-324.266666-51.2-38.4 8.533333-76.8 29.866667-102.4 59.733333-85.333333 106.666667-25.6 268.8 162.133333 268.8 110.933333 0 217.6-59.733333 298.666667-162.133333 123.733333 59.733333 366.933333 162.133333 366.933333 162.133333v-145.066667c-4.266667 0-34.133333-4.266667-166.4-51.2zM298.666667 768c-145.066667 0-187.733333-115.2-115.2-179.2 21.333333-21.333333 51.2-34.133333 85.333333-42.666667 85.333333-8.533333 174.933333 34.133333 268.8 81.066667C469.333333 716.8 384 768 298.666667 768z"
|
||||
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>
|
||||
|
|
@ -285,39 +267,20 @@ export default function Pay() {
|
|||
</div>
|
||||
<div className="basis-1/2 px-2">
|
||||
<button
|
||||
onClick={() =>
|
||||
document.getElementById("manual_pay_modal").showModal()
|
||||
}
|
||||
className="flex flex-row w-full items-center justify-center border border-primary rounded-lg py-2"
|
||||
onClick={() => createOrder("wxpay_native")}
|
||||
className="flex flex-row w-full items-center justify-center bg-primary rounded-full py-2"
|
||||
>
|
||||
<p className="text-primary text-base ml-1">人工充值</p>
|
||||
<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>
|
||||
<dialog id="manual_pay_modal" className="modal">
|
||||
<div className="modal-box bg-[#13121F]">
|
||||
<h3 className="font-semibold text-xl text-white text-center">
|
||||
人工充值
|
||||
</h3>
|
||||
<p className="text-secondary text-base font-medium">
|
||||
请联系人工客服进行充值，单笔金额不低于500人民币
|
||||
</p>
|
||||
<div className="flex flex-row">
|
||||
<button
|
||||
onClick={handleContact}
|
||||
className="flex flex-row flex-1 mx-2 items-center justify-center bg-[#FF669E] rounded-lg py-2 mt-4"
|
||||
>
|
||||
<p className="text-white text-base ml-1">联系客服</p>
|
||||
</button>
|
||||
<form method="dialog" className="flex flex-row flex-1 mx-2">
|
||||
<button className="flex flex-row flex-1 items-center justify-center border border-secondary rounded-lg py-2 mt-4">
|
||||
<p className="text-secondary text-base ml-1">取消</p>
|
||||
</button>
|
||||
</form>
|
||||
</div>
|
||||
</div>
|
||||
</dialog>
|
||||
</section>
|
||||
);
|
||||
}
|
||||
|
|
|
|||
|
|
@ -66,13 +66,13 @@ export default function Vip() {
|
|||
|
||||
//创建充值订单
|
||||
const [isLoading, setIsLoading] = useState(false);
|
||||
const createOrder = async () => {
|
||||
const createOrder = async (type = "alipay_h5") => {
|
||||
setIsLoading(true);
|
||||
const base = webviewBaseRequest();
|
||||
const body = {
|
||||
...base,
|
||||
product_id: "membership",
|
||||
pay_type: "alipay_h5",
|
||||
pay_type: type,
|
||||
from: "app",
|
||||
};
|
||||
const signature = generateSignature(body);
|
||||
|
|
@ -88,13 +88,26 @@ export default function Vip() {
|
|||
}
|
||||
);
|
||||
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_native":
|
||||
router.push(
|
||||
`/pay/${encodeURIComponent(data.data.wxpay_native_param_str)}`
|
||||
);
|
||||
break;
|
||||
default:
|
||||
router.push(`${data.data.alipay_h5_param_str}`);
|
||||
break;
|
||||
}
|
||||
} catch (error) {
|
||||
console.error(error);
|
||||
} finally {
|
||||
|
|
@ -102,27 +115,6 @@ export default function Vip() {
|
|||
}
|
||||
};
|
||||
|
||||
//跳转联系客服
|
||||
const handleContact = () => {
|
||||
if (navigator.userAgent.includes("FromWebview")) {
|
||||
window.ReactNativeWebView.postMessage(
|
||||
JSON.stringify({
|
||||
type: "NAVIGATE",
|
||||
data: {
|
||||
page: "MessageDetail",
|
||||
params: {
|
||||
mid: 1,
|
||||
},
|
||||
},
|
||||
})
|
||||
);
|
||||
} else {
|
||||
Toast.show({
|
||||
content: "请下载app联系客服充值",
|
||||
});
|
||||
}
|
||||
};
|
||||
|
||||
if (isFetching) {
|
||||
return (
|
||||
<section className="flex flex-1 justify-center container">
|
||||
|
|
@ -228,25 +220,34 @@ export default function Vip() {
|
|||
<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 pr-2">
|
||||
<div
|
||||
onClick={createOrder}
|
||||
className="flex flex-row cursor-pointer gap-1.5 h-11 items-center bg-primary px-6 rounded-full"
|
||||
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 pl-2">
|
||||
<div
|
||||
onClick={handleContact}
|
||||
className="flex flex-row cursor-pointer gap-1.5 h-11 items-center bg-[#2E2E2E] px-6 rounded-full"
|
||||
onClick={() => createOrder("wxpay_native")}
|
||||
className="flex flex-row cursor-pointer gap-1.5 h-11 items-center justify-center bg-primary rounded-full"
|
||||
>
|
||||
<Image src={contact} width={22} alt="" />
|
||||
<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>
|
||||
<p className="text-secondary text-xs font-medium mt-4 text-center mb-1">
|
||||
确认购买即视为同意
|
||||
<Link
|
||||
|
|
|
|||
Loading…
Reference in New Issue