main #2
@ -9,35 +9,9 @@
|
||||
</p>
|
||||
</div>
|
||||
|
||||
<!-- 当前配置 -->
|
||||
<div class="mb-6 border-t border-gray-200 pt-4">
|
||||
<h3 class="text-lg font-medium text-gray-900 mb-4">当前配置</h3>
|
||||
<div class="grid grid-cols-2 gap-4">
|
||||
<div class="bg-gray-50 p-3 rounded-lg">
|
||||
<div class="text-sm text-gray-600">CPU</div>
|
||||
<div class="font-medium">{{ serverInfo?.cpu || '未知' }}核</div>
|
||||
</div>
|
||||
<div class="bg-gray-50 p-3 rounded-lg">
|
||||
<div class="text-sm text-gray-600">内存</div>
|
||||
<div class="font-medium">{{ serverInfo?.memory || '未知' }}GB</div>
|
||||
</div>
|
||||
<div class="bg-gray-50 p-3 rounded-lg">
|
||||
<div class="text-sm text-gray-600">系统盘</div>
|
||||
<div class="font-medium">{{ serverInfo?.disk_size || '未知' }}GB</div>
|
||||
</div>
|
||||
<div class="bg-gray-50 p-3 rounded-lg">
|
||||
<div class="text-sm text-gray-600">带宽</div>
|
||||
<div class="font-medium">{{ serverInfo?.bandwidth || '未知' }}Mbps</div>
|
||||
</div>
|
||||
</div>
|
||||
<div class="mt-3 text-sm text-gray-600">
|
||||
当前月费:¥{{ serverInfo?.plan_price || '0' }}
|
||||
</div>
|
||||
</div>
|
||||
|
||||
<!-- 可升级套餐列表 -->
|
||||
<!-- 可升级套餐选择 -->
|
||||
<div class="mb-6">
|
||||
<h3 class="text-lg font-medium text-gray-900 mb-4">选择升级套餐</h3>
|
||||
<label class="block text-sm font-medium text-gray-700 mb-2">选择升级套餐</label>
|
||||
<div v-if="upgradePlansLoading" class="text-center py-8">
|
||||
<div class="h-8 w-8 mx-auto animate-spin text-blue-600 mb-4 flex items-center justify-center">
|
||||
<i class="fe fe-loader text-2xl"></i>
|
||||
@ -47,43 +21,13 @@
|
||||
<div v-else-if="upgradePlans.length === 0" class="text-center py-8">
|
||||
<p class="text-gray-500">暂无可升级套餐</p>
|
||||
</div>
|
||||
<div v-else class="space-y-3">
|
||||
<div
|
||||
v-for="plan in upgradePlans"
|
||||
:key="plan.plan_id"
|
||||
@click="selectedPlan = plan"
|
||||
:class="[
|
||||
'p-4 border rounded-lg cursor-pointer transition-all',
|
||||
selectedPlan?.plan_id === plan.plan_id
|
||||
? 'border-blue-500 bg-blue-50'
|
||||
: 'border-gray-200 hover:border-gray-300'
|
||||
]"
|
||||
>
|
||||
<div class="flex justify-between items-start">
|
||||
<div class="flex-1">
|
||||
<div class="font-medium text-gray-900 mb-2">
|
||||
{{ plan.core }}核 {{ plan.memory }}GB {{ plan.disk_size }}GB
|
||||
</div>
|
||||
<div class="grid grid-cols-2 gap-2 text-sm text-gray-600">
|
||||
<div>CPU: {{ plan.core }}核</div>
|
||||
<div>内存: {{ plan.memory }}GB</div>
|
||||
<div>系统盘: {{ plan.disk_size }}GB</div>
|
||||
<div>带宽: {{ plan.bandwidth }}Mbps</div>
|
||||
</div>
|
||||
</div>
|
||||
<div class="text-right">
|
||||
<div class="text-lg font-bold text-blue-600">
|
||||
¥{{ plan.origin_price }}/月
|
||||
</div>
|
||||
<div v-if="getPriceDiff(plan) > 0" class="text-sm text-green-600">
|
||||
+¥{{ getPriceDiff(plan) }}/月
|
||||
</div>
|
||||
<div v-else-if="getPriceDiff(plan) < 0" class="text-sm text-orange-600">
|
||||
-¥{{ Math.abs(getPriceDiff(plan)) }}/月
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
<div v-else>
|
||||
<select v-model="selectedPlanId" class="w-full border rounded px-3 py-2" required :disabled="upgradePlansLoading">
|
||||
<option value="">请选择升级套餐</option>
|
||||
<option v-for="plan in upgradePlans" :key="plan.plan_id" :value="plan.plan_id">
|
||||
{{ getPlanDisplayName(plan) }}
|
||||
</option>
|
||||
</select>
|
||||
</div>
|
||||
</div>
|
||||
|
||||
@ -255,7 +199,7 @@
|
||||
type="button"
|
||||
class="w-full px-4 py-2 bg-[#1fc76f] border border-transparent rounded-md text-sm font-medium text-white hover:bg-[#19b862] focus:outline-none"
|
||||
@click="createUpgradeOrder"
|
||||
:disabled="isLoading || !selectedPlan || !selectedPaymentMethod"
|
||||
:disabled="isLoading || !selectedPlanId || !selectedPaymentMethod"
|
||||
>
|
||||
{{ isLoading ? '处理中...' : '确认升级' }}
|
||||
</button>
|
||||
@ -303,7 +247,7 @@ export default {
|
||||
data() {
|
||||
return {
|
||||
show: true,
|
||||
selectedPlan: null,
|
||||
selectedPlanId: '',
|
||||
selectedPaymentMethod: null,
|
||||
order: null,
|
||||
showPaymentProcessing: false,
|
||||
@ -333,6 +277,10 @@ export default {
|
||||
region: this.serverDoc.region
|
||||
};
|
||||
},
|
||||
selectedPlan() {
|
||||
if (!this.selectedPlanId || !this.upgradePlans.length) return null;
|
||||
return this.upgradePlans.find(plan => plan.plan_id === this.selectedPlanId);
|
||||
},
|
||||
upgradePriceInfo() {
|
||||
if (!this.selectedPlan || !this.serverInfo) return null;
|
||||
|
||||
@ -386,7 +334,7 @@ export default {
|
||||
if (!this.server) {
|
||||
throw new DashboardError('缺少服务器信息');
|
||||
}
|
||||
if (!this.selectedPlan) {
|
||||
if (!this.selectedPlanId) {
|
||||
throw new DashboardError('请选择升级套餐');
|
||||
}
|
||||
},
|
||||
@ -533,12 +481,7 @@ export default {
|
||||
this.upgradePlansLoading = false;
|
||||
}
|
||||
},
|
||||
getPriceDiff(plan) {
|
||||
if (!this.serverInfo) return 0;
|
||||
const currentPrice = this.serverInfo.plan_price;
|
||||
const newPrice = parseFloat(plan.origin_price);
|
||||
return newPrice - currentPrice;
|
||||
},
|
||||
|
||||
cancel() {
|
||||
this.stopPaymentCheck();
|
||||
this.show = false;
|
||||
@ -552,7 +495,7 @@ export default {
|
||||
this.error = null;
|
||||
this.$resources.createUpgradeOrder.submit({
|
||||
server: this.server,
|
||||
new_plan_id: this.selectedPlan.plan_id
|
||||
new_plan_id: this.selectedPlanId
|
||||
});
|
||||
},
|
||||
processPayment() {
|
||||
@ -598,7 +541,52 @@ export default {
|
||||
clearInterval(this.checkInterval);
|
||||
this.checkInterval = null;
|
||||
}
|
||||
}
|
||||
},
|
||||
getPlanDisplayName(plan) {
|
||||
// 根据阿里云API返回的数据结构显示套餐信息
|
||||
const cpu = plan.core || plan.cpu || '未知';
|
||||
const memory = plan.memory || '未知';
|
||||
const disk = plan.disk_size || plan.system_disk_size || '未知';
|
||||
const bandwidth = plan.bandwidth || '未知';
|
||||
const price = plan.origin_price || '未知';
|
||||
const planType = plan.plan_type || '';
|
||||
const publicIpNum = plan.public_ip_num || 0;
|
||||
|
||||
// 处理内存显示(如果是小数,转换为MB)
|
||||
let memoryDisplay = memory;
|
||||
if (typeof memory === 'number' && memory < 1) {
|
||||
memoryDisplay = Math.round(memory * 1024) + 'MB';
|
||||
} else if (typeof memory === 'number') {
|
||||
memoryDisplay = memory + 'GB';
|
||||
}
|
||||
|
||||
// 处理带宽显示
|
||||
let bandwidthDisplay = bandwidth;
|
||||
if (typeof bandwidth === 'number') {
|
||||
bandwidthDisplay = bandwidth + 'Mbps';
|
||||
}
|
||||
|
||||
// 根据plan_type添加类型前缀
|
||||
let typePrefix = '';
|
||||
switch (planType) {
|
||||
case 'NORMAL':
|
||||
typePrefix = '通用型 - ';
|
||||
break;
|
||||
case 'MULTI_IP':
|
||||
typePrefix = '多公网IP型 - ';
|
||||
break;
|
||||
case 'INTERNATIONAL':
|
||||
typePrefix = '国际型 - ';
|
||||
break;
|
||||
case 'CAPACITY':
|
||||
typePrefix = '容量型 - ';
|
||||
break;
|
||||
default:
|
||||
typePrefix = '';
|
||||
}
|
||||
|
||||
return `${typePrefix}${cpu}核/${memoryDisplay}/${disk}GB/${bandwidthDisplay}/${publicIpNum}个公网IP - ¥${price}/月`;
|
||||
}
|
||||
},
|
||||
beforeUnmount() {
|
||||
this.stopPaymentCheck();
|
||||
|
||||
Loading…
x
Reference in New Issue
Block a user