543 lines
17 KiB
TypeScript
543 lines
17 KiB
TypeScript
|
import {
|
|||
|
|
useState,
|
|||
|
|
useEffect,
|
|||
|
|
Card,
|
|||
|
|
Row,
|
|||
|
|
Col,
|
|||
|
|
Button,
|
|||
|
|
Tag,
|
|||
|
|
Typography,
|
|||
|
|
Space,
|
|||
|
|
Radio,
|
|||
|
|
Select,
|
|||
|
|
Spin,
|
|||
|
|
message,
|
|||
|
|
Steps,
|
|||
|
|
Divider,
|
|||
|
|
Alert,
|
|||
|
|
ConfigProvider,
|
|||
|
|
theme,
|
|||
|
|
SaveOutlined,
|
|||
|
|
CopyOutlined,
|
|||
|
|
DatabaseOutlined,
|
|||
|
|
DownloadOutlined,
|
|||
|
|
DollarOutlined,
|
|||
|
|
CheckCircleOutlined,
|
|||
|
|
CreditCardOutlined,
|
|||
|
|
AimOutlined,
|
|||
|
|
PieChartOutlined,
|
|||
|
|
Title,
|
|||
|
|
Text,
|
|||
|
|
Paragraph,
|
|||
|
|
FC,
|
|||
|
|
} from '@/imports';
|
|||
|
|
import { instanceDataSource, InstanceType, InstanceConfig } from '@/services/instanceDataSource';
|
|||
|
|
import { useUser } from '@/contexts/UserContext';
|
|||
|
|
|
|||
|
|
const InstancePurchase: FC = () => {
|
|||
|
|
const { currentUser } = useUser();
|
|||
|
|
const [currentStep, setCurrentStep] = useState(0);
|
|||
|
|
const [instanceTypes, setInstanceTypes] = useState<InstanceType[]>([]);
|
|||
|
|
const [selectedInstanceType, setSelectedInstanceType] = useState<string>('medium');
|
|||
|
|
const [instanceConfig, setInstanceConfig] = useState<InstanceConfig>({
|
|||
|
|
cpu: 4,
|
|||
|
|
memory: 8,
|
|||
|
|
storage: 200,
|
|||
|
|
bandwidth: 50
|
|||
|
|
});
|
|||
|
|
const [billingCycle, setBillingCycle] = useState<'monthly' | 'yearly'>('monthly');
|
|||
|
|
const [price, setPrice] = useState({ monthly: 0, yearly: 0, discount: 0 });
|
|||
|
|
const [paymentMethod, setPaymentMethod] = useState<string>('creditCard');
|
|||
|
|
const [loading, setLoading] = useState(false);
|
|||
|
|
const [configOptions, setConfigOptions] = useState({
|
|||
|
|
cpuOptions: [] as number[],
|
|||
|
|
memoryOptions: [] as number[],
|
|||
|
|
storageOptions: [] as number[],
|
|||
|
|
bandwidthOptions: [] as number[]
|
|||
|
|
});
|
|||
|
|
|
|||
|
|
// 检查用户是否为 ADMIN
|
|||
|
|
const isAdmin = currentUser?.role === 'ADMIN';
|
|||
|
|
|
|||
|
|
useEffect(() => {
|
|||
|
|
loadInstanceTypes();
|
|||
|
|
loadConfigOptions();
|
|||
|
|
}, []);
|
|||
|
|
|
|||
|
|
useEffect(() => {
|
|||
|
|
if (selectedInstanceType) {
|
|||
|
|
calculatePrice();
|
|||
|
|
}
|
|||
|
|
}, [selectedInstanceType, instanceConfig, billingCycle]);
|
|||
|
|
|
|||
|
|
const loadInstanceTypes = async () => {
|
|||
|
|
setLoading(true);
|
|||
|
|
try {
|
|||
|
|
const types = await instanceDataSource.getInstanceTypes();
|
|||
|
|
setInstanceTypes(types);
|
|||
|
|
if (types.length > 0) {
|
|||
|
|
const defaultType = types.find(t => t.recommended) || types[0];
|
|||
|
|
setSelectedInstanceType(defaultType.id);
|
|||
|
|
setInstanceConfig(defaultType.defaultConfig);
|
|||
|
|
}
|
|||
|
|
} catch (error) {
|
|||
|
|
message.error('Failed to load instance types');
|
|||
|
|
} finally {
|
|||
|
|
setLoading(false);
|
|||
|
|
}
|
|||
|
|
};
|
|||
|
|
|
|||
|
|
const loadConfigOptions = async () => {
|
|||
|
|
try {
|
|||
|
|
const options = await instanceDataSource.getInstanceConfigOptions();
|
|||
|
|
setConfigOptions(options);
|
|||
|
|
} catch (error) {
|
|||
|
|
message.error('Failed to load config options');
|
|||
|
|
}
|
|||
|
|
};
|
|||
|
|
|
|||
|
|
const calculatePrice = async () => {
|
|||
|
|
try {
|
|||
|
|
const priceData = await instanceDataSource.calculatePrice(
|
|||
|
|
selectedInstanceType,
|
|||
|
|
instanceConfig,
|
|||
|
|
billingCycle
|
|||
|
|
);
|
|||
|
|
setPrice(priceData);
|
|||
|
|
} catch (error) {
|
|||
|
|
message.error('Failed to calculate price');
|
|||
|
|
}
|
|||
|
|
};
|
|||
|
|
|
|||
|
|
const handleInstanceTypeChange = (typeId: string) => {
|
|||
|
|
setSelectedInstanceType(typeId);
|
|||
|
|
const instanceType = instanceTypes.find(t => t.id === typeId);
|
|||
|
|
if (instanceType) {
|
|||
|
|
setInstanceConfig(instanceType.defaultConfig);
|
|||
|
|
}
|
|||
|
|
};
|
|||
|
|
|
|||
|
|
const handleConfigChange = (key: keyof InstanceConfig, value: number) => {
|
|||
|
|
setInstanceConfig(prev => ({
|
|||
|
|
...prev,
|
|||
|
|
[key]: value
|
|||
|
|
}));
|
|||
|
|
};
|
|||
|
|
|
|||
|
|
const handleNext = () => {
|
|||
|
|
if (currentStep < 3) {
|
|||
|
|
setCurrentStep(currentStep + 1);
|
|||
|
|
}
|
|||
|
|
};
|
|||
|
|
|
|||
|
|
const handlePrevious = () => {
|
|||
|
|
if (currentStep > 0) {
|
|||
|
|
setCurrentStep(currentStep - 1);
|
|||
|
|
}
|
|||
|
|
};
|
|||
|
|
|
|||
|
|
const handleSubmit = async () => {
|
|||
|
|
setLoading(true);
|
|||
|
|
try {
|
|||
|
|
const order = await instanceDataSource.createOrder(
|
|||
|
|
selectedInstanceType,
|
|||
|
|
instanceConfig,
|
|||
|
|
billingCycle,
|
|||
|
|
paymentMethod
|
|||
|
|
);
|
|||
|
|
message.success('Order created successfully!');
|
|||
|
|
setCurrentStep(4);
|
|||
|
|
} catch (error) {
|
|||
|
|
message.error('Failed to create order');
|
|||
|
|
} finally {
|
|||
|
|
setLoading(false);
|
|||
|
|
}
|
|||
|
|
};
|
|||
|
|
|
|||
|
|
const renderInstanceTypeSelection = () => (
|
|||
|
|
<Card title={isAdmin ? "选择实例类型" : "选择套餐"}>
|
|||
|
|
<Row gutter={[16, 16]}>
|
|||
|
|
{instanceTypes.map(type => (
|
|||
|
|
<Col xs={24} sm={12} lg={8} key={type.id}>
|
|||
|
|
<Card
|
|||
|
|
hoverable
|
|||
|
|
style={{
|
|||
|
|
borderColor: selectedInstanceType === type.id ? '#1890ff' : undefined,
|
|||
|
|
borderWidth: selectedInstanceType === type.id ? 2 : 1,
|
|||
|
|
borderRadius: '12px',
|
|||
|
|
cursor: 'pointer'
|
|||
|
|
}}
|
|||
|
|
bodyStyle={{ padding: '24px' }}
|
|||
|
|
onClick={() => handleInstanceTypeChange(type.id)}
|
|||
|
|
>
|
|||
|
|
<div style={{ textAlign: 'center' }}>
|
|||
|
|
<div style={{ fontSize: '48px', marginBottom: '16px' }}>
|
|||
|
|
{type.icon}
|
|||
|
|
</div>
|
|||
|
|
<Title level={4} style={{ margin: 0, marginBottom: '8px' }}>
|
|||
|
|
{type.name}
|
|||
|
|
</Title>
|
|||
|
|
<Tag color="blue" style={{ marginBottom: '16px' }}>{type.cupSize}</Tag>
|
|||
|
|
{type.recommended && (
|
|||
|
|
<Tag color="gold" style={{ marginBottom: '16px' }}>推荐</Tag>
|
|||
|
|
)}
|
|||
|
|
<Paragraph type="secondary" style={{ marginBottom: '16px' }}>
|
|||
|
|
{type.description}
|
|||
|
|
</Paragraph>
|
|||
|
|
{isAdmin && (
|
|||
|
|
<>
|
|||
|
|
<Divider style={{ margin: '16px 0' }} />
|
|||
|
|
<Space direction="vertical" style={{ width: '100%' }}>
|
|||
|
|
<div style={{ display: 'flex', justifyContent: 'space-between' }}>
|
|||
|
|
<Text>CPU</Text>
|
|||
|
|
<Text strong>{type.defaultConfig.cpu} 核</Text>
|
|||
|
|
</div>
|
|||
|
|
<div style={{ display: 'flex', justifyContent: 'space-between' }}>
|
|||
|
|
<Text>内存</Text>
|
|||
|
|
<Text strong>{type.defaultConfig.memory} GB</Text>
|
|||
|
|
</div>
|
|||
|
|
<div style={{ display: 'flex', justifyContent: 'space-between' }}>
|
|||
|
|
<Text>存储</Text>
|
|||
|
|
<Text strong>{type.defaultConfig.storage} GB</Text>
|
|||
|
|
</div>
|
|||
|
|
<div style={{ display: 'flex', justifyContent: 'space-between' }}>
|
|||
|
|
<Text>带宽</Text>
|
|||
|
|
<Text strong>{type.defaultConfig.bandwidth} Mbps</Text>
|
|||
|
|
</div>
|
|||
|
|
</Space>
|
|||
|
|
</>
|
|||
|
|
)}
|
|||
|
|
</div>
|
|||
|
|
</Card>
|
|||
|
|
</Col>
|
|||
|
|
))}
|
|||
|
|
</Row>
|
|||
|
|
</Card>
|
|||
|
|
);
|
|||
|
|
|
|||
|
|
const renderInstanceConfig = () => (
|
|||
|
|
<Card title="配置实例">
|
|||
|
|
<Row gutter={[16, 16]}>
|
|||
|
|
<Col xs={24} sm={12} md={6}>
|
|||
|
|
<Card size="small" title={<Space><CpuOutlined /> CPU核心数</Space>}>
|
|||
|
|
<Select
|
|||
|
|
style={{ width: '100%' }}
|
|||
|
|
value={instanceConfig.cpu}
|
|||
|
|
onChange={(value) => handleConfigChange('cpu', value)}
|
|||
|
|
options={configOptions.cpuOptions.map(option => ({
|
|||
|
|
value: option,
|
|||
|
|
label: `${option} 核`
|
|||
|
|
}))}
|
|||
|
|
/>
|
|||
|
|
</Card>
|
|||
|
|
</Col>
|
|||
|
|
<Col xs={24} sm={12} md={6}>
|
|||
|
|
<Card size="small" title={<Space><ServerOutlined /> 内存</Space>}>
|
|||
|
|
<Select
|
|||
|
|
style={{ width: '100%' }}
|
|||
|
|
value={instanceConfig.memory}
|
|||
|
|
onChange={(value) => handleConfigChange('memory', value)}
|
|||
|
|
options={configOptions.memoryOptions.map(option => ({
|
|||
|
|
value: option,
|
|||
|
|
label: `${option} GB`
|
|||
|
|
}))}
|
|||
|
|
/>
|
|||
|
|
</Card>
|
|||
|
|
</Col>
|
|||
|
|
<Col xs={24} sm={12} md={6}>
|
|||
|
|
<Card size="small" title={<Space><DatabaseOutlined /> 存储</Space>}>
|
|||
|
|
<Select
|
|||
|
|
style={{ width: '100%' }}
|
|||
|
|
value={instanceConfig.storage}
|
|||
|
|
onChange={(value) => handleConfigChange('storage', value)}
|
|||
|
|
options={configOptions.storageOptions.map(option => ({
|
|||
|
|
value: option,
|
|||
|
|
label: `${option} GB`
|
|||
|
|
}))}
|
|||
|
|
/>
|
|||
|
|
</Card>
|
|||
|
|
</Col>
|
|||
|
|
<Col xs={24} sm={12} md={6}>
|
|||
|
|
<Card size="small" title={<Space><DownloadOutlined /> 带宽</Space>}>
|
|||
|
|
<Select
|
|||
|
|
style={{ width: '100%' }}
|
|||
|
|
value={instanceConfig.bandwidth}
|
|||
|
|
onChange={(value) => handleConfigChange('bandwidth', value)}
|
|||
|
|
options={configOptions.bandwidthOptions.map(option => ({
|
|||
|
|
value: option,
|
|||
|
|
label: `${option} Mbps`
|
|||
|
|
}))}
|
|||
|
|
/>
|
|||
|
|
</Card>
|
|||
|
|
</Col>
|
|||
|
|
</Row>
|
|||
|
|
<Card style={{ marginTop: '16px' }} title="计费周期">
|
|||
|
|
<Radio.Group
|
|||
|
|
value={billingCycle}
|
|||
|
|
onChange={(e) => setBillingCycle(e.target.value)}
|
|||
|
|
buttonStyle="solid"
|
|||
|
|
size="large"
|
|||
|
|
>
|
|||
|
|
<Radio.Button value="monthly">
|
|||
|
|
月付
|
|||
|
|
<Tag style={{ marginLeft: '8px' }}>¥{price.monthly}</Tag>
|
|||
|
|
</Radio.Button>
|
|||
|
|
<Radio.Button value="yearly">
|
|||
|
|
年付
|
|||
|
|
<Tag color="red" style={{ marginLeft: '8px' }}>¥{price.yearly} (省{price.discount}%)</Tag>
|
|||
|
|
</Radio.Button>
|
|||
|
|
</Radio.Group>
|
|||
|
|
<Alert
|
|||
|
|
message="价格说明"
|
|||
|
|
description={`根据您选择的配置，${billingCycle === 'monthly' ? '月付' : '年付'}价格为 ¥${billingCycle === 'monthly' ? price.monthly : price.yearly}`}
|
|||
|
|
type="info"
|
|||
|
|
showIcon
|
|||
|
|
style={{ marginTop: '16px' }}
|
|||
|
|
/>
|
|||
|
|
</Card>
|
|||
|
|
</Card>
|
|||
|
|
);
|
|||
|
|
|
|||
|
|
const renderPaymentMethod = () => (
|
|||
|
|
<Card title="选择支付方式">
|
|||
|
|
<Radio.Group
|
|||
|
|
value={paymentMethod}
|
|||
|
|
onChange={(e) => setPaymentMethod(e.target.value)}
|
|||
|
|
style={{ width: '100%' }}
|
|||
|
|
>
|
|||
|
|
<Card
|
|||
|
|
hoverable
|
|||
|
|
style={{
|
|||
|
|
marginBottom: '16px',
|
|||
|
|
borderColor: paymentMethod === 'creditCard' ? '#1890ff' : undefined,
|
|||
|
|
borderWidth: paymentMethod === 'creditCard' ? 2 : 1,
|
|||
|
|
cursor: 'pointer'
|
|||
|
|
}}
|
|||
|
|
onClick={() => setPaymentMethod('creditCard')}
|
|||
|
|
>
|
|||
|
|
<Row align="middle">
|
|||
|
|
<Col span={4}>
|
|||
|
|
<CreditCardOutlined style={{ fontSize: '24px', color: '#1890ff' }} />
|
|||
|
|
</Col>
|
|||
|
|
<Col span={16}>
|
|||
|
|
<Text strong>信用卡</Text>
|
|||
|
|
<Paragraph type="secondary">支持Visa、Mastercard、American Express等</Paragraph>
|
|||
|
|
</Col>
|
|||
|
|
<Col span={4}>
|
|||
|
|
<Radio value="creditCard" />
|
|||
|
|
</Col>
|
|||
|
|
</Row>
|
|||
|
|
</Card>
|
|||
|
|
<Card
|
|||
|
|
hoverable
|
|||
|
|
style={{
|
|||
|
|
marginBottom: '16px',
|
|||
|
|
borderColor: paymentMethod === 'alipay' ? '#1890ff' : undefined,
|
|||
|
|
borderWidth: paymentMethod === 'alipay' ? 2 : 1,
|
|||
|
|
cursor: 'pointer'
|
|||
|
|
}}
|
|||
|
|
onClick={() => setPaymentMethod('alipay')}
|
|||
|
|
>
|
|||
|
|
<Row align="middle">
|
|||
|
|
<Col span={4}>
|
|||
|
|
<AliPayOutlined style={{ fontSize: '24px', color: '#1890ff' }} />
|
|||
|
|
</Col>
|
|||
|
|
<Col span={16}>
|
|||
|
|
<Text strong>支付宝</Text>
|
|||
|
|
<Paragraph type="secondary">使用支付宝扫码支付</Paragraph>
|
|||
|
|
</Col>
|
|||
|
|
<Col span={4}>
|
|||
|
|
<Radio value="alipay" />
|
|||
|
|
</Col>
|
|||
|
|
</Row>
|
|||
|
|
</Card>
|
|||
|
|
<Card
|
|||
|
|
hoverable
|
|||
|
|
style={{
|
|||
|
|
borderColor: paymentMethod === 'wechat' ? '#1890ff' : undefined,
|
|||
|
|
borderWidth: paymentMethod === 'wechat' ? 2 : 1,
|
|||
|
|
cursor: 'pointer'
|
|||
|
|
}}
|
|||
|
|
onClick={() => setPaymentMethod('wechat')}
|
|||
|
|
>
|
|||
|
|
<Row align="middle">
|
|||
|
|
<Col span={4}>
|
|||
|
|
<WechatOutlined style={{ fontSize: '24px', color: '#1890ff' }} />
|
|||
|
|
</Col>
|
|||
|
|
<Col span={16}>
|
|||
|
|
<Text strong>微信支付</Text>
|
|||
|
|
<Paragraph type="secondary">使用微信扫码支付</Paragraph>
|
|||
|
|
</Col>
|
|||
|
|
<Col span={4}>
|
|||
|
|
<Radio value="wechat" />
|
|||
|
|
</Col>
|
|||
|
|
</Row>
|
|||
|
|
</Card>
|
|||
|
|
</Radio.Group>
|
|||
|
|
</Card>
|
|||
|
|
);
|
|||
|
|
|
|||
|
|
const renderOrderSummary = () => {
|
|||
|
|
const instanceType = instanceTypes.find(t => t.id === selectedInstanceType);
|
|||
|
|
return (
|
|||
|
|
<Card title="订单摘要">
|
|||
|
|
<Space direction="vertical" style={{ width: '100%' }}>
|
|||
|
|
<div style={{ display: 'flex', justifyContent: 'space-between', padding: '8px 0' }}>
|
|||
|
|
<Text>实例类型</Text>
|
|||
|
|
<Text strong>{instanceType?.name}</Text>
|
|||
|
|
</div>
|
|||
|
|
<div style={{ display: 'flex', justifyContent: 'space-between', padding: '8px 0' }}>
|
|||
|
|
<Text>CPU</Text>
|
|||
|
|
<Text strong>{instanceConfig.cpu} 核</Text>
|
|||
|
|
</div>
|
|||
|
|
<div style={{ display: 'flex', justifyContent: 'space-between', padding: '8px 0' }}>
|
|||
|
|
<Text>内存</Text>
|
|||
|
|
<Text strong>{instanceConfig.memory} GB</Text>
|
|||
|
|
</div>
|
|||
|
|
<div style={{ display: 'flex', justifyContent: 'space-between', padding: '8px 0' }}>
|
|||
|
|
<Text>存储</Text>
|
|||
|
|
<Text strong>{instanceConfig.storage} GB</Text>
|
|||
|
|
</div>
|
|||
|
|
<div style={{ display: 'flex', justifyContent: 'space-between', padding: '8px 0' }}>
|
|||
|
|
<Text>带宽</Text>
|
|||
|
|
<Text strong>{instanceConfig.bandwidth} Mbps</Text>
|
|||
|
|
</div>
|
|||
|
|
<div style={{ display: 'flex', justifyContent: 'space-between', padding: '8px 0' }}>
|
|||
|
|
<Text>计费周期</Text>
|
|||
|
|
<Text strong>{billingCycle === 'monthly' ? '月付' : '年付'}</Text>
|
|||
|
|
</div>
|
|||
|
|
<div style={{ display: 'flex', justifyContent: 'space-between', padding: '8px 0' }}>
|
|||
|
|
<Text>支付方式</Text>
|
|||
|
|
<Text strong>
|
|||
|
|
{paymentMethod === 'creditCard' ? '信用卡' :
|
|||
|
|
paymentMethod === 'alipay' ? '支付宝' : '微信支付'}
|
|||
|
|
</Text>
|
|||
|
|
</div>
|
|||
|
|
<Divider />
|
|||
|
|
<div style={{ display: 'flex', justifyContent: 'space-between', padding: '8px 0', fontSize: '18px' }}>
|
|||
|
|
<Text strong>总计</Text>
|
|||
|
|
<Text strong style={{ color: '#1890ff' }}>
|
|||
|
|
¥{billingCycle === 'monthly' ? price.monthly : price.yearly}
|
|||
|
|
</Text>
|
|||
|
|
</div>
|
|||
|
|
</Space>
|
|||
|
|
</Card>
|
|||
|
|
);
|
|||
|
|
};
|
|||
|
|
|
|||
|
|
const renderSuccess = () => (
|
|||
|
|
<Card title="购买成功">
|
|||
|
|
<div style={{ textAlign: 'center', padding: '48px 0' }}>
|
|||
|
|
<CheckCircleOutlined style={{ fontSize: '72px', color: '#52c41a', marginBottom: '24px' }} />
|
|||
|
|
<Title level={3} style={{ marginBottom: '16px' }}>订单创建成功！</Title>
|
|||
|
|
<Paragraph style={{ marginBottom: '24px' }}>
|
|||
|
|
您的实例将在支付完成后立即激活
|
|||
|
|
</Paragraph>
|
|||
|
|
<Button type="primary" size="large">
|
|||
|
|
查看订单详情
|
|||
|
|
</Button>
|
|||
|
|
</div>
|
|||
|
|
</Card>
|
|||
|
|
);
|
|||
|
|
|
|||
|
|
// 根据用户角色生成步骤
|
|||
|
|
const steps = isAdmin ? [
|
|||
|
|
{ title: '选择实例类型' },
|
|||
|
|
{ title: '配置实例' },
|
|||
|
|
{ title: '选择支付方式' },
|
|||
|
|
{ title: '确认订单' },
|
|||
|
|
{ title: '购买成功' }
|
|||
|
|
] : [
|
|||
|
|
{ title: '选择套餐' },
|
|||
|
|
{ title: '选择支付方式' },
|
|||
|
|
{ title: '确认订单' },
|
|||
|
|
{ title: '购买成功' }
|
|||
|
|
];
|
|||
|
|
|
|||
|
|
// 处理下一步逻辑
|
|||
|
|
const handleNext = () => {
|
|||
|
|
if (isAdmin) {
|
|||
|
|
if (currentStep < 3) {
|
|||
|
|
setCurrentStep(currentStep + 1);
|
|||
|
|
}
|
|||
|
|
} else {
|
|||
|
|
if (currentStep < 2) {
|
|||
|
|
setCurrentStep(currentStep + 1);
|
|||
|
|
}
|
|||
|
|
}
|
|||
|
|
};
|
|||
|
|
|
|||
|
|
// 处理上一步逻辑
|
|||
|
|
const handlePrevious = () => {
|
|||
|
|
if (currentStep > 0) {
|
|||
|
|
setCurrentStep(currentStep - 1);
|
|||
|
|
}
|
|||
|
|
};
|
|||
|
|
|
|||
|
|
return (
|
|||
|
|
<div className="instance-purchase" style={{ padding: '24px', background: '#f5f5f5', minHeight: '100vh' }}>
|
|||
|
|
<ConfigProvider
|
|||
|
|
theme={{
|
|||
|
|
token: {
|
|||
|
|
colorPrimary: '#1890ff',
|
|||
|
|
borderRadius: 8,
|
|||
|
|
},
|
|||
|
|
}}
|
|||
|
|
>
|
|||
|
|
<div className="page-header" style={{ marginBottom: '24px' }}>
|
|||
|
|
<Title level={2} style={{ margin: 0 }}>
|
|||
|
|
<ServerOutlined style={{ marginRight: '8px' }} />
|
|||
|
|
实例购买
|
|||
|
|
</Title>
|
|||
|
|
<Paragraph type="secondary">
|
|||
|
|
{isAdmin ? '选择适合您业务需求的实例配置' : '选择适合您业务需求的套餐'}
|
|||
|
|
</Paragraph>
|
|||
|
|
</div>
|
|||
|
|
|
|||
|
|
<Steps
|
|||
|
|
current={currentStep}
|
|||
|
|
items={steps}
|
|||
|
|
style={{ marginBottom: '32px' }}
|
|||
|
|
/>
|
|||
|
|
|
|||
|
|
<Spin spinning={loading}>
|
|||
|
|
{currentStep === 0 && renderInstanceTypeSelection()}
|
|||
|
|
{isAdmin && currentStep === 1 && renderInstanceConfig()}
|
|||
|
|
{currentStep === (isAdmin ? 2 : 1) && renderPaymentMethod()}
|
|||
|
|
{currentStep === (isAdmin ? 3 : 2) && renderOrderSummary()}
|
|||
|
|
{currentStep === (isAdmin ? 4 : 3) && renderSuccess()}
|
|||
|
|
</Spin>
|
|||
|
|
|
|||
|
|
<div style={{ marginTop: '32px', textAlign: 'center' }}>
|
|||
|
|
{currentStep > 0 && currentStep < (isAdmin ? 4 : 3) && (
|
|||
|
|
<Button
|
|||
|
|
style={{ marginRight: '16px' }}
|
|||
|
|
onClick={handlePrevious}
|
|||
|
|
>
|
|||
|
|
上一步
|
|||
|
|
</Button>
|
|||
|
|
)}
|
|||
|
|
{currentStep < (isAdmin ? 3 : 2) && (
|
|||
|
|
<Button
|
|||
|
|
type="primary"
|
|||
|
|
onClick={handleNext}
|
|||
|
|
>
|
|||
|
|
下一步
|
|||
|
|
</Button>
|
|||
|
|
)}
|
|||
|
|
{currentStep === (isAdmin ? 3 : 2) && (
|
|||
|
|
<Button
|
|||
|
|
type="primary"
|
|||
|
|
onClick={handleSubmit}
|
|||
|
|
loading={loading}
|
|||
|
|
>
|
|||
|
|
确认购买
|
|||
|
|
</Button>
|
|||
|
|
)}
|
|||
|
|
</div>
|
|||
|
|
</ConfigProvider>
|
|||
|
|
</div>
|
|||
|
|
);
|
|||
|
|
};
|
|||
|
|
|
|||
|
|
export default InstancePurchase;
|