forked from 77media/video-flow
adds alipay
This commit is contained in:
parent
31691bee50
commit
3022a497d5
@ -23,6 +23,7 @@ import {
|
||||
createPortalSession,
|
||||
redirectToPortal,
|
||||
getUserSubscriptionInfo,
|
||||
buyTokens,
|
||||
} from "@/lib/stripe";
|
||||
import UserCard from "@/components/common/userCard";
|
||||
import { showInsufficientPointsNotification } from "@/utils/notifications";
|
||||
@ -51,6 +52,8 @@ export function TopBar({ collapsed, isDesktop=true }: { collapsed: boolean, isDe
|
||||
const [subscriptionStatus, setSubscriptionStatus] = useState<string>("");
|
||||
const [credits, setCredits] = useState<number>(0);
|
||||
const [isLoadingSubscription, setIsLoadingSubscription] = useState(false);
|
||||
const [isBuyingTokens, setIsBuyingTokens] = useState(false);
|
||||
const [customAmount, setCustomAmount] = useState<string>("");
|
||||
|
||||
// 获取用户订阅信息
|
||||
const fetchSubscriptionInfo = async () => {
|
||||
@ -77,6 +80,49 @@ export function TopBar({ collapsed, isDesktop=true }: { collapsed: boolean, isDe
|
||||
}
|
||||
};
|
||||
|
||||
// 处理Token购买
|
||||
const handleBuyTokens = async (tokenAmount: number) => {
|
||||
if (!currentUser?.id) {
|
||||
console.error("用户未登录");
|
||||
return;
|
||||
}
|
||||
|
||||
if (tokenAmount <= 0) {
|
||||
console.error("Token数量必须大于0");
|
||||
return;
|
||||
}
|
||||
|
||||
setIsBuyingTokens(true);
|
||||
try {
|
||||
const response = await buyTokens({
|
||||
token_amount: tokenAmount,
|
||||
package_type: "basic"
|
||||
});
|
||||
|
||||
if (response.successful && response.data?.checkout_url) {
|
||||
// 跳转到Stripe支付页面
|
||||
window.location.href = response.data.checkout_url;
|
||||
} else {
|
||||
console.error("创建Token购买失败:", response.message);
|
||||
}
|
||||
} catch (error) {
|
||||
console.error("Token购买失败:", error);
|
||||
} finally {
|
||||
setIsBuyingTokens(false);
|
||||
}
|
||||
};
|
||||
|
||||
// 处理自定义金额购买
|
||||
const handleCustomAmountBuy = async () => {
|
||||
const amount = parseInt(customAmount);
|
||||
if (isNaN(amount) || amount <= 0) {
|
||||
console.error("请输入有效的Token数量");
|
||||
return;
|
||||
}
|
||||
await handleBuyTokens(amount);
|
||||
setCustomAmount(""); // 清空输入框
|
||||
};
|
||||
|
||||
useEffect(() => {
|
||||
const token = localStorage.getItem("token");
|
||||
if (token) {
|
||||
@ -299,12 +345,12 @@ export function TopBar({ collapsed, isDesktop=true }: { collapsed: boolean, isDe
|
||||
right: "1rem",
|
||||
zIndex: 9999,
|
||||
}}
|
||||
className="overflow-hidden rounded-xl"
|
||||
className="overflow-hidden rounded-xl max-h-[90vh]"
|
||||
data-alt="user-menu-dropdown"
|
||||
onClick={(e) => e.stopPropagation()}
|
||||
>
|
||||
<UserCard plan_name={currentUser.plan_name}>
|
||||
<div className="relative z-[2] w-full h-full flex flex-col text-white p-3">
|
||||
<div className="relative z-[2] w-full max-h-[80vh] flex flex-col text-white p-3 overflow-y-auto scrollbar-thin scrollbar-thumb-white/20 scrollbar-track-transparent">
|
||||
{/* 顶部用户信息 */}
|
||||
<div className="flex items-center space-x-3 mb-3">
|
||||
<div className="h-10 w-10 rounded-full bg-[#C73BFF] flex items-center justify-center text-white font-bold text-sm flex-shrink-0">
|
||||
@ -323,19 +369,66 @@ export function TopBar({ collapsed, isDesktop=true }: { collapsed: boolean, isDe
|
||||
</div>
|
||||
|
||||
{/* AI 积分 */}
|
||||
<div className="flex items-center justify-center space-x-3 mb-4">
|
||||
<div className="p-2 rounded-full bg-white/10 backdrop-blur-sm">
|
||||
<Sparkles className="h-5 w-5 text-white" />
|
||||
<div className="flex flex-col items-center mb-3">
|
||||
<div className="flex items-center justify-center space-x-3 mb-2">
|
||||
<div className="p-2 rounded-full bg-white/10 backdrop-blur-sm">
|
||||
<Sparkles className="h-5 w-5 text-white" />
|
||||
</div>
|
||||
<span className="text-white text-base font-semibold">
|
||||
{isLoadingSubscription
|
||||
? "Loading..."
|
||||
: `${credits} credits`}
|
||||
</span>
|
||||
</div>
|
||||
|
||||
{/* Purchase Credits 按钮 */}
|
||||
<div className="flex flex-wrap gap-1 justify-center mb-1">
|
||||
<button
|
||||
className="px-2 py-1 text-xs bg-blue-600 text-white rounded hover:bg-blue-700 transition-colors disabled:opacity-50"
|
||||
onClick={() => handleBuyTokens(100)}
|
||||
disabled={isBuyingTokens}
|
||||
>
|
||||
+100 ($1)
|
||||
</button>
|
||||
<button
|
||||
className="px-2 py-1 text-xs bg-blue-600 text-white rounded hover:bg-blue-700 transition-colors disabled:opacity-50"
|
||||
onClick={() => handleBuyTokens(500)}
|
||||
disabled={isBuyingTokens}
|
||||
>
|
||||
+500 ($5)
|
||||
</button>
|
||||
<button
|
||||
className="px-2 py-1 text-xs bg-blue-600 text-white rounded hover:bg-blue-700 transition-colors disabled:opacity-50"
|
||||
onClick={() => handleBuyTokens(1000)}
|
||||
disabled={isBuyingTokens}
|
||||
>
|
||||
+1000 ($10)
|
||||
</button>
|
||||
</div>
|
||||
|
||||
{/* 自定义金额输入 */}
|
||||
<div className="flex items-center space-x-1">
|
||||
<input
|
||||
type="number"
|
||||
value={customAmount}
|
||||
onChange={(e) => setCustomAmount(e.target.value)}
|
||||
placeholder="Custom amount"
|
||||
className="flex-1 px-2 py-1 text-xs bg-white/10 text-white placeholder-white/60 border border-white/20 rounded focus:outline-none focus:border-blue-400"
|
||||
min="1"
|
||||
disabled={isBuyingTokens}
|
||||
/>
|
||||
<button
|
||||
className="px-2 py-1 text-xs bg-green-600 text-white rounded hover:bg-green-700 transition-colors disabled:opacity-50"
|
||||
onClick={handleCustomAmountBuy}
|
||||
disabled={isBuyingTokens || !customAmount || parseInt(customAmount) <= 0}
|
||||
>
|
||||
Buy (${customAmount ? (parseInt(customAmount) / 100).toFixed(2) : '0.00'})
|
||||
</button>
|
||||
</div>
|
||||
<span className="text-white text-base font-semibold">
|
||||
{isLoadingSubscription
|
||||
? "Loading..."
|
||||
: `${credits} credits`}
|
||||
</span>
|
||||
</div>
|
||||
|
||||
{/* 操作按钮区域 */}
|
||||
<div className="flex-1 flex flex-row justify-center items-end">
|
||||
<div className="flex-1 flex flex-row justify-center items-end space-x-1">
|
||||
<button
|
||||
className="flex-1 bg-transparent border border-white/30 text-white text-xs py-0.5 h-6 rounded hover:bg-white/10 transition-colors"
|
||||
onClick={() => {
|
||||
|
||||
@ -61,6 +61,22 @@ export interface CreatePortalSessionData {
|
||||
|
||||
export type CreatePortalSessionResponse = ApiResponse<CreatePortalSessionData>;
|
||||
|
||||
export interface BuyTokensRequest {
|
||||
token_amount: number;
|
||||
package_type?: string;
|
||||
}
|
||||
|
||||
export interface BuyTokensData {
|
||||
checkout_url: string;
|
||||
session_id: string;
|
||||
biz_order_no: string;
|
||||
amount: number;
|
||||
currency: string;
|
||||
token_amount: number;
|
||||
}
|
||||
|
||||
export type BuyTokensResponse = ApiResponse<BuyTokensData>;
|
||||
|
||||
/**
|
||||
* 获取订阅计划列表
|
||||
* 从后端API获取所有活跃的订阅计划，后端已经过滤了活跃计划
|
||||
@ -187,6 +203,22 @@ export function redirectToCheckout(checkoutUrl: string) {
|
||||
}
|
||||
}
|
||||
|
||||
/**
|
||||
* 购买Token
|
||||
*
|
||||
* 创建Token购买的Stripe Checkout Session
|
||||
* 定价规则：1美元 = 100 Token
|
||||
*/
|
||||
export async function buyTokens(
|
||||
request: BuyTokensRequest
|
||||
): Promise<BuyTokensResponse> {
|
||||
try {
|
||||
return await post<BuyTokensResponse>('/api/payment/buy-tokens', request);
|
||||
} catch (error) {
|
||||
throw error;
|
||||
}
|
||||
}
|
||||
|
||||
/**
|
||||
* 简单的跳转到Customer Portal页面的工具函数
|
||||
*/
|
||||
|
||||
Loading…
x
Reference in New Issue
Block a user