261 lines
12 KiB
JavaScript
261 lines
12 KiB
JavaScript
"use client";
|
||
|
||
import React, { useState, useEffect } from "react";
|
||
import { Checkbox, Toast } from "antd-mobile";
|
||
import { useSearchParams } from "next/navigation";
|
||
import { useRouter } from "next/navigation";
|
||
import { getCookie } from "cookies-next";
|
||
|
||
export default function Pay() {
|
||
const searchParams = useSearchParams();
|
||
const router = useRouter();
|
||
|
||
useEffect(() => {
|
||
const handleEvent = async () => {
|
||
const clickId = getCookie("clickid");
|
||
await fetch("/event/v2/conversion", {
|
||
method: "POST",
|
||
headers: {
|
||
"Content-Type": "application/json",
|
||
},
|
||
body: JSON.stringify({
|
||
event_type: "game_addiction",
|
||
context: {
|
||
ad: {
|
||
callback: clickId,
|
||
},
|
||
},
|
||
timestamp: new Date().getTime(),
|
||
}),
|
||
});
|
||
};
|
||
handleEvent();
|
||
}, []);
|
||
|
||
const [time, setTime] = useState(30 * 60 * 100);
|
||
|
||
useEffect(() => {
|
||
const interval = setInterval(() => {
|
||
setTime((prevTime) => {
|
||
if (prevTime <= 1) {
|
||
clearInterval(interval);
|
||
return 0;
|
||
}
|
||
return prevTime - 1;
|
||
});
|
||
}, 10);
|
||
|
||
return () => clearInterval(interval);
|
||
}, []);
|
||
|
||
const formatTime = (time) => {
|
||
const minutes = String(Math.floor((time / (100 * 60)) % 60)).padStart(
|
||
2,
|
||
"0"
|
||
);
|
||
const seconds = String(Math.floor((time / 100) % 60)).padStart(2, "0");
|
||
const centiseconds = String(time % 100).padStart(2, "0");
|
||
return {
|
||
minutes: minutes,
|
||
seconds: seconds,
|
||
centiseconds: centiseconds,
|
||
};
|
||
};
|
||
|
||
const [payType, setPayType] = useState("alipay_h5");
|
||
|
||
const createOreder = async (tpye) => {
|
||
const clickId = getCookie("clickid");
|
||
const id = searchParams.get("id");
|
||
const b_did = localStorage.getItem("b_did");
|
||
|
||
// 获取当前URL
|
||
var currentUrl = window.location.href;
|
||
// 解析URL
|
||
var url = new URL(currentUrl);
|
||
// 获取根目录
|
||
var rootDirectory = url.protocol + "//" + url.hostname + "/";
|
||
|
||
const response = await fetch("/outer/vas/create_order", {
|
||
method: "POST",
|
||
headers: {
|
||
"Content-Type": "application/json",
|
||
},
|
||
body: JSON.stringify({
|
||
b_did: b_did,
|
||
raven_qid: parseInt(id, 10),
|
||
product_id: "outer_raven",
|
||
pay_type: tpye,
|
||
from: "outer_raven",
|
||
raven_callback: clickId,
|
||
return_url: `${rootDirectory}iqtest/result?id=${id}`,
|
||
}),
|
||
});
|
||
const data = await response.json();
|
||
if (data.ret === -1) {
|
||
Toast.show({
|
||
content: data.msg,
|
||
});
|
||
return;
|
||
}
|
||
router.push(data.data.alipay_h5_param_str);
|
||
};
|
||
|
||
return (
|
||
<section className="flex flex-col flex-1 bg-[url('/svg/background.svg')] max-w-screen-sm w-full p-4">
|
||
<div className="flex flex-col items-center bg-white rounded-2xl overflow-hidden">
|
||
<div className="flex items-center justify-center py-4 bg-yellow-200 w-full border-b-2 border-dashed border-black">
|
||
<h1 className="text-2xl text-black font-bold">
|
||
恭喜，您的智商报告已生成
|
||
</h1>
|
||
</div>
|
||
<div className="flex flex-col p-4">
|
||
<div className="flex flex-row flex-wrap gap-y-2 mt-2 mb-4">
|
||
{[
|
||
"综合智力分数",
|
||
"针对性智力总结",
|
||
"多维度智力分析",
|
||
"职业发展方向",
|
||
"智力练习建议",
|
||
"学习方式指导",
|
||
].map((item) => (
|
||
<div key={item} className="flex flex-row items-center basis-1/2">
|
||
<img className="w-6" src="/svg/checked.svg" alt="" />
|
||
<p className="text-base font-semibold">{item}</p>
|
||
</div>
|
||
))}
|
||
</div>
|
||
<p className="text-base">
|
||
本测评由<span className="text-purple-400">专业心理测评团队</span>
|
||
精心设计，每人仅限测一次，内容全面涵盖智力分析的各个方面。目前已有
|
||
<span className="text-purple-400">153,759</span>
|
||
人参与测试，好评率高达
|
||
<span className="text-purple-400">98.64%！</span>
|
||
</p>
|
||
<hr className="my-4 w-full" />
|
||
<div className="flex flex-row justify-between">
|
||
<p className="line-through text-gray-400 text-base">原价：¥30</p>
|
||
<p className="font-semibold text-base">限时优惠倒计时</p>
|
||
</div>
|
||
<div className="flex flex-row justify-between">
|
||
<div className="flex flex-row gap-2 items-center">
|
||
<p className="bg-purple-500 p-1 rounded text-white text-xs">
|
||
优惠价
|
||
</p>
|
||
<p className="text-purple-500 text-lg font-bold">¥19.9</p>
|
||
</div>
|
||
<p className="font-semibold text-base text-purple-500">
|
||
<span className="inline-block min-w-6 text-center">
|
||
{formatTime(time).minutes}
|
||
</span>
|
||
<span className="w-4">:</span>
|
||
<span className="inline-block min-w-6 text-center">
|
||
{formatTime(time).seconds}
|
||
</span>
|
||
<span className="w-4">:</span>
|
||
<span className="inline-block min-w-6 text-center">
|
||
{formatTime(time).centiseconds}
|
||
</span>
|
||
</p>
|
||
</div>
|
||
<hr className="my-4 w-full" />
|
||
<div className="flex flex-col gap-4">
|
||
{/* <div
|
||
onClick={() => setPayType("wechat_pay")}
|
||
className="flex flex-row justify-between items-center"
|
||
>
|
||
<div className="flex flex-row gap-4">
|
||
<img className="w-6" src="/svg/wechatpay.svg" alt="" />
|
||
<p className="text-base">微信支付</p>
|
||
</div>
|
||
<Checkbox checked={payType === "wechat_pay"} />
|
||
</div> */}
|
||
<div
|
||
onClick={() => setPayType("alipay_h5")}
|
||
className="flex flex-row justify-between items-center"
|
||
>
|
||
<div className="flex flex-row gap-4">
|
||
<img className="w-6" src="/svg/alipay.svg" alt="" />
|
||
<p className="text-base">支付宝</p>
|
||
</div>
|
||
<Checkbox checked={payType === "alipay_h5"} />
|
||
</div>
|
||
</div>
|
||
<div
|
||
onClick={() => createOreder("alipay_h5")}
|
||
className="cursor-pointer flex items-center justify-center w-full py-2 border-2 border-black rounded-full bg-yellow-200 mt-8"
|
||
>
|
||
<p className="text-2xl font-bold">立即解锁您的智商报告</p>
|
||
</div>
|
||
</div>
|
||
</div>
|
||
<div className="flex flex-col mt-8 gap-8">
|
||
<div className="flex flex-col bg-white rounded-2xl w-full p-4 gap-4">
|
||
<div className="flex items-center justify-center bg-purple-500 py-2 px-8 rounded-full text-white text-2xl font-medium">
|
||
<img className="w-6 mr-2" src="/svg/locked.svg" alt="" />
|
||
解锁后即可查看
|
||
</div>
|
||
<div className="flex flex-col items-center">
|
||
<h1 className="text-black text-4xl font-bold">
|
||
<span className="blur">130</span>
|
||
<span className="text-base font-normal">分</span>
|
||
</h1>
|
||
<svg viewBox="0 0 3099 1024" width="100" height="50">
|
||
<path
|
||
d="M2216.658824 518.023529c-337.317647-48.188235-674.635294 12.047059-1005.929412 96.376471-397.552941 102.4-783.058824 234.917647-1174.588236 349.364706 6.023529 0 42.164706 6.023529 48.188236 6.023529l114.447059 18.070589c42.164706 6.023529 120.470588 36.141176 162.635294 24.094117 367.435294-108.423529 728.847059-228.894118 1096.282353-331.294117 313.223529-84.329412 668.611765-174.682353 987.858823-126.494118 54.211765 6.023529 54.211765 6.023529 0 0l-228.894117-36.141177z m807.152941-415.623529C2782.870588 60.235294 2553.976471 36.141176 2307.011765 54.211765c-252.988235 18.070588-505.976471 66.258824-752.941177 114.447059C1102.305882 259.011765 662.588235 379.482353 216.847059 487.905882c12.047059 0 42.164706 6.023529 48.188235 6.02353l114.447059 18.070588c42.164706 6.023529 120.470588 36.141176 162.635294 24.094118C945.694118 439.717647 1343.247059 331.294118 1746.823529 240.941176c234.917647-48.188235 469.835294-96.376471 704.752942-120.470588 108.423529-12.047059 210.823529-24.094118 319.247058-24.094117h144.564706c24.094118 0 48.188235 0 66.258824 6.023529h42.164706c6.023529 6.023529 12.047059 6.023529 18.070588 6.023529l42.164706 6.02353c54.211765 6.023529-54.211765-12.047059-60.235294-12.047059z"
|
||
fill="#FF595B"
|
||
></path>
|
||
</svg>
|
||
<h2 className="text-black text-2xl font-bold my-4">
|
||
您的智商处于<span className="blur">优秀</span>
|
||
</h2>
|
||
<div className="bg-blue-100 rounded-lg p-4 relative">
|
||
<h2 className="text-xl font-bold text-blue-900">总体评价</h2>
|
||
<p className="text-blue-900 text-base blur-sm">
|
||
您的智力水平在人群中处于优秀范围，具备良好的学习能力和适应能力。您能够应对各种复杂任务，并在多数情况下表现出色。您的思维敏捷，理解能力强，是团队中的佼佼者，常常能够在工作中提出切实可行的解决方案。
|
||
</p>
|
||
<div className="absolute bottom-0 left-0 w-full h-full flex flex-row items-center justify-center">
|
||
<div className="flex flex-row items-center justify-center bg-purple-400 px-4 py-2 rounded-full">
|
||
<img className="w-6 mr-2" src="/svg/locked.svg" alt="" />
|
||
<p className="text-white text-base">解锁后即可查看</p>
|
||
</div>
|
||
</div>
|
||
</div>
|
||
<div className="flex flex-col bg-blue-100 rounded-lg p-4 gap-2 mt-4 relative">
|
||
<h2 className="text-xl font-bold text-blue-900">综合建议</h2>
|
||
<div className="absolute z-20 bottom-0 left-0 w-full h-full flex flex-row items-center justify-center">
|
||
<div className="flex flex-row items-center justify-center bg-purple-400 px-4 py-2 rounded-full">
|
||
<img className="w-6 mr-2" src="/svg/locked.svg" alt="" />
|
||
<p className="text-white text-base">解锁后即可查看</p>
|
||
</div>
|
||
</div>
|
||
<p className="text-blue-900 text-base blur-sm">
|
||
<strong>1、</strong>
|
||
深化自己的专业知识，成为特定领域的专家。通过不断学习和实践，提升自己的专业素养和竞争力，争取在所在领域取得突出的成就。
|
||
</p>
|
||
<p className="text-blue-900 text-base blur-sm">
|
||
<strong>2、</strong>
|
||
培养自己的创造力和批判性思维，以便在解决问题时提出新颖的观点。学会从不同角度思考问题，寻求创新的解决方案，不断挑战自己的思维边界。
|
||
</p>
|
||
<p className="text-blue-900 text-base blur-sm">
|
||
<strong>3、</strong>
|
||
考虑从事需要良好智力和分析能力的职业，如金融分析、法律或管理咨询。在这些领域中，您可以发挥自己的优势，实现个人价值，为社会的发展做出贡献。
|
||
</p>
|
||
</div>
|
||
<div className="flex flex-col bg-blue-100 rounded-lg p-4 gap-2 mt-4">
|
||
<p className="text-blue-900 text-base">
|
||
除了总体得分情况外，我们还考察了五个维度的能力水平：知觉辨别、类同比较、比较推理、系列关系推理、抽象思维。以下是您在这五个维度的分数分布情况，以及我们对您的提升建议。⬇️
|
||
⬇️ ⬇️
|
||
</p>
|
||
</div>
|
||
<div className="flex flex-row items-center justify-center bg-purple-400 rounded-lg p-4 mt-4 w-full">
|
||
<img className="w-6 mr-2" src="/svg/locked.svg" alt="" />
|
||
<p className="text-white text-base">剩余2136字...</p>
|
||
</div>
|
||
</div>
|
||
</div>
|
||
</div>
|
||
</section>
|
||
);
|
||
}
|