tiefen_space_web/app/purchased/page.jsx

343 lines
12 KiB
JavaScript
Raw Blame History

This file contains ambiguous Unicode characters

This file contains Unicode characters that might be confused with other characters. If you think that this is intentional, you can safely ignore this warning. Use the Escape button to reveal them.

"use client";
import React, { useState, useEffect } from "react";
import AuthBar from "@/components/AuthBar";
import { Toast } from "antd-mobile";
import { checkAuth } from "@/utils/auth";
import { useRouter } from "next/navigation";
import baseRequest from "@/utils/baseRequest";
import { generateSignature } from "@/utils/crypto";
export default function Purchased() {
//如果没登录直接跳转下载页
const router = useRouter();
useEffect(() => {
const prepare = async () => {
const isLogined = await checkAuth();
if (!isLogined) {
router.replace("/auth/login/phonenumlogin");
}
};
prepare();
}, []);
//获取订单数据
const [data, setData] = useState([]);
useEffect(() => {
const getData = async () => {
try {
const base = baseRequest();
const signature = generateSignature({
offset: 0,
limit: 99,
...base,
});
const detailResponse = await fetch(
`/api/vas/h5_get_unlock_wechat_list?signature=${signature}`,
{
method: "POST",
headers: {
"Content-Type": "application/json",
},
body: JSON.stringify({
offset: 0,
limit: 99,
...base,
}),
}
);
const detailData = await detailResponse.json();
if (detailData.ret === -1) {
Toast.show({
content: detailData.msg,
});
return;
}
setData(detailData.data.list);
} catch (error) {
console.error(error);
}
};
getData();
}, []);
const [currentWechat, setCurrentWechat] = useState("");
const getWechat = async (streamerMid) => {
// 获取微信
try {
const base = baseRequest();
const signature = generateSignature({
uid: streamerMid,
...base,
});
const detailResponse = await fetch(
`/api/vas/query_wechat?signature=${signature}`,
{
method: "POST",
headers: {
"Content-Type": "application/json",
},
body: JSON.stringify({
uid: streamerMid,
...base,
}),
}
);
const detailData = await detailResponse.json();
if (detailData.ret === -1) {
Toast.show({
content: detailData.msg,
});
return;
}
setCurrentWechat(detailData.data.wechat_contact);
} catch (error) {
console.error(error);
}
};
const DirectGetWechatItem = ({ item }) => {
//点击查看微信
const handleClick = async () => {
await getWechat(item?.account.mid);
setTimeout(
() => document.getElementById("get_wechat_modal").showModal(),
100
);
};
//点击主播
const handleNavigation = () => {
router.push(`../${item?.account.user_id}`);
};
let orderLabel;
switch (item.order_status) {
case 3:
orderLabel =
item.lock_type === 1
? `等待${item.account.name}添加您的微信`
: "请查看并添加微信";
break;
case 4:
orderLabel = `${item.account.name}已确认完成添加`;
break;
case 5:
orderLabel = `订单已完成`;
break;
case 6:
orderLabel = `已退款`;
break;
default:
orderLabel = "";
}
return (
<div className="flex flex-row justify-between items-center py-2 border-b-2 border-neutral">
<div onClick={handleNavigation} className="flex flex-row items-center">
<img
className="w-12 h-12 rounded-full"
src={item.account?.avatar?.images[0].urls[0]}
alt=""
/>
<div className="flex flex-col ml-2">
<p className="text-base text-white font-medium">
{item.account?.name}
</p>
<p className="text-sm text-secondary font-medium">{orderLabel}</p>
</div>
</div>
{item.lock_type === 0 && item.order_status !== 6 && (
<button
className="btn btn-sm btn-primary text-white rounded-full"
onClick={handleClick}
>
查看微信
</button>
)}
</div>
);
};
const GetWechatModal = () => {
const handleCopy = () => {
navigator.clipboard.writeText(currentWechat);
Toast.show({
content: "复制成功",
});
};
return (
<dialog id="get_wechat_modal" className="modal">
<div className="modal-box bg-[#13121F]">
<p className="text-white text-base font-medium text-center mb-4">
Ta的微信号<span>{currentWechat}</span>
</p>
<div className="flex flex-row">
<form method="dialog" className="flex flex-row flex-1 mx-2">
<button
className="flex flex-row flex-1 mx-2 items-center justify-center bg-[#FF669E] rounded-lg py-2"
onClick={handleCopy}
>
<p className="text-white text-base ml-1">复制</p>
</button>
<button className="flex flex-row flex-1 items-center justify-center border border-secondary rounded-lg py-2">
<p className="text-secondary text-base ml-1">取消</p>
</button>
</form>
</div>
</div>
</dialog>
);
};
const SubmitUserWechatItem = ({ item }) => {
const [wechat, setWechat] = useState("");
const [remarks, setRemarks] = useState("");
const [status, setStatus] = useState("pending");
const handleSubmit = async (e) => {
e.preventDefault();
if (!wechat) {
Toast.show({
content: "请填写微信号",
});
return;
}
//提交用户微信号
try {
const base = baseRequest();
const signature = generateSignature({
order_id: item.order_id,
wechat: wechat,
note: remarks,
...base,
});
const detailResponse = await fetch(
`/api/vas/consumer_fill_contact?signature=${signature}`,
{
method: "POST",
headers: {
"Content-Type": "application/json",
},
body: JSON.stringify({
order_id: item.order_id,
wechat: wechat,
note: remarks,
...base,
}),
}
);
const detailData = await detailResponse.json();
if (detailData.ret === -1) {
Toast.show({
content: detailData.msg,
});
return;
}
//提交成功后隐藏form并显示toast
setStatus("inprogress");
Toast.show({
content: "提交成功,请留意好友请求",
});
} catch (error) {
console.error(error);
}
};
return (
<div className="flex flex-col py-2 border-b-2 border-neutral">
<div className="flex flex-row items-center">
<img
className="w-12 h-12 rounded-full"
src={item.account?.avatar?.images[0].urls[0]}
alt=""
/>
<div className="flex flex-col ml-2">
<p className="text-base text-white font-medium">
{item.account?.name}
</p>
<p className="text-sm text-secondary font-medium">
{status === "pending"
? "请填写您的微信等待Ta添加您"
: "已提交您的微信,请留意好友请求"}
</p>
</div>
</div>
{status === "pending" && (
<form onSubmit={handleSubmit}>
<p className="text-white text-base mt-2">您的微信</p>
<input
type="text"
name="wechat"
placeholder="请输入微信号"
value={wechat}
onChange={(e) => setWechat(e.target.value)}
className="input input-bordered input-md input-primary w-full max-w-sm"
/>
<p className="text-white text-base mt-2">备注</p>
<input
type="text"
name="remarks"
placeholder="若需要填写验证信息,请备注答案"
value={remarks}
onChange={(e) => setRemarks(e.target.value)}
className="input input-bordered input-md input-primary w-full max-w-sm"
/>
<p className="text-error text-xs mt-2">
若超72小时仍未收到Ta的好友申请请前往APP联系客服退款
</p>
<button className="btn btn-sm btn-primary text-white rounded-full w-full max-w-sm mt-2">
提交
</button>
</form>
)}
</div>
);
};
return (
<section className="flex flex-col container relative p-4">
<AuthBar />
<h1 className="text-2xl text-white font-medium mb-4">已购买</h1>
{data.length === 0 && (
<div className="flex flex-col mt-4 w-full items-center">
<svg viewBox="0 0 1024 1024" width="120" height="120">
<path
d="M102.4 896a409.6 51.2 0 1 0 819.2 0 409.6 51.2 0 1 0-819.2 0Z"
fill="#4A68CC"
opacity=".1"
></path>
<path
d="M116.736 376.832c0 8.704 6.656 15.36 15.36 15.36s15.36-6.656 15.36-15.36-6.656-15.36-15.36-15.36c-8.192 0-15.36 7.168-15.36 15.36zM926.72 832c-19.456 5.12-23.552 9.216-28.16 28.16-5.12-19.456-9.216-23.552-28.16-28.16 18.944-5.12 23.552-9.216 28.16-28.16 4.608 18.944 8.704 23.552 28.16 28.16zM202.24 323.072c-25.088 6.656-30.208 11.776-36.864 36.864-6.656-25.088-11.776-30.208-36.864-36.864 25.088-6.656 30.208-12.288 36.864-36.864 6.144 25.088 11.776 30.208 36.864 36.864zM816.64 235.008c-15.36 4.096-18.432 7.168-22.528 22.528-4.096-15.36-7.168-18.432-22.528-22.528 15.36-4.096 18.432-7.168 22.528-22.528 3.584 15.36 7.168 18.432 22.528 22.528zM882.688 156.16c-39.936 10.24-48.128 18.944-58.88 58.88-10.24-39.936-18.944-48.128-58.88-58.88 39.936-10.24 48.128-18.944 58.88-58.88 10.24 39.424 18.944 48.128 58.88 58.88z"
fill="#4A68CC"
opacity=".5"
></path>
<path
d="M419.84 713.216v4.096l33.792 31.232 129.536-62.976L465.92 760.832v36.864l18.944-18.432v-0.512 0.512l18.944 18.432 100.352-122.88v-4.096z"
fill="#4A68CC"
opacity=".2"
></path>
<path
d="M860.16 551.936v-1.024c0-1.024-0.512-1.536-0.512-2.56v-0.512l-110.08-287.232c-15.872-48.64-60.928-81.408-112.128-81.408H387.072c-51.2 0-96.256 32.768-112.128 81.408L164.864 547.84v0.512c-0.512 1.024-0.512 1.536-0.512 2.56V757.76c0 65.024 52.736 117.76 117.76 117.76h460.8c65.024 0 117.76-52.736 117.76-117.76v-204.8c-0.512-0.512-0.512-0.512-0.512-1.024zM303.616 271.36s0-0.512 0.512-0.512C315.392 233.984 349.184 209.92 387.072 209.92h249.856c37.888 0 71.68 24.064 83.456 60.416 0 0 0 0.512 0.512 0.512l101.888 266.24H588.8c-8.704 0-15.36 6.656-15.36 15.36 0 33.792-27.648 61.44-61.44 61.44s-61.44-27.648-61.44-61.44c0-8.704-6.656-15.36-15.36-15.36H201.728L303.616 271.36zM829.44 757.76c0 48.128-38.912 87.04-87.04 87.04H281.6c-48.128 0-87.04-38.912-87.04-87.04v-189.44h226.816c7.168 43.52 45.056 76.8 90.624 76.8s83.456-33.28 90.624-76.8H829.44v189.44z"
fill="#4A68CC"
opacity=".5"
></path>
<path
d="M512 578.56c-14.336 0-25.6-11.264-25.6-25.6V501.76H253.44l83.968-219.136 0.512-1.024c7.168-21.504 26.624-35.84 49.152-35.84h249.856c22.528 0 41.984 14.336 49.152 35.84l0.512 1.024L770.56 501.76H537.6v51.2c0 14.336-11.264 25.6-25.6 25.6z"
fill="#4A68CC"
opacity=".2"
></path>
</svg>
<p className="text-base mt-2 font-medium">
若购买成功却未展示订单请刷新页面
</p>
</div>
)}
{data.map((item) => {
if (item.order_status === 2) {
return <SubmitUserWechatItem key={item.order_id} item={item} />;
} else {
return <DirectGetWechatItem key={item.order_id} item={item} />;
}
})}
<GetWechatModal />
</section>
);
}